@aceshooting/lyra-ui 3.6.0 → 3.7.0

package/vscode-html-data.json

@@ -1104,7 +1104,7 @@
           "name": "appearance",
           "description": {
             "kind": "markdown",
-            "value": "`'filled'` (the default) reads `--lyra-button-fill`, which for `variant=\"neutral\"` is the\nambient `--lyra-color-surface` -- matching this component's own container, by design, for a\nlow-emphasis default. `'accent'` is the loud tier: a solid, high-contrast fill for every\nvariant, including `neutral`.\n\nType: `ButtonAppearance`  \nDefault: `'filled'`"
+            "value": "`'filled'` (the default) reads `--lyra-button-fill`, which for `variant=\"neutral\"` is the\nambient `--lyra-color-surface` -- matching this component's own container, by design, for a\nlow-emphasis default. `'accent'` is the loud tier: a solid, high-contrast fill for every\nvariant, including `neutral`. `'link'` is zero-chrome inline text — no padding, border, or\nmin-height, underlined, colored from `--lyra-button-accent` (the same token `'plain'` uses)\nand inheriting the surrounding font — for a text link that flows inline in a sentence rather\nthan a button-shaped control.\n\nType: `ButtonAppearance`  \nDefault: `'filled'`"
           }
         },
         {
@@ -4004,7 +4004,7 @@
       "name": "lyra-file-icon",
       "description": {
         "kind": "markdown",
-        "value": "Displays a localized, tokenized file-type badge from a MIME type.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The outer presentation wrapper. |\n| `icon` | The format badge. |\n| `label` | The localized format label in `variant=\"label\"` mode. |"
+        "value": "Displays a localized, tokenized file-type badge from a MIME type.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The outer presentation wrapper. |\n| `icon` | The format badge. |\n| `label` | The localized format label in `variant=\"label\"` mode. |\n| `size` | The formatted `size`, shown alongside `label` in `variant=\"label\"` mode when `size` is known. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lyra-file-icon-size` (default: `var(--lyra-size-2rem)`) — Inline/block size of the format badge."
       },
       "attributes": [
         {
@@ -4032,7 +4032,7 @@
           "name": "mime-type",
           "description": {
             "kind": "markdown",
-            "value": "MIME type used to resolve metadata.\n\nType: `string`  \nDefault: `''`"
+            "value": "MIME type used to resolve metadata. Also exposed as a `title` tooltip on the badge.\n\nType: `string`  \nDefault: `''`"
           }
         },
         {
@@ -4042,6 +4042,13 @@
             "value": "Optional filename used for fallback detection with an empty or generic MIME type.\n\nType: `string`  \nDefault: `''`"
           }
         },
+        {
+          "name": "size",
+          "description": {
+            "kind": "markdown",
+            "value": "File size in bytes, shown alongside the label in `variant=\"label\"` mode. `0` (the default) renders no size — matches `<lyra-attachment-chip>`'s `size` convention.\n\nType: `number`  \nDefault: `0`"
+          }
+        },
         {
           "name": "variant",
           "description": {
@@ -8796,6 +8803,36 @@
         }
       ]
     },
+    {
+      "name": "lyra-swatch-picker",
+      "description": {
+        "kind": "markdown",
+        "value": "`<lyra-swatch-picker>` -- a single-select picker over a small, fixed set of color swatches with\nthe WAI-ARIA APG `radiogroup` contract built in: `role=\"radiogroup\"`/`role=\"radio\"`, roving\ntabindex, automatic activation (click or arrow-key move both select immediately, like a native\nradio group), cyclic Arrow/Home/End navigation. Distinct from `<lyra-color-picker>`'s freeform\nnative color input -- this picks exactly one of N designer-chosen named colors, the shape apps\notherwise hand-roll as a row of round accent-color buttons.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The `role=\"radiogroup\"` root. |\n| `swatch` | A single `role=\"radio\"` color swatch; the selected one is `[part='swatch'][aria-checked='true']`. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lyra-swatch-picker-selected-color` (default: `var(--lyra-color-brand)`) — Ring color drawn around the selected swatch, themeable independently of the focus ring and every other ring color."
+      },
+      "attributes": [
+        {
+          "name": "label",
+          "description": {
+            "kind": "markdown",
+            "value": "Accessible name for the radiogroup, used when no visible label context\nexists around it (e.g. no wrapping `<label>` or adjacent heading). Set\nas `aria-label` on the `role=\"radiogroup\"` element. A plain `aria-label`\nattribute on the host itself is honored as a fallback when this is left\nunset, matching `<lyra-segmented>`.\n\nType: `string`  \nDefault: `''`"
+          }
+        },
+        {
+          "name": "locale",
+          "description": {
+            "kind": "markdown",
+            "value": "Optional locale override. Otherwise the nearest `locale`/`lang` ancestor is used.\n\nType: `string`  \nDefault: `''`"
+          }
+        },
+        {
+          "name": "value",
+          "description": {
+            "kind": "markdown",
+            "value": "The currently selected option's `value`, or `null` when nothing is selected.\n\nType: `string | null`  \nDefault: `null`"
+          }
+        }
+      ]
+    },
     {
       "name": "lyra-switch",
       "description": {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@aceshooting/lyra-ui",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1271,7 +1271,7 @@
           "attributes": [
             {
               "name": "appearance",
-              "description": "`'filled'` (the default) reads `--lyra-button-fill`, which for `variant=\"neutral\"` is the\nambient `--lyra-color-surface` -- matching this component's own container, by design, for a\nlow-emphasis default. `'accent'` is the loud tier: a solid, high-contrast fill for every\nvariant, including `neutral`.\n\nType: `ButtonAppearance`  \nDefault: `'filled'`",
+              "description": "`'filled'` (the default) reads `--lyra-button-fill`, which for `variant=\"neutral\"` is the\nambient `--lyra-color-surface` -- matching this component's own container, by design, for a\nlow-emphasis default. `'accent'` is the loud tier: a solid, high-contrast fill for every\nvariant, including `neutral`. `'link'` is zero-chrome inline text — no padding, border, or\nmin-height, underlined, colored from `--lyra-button-accent` (the same token `'plain'` uses)\nand inheriting the surrounding font — for a text link that flows inline in a sentence rather\nthan a button-shaped control.\n\nType: `ButtonAppearance`  \nDefault: `'filled'`",
               "value": {
                 "type": [
                   "ButtonAppearance"
@@ -4533,7 +4533,7 @@
         },
         {
           "name": "lyra-file-icon",
-          "description": "Displays a localized, tokenized file-type badge from a MIME type.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The outer presentation wrapper. |\n| `icon` | The format badge. |\n| `label` | The localized format label in `variant=\"label\"` mode. |",
+          "description": "Displays a localized, tokenized file-type badge from a MIME type.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The outer presentation wrapper. |\n| `icon` | The format badge. |\n| `label` | The localized format label in `variant=\"label\"` mode. |\n| `size` | The formatted `size`, shown alongside `label` in `variant=\"label\"` mode when `size` is known. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lyra-file-icon-size` (default: `var(--lyra-size-2rem)`) — Inline/block size of the format badge.",
           "attributes": [
             {
               "name": "decorative",
@@ -4564,7 +4564,7 @@
             },
             {
               "name": "mime-type",
-              "description": "MIME type used to resolve metadata.\n\nType: `string`  \nDefault: `''`",
+              "description": "MIME type used to resolve metadata. Also exposed as a `title` tooltip on the badge.\n\nType: `string`  \nDefault: `''`",
               "value": {
                 "type": [
                   "string"
@@ -4580,6 +4580,15 @@
                 ]
               }
             },
+            {
+              "name": "size",
+              "description": "File size in bytes, shown alongside the label in `variant=\"label\"` mode. `0` (the default) renders no size — matches `<lyra-attachment-chip>`'s `size` convention.\n\nType: `number`  \nDefault: `0`",
+              "value": {
+                "type": [
+                  "number"
+                ]
+              }
+            },
             {
               "name": "variant",
               "description": "Shows only the icon or the icon together with its localized label.\n\nType: `LyraFileIconVariant`  \nDefault: `'icon'`",
@@ -9777,6 +9786,34 @@
             }
           ]
         },
+        {
+          "name": "lyra-swatch-picker",
+          "description": "`<lyra-swatch-picker>` -- a single-select picker over a small, fixed set of color swatches with\nthe WAI-ARIA APG `radiogroup` contract built in: `role=\"radiogroup\"`/`role=\"radio\"`, roving\ntabindex, automatic activation (click or arrow-key move both select immediately, like a native\nradio group), cyclic Arrow/Home/End navigation. Distinct from `<lyra-color-picker>`'s freeform\nnative color input -- this picks exactly one of N designer-chosen named colors, the shape apps\notherwise hand-roll as a row of round accent-color buttons.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The `role=\"radiogroup\"` root. |\n| `swatch` | A single `role=\"radio\"` color swatch; the selected one is `[part='swatch'][aria-checked='true']`. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lyra-swatch-picker-selected-color` (default: `var(--lyra-color-brand)`) — Ring color drawn around the selected swatch, themeable independently of the focus ring and every other ring color.",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "Accessible name for the radiogroup, used when no visible label context\nexists around it (e.g. no wrapping `<label>` or adjacent heading). Set\nas `aria-label` on the `role=\"radiogroup\"` element. A plain `aria-label`\nattribute on the host itself is honored as a fallback when this is left\nunset, matching `<lyra-segmented>`.\n\nType: `string`  \nDefault: `''`",
+              "value": {
+                "type": [
+                  "string"
+                ]
+              }
+            },
+            {
+              "name": "locale",
+              "description": "Optional locale override. Otherwise the nearest `locale`/`lang` ancestor is used.\n\nType: `string`  \nDefault: `''`",
+              "value": {
+                "type": [
+                  "string"
+                ]
+              }
+            },
+            {
+              "name": "value",
+              "description": "The currently selected option's `value`, or `null` when nothing is selected.\n\nType: `string | null`  \nDefault: `null`"
+            }
+          ]
+        },
         {
           "name": "lyra-switch",
           "description": "`<lyra-switch>` — a boolean toggle-switch form control. Structurally the\nsame idea as a checkbox (form-associated via `ElementInternals`, click and\nSpace/Enter both toggle) but with switch semantics: `role=\"switch\"` +\n`aria-checked` read to assistive tech as an on/off state rather than a\nchecked/unchecked one, and there is no indeterminate state.\n\n`checked` is not a plain string, so this attaches `ElementInternals`\ndirectly and implements its own `updateValidity()` rather than using the\n`FormAssociated` mixin (that mixin's `value` accessor assumes a string —\nsee `<lyra-combobox>` for the same direct-`ElementInternals` shape with a\nnon-string value).\n\nShips an opt-in `hint`/`errorText` form-control chrome (props + matching named slots +\n`hint`/`error` CSS parts), mirroring `<lyra-select>`'s pattern for those two pieces -- left\nunset, neither renders. Deliberately no separate top-of-field `label` prop/slot/part mirroring\n`<lyra-select>`'s `form-control-label`: the default slot already *is* this control's visible,\nclickable label (same as `<lyra-checkbox>`), so a second label surface would be redundant.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Label text, rendered next to the track. Clicking it toggles the switch, the same as clicking a checkbox's associated `<label>`. If left empty, set `aria-label` on the host so the control still has an accessible name. |\n| `error` | Custom error content. |\n| `hint` | Custom hint content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The whole interactive control (`role=\"switch\"`); wraps the track and label. |\n| `error` | The error message. |\n| `form-control` | The outer wrapper around the switch, error and hint. |\n| `hint` | The hint message. |\n| `label` | The wrapper around the default slot. |\n| `thumb` | The circular knob that slides across the track. |\n| `track` | The pill-shaped background. |",
@@ -11891,6 +11928,10 @@
           "name": "--lyra-empty-compact-padding",
           "description": "**`<lyra-empty>`** (default: `var(--lyra-space-xs)`) — Padding used in compact mode; accepts any padding shorthand (e.g. `8px 2px`)."
         },
+        {
+          "name": "--lyra-file-icon-size",
+          "description": "**`<lyra-file-icon>`** (default: `var(--lyra-size-2rem)`) — Inline/block size of the format badge."
+        },
         {
           "name": "--lyra-flag-aspect-ratio",
           "description": "**`<lyra-flag>`** (default: `4 / 3`) — Rectangular flag aspect ratio."
@@ -12035,6 +12076,10 @@
           "name": "--lyra-svg-viewer-max-height",
           "description": "**`<lyra-svg-viewer>`** (default: `none`) — Maximum block size of the scrollable body before it scrolls internally. Also settable via the `max-height` property."
         },
+        {
+          "name": "--lyra-swatch-picker-selected-color",
+          "description": "**`<lyra-swatch-picker>`** (default: `var(--lyra-color-brand)`) — Ring color drawn around the selected swatch, themeable independently of the focus ring and every other ring color."
+        },
         {
           "name": "--lyra-textarea-max-block-size",
           "description": "**`<lyra-textarea>`** (default: `none`) — Maximum auto-grown block size before the textarea scrolls."