You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
'The highlight component provides a way for efficient searching and highlighting of\ntext projected into it.',
52
+
'The highlight component provides efficient searching and highlighting of text\nprojected into it via its default slot. It uses the native CSS Custom Highlight API\nto apply highlight styles to matched text nodes without modifying the DOM.\n\nThe component supports case-sensitive matching, programmatic navigation between\nmatches, and automatic scroll-into-view of the active match.',
33
53
},
34
54
},
35
55
},
36
56
argTypes: {
37
57
caseSensitive: {
38
58
type: 'boolean',
39
59
description:
40
-
'Whether to match the searched text with case sensitivity in mind.',
60
+
'Whether to match the searched text with case sensitivity in mind.\nWhen `true`, only exact-case occurrences of `searchText` are highlighted.',
41
61
control: 'boolean',
42
62
table: {defaultValue: {summary: 'false'}},
43
63
},
44
64
searchText: {
45
65
type: 'string',
46
66
description:
47
-
'The string to search and highlight in the DOM content of the component.',
67
+
'The string to search and highlight in the DOM content of the component.\nSetting this property triggers a new search automatically.\nAn empty string clears all highlights.',
'Web Components are a suite of web platform APIs that allow you to create reusable custom elements with encapsulated functionality. Built on Custom Elements, Shadow DOM, and HTML Templates, they work in any JavaScript framework or without one at all. This tutorial walks you through defining your first custom element, attaching a shadow root, and using HTML templates to stamp out reusable markup.',
422
+
},
423
+
{
424
+
initials: 'ML',
425
+
title: 'Reactive Rendering with the Lit Framework',
426
+
author: 'Marcus Lee',
427
+
date: 'Mar 10, 2026',
428
+
category: 'Framework',
429
+
tags: ['lit','reactive','performance'],
430
+
excerpt:
431
+
"Lit is a lightweight library built on top of the Web Components standard that adds reactive properties and a declarative template system. Its efficient update cycle batches property changes and only re-renders the portions of the DOM that actually changed. By leveraging tagged template literals and the browser's native custom element lifecycle, Lit components stay small, fast, and framework-agnostic.",
432
+
},
433
+
{
434
+
initials: 'ST',
435
+
title: 'Accessibility in Component Design',
436
+
author: 'Sarah Torres',
437
+
date: 'Mar 5, 2026',
438
+
category: 'Accessibility',
439
+
tags: ['accessibility','aria','wcag'],
440
+
excerpt:
441
+
'Building accessible components means more than adding an aria-label. Every interactive element must be keyboard-navigable, focusable in a logical order, and communicate its state through ARIA roles and properties. Shadow DOM complicates accessibility trees, so authors must ensure focus management and screen-reader announcements work correctly across shadow boundaries. Following WCAG 2.2 guidelines from the start is far less costly than retrofitting them later.',
442
+
},
443
+
{
444
+
initials: 'DK',
445
+
title: 'Deep Dive into Shadow DOM',
446
+
author: 'David Kim',
447
+
date: 'Feb 28, 2026',
448
+
category: 'Web Standards',
449
+
tags: ['shadow-dom','encapsulation','css'],
450
+
excerpt:
451
+
'Shadow DOM creates an isolated DOM subtree attached to a host element, preventing styles and scripts from leaking in or out. Selectors like :host and ::slotted let component authors style the host and slotted light-DOM content respectively, while CSS custom properties pierce the shadow boundary, enabling external theming. Understanding the difference between open and closed shadow roots is essential for building well-encapsulated, themeable custom elements.',
452
+
},
453
+
{
454
+
initials: 'EC',
455
+
title: 'TypeScript Patterns for Lit Components',
456
+
author: 'Emily Chen',
457
+
date: 'Feb 22, 2026',
458
+
category: 'TypeScript',
459
+
tags: ['typescript','decorators','types'],
460
+
excerpt:
461
+
"Strong TypeScript typing transforms large component libraries into self-documenting, refactor-safe codebases. Property decorators like @property and @state provide both the Lit reactive system and TypeScript's type checker with metadata at once. Defining strict interfaces for component events and using generic types for slot-aware helpers makes cross-component composition predictable and IDE-friendly across the entire library.",
'CSS custom properties — often called CSS variables — pierce the shadow boundary, making them the natural choice for theming custom elements. By mapping design tokens to custom properties at the :root or :host level, a single theme change cascades through an entire component library. Pairing this approach with a dedicated theming package lets consumers switch between light, dark, and brand-specific palettes without touching component internals.',
'The radio component lets users select a single option from a group. Radios are designed to be used inside an `igc-radio-group`, which manages mutual exclusivity, keyboard navigation, and form submission.',
'The ripple component adds a touch-feedback wave animation to any interactive surface. Place `<igc-ripple>` inside a `position: relative; overflow: hidden` container — the ripple fills the parent and plays the animation on each `pointerdown` event. Use the `--color` CSS custom property to tint the effect.',
20
+
'A ripple can be applied to an element to represent\ninteractive surface.',
'A snackbar provides brief feedback about an operation by displaying a short message near the bottom of the screen. It disappears automatically after a configurable `displayTime`, or can stay open with `keepOpen`. An optional action button lets users respond (e.g. Undo).',
25
+
'A snackbar component is used to provide feedback about an operation\nby showing a brief message at the bottom of the screen.',
'A switch toggles a single setting on or off, providing immediate feedback. It is semantically equivalent to a checkbox but communicates a binary state change that takes effect right away — without requiring a form submission.',
21
+
'Similar to a checkbox, a switch controls the state of a single setting on or off.',
0 commit comments