@brandsync/wc 1.0.0 → 1.1.0

package/custom-elements.json

@@ -80,7 +80,6 @@
                 "text": "string"
               },
               "default": "'Genie'",
-              "readonly": true,
               "attribute": "assistant-name"
             },
             {
@@ -90,7 +89,6 @@
               "type": {
                 "text": "string"
               },
-              "readonly": true,
               "attribute": "product-name"
             }
           ],
@@ -153,7 +151,6 @@
                 "text": "string"
               },
               "default": "'Thinking'",
-              "readonly": true,
               "attribute": "label"
             }
           ],
@@ -265,7 +262,6 @@
                 "text": "string"
               },
               "default": "'Attachment'",
-              "readonly": true,
               "attribute": "file-name"
             },
             {
@@ -276,7 +272,6 @@
                 "text": "string"
               },
               "default": "''",
-              "readonly": true,
               "attribute": "image-alt"
             },
             {
@@ -286,7 +281,6 @@
               "type": {
                 "text": "string"
               },
-              "readonly": true,
               "attribute": "image-src"
             },
             {
@@ -297,7 +291,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "loading"
             },
             {
@@ -308,7 +301,6 @@
                 "text": "boolean"
               },
               "default": "true",
-              "readonly": true,
               "attribute": "removable"
             },
             {
@@ -324,7 +316,6 @@
                 ]
               },
               "default": "'image'",
-              "readonly": true,
               "attribute": "type"
             }
           ],
@@ -408,7 +399,6 @@
                 "text": "string"
               },
               "default": "'Attachments'",
-              "readonly": true,
               "attribute": "aria-label"
             }
           ],
@@ -541,7 +531,6 @@
                 "text": "string"
               },
               "default": "null",
-              "readonly": true,
               "attribute": "alt"
             },
             {
@@ -552,7 +541,6 @@
                 "text": "string"
               },
               "default": "null",
-              "readonly": true,
               "attribute": "aria-label"
             },
             {
@@ -563,7 +551,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "disabled",
               "reflects": true
             },
@@ -575,7 +562,6 @@
                 "text": "string"
               },
               "default": "null",
-              "readonly": true,
               "attribute": "initials"
             },
             {
@@ -591,7 +577,6 @@
                 ]
               },
               "default": "'md'",
-              "readonly": true,
               "attribute": "size"
             },
             {
@@ -602,7 +587,6 @@
                 "text": "string"
               },
               "default": "null",
-              "readonly": true,
               "attribute": "src"
             },
             {
@@ -618,7 +602,6 @@
                 ]
               },
               "default": "'icon'",
-              "readonly": true,
               "attribute": "type"
             }
           ],
@@ -781,7 +764,6 @@
                 ]
               },
               "default": "'default'",
-              "readonly": true,
               "attribute": "variant"
             }
           ],
@@ -868,7 +850,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "current",
               "reflects": true
             },
@@ -879,7 +860,6 @@
               "type": {
                 "text": "string"
               },
-              "readonly": true,
               "attribute": "href"
             },
             {
@@ -895,7 +875,6 @@
                 ]
               },
               "default": "'md'",
-              "readonly": true,
               "attribute": "size",
               "reflects": true
             }
@@ -1042,8 +1021,7 @@
                   }
                 ]
               },
-              "default": "[]",
-              "readonly": true
+              "default": "[]"
             },
             {
               "kind": "field",
@@ -1053,7 +1031,6 @@
                 "text": "string"
               },
               "default": "'Show hidden breadcrumbs'",
-              "readonly": true,
               "attribute": "overflow-label"
             },
             {
@@ -1070,7 +1047,6 @@
                 ]
               },
               "default": "'md'",
-              "readonly": true,
               "attribute": "size",
               "reflects": true
             }
@@ -1213,7 +1189,6 @@
                 "text": "string"
               },
               "default": "'Breadcrumb'",
-              "readonly": true,
               "attribute": "label"
             },
             {
@@ -1230,7 +1205,6 @@
                 ]
               },
               "default": "'md'",
-              "readonly": true,
               "attribute": "size"
             }
           ],
@@ -1347,7 +1321,6 @@
                 "text": "string"
               },
               "default": "null",
-              "readonly": true,
               "attribute": "aria-label"
             },
             {
@@ -1358,7 +1331,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "disabled"
             },
             {
@@ -1374,7 +1346,6 @@
                 ]
               },
               "default": "'md'",
-              "readonly": true,
               "attribute": "size"
             },
             {
@@ -1385,7 +1356,6 @@
                 "text": "\"button\" | \"reset\" | \"submit\""
               },
               "default": "'button'",
-              "readonly": true,
               "attribute": "type"
             },
             {
@@ -1401,7 +1371,6 @@
                 ]
               },
               "default": "'primary'",
-              "readonly": true,
               "attribute": "variant"
             }
           ],
@@ -1494,7 +1463,6 @@
                 ]
               },
               "default": "'md'",
-              "readonly": true,
               "attribute": "size"
             }
           ],
@@ -1563,7 +1531,6 @@
                 ]
               },
               "default": "'raised'",
-              "readonly": true,
               "attribute": "surface"
             }
           ],
@@ -1699,7 +1666,6 @@
               "type": {
                 "text": "string"
               },
-              "readonly": true,
               "attribute": "heading"
             },
             {
@@ -1731,7 +1697,6 @@
               "type": {
                 "text": "string"
               },
-              "readonly": true,
               "attribute": "subtitle"
             }
           ],
@@ -1879,7 +1844,6 @@
                 "text": "string"
               },
               "default": "'Genie'",
-              "readonly": true,
               "attribute": "heading"
             }
           ],
@@ -2020,7 +1984,6 @@
               "type": {
                 "text": "number"
               },
-              "readonly": true,
               "attribute": "sources-count"
             }
           ],
@@ -2180,7 +2143,6 @@
               "type": {
                 "text": "number"
               },
-              "readonly": true,
               "attribute": "count"
             },
             {
@@ -2191,7 +2153,6 @@
                 "text": "string"
               },
               "default": "'Sources'",
-              "readonly": true,
               "attribute": "heading"
             }
           ],
@@ -2281,7 +2242,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "disabled"
             }
           ],
@@ -2405,7 +2365,6 @@
                 "text": "string"
               },
               "default": "null",
-              "readonly": true,
               "attribute": "aria-label"
             },
             {
@@ -2427,7 +2386,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "disabled"
             },
             {
@@ -2438,7 +2396,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "error"
             },
             {
@@ -2465,7 +2422,6 @@
                 ]
               },
               "default": "'lg'",
-              "readonly": true,
               "attribute": "size"
             }
           ],
@@ -2673,7 +2629,6 @@
                 ]
               },
               "default": "'lg'",
-              "readonly": true,
               "attribute": "size"
             }
           ],
@@ -2710,6 +2665,585 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/bs-chip/bs-chip-filter/bs-chip-filter.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "customElement": true,
+          "tagName": "bs-chip-filter",
+          "name": "BsChipFilter",
+          "description": "A pill-shaped, selectable toggle used to filter a list or dataset (e.g. a \"Filter chip\" row\nabove a table or search results), optionally paired with a leading icon and/or a dropdown caret\nthat signals it opens a menu of further options.\n\n## When to use\n- Letting a user toggle a filter on/off, or open a menu of filter options (pair `dropdown` with\n  your own `bs-menu` -- this component only renders the caret affordance, it doesn't manage a\n  menu itself).\n\n## When not to use\n- A static, non-interactive status/category label -- use `bs-badge` instead.\n- A single primary action -- use `bs-button`.",
+          "attributes": [
+            {
+              "name": "aria-label",
+              "description": "Accessible name override. The visible label (default slot) already gives the native button\nan accessible name, so this is only needed if that text isn't sufficient on its own (e.g. it\ndoesn't convey that activating the chip toggles a filter).",
+              "type": {
+                "text": "string"
+              },
+              "default": "null",
+              "fieldName": "ariaLabel"
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the chip: sets the native `disabled` attribute, suppresses hover/focus/pressed\nstyling, and prevents toggling.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "dropdown",
+              "description": "Shows a trailing dropdown caret, signaling this chip opens a menu of further options.\nPurely a visual affordance -- wire up the actual menu (e.g. `bs-menu`) yourself.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "dropdown"
+            },
+            {
+              "name": "selected",
+              "description": "Whether the chip reads as toggled on. Mutable so clicking it toggles directly, and\nreflected so consumers can target `bs-chip-filter[selected]` via CSS.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "selected"
+            },
+            {
+              "name": "size",
+              "description": "Sizing scale. Controls the chip's height only -- icon size, gap, and font size stay\nconstant across sizes, matching the Figma spec exactly.",
+              "type": {
+                "text": "\"lg\" | \"md\"",
+                "references": [
+                  {
+                    "name": "BsChipFilterSize"
+                  }
+                ]
+              },
+              "default": "'lg'",
+              "fieldName": "size"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "description": "Accessible name override. The visible label (default slot) already gives the native button\nan accessible name, so this is only needed if that text isn't sufficient on its own (e.g. it\ndoesn't convey that activating the chip toggles a filter).",
+              "type": {
+                "text": "string"
+              },
+              "default": "null",
+              "attribute": "aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "description": "Disables the chip: sets the native `disabled` attribute, suppresses hover/focus/pressed\nstyling, and prevents toggling.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled"
+            },
+            {
+              "kind": "field",
+              "name": "dropdown",
+              "description": "Shows a trailing dropdown caret, signaling this chip opens a menu of further options.\nPurely a visual affordance -- wire up the actual menu (e.g. `bs-menu`) yourself.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "dropdown"
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "description": "Whether the chip reads as toggled on. Mutable so clicking it toggles directly, and\nreflected so consumers can target `bs-chip-filter[selected]` via CSS.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "selected",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "description": "Sizing scale. Controls the chip's height only -- icon size, gap, and font size stay\nconstant across sizes, matching the Figma spec exactly.",
+              "type": {
+                "text": "\"lg\" | \"md\"",
+                "references": [
+                  {
+                    "name": "BsChipFilterSize"
+                  }
+                ]
+              },
+              "default": "'lg'",
+              "attribute": "size"
+            }
+          ],
+          "events": [
+            {
+              "name": "bsChange",
+              "description": "Emitted when `selected` changes via user interaction, with the new value.",
+              "type": {
+                "text": "CustomEvent<boolean>"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Default slot: the chip's label content."
+            },
+            {
+              "name": "icon",
+              "description": "Optional leading icon, rendered before the label."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "caret",
+              "description": "The dropdown caret wrapper element, when `dropdown` is set."
+            },
+            {
+              "name": "icon",
+              "description": "The icon wrapper element."
+            },
+            {
+              "name": "label",
+              "description": "The text label element."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--bs-chip-filter-font-size",
+              "description": "Aliased to --bs-font-size-sm."
+            },
+            {
+              "name": "--bs-chip-filter-font-weight",
+              "description": "Aliased to --bs-font-weight-regular. Color (background/text per selected/hover/focus/pressed/disabled state) comes directly from brandsync-tokens' own pre-built chip token set (--bs-chip-bg-..., --bs-chip-text-..., --bs-chip-border-...) below -- those are shared across the whole bs-chip family, not local to this component, so they're consumed directly rather than re-aliased under a bs-chip-filter-specific name."
+            },
+            {
+              "name": "--bs-chip-filter-gap",
+              "description": "Gap between icon/label/caret. Aliased to --bs-spacing-50."
+            },
+            {
+              "name": "--bs-chip-filter-height-lg",
+              "description": "Height at size=\"lg\". Aliased to --bs-spacing-400."
+            },
+            {
+              "name": "--bs-chip-filter-height-md",
+              "description": "Height at size=\"md\". Aliased to --bs-spacing-300."
+            },
+            {
+              "name": "--bs-chip-filter-icon-size",
+              "description": "Icon/caret glyph size. 16px, matching Figma exactly -- constant across both sizes, only the chip's own height changes."
+            },
+            {
+              "name": "--bs-chip-filter-line-height",
+              "description": "Aliased to --bs-line-height-body-sm."
+            },
+            {
+              "name": "--bs-chip-filter-padding-x-glyph-side",
+              "description": "Horizontal padding on an edge adjacent to the icon or the caret. Aliased to --bs-spacing-100."
+            },
+            {
+              "name": "--bs-chip-filter-padding-x-plain-side",
+              "description": "Horizontal padding on a label-only edge, when the opposite edge has a glyph. Aliased to --bs-spacing-150."
+            },
+            {
+              "name": "--bs-chip-filter-padding-x-text-only",
+              "description": "Horizontal padding on both edges, when neither has a glyph. Aliased to --bs-spacing-200 -- deliberately not the same as --bs-chip-filter-padding-x-plain-side; verified against Figma that a plain-text chip (no icon, no dropdown) uses a bigger value on both sides rather than the smaller one-sided compensating value used when only one edge lacks a glyph."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BsChipFilter",
+          "declaration": {
+            "name": "BsChipFilter"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bs-chip-filter",
+          "declaration": {
+            "name": "BsChipFilter"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/bs-chip/bs-chip-informative/bs-chip-informative.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "customElement": true,
+          "tagName": "bs-chip-informative",
+          "name": "BsChipInformative",
+          "description": "A pill-shaped, non-interactive label for conveying a category or status at a glance, optionally\npaired with a leading icon. Unlike `bs-chip-filter`/`bs-chip-input`, this is purely informational\n-- no click/select/remove behavior, no hover/focus/pressed states.\n\n## When to use\n- Conveying a category or status inline with other content, with more color options and an\n  optional icon than `bs-badge` offers.\n\n## When not to use\n- Anything clickable/selectable -- use `bs-chip-filter`.\n- A short, fixed status label with no color/icon needs -- `bs-badge` is the simpler choice.",
+          "attributes": [
+            {
+              "name": "color",
+              "description": "Semantic color. Maps directly to the brandsync-tokens `--bs-chip-bg-*-container`/\n`--bs-chip-text-*` sets. Ignored (in favor of the disabled token set) when `disabled` is\nset -- same override relationship `bs-stepper-step`'s `error`/`disabled` props have.",
+              "type": {
+                "text": "\"error\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
+                "references": [
+                  {
+                    "name": "BsChipInformativeColor"
+                  }
+                ]
+              },
+              "default": "'neutral'",
+              "fieldName": "color"
+            },
+            {
+              "name": "disabled",
+              "description": "Overrides `color` with the disabled token set, regardless of its value. Reflected so\n`:host([disabled])` can apply it in CSS.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "size",
+              "description": "Sizing scale. Controls height and font-size/line-height together -- unlike\n`bs-chip-filter`/`bs-chip-input`, Figma specs a distinct (smaller) font at `size=\"sm\"`, not\njust a shorter pill.",
+              "type": {
+                "text": "\"lg\" | \"md\" | \"sm\"",
+                "references": [
+                  {
+                    "name": "BsChipInformativeSize"
+                  }
+                ]
+              },
+              "default": "'lg'",
+              "fieldName": "size"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "color",
+              "description": "Semantic color. Maps directly to the brandsync-tokens `--bs-chip-bg-*-container`/\n`--bs-chip-text-*` sets. Ignored (in favor of the disabled token set) when `disabled` is\nset -- same override relationship `bs-stepper-step`'s `error`/`disabled` props have.",
+              "type": {
+                "text": "\"error\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
+                "references": [
+                  {
+                    "name": "BsChipInformativeColor"
+                  }
+                ]
+              },
+              "default": "'neutral'",
+              "attribute": "color"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "description": "Overrides `color` with the disabled token set, regardless of its value. Reflected so\n`:host([disabled])` can apply it in CSS.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "description": "Sizing scale. Controls height and font-size/line-height together -- unlike\n`bs-chip-filter`/`bs-chip-input`, Figma specs a distinct (smaller) font at `size=\"sm\"`, not\njust a shorter pill.",
+              "type": {
+                "text": "\"lg\" | \"md\" | \"sm\"",
+                "references": [
+                  {
+                    "name": "BsChipInformativeSize"
+                  }
+                ]
+              },
+              "default": "'lg'",
+              "attribute": "size"
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Default slot: the chip's label content."
+            },
+            {
+              "name": "icon",
+              "description": "Optional leading icon."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "icon",
+              "description": "The icon wrapper element."
+            },
+            {
+              "name": "label",
+              "description": "The text label element."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--bs-chip-informative-font-size",
+              "description": "Aliased to --bs-font-size-sm (size=\"md\"/\"lg\")."
+            },
+            {
+              "name": "--bs-chip-informative-font-size-sm",
+              "description": "Aliased to --bs-font-size-xs (size=\"sm\" only -- every other size uses --bs-chip-informative-font-size below)."
+            },
+            {
+              "name": "--bs-chip-informative-font-weight",
+              "description": "Aliased to --bs-font-weight-regular. Color (background/text per color/disabled) comes directly from brandsync-tokens' own pre-built chip token set below -- shared across the whole bs-chip family, not local to this component, consumed directly rather than re-aliased under a bs-chip-informative-specific name."
+            },
+            {
+              "name": "--bs-chip-informative-gap",
+              "description": "Gap between icon and label. Aliased to --bs-spacing-50."
+            },
+            {
+              "name": "--bs-chip-informative-height-lg",
+              "description": "Height at size=\"lg\". Aliased to --bs-spacing-400."
+            },
+            {
+              "name": "--bs-chip-informative-height-md",
+              "description": "Height at size=\"md\". Aliased to --bs-spacing-300."
+            },
+            {
+              "name": "--bs-chip-informative-height-sm",
+              "description": "Height at size=\"sm\". Aliased to --bs-spacing-250."
+            },
+            {
+              "name": "--bs-chip-informative-icon-size",
+              "description": "Icon glyph size. 16px, matching Figma exactly -- constant across all sizes, only the chip's own height/font changes."
+            },
+            {
+              "name": "--bs-chip-informative-line-height",
+              "description": "Aliased to --bs-line-height-body-sm (size=\"md\"/\"lg\")."
+            },
+            {
+              "name": "--bs-chip-informative-line-height-sm",
+              "description": "Aliased to --bs-line-height-caption-sm (size=\"sm\" only)."
+            },
+            {
+              "name": "--bs-chip-informative-padding-right-icon-variant",
+              "description": "Right-edge padding specifically when there's a leading icon (the label-only edge in that case). Aliased to --bs-spacing-150."
+            },
+            {
+              "name": "--bs-chip-informative-padding-x-glyph-side",
+              "description": "Left-edge padding when there's a leading icon. Aliased to --bs-spacing-100."
+            },
+            {
+              "name": "--bs-chip-informative-padding-x-plain-side",
+              "description": "Both edges' padding when there's no leading icon. Aliased to --bs-spacing-200 -- deliberately not the icon variant's own right-edge value (--bs-spacing-150) below; verified against Figma that the no-icon variant uses a bigger value on both sides rather than reusing the icon variant's smaller one-sided value."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BsChipInformative",
+          "declaration": {
+            "name": "BsChipInformative"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bs-chip-informative",
+          "declaration": {
+            "name": "BsChipInformative"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/bs-chip/bs-chip-input/bs-chip-input.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "customElement": true,
+          "tagName": "bs-chip-input",
+          "name": "BsChipInput",
+          "description": "A pill-shaped, removable representation of a discrete piece of user-entered data (e.g. a tag,\na selected filter value, an invited email address), optionally paired with a leading icon or\navatar. Unlike `bs-chip-filter`, this is a compound control -- the body toggles `selected`, and\na separate trailing button removes the chip entirely.\n\n## When to use\n- Representing one entry in a list the user built themselves (tags, recipients, multi-select\n  values) that they need to be able to remove individually.\n\n## When not to use\n- A single toggleable filter, with no removal affordance -- use `bs-chip-filter`.\n- A static, non-interactive status/category label -- use `bs-badge`.",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "Disables both the body and the remove button, and reflected so `:host([disabled])` can\napply the disabled token set (a plain CSS pseudo-class can't target the host itself here,\nsince :host isn't a native form control).",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "selected",
+              "description": "Whether the chip reads as toggled on. Mutable so clicking the body toggles directly, and\nreflected so consumers can target `bs-chip-input[selected]` via CSS.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "selected"
+            },
+            {
+              "name": "size",
+              "description": "Sizing scale. Controls the chip's height only -- icon size, gap, and font size stay\nconstant across sizes, matching the Figma spec exactly.",
+              "type": {
+                "text": "\"lg\" | \"md\"",
+                "references": [
+                  {
+                    "name": "BsChipInputSize"
+                  }
+                ]
+              },
+              "default": "'lg'",
+              "fieldName": "size"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "disabled",
+              "description": "Disables both the body and the remove button, and reflected so `:host([disabled])` can\napply the disabled token set (a plain CSS pseudo-class can't target the host itself here,\nsince :host isn't a native form control).",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "description": "Whether the chip reads as toggled on. Mutable so clicking the body toggles directly, and\nreflected so consumers can target `bs-chip-input[selected]` via CSS.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "selected",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "description": "Sizing scale. Controls the chip's height only -- icon size, gap, and font size stay\nconstant across sizes, matching the Figma spec exactly.",
+              "type": {
+                "text": "\"lg\" | \"md\"",
+                "references": [
+                  {
+                    "name": "BsChipInputSize"
+                  }
+                ]
+              },
+              "default": "'lg'",
+              "attribute": "size"
+            }
+          ],
+          "events": [
+            {
+              "name": "bsChange",
+              "description": "Emitted when `selected` changes via clicking the body, with the new value.",
+              "type": {
+                "text": "CustomEvent<boolean>"
+              }
+            },
+            {
+              "name": "bsRemove",
+              "description": "Emitted when the remove button is clicked. No payload -- unlike bs-input's own chip-entry\nmode (which tracks a `chips: string[]` array internally and can identify which string was\nremoved), a standalone chip doesn't know its own \"value\" to a consumer; whatever's rendering\na list of these already has that context via closure/key.",
+              "type": {
+                "text": "CustomEvent<void>"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Default slot: the chip's label content."
+            },
+            {
+              "name": "icon",
+              "description": "Optional leading visual. Defaults to 16px (a plain icon), except a\n`<bs-avatar size=\"xs\">` specifically keeps its own natural 24px sizing instead -- Figma specs\na plain icon and an avatar (with its own existing border ring) at two different sizes."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "body",
+              "description": "The button that toggles `selected`."
+            },
+            {
+              "name": "icon",
+              "description": "The icon wrapper element."
+            },
+            {
+              "name": "label",
+              "description": "The text label element."
+            },
+            {
+              "name": "remove",
+              "description": "The trailing remove button."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--bs-chip-input-font-size",
+              "description": "Aliased to --bs-font-size-sm."
+            },
+            {
+              "name": "--bs-chip-input-font-weight",
+              "description": "Aliased to --bs-font-weight-regular. Color (background/text per selected/hover/focus/pressed/disabled state) comes directly from brandsync-tokens' own pre-built chip token set (--bs-chip-bg-..., --bs-chip-text-..., --bs-chip-border-...) below -- shared across the whole bs-chip family, not local to this component, consumed directly rather than re-aliased under a bs-chip-input-specific name."
+            },
+            {
+              "name": "--bs-chip-input-gap",
+              "description": "Gap between icon/label/remove. Aliased to --bs-spacing-50."
+            },
+            {
+              "name": "--bs-chip-input-height-lg",
+              "description": "Height at size=\"lg\". Aliased to --bs-spacing-400."
+            },
+            {
+              "name": "--bs-chip-input-height-md",
+              "description": "Height at size=\"md\". Aliased to --bs-spacing-300."
+            },
+            {
+              "name": "--bs-chip-input-line-height",
+              "description": "Aliased to --bs-line-height-body-sm."
+            },
+            {
+              "name": "--bs-chip-input-padding-x-glyph-side",
+              "description": "Horizontal padding on an edge adjacent to a glyph (the icon on the left, or the remove button on the right, which is always present). Aliased to --bs-spacing-100."
+            },
+            {
+              "name": "--bs-chip-input-padding-x-plain-side",
+              "description": "Left-edge padding when there's no leading icon. Aliased to --bs-spacing-150."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BsChipInput",
+          "declaration": {
+            "name": "BsChipInput"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bs-chip-input",
+          "declaration": {
+            "name": "BsChipInput"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/bs-composer/bs-composer.tsx",
@@ -2785,7 +3319,6 @@
                 "text": "string"
               },
               "default": "null",
-              "readonly": true,
               "attribute": "aria-label"
             },
             {
@@ -2795,7 +3328,6 @@
               "type": {
                 "text": "string"
               },
-              "readonly": true,
               "attribute": "placeholder"
             },
             {
@@ -2811,7 +3343,6 @@
                 ]
               },
               "default": "'idle'",
-              "readonly": true,
               "attribute": "state"
             },
             {
@@ -2822,7 +3353,6 @@
                 "text": "string"
               },
               "default": "''",
-              "readonly": true,
               "attribute": "value"
             },
             {
@@ -2838,7 +3368,6 @@
                 ]
               },
               "default": "'ai'",
-              "readonly": true,
               "attribute": "variant"
             }
           ],
@@ -3017,7 +3546,6 @@
                 "text": "string"
               },
               "default": "'Continue'",
-              "readonly": true,
               "attribute": "action-label"
             },
             {
@@ -3028,7 +3556,6 @@
                 "text": "boolean"
               },
               "default": "true",
-              "readonly": true,
               "attribute": "allow-close"
             },
             {
@@ -3039,7 +3566,6 @@
                 "text": "string"
               },
               "default": "'This is a message'",
-              "readonly": true,
               "attribute": "message"
             },
             {
@@ -3050,7 +3576,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "show-button"
             },
             {
@@ -3061,7 +3586,6 @@
                 "text": "boolean"
               },
               "default": "true",
-              "readonly": true,
               "attribute": "show-icon"
             },
             {
@@ -3077,7 +3601,6 @@
                 ]
               },
               "default": "'error'",
-              "readonly": true,
               "attribute": "type"
             }
           ],
@@ -3190,8 +3713,7 @@
                     "name": "BsDataTableColumn"
                   }
                 ]
-              },
-              "readonly": true
+              }
             },
             {
               "kind": "field",
@@ -3205,8 +3727,7 @@
                   }
                 ]
               },
-              "default": "[]",
-              "readonly": true
+              "default": "[]"
             },
             {
               "kind": "field",
@@ -3220,8 +3741,7 @@
                   }
                 ]
               },
-              "default": "[]",
-              "readonly": true
+              "default": "[]"
             },
             {
               "kind": "field",
@@ -3230,7 +3750,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "selectable"
             },
             {
@@ -3239,7 +3758,6 @@
               "type": {
                 "text": "string"
               },
-              "readonly": true,
               "attribute": "sort-column"
             },
             {
@@ -3249,7 +3767,6 @@
                 "text": "\"asc\" | \"desc\""
               },
               "default": "'asc'",
-              "readonly": true,
               "attribute": "sort-direction"
             }
           ],
@@ -3371,7 +3888,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "centered",
               "reflects": true
             },
@@ -3381,7 +3897,6 @@
               "type": {
                 "text": "string"
               },
-              "readonly": true,
               "attribute": "heading"
             },
             {
@@ -3407,7 +3922,6 @@
                 ]
               },
               "default": "'md'",
-              "readonly": true,
               "attribute": "size"
             }
           ],
@@ -3566,7 +4080,6 @@
                 "text": "string"
               },
               "default": "null",
-              "readonly": true,
               "attribute": "aria-label"
             },
             {
@@ -3577,7 +4090,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "disabled"
             },
             {
@@ -3593,7 +4105,6 @@
                 ]
               },
               "default": "'md'",
-              "readonly": true,
               "attribute": "size"
             },
             {
@@ -3604,7 +4115,6 @@
                 "text": "\"button\" | \"reset\" | \"submit\""
               },
               "default": "'button'",
-              "readonly": true,
               "attribute": "type"
             },
             {
@@ -3620,7 +4130,6 @@
                 ]
               },
               "default": "'primary'",
-              "readonly": true,
               "attribute": "variant"
             }
           ],
@@ -3901,7 +4410,6 @@
                 "text": "string"
               },
               "default": "null",
-              "readonly": true,
               "attribute": "aria-label"
             },
             {
@@ -3912,7 +4420,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "disabled"
             },
             {
@@ -3923,7 +4430,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "selected",
               "reflects": true
             }
@@ -4226,8 +4732,7 @@
               "type": {
                 "text": "string[]"
               },
-              "default": "[]",
-              "readonly": true
+              "default": "[]"
             },
             {
               "kind": "field",
@@ -4237,7 +4742,6 @@
                 "text": "string"
               },
               "default": "''",
-              "readonly": true,
               "attribute": "country"
             },
             {
@@ -4247,8 +4751,7 @@
               "type": {
                 "text": "{ code: string; label: string; flagIcon?: string; }[]"
               },
-              "default": "[]",
-              "readonly": true
+              "default": "[]"
             },
             {
               "kind": "field",
@@ -4256,7 +4759,6 @@
               "type": {
                 "text": "string"
               },
-              "readonly": true,
               "attribute": "description"
             },
             {
@@ -4266,7 +4768,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "disabled"
             },
             {
@@ -4275,7 +4776,6 @@
               "type": {
                 "text": "string"
               },
-              "readonly": true,
               "attribute": "error"
             },
             {
@@ -4286,7 +4786,6 @@
                 "text": "string"
               },
               "default": "''",
-              "readonly": true,
               "attribute": "initials-title"
             },
             {
@@ -4295,7 +4794,6 @@
               "type": {
                 "text": "string"
               },
-              "readonly": true,
               "attribute": "label"
             },
             {
@@ -4306,7 +4804,6 @@
                 "text": "number"
               },
               "default": "4",
-              "readonly": true,
               "attribute": "length"
             },
             {
@@ -4316,7 +4813,6 @@
               "type": {
                 "text": "number"
               },
-              "readonly": true,
               "attribute": "max"
             },
             {
@@ -4326,7 +4822,6 @@
               "type": {
                 "text": "number"
               },
-              "readonly": true,
               "attribute": "min"
             },
             {
@@ -4347,8 +4842,7 @@
               "type": {
                 "text": "{ label: string; value: string; }[]"
               },
-              "default": "[]",
-              "readonly": true
+              "default": "[]"
             },
             {
               "kind": "field",
@@ -4356,7 +4850,6 @@
               "type": {
                 "text": "string"
               },
-              "readonly": true,
               "attribute": "placeholder"
             },
             {
@@ -4367,7 +4860,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "required"
             },
             {
@@ -4378,7 +4870,6 @@
                 "text": "number"
               },
               "default": "3",
-              "readonly": true,
               "attribute": "rows"
             },
             {
@@ -4389,7 +4880,6 @@
                 "text": "number"
               },
               "default": "1",
-              "readonly": true,
               "attribute": "step"
             },
             {
@@ -4399,8 +4889,7 @@
               "type": {
                 "text": "string[]"
               },
-              "default": "[]",
-              "readonly": true
+              "default": "[]"
             },
             {
               "kind": "field",
@@ -4409,7 +4898,6 @@
                 "text": "\"chip\" | \"country\" | \"date\" | \"dropdown\" | \"email\" | \"initials\" | \"number\" | \"password\" | \"pin\" | \"search\" | \"select\" | \"text\" | \"textarea\""
               },
               "default": "'text'",
-              "readonly": true,
               "attribute": "type"
             },
             {
@@ -4720,7 +5208,6 @@
                 "text": "string"
               },
               "default": "null",
-              "readonly": true,
               "attribute": "alt"
             },
             {
@@ -4736,7 +5223,6 @@
                 ]
               },
               "default": "'auto'",
-              "readonly": true,
               "attribute": "background"
             },
             {
@@ -4747,7 +5233,6 @@
                 "text": "string"
               },
               "default": "null",
-              "readonly": true,
               "attribute": "src"
             },
             {
@@ -4763,7 +5248,6 @@
                 ]
               },
               "default": "'full'",
-              "readonly": true,
               "attribute": "variant"
             }
           ],
@@ -4893,7 +5377,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "disabled"
             }
           ],
@@ -5026,7 +5509,6 @@
                 "text": "boolean"
               },
               "default": "true",
-              "readonly": true,
               "attribute": "collapsible"
             },
             {
@@ -5037,7 +5519,6 @@
                 "text": "string"
               },
               "default": "'Main Menu'",
-              "readonly": true,
               "attribute": "heading"
             },
             {
@@ -5048,7 +5529,6 @@
                 "text": "\"auto\" | \"dark\" | \"light\""
               },
               "default": "'auto'",
-              "readonly": true,
               "attribute": "logo-background"
             },
             {
@@ -5059,7 +5539,6 @@
                 "text": "boolean"
               },
               "default": "true",
-              "readonly": true,
               "attribute": "show-logo"
             }
           ],
@@ -5303,7 +5782,6 @@
                 "text": "string"
               },
               "default": "null",
-              "readonly": true,
               "attribute": "aria-label"
             },
             {
@@ -5314,7 +5792,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "collapsed",
               "reflects": true
             },
@@ -5326,7 +5803,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "expandable"
             },
             {
@@ -5348,7 +5824,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "nested"
             },
             {
@@ -5359,7 +5834,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "selected",
               "reflects": true
             }
@@ -5617,7 +6091,6 @@
                 ]
               },
               "default": "'default'",
-              "readonly": true,
               "attribute": "alignment"
             },
             {
@@ -5628,7 +6101,6 @@
                 "text": "string"
               },
               "default": "null",
-              "readonly": true,
               "attribute": "aria-label"
             },
             {
@@ -5639,7 +6111,6 @@
                 "text": "\"auto\" | \"dark\" | \"light\""
               },
               "default": "'auto'",
-              "readonly": true,
               "attribute": "logo-background"
             },
             {
@@ -5650,7 +6121,6 @@
                 "text": "string"
               },
               "default": "null",
-              "readonly": true,
               "attribute": "skip-to-content-href"
             },
             {
@@ -5661,7 +6131,6 @@
                 "text": "string"
               },
               "default": "'Skip to main content'",
-              "readonly": true,
               "attribute": "skip-to-content-label"
             }
           ],
@@ -5831,7 +6300,6 @@
                 "text": "string"
               },
               "default": "'Next page'",
-              "readonly": true,
               "attribute": "next-label"
             },
             {
@@ -5842,7 +6310,6 @@
                 "text": "string"
               },
               "default": "'Previous page'",
-              "readonly": true,
               "attribute": "previous-label"
             },
             {
@@ -5853,7 +6320,6 @@
                 "text": "number"
               },
               "default": "1",
-              "readonly": true,
               "attribute": "sibling-count"
             },
             {
@@ -5864,7 +6330,6 @@
                 "text": "number"
               },
               "default": "1",
-              "readonly": true,
               "attribute": "total-pages"
             }
           ],
@@ -6050,7 +6515,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "disabled"
             },
             {
@@ -6060,7 +6524,6 @@
               "type": {
                 "text": "string"
               },
-              "readonly": true,
               "attribute": "name"
             },
             {
@@ -6070,7 +6533,6 @@
               "type": {
                 "text": "string"
               },
-              "readonly": true,
               "attribute": "value"
             }
           ],
@@ -6276,7 +6738,6 @@
                 "text": "string"
               },
               "default": "null",
-              "readonly": true,
               "attribute": "aria-label"
             },
             {
@@ -6287,7 +6748,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "disabled"
             },
             {
@@ -6298,7 +6758,6 @@
                 "text": "string"
               },
               "default": "'Label'",
-              "readonly": true,
               "attribute": "label"
             },
             {
@@ -6309,7 +6768,6 @@
                 "text": "number"
               },
               "default": "100",
-              "readonly": true,
               "attribute": "max"
             },
             {
@@ -6320,7 +6778,6 @@
                 "text": "number"
               },
               "default": "0",
-              "readonly": true,
               "attribute": "min"
             },
             {
@@ -6331,7 +6788,6 @@
                 "text": "number"
               },
               "default": "10",
-              "readonly": true,
               "attribute": "segments"
             },
             {
@@ -6342,7 +6798,6 @@
                 "text": "boolean"
               },
               "default": "true",
-              "readonly": true,
               "attribute": "show-label"
             },
             {
@@ -6353,7 +6808,6 @@
                 "text": "number"
               },
               "default": "1",
-              "readonly": true,
               "attribute": "step"
             },
             {
@@ -6369,7 +6823,6 @@
                 ]
               },
               "default": "'default'",
-              "readonly": true,
               "attribute": "type"
             },
             {
@@ -6631,7 +7084,6 @@
               "type": {
                 "text": "string"
               },
-              "readonly": true,
               "attribute": "action-label"
             },
             {
@@ -6642,7 +7094,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "loading"
             },
             {
@@ -6658,7 +7109,6 @@
                 ]
               },
               "default": "'default'",
-              "readonly": true,
               "attribute": "variant"
             }
           ],
@@ -6958,7 +7408,6 @@
                 "text": "string"
               },
               "default": "'Source'",
-              "readonly": true,
               "attribute": "file-name"
             },
             {
@@ -6968,7 +7417,6 @@
               "type": {
                 "text": "string"
               },
-              "readonly": true,
               "attribute": "href"
             },
             {
@@ -6978,7 +7426,6 @@
               "type": {
                 "text": "string"
               },
-              "readonly": true,
               "attribute": "source-name"
             },
             {
@@ -6989,7 +7436,6 @@
                 "text": "string"
               },
               "default": "'_blank'",
-              "readonly": true,
               "attribute": "target"
             },
             {
@@ -6999,7 +7445,6 @@
               "type": {
                 "text": "string"
               },
-              "readonly": true,
               "attribute": "version"
             }
           ],
@@ -7113,7 +7558,6 @@
                 "text": "number"
               },
               "default": "0",
-              "readonly": true,
               "attribute": "current-step"
             },
             {
@@ -7130,7 +7574,6 @@
                 ]
               },
               "default": "'horizontal'",
-              "readonly": true,
               "attribute": "direction",
               "reflects": true
             },
@@ -7142,7 +7585,6 @@
                 "text": "boolean"
               },
               "default": "true",
-              "readonly": true,
               "attribute": "show-description"
             }
           ],
@@ -7275,7 +7717,6 @@
                 ]
               },
               "default": "'enabled'",
-              "readonly": true,
               "attribute": "computed-state"
             },
             {
@@ -7285,7 +7726,6 @@
               "type": {
                 "text": "string"
               },
-              "readonly": true,
               "attribute": "description"
             },
             {
@@ -7301,7 +7741,6 @@
                 ]
               },
               "default": "'horizontal'",
-              "readonly": true,
               "attribute": "direction"
             },
             {
@@ -7312,7 +7751,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "disabled"
             },
             {
@@ -7323,7 +7761,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "error"
             },
             {
@@ -7334,7 +7771,6 @@
                 "text": "string"
               },
               "default": "''",
-              "readonly": true,
               "attribute": "name"
             },
             {
@@ -7345,7 +7781,6 @@
                 "text": "boolean"
               },
               "default": "true",
-              "readonly": true,
               "attribute": "show-description"
             }
           ],
@@ -7540,7 +7975,6 @@
                 "text": "string"
               },
               "default": "null",
-              "readonly": true,
               "attribute": "aria-label"
             },
             {
@@ -7562,7 +7996,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "disabled"
             },
             {
@@ -7578,7 +8011,6 @@
                 ]
               },
               "default": "'lg'",
-              "readonly": true,
               "attribute": "size"
             }
           ],
@@ -7794,7 +8226,6 @@
                 "text": "string"
               },
               "default": "null",
-              "readonly": true,
               "attribute": "aria-label"
             },
             {
@@ -7805,7 +8236,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "disabled"
             },
             {
@@ -7821,7 +8251,6 @@
                 ]
               },
               "default": "'start'",
-              "readonly": true,
               "attribute": "icon-position"
             },
             {
@@ -7832,7 +8261,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "readonly": true,
               "attribute": "selected",
               "reflects": true
             }
@@ -8041,7 +8469,6 @@
                 ]
               },
               "default": "'horizontal'",
-              "readonly": true,
               "attribute": "orientation"
             },
             {
@@ -8057,7 +8484,6 @@
                 ]
               },
               "default": "'bs-tab'",
-              "readonly": true,
               "attribute": "type"
             }
           ],
@@ -8144,7 +8570,6 @@
                 "text": "\"top\""
               },
               "default": "'top'",
-              "readonly": true,
               "attribute": "placement"
             }
           ],