luxen-ui 0.16.2 → 0.17.1

package/dist/metadata/segmented-control.json

@@ -0,0 +1,105 @@
+{
+  "name": "segmented-control",
+  "displayName": "Segmented control",
+  "type": "progressive",
+  "isCustomElement": true,
+  "tag": "l-segmented-control",
+  "nativeTag": null,
+  "selector": "l-segmented-control",
+  "subItemOf": null,
+  "summary": "A single-select segmented control: a compact, mutually-exclusive\nswitch between a few options (radio-group semantics with a sliding pill).\nProgressively enhances light-DOM `<button>`s so it works before JS runs.\nForm-associated: give it a `name` and its selected `value` is submitted with\nthe form (and restored on reset), like a native radio group.",
+  "status": "stable",
+  "appearances": [],
+  "import": {
+    "css": "luxen-ui/css/segmented-control",
+    "js": "luxen-ui/segmented-control"
+  },
+  "properties": [
+    {
+      "name": "value",
+      "attribute": "value",
+      "type": "string",
+      "default": "''",
+      "reflects": true,
+      "description": "Value of the selected segment (its `value` attribute, else its index)."
+    },
+    {
+      "name": "size",
+      "attribute": "size",
+      "type": "SegmentedControlSize",
+      "default": "'md'",
+      "reflects": true,
+      "description": "Control height, aligned with buttons and form controls at the same size."
+    },
+    {
+      "name": "label",
+      "attribute": "label",
+      "type": "string | undefined",
+      "default": null,
+      "reflects": true,
+      "description": "Accessible label announced for the group. Not displayed on screen."
+    },
+    {
+      "name": "fullWidth",
+      "attribute": "full-width",
+      "type": "boolean",
+      "default": "false",
+      "reflects": true,
+      "description": "Stretch segments to fill the container width."
+    }
+  ],
+  "attributes": [],
+  "events": [
+    {
+      "name": "change",
+      "description": "Fired when the selected segment changes. Not cancelable. Bubbles. Properties: `value: string`, `index: number`.",
+      "cancelable": false
+    }
+  ],
+  "methods": [
+    {
+      "name": "formResetCallback",
+      "params": [],
+      "returns": null,
+      "description": ""
+    },
+    {
+      "name": "formStateRestoreCallback",
+      "params": [
+        {
+          "name": "state",
+          "type": "string"
+        },
+        {
+          "name": "mode",
+          "type": "'restore' | 'autocomplete'"
+        }
+      ],
+      "returns": null,
+      "description": ""
+    }
+  ],
+  "slots": [],
+  "cssClasses": [],
+  "cssParts": [],
+  "cssProperties": [
+    {
+      "name": "--indicator-color",
+      "default": "var(--l-color-surface)",
+      "description": "Background of the sliding pill behind the selected segment."
+    },
+    {
+      "name": "--border-radius",
+      "default": "var(--l-radius-lg)",
+      "description": "Corner radius of the track."
+    }
+  ],
+  "commands": [],
+  "examples": [
+    {
+      "title": "Mark the initially-selected segment with `aria-checked=\"true\"` (or set",
+      "language": "html",
+      "code": "`value` to its `value` attribute) so it is styled before the script upgrades\nthe element.\n```html\n<l-segmented-control label=\"Metric\" value=\"cost\">\n  <button value=\"volume\">Volume</button>\n  <button value=\"cost\" aria-checked=\"true\">Cost</button>\n</l-segmented-control>\n```"
+    }
+  ]
+}

package/dist/registry.d.ts

@@ -1,5 +1,5 @@
 /** Every component base name the library ships. */
-export type ElementBaseName = 'alert' | 'alert-dialog' | 'avatar' | 'badge' | 'button-group' | 'carousel' | 'carousel-item' | 'combobox' | 'dialog' | 'divider' | 'drawer' | 'dropdown' | 'dropdown-item' | 'dropdown-label' | 'form-field' | 'icon' | 'input-group' | 'input-otp' | 'input-stepper' | 'popover' | 'prose-editor' | 'skeleton' | 'slider' | 'spinner' | 'rating' | 'select' | 'sticky-bar' | 'stories' | 'story' | 'stories-viewer' | 'tabs' | 'tag' | 'toast' | 'toast-item' | 'tooltip' | 'tree' | 'tree-item';
+export type ElementBaseName = 'alert' | 'alert-dialog' | 'avatar' | 'badge' | 'button-group' | 'carousel' | 'carousel-item' | 'combobox' | 'dialog' | 'divider' | 'drawer' | 'dropdown' | 'dropdown-item' | 'dropdown-label' | 'form-field' | 'icon' | 'input-group' | 'input-otp' | 'input-stepper' | 'popover' | 'prose-editor' | 'skeleton' | 'slider' | 'spinner' | 'rating' | 'segmented-control' | 'select' | 'sticky-bar' | 'stories' | 'story' | 'stories-viewer' | 'tabs' | 'tag' | 'toast' | 'toast-item' | 'tooltip' | 'tree' | 'tree-item';
 /** Set the global prefix. Must be called before defining elements. */
 export declare function setPrefix(prefix: {
     element: string;

package/dist/registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../src/html/registry.ts"],"names":[],"mappings":"AAAA,mDAAmD;AACnD,MAAM,MAAM,eAAe,GACvB,OAAO,GACP,cAAc,GACd,QAAQ,GACR,OAAO,GACP,cAAc,GACd,UAAU,GACV,eAAe,GACf,UAAU,GACV,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,UAAU,GACV,eAAe,GACf,gBAAgB,GAChB,YAAY,GACZ,MAAM,GACN,aAAa,GACb,WAAW,GACX,eAAe,GACf,SAAS,GACT,cAAc,GACd,UAAU,GACV,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,YAAY,GACZ,SAAS,GACT,OAAO,GACP,gBAAgB,GAChB,MAAM,GACN,KAAK,GACL,OAAO,GACP,YAAY,GACZ,SAAS,GACT,MAAM,GACN,WAAW,CAAC;AAMhB,sEAAsE;AACtE,wBAAgB,SAAS,CAAC,MAAM,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAGxE;AAED,gCAAgC;AAChC,wBAAgB,SAAS,IAAI;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAE5D;AAED,gEAAgE;AAChE,wBAAgB,OAAO,CAAC,QAAQ,EAAE,eAAe,GAAG,MAAM,CAEzD;AAED,sEAAsE;AACtE,wBAAgB,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAExC;AAID,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE7C;AAED,kDAAkD;AAClD,wBAAgB,YAAY,CAAC,QAAQ,EAAE,eAAe,GAAG,OAAO,CAE/D;AAED,qEAAqE;AACrE,wBAAgB,cAAc,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI,CAE9D"}
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../src/html/registry.ts"],"names":[],"mappings":"AAAA,mDAAmD;AACnD,MAAM,MAAM,eAAe,GACvB,OAAO,GACP,cAAc,GACd,QAAQ,GACR,OAAO,GACP,cAAc,GACd,UAAU,GACV,eAAe,GACf,UAAU,GACV,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,UAAU,GACV,eAAe,GACf,gBAAgB,GAChB,YAAY,GACZ,MAAM,GACN,aAAa,GACb,WAAW,GACX,eAAe,GACf,SAAS,GACT,cAAc,GACd,UAAU,GACV,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,mBAAmB,GACnB,QAAQ,GACR,YAAY,GACZ,SAAS,GACT,OAAO,GACP,gBAAgB,GAChB,MAAM,GACN,KAAK,GACL,OAAO,GACP,YAAY,GACZ,SAAS,GACT,MAAM,GACN,WAAW,CAAC;AAMhB,sEAAsE;AACtE,wBAAgB,SAAS,CAAC,MAAM,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAGxE;AAED,gCAAgC;AAChC,wBAAgB,SAAS,IAAI;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAE5D;AAED,gEAAgE;AAChE,wBAAgB,OAAO,CAAC,QAAQ,EAAE,eAAe,GAAG,MAAM,CAEzD;AAED,sEAAsE;AACtE,wBAAgB,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAExC;AAID,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE7C;AAED,kDAAkD;AAClD,wBAAgB,YAAY,CAAC,QAAQ,EAAE,eAAe,GAAG,OAAO,CAE/D;AAED,qEAAqE;AACrE,wBAAgB,cAAc,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI,CAE9D"}

package/dist/templates/elements/dropdown.md

@@ -74,6 +74,57 @@ Set `type="checkbox"` for toggleable items. The dropdown stays open when checkin
 </l-dropdown>
 ```
 
+### Destructive items
+
+Set `variant="destructive"` to mark a delete-style action in red.
+
+```html
+<l-dropdown>
+  <button
+    slot="trigger"
+    class="l-button"
+  >
+    Project
+  </button>
+
+  <l-dropdown-item value="share">
+    <iconify-icon
+      slot="prefix"
+      icon="lucide:share"
+    ></iconify-icon>
+    Share
+  </l-dropdown-item>
+  <l-dropdown-item value="preferences">
+    <iconify-icon
+      slot="prefix"
+      icon="lucide:settings"
+    ></iconify-icon>
+    Preferences
+  </l-dropdown-item>
+
+  <l-divider></l-divider>
+
+  <l-dropdown-label>Danger zone</l-dropdown-label>
+  <l-dropdown-item value="archive">
+    <iconify-icon
+      slot="prefix"
+      icon="lucide:archive"
+    ></iconify-icon>
+    Archive
+  </l-dropdown-item>
+  <l-dropdown-item
+    value="delete"
+    variant="destructive"
+  >
+    <iconify-icon
+      slot="prefix"
+      icon="lucide:trash-2"
+    ></iconify-icon>
+    Delete
+  </l-dropdown-item>
+</l-dropdown>
+```
+
 ### Section labels
 
 Add `<l-dropdown-label>` to caption a group of items. It is non-interactive — keyboard navigation and typeahead skip it. Use `<l-divider>` between sections.
@@ -433,6 +484,7 @@ while open.
 - **value**: `string` — The value associated with this item.
 - **disabled**: `boolean` (default: `false`) — Disables the item.
 - **type**: `'normal' | 'checkbox'` (default: `'normal'`) — The type of item: `normal` or `checkbox`.
+- **variant**: `'destructive' | undefined` (default: `undefined`) — Visual variant. `destructive` marks a delete-style action in red.
 - **checked**: `boolean` (default: `false`) — Whether the checkbox item is checked.
 - **submenu-open**: `boolean` (default: `false`) — Whether this item's submenu is open. Managed by the parent `l-dropdown`.
 - **hasSubmenu**: `boolean` — Whether this item has nested `slot="submenu"` items.

package/dist/templates/elements/segmented-control.md

@@ -0,0 +1,252 @@
+---
+outline: deep
+---
+
+# Segmented control
+
+A single-select switch between a few mutually-exclusive options, with a sliding pill behind the selected segment.
+
+**`<l-segmented-control>`** — Progressive Custom Element
+
+```html
+<l-segmented-control
+  label="View"
+  value="list"
+>
+  <button value="list">List</button>
+  <button value="board">Board</button>
+  <button value="calendar">Calendar</button>
+</l-segmented-control>
+```
+
+Each segment is a native `<button>`. Set `value` on the control to the `value` of the initially-selected segment; the control emits a `change` event with the new `value` when the selection changes.
+
+## Options
+
+### Label
+
+Add `label` to give the control an accessible name announced by screen readers.
+
+```html
+<l-segmented-control
+  label="View"
+  value="list"
+>
+  <button value="list">List</button>
+  <button value="board">Board</button>
+  <button value="calendar">Calendar</button>
+</l-segmented-control>
+```
+
+### Sizes
+
+Add `size` (`sm`, `lg`, `xl`) to align the control with buttons and form controls of the same size. Defaults to `md`.
+
+```html
+<div class="flex flex-col items-start gap-3">
+  <l-segmented-control
+    label="Size sm"
+    size="sm"
+  >
+    <button value="day">Day</button>
+    <button value="week">Week</button>
+    <button value="month">Month</button>
+  </l-segmented-control>
+  <l-segmented-control label="Size md">
+    <button value="day">Day</button>
+    <button value="week">Week</button>
+    <button value="month">Month</button>
+  </l-segmented-control>
+  <l-segmented-control
+    label="Size lg"
+    size="lg"
+  >
+    <button value="day">Day</button>
+    <button value="week">Week</button>
+    <button value="month">Month</button>
+  </l-segmented-control>
+</div>
+```
+
+### Full width
+
+Add `full-width` to stretch the segments to fill the container.
+
+```html
+<l-segmented-control
+  label="Billing period"
+  value="yearly"
+  full-width
+  class="w-full"
+>
+  <button value="monthly">Monthly</button>
+  <button value="yearly">Yearly</button>
+</l-segmented-control>
+```
+
+### Form field
+
+It is form-associated: add `name` and the selected `value` is submitted with the form, like a native radio group. Reset restores the initial selection, and `disabled` opts the control out of submission.
+
+```html
+<form class="flex flex-col items-start gap-3">
+  <l-segmented-control
+    name="billing"
+    label="Billing period"
+    value="yearly"
+  >
+    <button value="monthly">Monthly</button>
+    <button value="yearly">Yearly</button>
+  </l-segmented-control>
+  <button
+    class="l-button"
+    type="reset"
+  >
+    Reset
+  </button>
+</form>
+```
+
+## Examples
+
+### With icons
+
+Place an `<l-icon>` before the label inside a segment.
+
+```html
+<l-segmented-control label="Source">
+  <button value="github">
+    <l-icon name="lucide:github"></l-icon>
+    GitHub
+  </button>
+  <button value="dribbble">
+    <l-icon name="lucide:dribbble"></l-icon>
+    Dribbble
+  </button>
+  <button value="youtube">
+    <l-icon name="lucide:youtube"></l-icon>
+    YouTube
+  </button>
+</l-segmented-control>
+```
+
+### Icon-only
+
+A segment with no text is squared automatically. Give each one an `aria-label`.
+
+```html
+<l-segmented-control label="Text alignment">
+  <button
+    value="left"
+    aria-label="Align left"
+  >
+    <l-icon name="lucide:align-left"></l-icon>
+  </button>
+  <button
+    value="center"
+    aria-label="Align center"
+  >
+    <l-icon name="lucide:align-center"></l-icon>
+  </button>
+  <button
+    value="right"
+    aria-label="Align right"
+  >
+    <l-icon name="lucide:align-right"></l-icon>
+  </button>
+</l-segmented-control>
+```
+
+### Filter toolbar
+
+Segmented controls line up with `.l-button` triggers and `l-select` at the same `size`, so a filter bar stays visually consistent. Here the dropdowns take a quiet neutral fill (`bg-fill-neutral-subtle`) so the chrome recedes and the active selections carry the emphasis.
+
+```html
+<div class="flex flex-wrap items-center gap-2">
+  <button class="l-button bg-fill-neutral-subtle">
+    <l-icon name="lucide:layout-list"></l-icon>
+    List view
+    <l-icon name="lucide:chevron-down"></l-icon>
+  </button>
+  <button class="l-button bg-fill-neutral-subtle">
+    <l-icon name="lucide:arrow-down-narrow-wide"></l-icon>
+    Sort
+    <l-icon name="lucide:chevron-down"></l-icon>
+  </button>
+  <l-segmented-control
+    label="Metric"
+    value="cost"
+  >
+    <button value="volume">Volume</button>
+    <button value="cost">Cost</button>
+  </l-segmented-control>
+  <l-segmented-control
+    label="Color"
+    value="all"
+  >
+    <button value="all">All</button>
+    <button value="color">
+      <span class="size-2.5 rounded-[3px] bg-[#ef4444]"></span>
+      Color
+    </button>
+    <button value="black">
+      <span class="size-2.5 rounded-[3px] bg-[#64748b]"></span>
+      Black
+    </button>
+  </l-segmented-control>
+</div>
+```
+
+## Accessibility
+
+### Criteria
+
+- **Role** — Host gets `role="radiogroup"`; each segment gets `role="radio"` with `aria-checked`
+- **Accessible name** — `label` sets `aria-label` so assistive tech announces the control purpose
+- **Keyboard** — Arrow keys move selection through the segments; `Home`/`End` jump to the ends
+- **Focus order** — Roving `tabindex`: the group is a single `Tab` stop, arrows move within it
+- **Icon-only segments** — A segment with no visible text needs its own `aria-label`
+
+### Rules
+
+- Always add a `label` describing the control purpose
+- Segments must be native `<button>` elements with a `value`
+- Give each icon-only segment its own `aria-label`
+
+### Keyboard interactions
+
+- `Tab` — Moves focus into the control (to the selected segment)
+- `ArrowRight` — Selects and focuses the next segment, wrapping
+- `ArrowLeft` — Selects and focuses the previous segment, wrapping
+- `ArrowDown` — Same as ArrowRight
+- `ArrowUp` — Same as ArrowLeft
+- `Home` — Selects and focuses the first segment
+- `End` — Selects and focuses the last segment
+
+## API reference
+
+### Importing
+
+```js
+import 'luxen-ui/segmented-control';
+```
+
+```css
+@import 'luxen-ui/css/segmented-control';
+```
+
+### Attributes & Properties
+
+- **value**: `string` — Value of the selected segment (its `value` attribute, else its index).
+- **size**: `SegmentedControlSize` (default: `'md'`) — Control height, aligned with buttons and form controls at the same size.
+- **label**: `string | undefined` — Accessible label announced for the group. Not displayed on screen.
+- **full-width**: `boolean` (default: `false`) — Stretch segments to fill the container width.
+
+### Events
+
+- **change** — Fired when the selected segment changes. Not cancelable. Bubbles. Properties: `value: string`, `index: number`.
+
+### CSS custom properties
+
+- `--indicator-color` (default: `var(--l-color-surface)`) — Background of the sliding pill behind the selected segment.
+- `--border-radius` (default: `var(--l-radius-lg)`) — Corner radius of the track.

package/elements.json

@@ -261,6 +261,14 @@
       "inSkill": true,
       "inMockups": true
     },
+    {
+      "name": "segmented-control",
+      "displayName": "Segmented control",
+      "kind": "element",
+      "type": "progressive",
+      "inSkill": true,
+      "inMockups": true
+    },
     {
       "name": "select",
       "displayName": "Select",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luxen-ui",
-  "version": "0.16.2",
+  "version": "0.17.1",
   "description": "Modern web components and CSS-first UI library built with Lit. Framework-agnostic, customizable prefix, design tokens.",
   "keywords": [
     "custom-elements",