luxen-ui 0.16.2 → 0.17.1

package/cdn/styles/elements/segmented-control.css

@@ -0,0 +1,165 @@
+@layer components {
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Segmented control
+   A single-select switch: a muted track with a sliding pill behind the
+   selected segment. Shares its visual language with l-tabs[variant='enclosed']
+   (same neutral-subtle track + surface pill), but carries radio-group
+   semantics instead of tabs.
+
+   Structural selectors (not [role='…']) so the control is styled from plain
+   light DOM — it is progressive, so it must look right before JS adds ARIA.
+   The host is the flex track; its `<button>` children are the segments. JS
+   only enhances (roles, keyboard, and the sliding pill offsets).
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control {
+    --_height: var(--l-size-control-md);
+    --_pad: 0.1875rem;
+    --_duration: 150ms;
+    --_easing: cubic-bezier(0.25, 0.1, 0.25, 1);
+
+    display: inline-flex;
+    position: relative;
+    align-items: stretch;
+    height: var(--_height);
+    padding: var(--_pad);
+    gap: calc(var(--spacing) * 0.5);
+    background: var(--l-color-bg-fill-neutral-subtle);
+    border-radius: var(--border-radius, var(--l-radius-lg));
+    /* Match the form-control border (--l-color-border, as used by .l-button,
+       l-select, and l-input) so the track lines up with dropdowns in a toolbar
+       — not the lighter --l-color-divider that enclosed tabs use. */
+    box-shadow: inset 0 0 0 1px var(--l-color-border);
+
+    /* Sliding pill behind the selected segment. Positioned by JS via
+       --_indicator-left / --_indicator-width (button offsetLeft / offsetWidth);
+       width 0 until JS runs, so it stays invisible in the no-JS fallback. */
+    &::before {
+      content: '';
+      position: absolute;
+      top: var(--_pad);
+      bottom: var(--_pad);
+      left: 0;
+      width: var(--_indicator-width, 0);
+      transform: translateX(var(--_indicator-left, 0));
+      background: var(--indicator-color, var(--l-color-surface));
+      border-radius: var(--l-radius-md);
+      box-shadow:
+        0 1px 3px 0 rgb(0 0 0 / 0.08),
+        0 1px 2px -1px rgb(0 0 0 / 0.08);
+      pointer-events: none;
+      will-change: transform, width;
+      transition:
+        transform var(--_duration) var(--_easing),
+        width var(--_duration) var(--_easing);
+    }
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Sizes — align with .l-button and form controls at the same size.
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control[size='sm'] {
+    --_height: var(--l-size-control-sm);
+  }
+
+  l-segmented-control[size='lg'] {
+    --_height: var(--l-size-control-lg);
+  }
+
+  l-segmented-control[size='xl'] {
+    --_height: var(--l-size-control-xl);
+  }
+
+  /* Whole-control disabled (host `disabled` attribute, form-associated). */
+  l-segmented-control[disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Segments
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control button {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing) * 1.5);
+    padding-inline: calc(var(--spacing) * 3);
+    margin: 0;
+    appearance: none;
+    border: none;
+    background: none;
+    border-radius: var(--l-radius-md);
+    color: var(--l-color-text-secondary);
+    font-family: inherit;
+    font-size: var(--l-text-sm);
+    font-weight: 500;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: color 150ms;
+
+    /* Icon-only segments (JS-detected, no visible text): square them. */
+    &[data-icon-only] {
+      padding-inline: 0;
+      width: calc(var(--_height) - 2 * var(--_pad));
+    }
+
+    &[aria-checked='true'] {
+      color: var(--l-color-text-primary);
+    }
+
+    @media (hover: hover) {
+      &:hover:not([aria-checked='true']):not(:disabled):not([aria-disabled='true']) {
+        color: var(--l-color-text-primary);
+      }
+    }
+
+    &:disabled,
+    &[aria-disabled='true'] {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--l-focus-ring);
+      outline-offset: -2px;
+      border-radius: var(--l-radius-sm);
+    }
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Full width
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control[full-width] {
+    display: flex;
+  }
+
+  l-segmented-control[full-width] button {
+    flex: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    l-segmented-control::before {
+      transition-duration: 0ms;
+    }
+
+    l-segmented-control button {
+      transition-duration: 0ms;
+    }
+  }
+}

package/dist/css/elements/segmented-control.css

@@ -0,0 +1,165 @@
+@layer components {
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Segmented control
+   A single-select switch: a muted track with a sliding pill behind the
+   selected segment. Shares its visual language with l-tabs[variant='enclosed']
+   (same neutral-subtle track + surface pill), but carries radio-group
+   semantics instead of tabs.
+
+   Structural selectors (not [role='…']) so the control is styled from plain
+   light DOM — it is progressive, so it must look right before JS adds ARIA.
+   The host is the flex track; its `<button>` children are the segments. JS
+   only enhances (roles, keyboard, and the sliding pill offsets).
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control {
+    --_height: var(--l-size-control-md);
+    --_pad: 0.1875rem;
+    --_duration: 150ms;
+    --_easing: cubic-bezier(0.25, 0.1, 0.25, 1);
+
+    display: inline-flex;
+    position: relative;
+    align-items: stretch;
+    height: var(--_height);
+    padding: var(--_pad);
+    gap: calc(var(--spacing) * 0.5);
+    background: var(--l-color-bg-fill-neutral-subtle);
+    border-radius: var(--border-radius, var(--l-radius-lg));
+    /* Match the form-control border (--l-color-border, as used by .l-button,
+       l-select, and l-input) so the track lines up with dropdowns in a toolbar
+       — not the lighter --l-color-divider that enclosed tabs use. */
+    box-shadow: inset 0 0 0 1px var(--l-color-border);
+
+    /* Sliding pill behind the selected segment. Positioned by JS via
+       --_indicator-left / --_indicator-width (button offsetLeft / offsetWidth);
+       width 0 until JS runs, so it stays invisible in the no-JS fallback. */
+    &::before {
+      content: '';
+      position: absolute;
+      top: var(--_pad);
+      bottom: var(--_pad);
+      left: 0;
+      width: var(--_indicator-width, 0);
+      transform: translateX(var(--_indicator-left, 0));
+      background: var(--indicator-color, var(--l-color-surface));
+      border-radius: var(--l-radius-md);
+      box-shadow:
+        0 1px 3px 0 rgb(0 0 0 / 0.08),
+        0 1px 2px -1px rgb(0 0 0 / 0.08);
+      pointer-events: none;
+      will-change: transform, width;
+      transition:
+        transform var(--_duration) var(--_easing),
+        width var(--_duration) var(--_easing);
+    }
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Sizes — align with .l-button and form controls at the same size.
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control[size='sm'] {
+    --_height: var(--l-size-control-sm);
+  }
+
+  l-segmented-control[size='lg'] {
+    --_height: var(--l-size-control-lg);
+  }
+
+  l-segmented-control[size='xl'] {
+    --_height: var(--l-size-control-xl);
+  }
+
+  /* Whole-control disabled (host `disabled` attribute, form-associated). */
+  l-segmented-control[disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Segments
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control button {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing) * 1.5);
+    padding-inline: calc(var(--spacing) * 3);
+    margin: 0;
+    appearance: none;
+    border: none;
+    background: none;
+    border-radius: var(--l-radius-md);
+    color: var(--l-color-text-secondary);
+    font-family: inherit;
+    font-size: var(--l-text-sm);
+    font-weight: 500;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: color 150ms;
+
+    /* Icon-only segments (JS-detected, no visible text): square them. */
+    &[data-icon-only] {
+      padding-inline: 0;
+      width: calc(var(--_height) - 2 * var(--_pad));
+    }
+
+    &[aria-checked='true'] {
+      color: var(--l-color-text-primary);
+    }
+
+    @media (hover: hover) {
+      &:hover:not([aria-checked='true']):not(:disabled):not([aria-disabled='true']) {
+        color: var(--l-color-text-primary);
+      }
+    }
+
+    &:disabled,
+    &[aria-disabled='true'] {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--l-focus-ring);
+      outline-offset: -2px;
+      border-radius: var(--l-radius-sm);
+    }
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Full width
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control[full-width] {
+    display: flex;
+  }
+
+  l-segmented-control[full-width] button {
+    flex: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    l-segmented-control::before {
+      transition-duration: 0ms;
+    }
+
+    l-segmented-control button {
+      transition-duration: 0ms;
+    }
+  }
+}

package/dist/custom-elements.json

@@ -3750,6 +3750,17 @@
               "description": "The type of item: `normal` or `checkbox`.",
               "attribute": "type"
             },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'destructive' | undefined"
+              },
+              "default": "undefined",
+              "description": "Visual variant. `destructive` marks a delete-style action in red.",
+              "attribute": "variant",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "checked",
@@ -3813,6 +3824,15 @@
             }
           ],
           "attributes": [
+            {
+              "description": "Visual variant. `destructive` marks a delete-style action in red.",
+              "name": "variant",
+              "type": {
+                "text": "'destructive' | undefined"
+              },
+              "default": "undefined",
+              "fieldName": "variant"
+            },
             {
               "name": "value",
               "type": {
@@ -3864,7 +3884,13 @@
             "module": "/src/html/shared/luxen-element.js"
           },
           "tagName": "l-dropdown-item",
-          "customElement": true
+          "customElement": true,
+          "_attributes": [
+            {
+              "name": "variant",
+              "description": "destructive — Renders the item as a destructive action (red), for delete-style entries."
+            }
+          ]
         }
       ],
       "exports": [
@@ -6041,6 +6067,216 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/segmented-control/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/html/elements/segmented-control/segmented-control.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/segmented-control/segmented-control.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Fired when the selected segment changes. Bubbles; not composed.",
+          "name": "SegmentChangeEvent",
+          "members": [
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "readonly": true,
+              "default": "value"
+            },
+            {
+              "kind": "field",
+              "name": "index",
+              "type": {
+                "text": "number"
+              },
+              "readonly": true,
+              "default": "index"
+            }
+          ],
+          "superclass": {
+            "name": "Event",
+            "module": "src/html/elements/segmented-control/segmented-control.ts"
+          }
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SegmentedControl",
+          "cssProperties": [
+            {
+              "description": "Background of the sliding pill behind the selected segment.",
+              "name": "--indicator-color",
+              "default": "var(--l-color-surface)"
+            },
+            {
+              "description": "Corner radius of the track.",
+              "name": "--border-radius",
+              "default": "var(--l-radius-lg)"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Value of the selected segment (its `value` attribute, else its index).",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "SegmentedControlSize"
+              },
+              "default": "'md'",
+              "description": "Control height, aligned with buttons and form controls at the same size.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Accessible label announced for the group. Not displayed on screen.",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "fullWidth",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Stretch segments to fill the container width.",
+              "attribute": "full-width",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "formResetCallback"
+            },
+            {
+              "kind": "method",
+              "name": "formStateRestoreCallback",
+              "parameters": [
+                {
+                  "name": "state",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "mode",
+                  "type": {
+                    "text": "'restore' | 'autocomplete'"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "description": "Fired when the selected segment changes. Not cancelable. Bubbles. Properties: `value: string`, `index: number`.",
+              "cancelable": false
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Value of the selected segment (its `value` attribute, else its index).",
+              "fieldName": "value"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "SegmentedControlSize"
+              },
+              "default": "'md'",
+              "description": "Control height, aligned with buttons and form controls at the same size.",
+              "fieldName": "size"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Accessible label announced for the group. Not displayed on screen.",
+              "fieldName": "label"
+            },
+            {
+              "name": "full-width",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Stretch segments to fill the container width.",
+              "fieldName": "fullWidth"
+            }
+          ],
+          "superclass": {
+            "name": "LuxenFormAssociatedElement",
+            "module": "/src/html/shared/luxen-form-associated-element.js"
+          },
+          "tagName": "l-segmented-control",
+          "customElement": true,
+          "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.",
+          "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```"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SegmentChangeEvent",
+          "declaration": {
+            "name": "SegmentChangeEvent",
+            "module": "src/html/elements/segmented-control/segmented-control.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SegmentedControl",
+          "declaration": {
+            "name": "SegmentedControl",
+            "module": "src/html/elements/segmented-control/segmented-control.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/select/index.ts",

package/dist/elements/avatar/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/html/elements/avatar/avatar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAqB7D;;;;;;;;;;;;GAYG;AACH,qBAAa,MAAO,SAAQ,YAAY;IACtC,MAAM,CAAC,MAAM,4BAAwB;IAErC,qFAAqF;IAErF,GAAG,SAAM;IAET,6EAA6E;IAE7E,IAAI,SAAM;IAEV,8DAA8D;IAE9D,IAAI,SAAQ;IAEZ,4DAA4D;IAE5D,KAAK,SAAK;IAEV,+DAA+D;IAE/D,WAAW,UAAS;IAEX,OAAO,CAAC,SAAS,CAAS;IAEnC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMxC,iBAAiB;IAOjB,OAAO;IAgBP,OAAO,KAAK,IAAI,GAEf;IAED,MAAM;IAkCN,OAAO,CAAC,QAAQ,CAEd;CACH"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/html/elements/avatar/avatar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AA0C7D;;;;;;;;;;;;GAYG;AACH,qBAAa,MAAO,SAAQ,YAAY;IACtC,MAAM,CAAC,MAAM,4BAAwB;IAErC,qFAAqF;IAErF,GAAG,SAAM;IAET,6EAA6E;IAE7E,IAAI,SAAM;IAEV,8DAA8D;IAE9D,IAAI,SAAQ;IAEZ,4DAA4D;IAE5D,KAAK,SAAK;IAEV,+DAA+D;IAE/D,WAAW,UAAS;IAEX,OAAO,CAAC,SAAS,CAAS;IAEnC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMxC,iBAAiB;IAOjB,OAAO;IAgBP,OAAO,KAAK,IAAI,GAEf;IAED,MAAM;IAkCN,OAAO,CAAC,QAAQ,CAEd;CACH"}

package/dist/elements/avatar/avatar.js

@@ -11,13 +11,33 @@ import { property, state } from 'lit/decorators.js';
 import hostStyles from '../../shared/styles/host.styles.js';
 import rawStyles from './avatar.css?inline';
 const styles = unsafeCSS(rawStyles);
-function getInitials(name) {
-    return name
-        .match(/(\b\S)?/g)
-        .join('')
-        .match(/(^\S|\S$)?/g)
-        .join('')
-        .toUpperCase();
+/**
+ * Extracts up to two uppercase initials from a name: the first letter of the
+ * first word, plus the first letter of the last word when there is more than one.
+ *
+ * Splits on whitespace rather than relying on a `\b`/`\w` regex, which only
+ * recognises ASCII and mangles accented or non-ASCII names.
+ *
+ * @param name - The name to extract initials from. Defaults to an empty string.
+ * @return The uppercased initials, or an empty string when `name` is blank.
+ *
+ * @example getInitials('John Doe')            // 'JD'
+ * @example getInitials('Markus Nösterer')     // 'MN'  (accents preserved)
+ * @example getInitials('Cher')                // 'C'   (single word → one initial)
+ * @example getInitials('  John   Doe  ')      // 'JD'  (extra whitespace ignored)
+ * @example getInitials('')                    // ''
+ */
+function getInitials(name = '') {
+    const words = name.normalize('NFC').trim().split(/\s+/).filter(Boolean);
+    if (words.length === 0)
+        return '';
+    // Spreading iterates by code point, so an accented letter (or an astral
+    // character like an emoji) is taken whole instead of a broken half.
+    // oxlint-disable-next-line typescript/no-misused-spread -- code-point-safe first char is the intent
+    const firstLetter = (word) => [...word][0];
+    const first = firstLetter(words[0]);
+    const last = words.length > 1 ? firstLetter(words[words.length - 1]) : '';
+    return (first + last).toUpperCase();
 }
 const defaultIcon = svg `<svg class="icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
   <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />

package/dist/elements/dropdown-item/dropdown-item.css

@@ -44,6 +44,24 @@
   background: var(--l-color-bg-state-hover);
 }
 
+/* Destructive variant — a delete-style action. Red label at rest, danger-tinted
+   fill and focus ring on hover/focus so the highlight reads as "danger" rather
+   than the neutral hover tint. */
+:host([variant='destructive']) .item {
+  color: var(--l-color-text-danger);
+}
+
+:host([variant='destructive']) .item:focus-visible {
+  background: var(--l-color-bg-fill-danger-soft);
+  outline-color: var(--l-color-text-danger);
+}
+
+@media (hover: hover) {
+  :host([variant='destructive']) .item:hover {
+    background: var(--l-color-bg-fill-danger-soft);
+  }
+}
+
 .check {
   display: flex;
   width: 16px;

package/dist/elements/dropdown-item/dropdown-item.d.ts

@@ -12,6 +12,8 @@ import { LuxenElement } from '../../shared/luxen-element.js';
  *
  * @cssproperty --color - Text color.
  *
+ * @attribute variant - destructive — Renders the item as a destructive action (red), for delete-style entries.
+ *
  * @customElement l-dropdown-item
  */
 export declare class DropdownItem extends LuxenElement {
@@ -23,6 +25,8 @@ export declare class DropdownItem extends LuxenElement {
     accessor disabled: boolean;
     /** The type of item: `normal` or `checkbox`. */
     accessor type: 'normal' | 'checkbox';
+    /** Visual variant. `destructive` marks a delete-style action in red. */
+    accessor variant: 'destructive' | undefined;
     /** Whether the checkbox item is checked. */
     accessor checked: boolean;
     /** Whether this item's submenu is open. Managed by the parent `l-dropdown`. */