igniteui-webcomponents 7.0.0-rc.0 → 7.0.1

package/components/tree/themes/light/container.shared.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.shared.css.js","sourceRoot":"","sources":["../../../../../src/components/tree/themes/light/container.shared.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,6lCAA6lC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--background: var(--ig-tree-background, var(--ig-surface-500));--foreground: var(--ig-tree-foreground, var(--ig-surface-500-contrast));--icon-color: var(--ig-tree-icon-color, var(--ig-surface-500-contrast));--background-selected: var(--ig-tree-background-selected, var(--ig-primary-500));--background-active: var(--ig-tree-background-active, var(--ig-gray-200));--foreground-active: var(--ig-tree-foreground-active, var(--ig-gray-200-contrast));--background-disabled: var(--ig-tree-background-disabled, var(--ig-surface-500));--foreground-disabled: var(--ig-tree-foreground-disabled, var(--ig-gray-500));--drop-area-color: var(--ig-tree-drop-area-color, var(--ig-secondary-500));--hover-color: var(--ig-tree-hover-color, hsl(from var(--ig-gray-900) h s l/0.1));--hover-selected-color: var(--ig-tree-hover-selected-color, hsl(from var(--ig-gray-900) h s l/0.1));--size: var(--ig-tree-size, max(var(--is-large, 1) * max(3.125rem, -1 * 3.125rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem)));--default-size: var(--ig-tree-default-size, 2);--ig-theme-variant: light}`;\n"]}
+{"version":3,"file":"container.shared.css.js","sourceRoot":"","sources":["../../../../../src/components/tree/themes/light/container.shared.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,6lCAA6lC,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--background: var(--ig-tree-background, var(--ig-surface-500));--foreground: var(--ig-tree-foreground, var(--ig-surface-500-contrast));--icon-color: var(--ig-tree-icon-color, var(--ig-surface-500-contrast));--background-selected: var(--ig-tree-background-selected, var(--ig-primary-500));--background-active: var(--ig-tree-background-active, var(--ig-gray-200));--foreground-active: var(--ig-tree-foreground-active, var(--ig-gray-200-contrast));--background-disabled: var(--ig-tree-background-disabled, var(--ig-surface-500));--foreground-disabled: var(--ig-tree-foreground-disabled, var(--ig-gray-500));--drop-area-color: var(--ig-tree-drop-area-color, var(--ig-secondary-500));--hover-color: var(--ig-tree-hover-color, hsl(from var(--ig-gray-900) h s l/0.1));--hover-selected-color: var(--ig-tree-hover-selected-color, hsl(from var(--ig-gray-900) h s l/0.1));--size: var(--ig-tree-size, max(var(--is-large, 1) * max(3.125rem, -1 * 3.125rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem)));--default-size: var(--ig-tree-default-size, 2);--ig-theme-variant: light}`;\n  "]}

package/components/tree/themes/shared/item.common.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.common.css.js","sourceRoot":"","sources":["../../../../../src/components/tree/themes/shared/item.common.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,43CAA43C,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{background:var(--background);color:var(--foreground)}[part~=wrapper]{min-height:var(--size)}[part~=wrapper]:hover::after{background:var(--hover-color)}[part~=wrapper][part~=selected]:hover::after{background:var(--hover-selected-color)}[part~=label]{max-height:var(--size)}:host(:not([disabled])[active]) [part~=wrapper]{background:var(--background-active);color:var(--foreground-active)}:host(:not([disabled])[selected]) [part~=wrapper]{background:var(--background-selected);color:var(--foreground-selected)}:host(:not([disabled])[selected][active]) [part~=wrapper]{background:var(--background-active-selected);color:var(--foreground-active-selected)}:host(:not([disabled])[selected]) [part~=focused],:host(:not([disabled])[selected][active]) [part~=focused]{background:var(--background-active-selected);color:var(--foreground-active-selected)}[part~=select]{margin-inline-end:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}[part~=focused]{box-shadow:inset 0 0 0 1px var(--border-color)}:host([disabled]){color:var(--foreground-disabled);background:var(--background-disabled)}`;\n"]}
+{"version":3,"file":"item.common.css.js","sourceRoot":"","sources":["../../../../../src/components/tree/themes/shared/item.common.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,43CAA43C,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{background:var(--background);color:var(--foreground)}[part~=wrapper]{min-height:var(--size)}[part~=wrapper]:hover::after{background:var(--hover-color)}[part~=wrapper][part~=selected]:hover::after{background:var(--hover-selected-color)}[part~=label]{max-height:var(--size)}:host(:not([disabled])[active]) [part~=wrapper]{background:var(--background-active);color:var(--foreground-active)}:host(:not([disabled])[selected]) [part~=wrapper]{background:var(--background-selected);color:var(--foreground-selected)}:host(:not([disabled])[selected][active]) [part~=wrapper]{background:var(--background-active-selected);color:var(--foreground-active-selected)}:host(:not([disabled])[selected]) [part~=focused],:host(:not([disabled])[selected][active]) [part~=focused]{background:var(--background-active-selected);color:var(--foreground-active-selected)}[part~=select]{margin-inline-end:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}[part~=focused]{box-shadow:inset 0 0 0 1px var(--border-color)}:host([disabled]){color:var(--foreground-disabled);background:var(--background-disabled)}`;\n  "]}

package/components/tree/themes/shared/item.indigo.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/tree/themes/shared/item.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,2zDAA2zD,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--igc-tree-indentation-size: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.5rem, -1 * 1.5rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem))}[part~=indicator]{--ig-size: 1;min-width:.875rem;color:var(--icon-color)}[part~=wrapper]{border-radius:.25rem;margin-block-end:max(var(--is-large, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));padding:0 max(var(--is-large, 1)*max(16px, -1 * 16px)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(12px, -1 * 12px)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(8px, -1 * 8px)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}[part~=wrapper]::after{border-radius:.25rem}[part~=wrapper]:hover{color:var(--foreground-active)}:host(:not([disabled])[selected]) [part~=wrapper]{background:var(--background)}:host(:not([disabled])[selected]) [part~=wrapper]:hover{color:var(--foreground-active)}:host(:not([disabled])[selected]) [part~=wrapper]:hover::after{background:var(--hover-color)}:host(:not([disabled])[active]) [part~=wrapper]:hover,:host(:not([disabled])[active][selected]) [part~=wrapper]:hover{background:var(--hover-selected-color)}:host(:not([disabled])[active]) [part~=wrapper]:hover::after,:host(:not([disabled])[active][selected]) [part~=wrapper]:hover::after{background:rgba(0,0,0,0)}[part~=focused]{box-shadow:inset 0 0 0 2px var(--border-color)}:host([disabled]) [part~=indicator] igc-icon{color:var(--foreground-disabled)}`;\n"]}
+{"version":3,"file":"item.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/tree/themes/shared/item.indigo.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,2zDAA2zD,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--igc-tree-indentation-size: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.5rem, -1 * 1.5rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem))}[part~=indicator]{--ig-size: 1;min-width:.875rem;color:var(--icon-color)}[part~=wrapper]{border-radius:.25rem;margin-block-end:max(var(--is-large, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));padding:0 max(var(--is-large, 1)*max(16px, -1 * 16px)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(12px, -1 * 12px)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(8px, -1 * 8px)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}[part~=wrapper]::after{border-radius:.25rem}[part~=wrapper]:hover{color:var(--foreground-active)}:host(:not([disabled])[selected]) [part~=wrapper]{background:var(--background)}:host(:not([disabled])[selected]) [part~=wrapper]:hover{color:var(--foreground-active)}:host(:not([disabled])[selected]) [part~=wrapper]:hover::after{background:var(--hover-color)}:host(:not([disabled])[active]) [part~=wrapper]:hover,:host(:not([disabled])[active][selected]) [part~=wrapper]:hover{background:var(--hover-selected-color)}:host(:not([disabled])[active]) [part~=wrapper]:hover::after,:host(:not([disabled])[active][selected]) [part~=wrapper]:hover::after{background:rgba(0,0,0,0)}[part~=focused]{box-shadow:inset 0 0 0 2px var(--border-color)}:host([disabled]) [part~=indicator] igc-icon{color:var(--foreground-disabled)}`;\n  "]}

package/components/tree/themes/shared/item.material.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.material.css.js","sourceRoot":"","sources":["../../../../../src/components/tree/themes/shared/item.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,uzBAAuzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`igc-checkbox{--control-padding: 0}[part~=select]{margin-inline:max(var(--is-large, 1)*max(0.625rem, -1 * 0.625rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.625rem, -1 * 0.625rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.625rem, -1 * 0.625rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing)))) max(var(--is-large, 1)*max(0.875rem, -1 * 0.875rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.875rem, -1 * 0.875rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.875rem, -1 * 0.875rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}`;\n"]}
+{"version":3,"file":"item.material.css.js","sourceRoot":"","sources":["../../../../../src/components/tree/themes/shared/item.material.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,uzBAAuzB,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`igc-checkbox{--control-padding: 0}[part~=select]{margin-inline:max(var(--is-large, 1)*max(0.625rem, -1 * 0.625rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.625rem, -1 * 0.625rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.625rem, -1 * 0.625rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing)))) max(var(--is-large, 1)*max(0.875rem, -1 * 0.875rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.875rem, -1 * 0.875rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.875rem, -1 * 0.875rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}`;\n  "]}

package/components/validation-container/themes/shared/validator.common.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"validator.common.css.js","sourceRoot":"","sources":["../../../../../src/components/validation-container/themes/shared/validator.common.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,6LAA6L,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part~=helper-text]{color:var(--helper-text-color);row-gap:.5rem}[part~=validation-icon]{color:var(--icon-error-color)}[part~=validation-message]{gap:.25rem;color:var(--text-error-color)}`;\n"]}
+{"version":3,"file":"validator.common.css.js","sourceRoot":"","sources":["../../../../../src/components/validation-container/themes/shared/validator.common.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,6LAA6L,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`[part~=helper-text]{color:var(--helper-text-color);row-gap:.5rem}[part~=validation-icon]{color:var(--icon-error-color)}[part~=validation-message]{gap:.25rem;color:var(--text-error-color)}`;\n  "]}

package/components/validation-container/themes/validator.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"validator.base.css.js","sourceRoot":"","sources":["../../../../src/components/validation-container/themes/validator.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,kTAAkT,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--ig-size: 1;display:block;grid-row:2;grid-column:1/-1}:host ::slotted(*){margin-block:0}[part~=helper-text]{display:grid;row-gap:.5rem;align-items:center}[part~=validation-icon]{align-self:flex-start}[part~=validation-message]{display:flex;align-items:center}[part~=empty]{display:none !important}`;\n"]}
+{"version":3,"file":"validator.base.css.js","sourceRoot":"","sources":["../../../../src/components/validation-container/themes/validator.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,kTAAkT,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--ig-size: 1;display:block;grid-row:2;grid-column:1/-1}:host ::slotted(*){margin-block:0}[part~=helper-text]{display:grid;row-gap:.5rem;align-items:center}[part~=validation-icon]{align-self:flex-start}[part~=validation-message]{display:flex;align-items:center}[part~=empty]{display:none !important}`;\n  "]}

package/custom-elements.json

@@ -198,7 +198,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A reactive controller that manages theme adoption for a Lit host element.\n\nIt resolves the active theme from one of two sources, in order of priority:\n\n1. **Context** — provided by an ancestor `<igc-theme-provider>` element via the Lit context API.\n2. **Global** — the application-wide theme set via `configureTheme()`.\n\nWhen a context provider is present, the controller subscribes to its updates\nand stops listening to global theme change events. When the host element is\ndisconnected and reconnected outside a provider, it automatically falls back\nto the global theme.\n\nTheme styles are applied directly to the host's shadow root via `adoptStyles`\nevery time the active theme or variant changes.",
           "name": "ThemingController",
           "members": [
             {
@@ -284,11 +284,25 @@
                 "text": "Theme"
               },
               "privacy": "public",
+              "description": "Gets the current theme.",
               "readonly": true,
               "expandedType": {
                 "text": "'material' | 'bootstrap' | 'indigo' | 'fluent'"
               }
             },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "ThemeVariant"
+              },
+              "privacy": "public",
+              "description": "Gets the current theme variant.",
+              "readonly": true,
+              "expandedType": {
+                "text": "'light' | 'dark'"
+              }
+            },
             {
               "kind": "method",
               "name": "_applyContextTheme",
@@ -319,13 +333,32 @@
             },
             {
               "kind": "method",
-              "name": "_getStyles",
-              "privacy": "private"
+              "name": "_applyTheme",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "theme",
+                  "type": {
+                    "text": "Theme"
+                  }
+                },
+                {
+                  "name": "variant",
+                  "type": {
+                    "text": "ThemeVariant"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
               "name": "_adoptStyles",
-              "privacy": "protected",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
@@ -339,7 +372,7 @@
           "name": "addThemingController",
           "return": {
             "type": {
-              "text": "ThemingController"
+              "text": ""
             }
           },
           "parameters": [
@@ -347,23 +380,30 @@
               "name": "host",
               "type": {
                 "text": "ReactiveControllerHost & ReactiveElement"
-              }
+              },
+              "description": "The Lit element that will host the controller."
             },
             {
               "name": "themes",
               "type": {
                 "text": "Themes"
-              }
+              },
+              "description": "The theme styles map containing `light` and `dark` variant entries,\neach keyed by theme name (`bootstrap`, `material`, `fluent`, `indigo`) and\nan optional `shared` entry applied regardless of theme."
             },
             {
               "name": "config",
               "optional": true,
               "type": {
                 "text": "ThemingControllerConfig"
-              }
+              },
+              "description": "Optional configuration."
+            },
+            {
+              "description": "Callback invoked on the host whenever the active theme changes.",
+              "name": "config.themeChange"
             }
           ],
-          "description": "Adds theming controller to the host component."
+          "description": "Creates and attaches a ThemingController to the given host element.\n\nThis is the preferred way to add theming support to a component. The controller\nis registered with the host's reactive controller lifecycle and automatically\nresolves the active theme from an ancestor `<igc-theme-provider>` context or\nfalls back to the application-wide theme set via `configureTheme()`."
         }
       ],
       "exports": [
@@ -3730,6 +3770,17 @@
                 }
               ],
               "description": "Returns the value for the given key, creating it if it doesn't exist."
+            },
+            {
+              "kind": "method",
+              "name": "toPlainMap",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "Converts the DefaultMap to a plain Map for structured cloning."
             }
           ],
           "superclass": {
@@ -69611,12 +69662,9 @@
             {
               "kind": "field",
               "name": "_provider",
-              "type": {
-                "text": "ContextProvider<typeof themeContext>"
-              },
               "privacy": "private",
               "readonly": true,
-              "default": "new ContextProvider(this, { context: themeContext, initialValue: this._getContextValue(), })"
+              "default": "new ContextProvider(this, { context: themeContext, })"
             },
             {
               "kind": "field",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-webcomponents",
-  "version": "7.0.0-rc.0",
+  "version": "7.0.1",
   "description": "Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.",
   "author": "Infragistics",
   "license": "MIT",

package/skills/README.md

@@ -0,0 +1,65 @@
+# LLM Agent Skills for End Users
+
+This directory contains skills for GitHub Copilot and other LLM agents to help developers use Ignite UI Web Components effectively in their applications.
+
+## What are Skills?
+
+Skills are structured instructions that help AI agents understand and execute common tasks consistently. Each skill is a self-contained guide that provides step-by-step instructions, code examples, and best practices.
+
+## Available Skills
+
+| Skill                                                       | Description                                                                        | Use When                              |
+| ----------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------- |
+| [igniteui-wc-choose-components](./igniteui-wc-choose-components/SKILL.md)                   | Identify the right components for a UI pattern and navigate to official docs/demos | Deciding which components to use      |
+| [igniteui-wc-integrate-with-framework](./igniteui-wc-integrate-with-framework/SKILL.md)     | Integrate components into React, Angular, Vue, or vanilla JS applications          | Setting up components in your project |
+| [igniteui-wc-customize-component-theme](./igniteui-wc-customize-component-theme/SKILL.md)   | Customize styling using CSS custom properties, parts, and theming system           | Applying custom brand colors/styles   |
+| [igniteui-wc-optimize-bundle-size](./igniteui-wc-optimize-bundle-size/SKILL.md)             | Reduce bundle size by importing only needed components and lazy loading            | Optimizing production performance     |
+
+## How to Use
+
+When working with an AI agent like GitHub Copilot, reference skills by name or ask questions naturally:
+
+### Natural Questions
+- "How do I integrate igniteui-webcomponents with React?"
+- "Help me customize the button colors to match my brand"
+- "My bundle size is too large, how can I reduce it?"
+- "Show me how to use these components in Vue"
+
+### Direct Skill Reference
+- "Follow the integrate-with-framework skill for my Angular app"
+- "Use the customize-component-theme skill to help me style components"
+- "Apply the optimize-bundle-size skill to reduce my bundle"
+
+## Skill Structure
+
+Each skill contains:
+
+- **Example Usage**: Common questions or scenarios
+- **When to Use**: Situations where the skill applies
+- **Related Skills**: Other relevant skills to explore
+- **Step-by-Step Instructions**: Detailed guidance with code examples
+- **Framework-Specific Examples**: React, Angular, Vue, and vanilla JS patterns
+- **Common Issues & Solutions**: Troubleshooting guidance
+- **Best Practices**: Recommended approaches
+- **Additional Resources**: Further reading and documentation
+
+## Contributing
+
+If you identify gaps in the skills or have suggestions for improvements:
+
+1. [Open an issue](https://github.com/IgniteUI/igniteui-webcomponents/issues) describing the improvement
+2. Submit a pull request with the proposed changes
+3. Follow the skill format and structure of existing skills
+
+For skills related to **contributing to the library itself** (creating components, reviewing PRs, etc.), see [`.github/skills/`](../.github/skills/).
+
+## Additional Resources
+
+- [Component Documentation](https://igniteui.github.io/igniteui-webcomponents)
+- [Project README](../README.md)
+- [Code Examples & Storybook](https://igniteui.github.io/igniteui-webcomponents)
+- [GitHub Repository](https://github.com/IgniteUI/igniteui-webcomponents)
+
+## License
+
+These skills are provided under the same license as the Ignite UI Web Components library. See [LICENSE](../LICENSE) for details.