luxen-ui 0.2.1 → 0.4.0

package/dist/elements/avatar/avatar.css

@@ -93,7 +93,9 @@ img {
   border: none;
   border-radius: calc(var(--_size) * 0.2);
   background-color: var(--color, var(--l-color-bg-fill-neutral-soft));
-  color: oklch(from var(--color) 0.45 calc(c * 2) h);
+  color: oklch(
+    from var(--color) calc(0.65 - 0.2 * sign(l - 0.5)) calc(c * (1.75 + 0.25 * sign(l - 0.5))) h
+  );
   font-size: var(--_font-size);
   font-weight: 500;
   line-height: 1;
@@ -102,6 +104,16 @@ img {
   cursor: inherit;
 }
 
+@supports (color: contrast-color(red vs black, white)) {
+  .base {
+    color: contrast-color(
+      var(--color, var(--l-color-bg-fill-neutral-soft)) vs
+        oklch(from var(--color) 0.45 calc(c * 2) h),
+      oklch(from var(--color) 0.85 calc(c * 1.5) h) to AA
+    );
+  }
+}
+
 button.base {
   cursor: pointer;
 }
@@ -115,12 +127,6 @@ button.base:hover {
   box-shadow: inset 0 0 0 1.5px var(--l-color-border-interactive);
 }
 
-@media (prefers-color-scheme: dark) {
-  .base {
-    color: oklch(from var(--color) 0.85 calc(c * 1.5) h);
-  }
-}
-
 @container style(--appearance: circle) {
   .base {
     border-radius: 50%;

package/dist/elements/carousel/carousel.css

@@ -16,6 +16,7 @@
   --dot-color: #9ca3af;
   --dot-color-active: #111827;
   --dot-margin: 0.5rem 0;
+  --dot-edge-scale: 0.5;
 
   --scrollbar-color: #d1d5db transparent;
 
@@ -180,6 +181,12 @@
   padding-block: 0.5rem;
   border: 0;
   cursor: pointer;
+  transition: transform 180ms ease;
+  transform-origin: center;
+}
+
+.dot[data-edge] {
+  transform: scale(var(--dot-edge-scale));
 }
 
 .dot--bar i {

package/dist/elements/carousel/carousel.d.ts

@@ -33,6 +33,7 @@ import { LuxenElement } from '../../shared/luxen-element';
  * @cssproperty --dot-color - Color of inactive dots.
  * @cssproperty --dot-color-active - Color of active dot.
  * @cssproperty --dot-margin - Margin around dots container.
+ * @cssproperty --dot-edge-scale - Scale factor applied to edge dots that signal more dots exist beyond the visible window (default `0.5`).
  */
 export declare class LuxenCarousel extends LuxenElement {
     static styles: CSSResultGroup;
@@ -110,12 +111,18 @@ export declare class LuxenCarousel extends LuxenElement {
     accessor withScrollbar: boolean;
     accessor withFullscreen: boolean;
     accessor dotAppearance: 'circle' | 'bar';
+    /**
+     * Maximum number of dots rendered at once. When the snap count exceeds this,
+     * a sliding window keeps the active dot in view and shrinks the edge dot(s)
+     * on the side where dots are hidden. `0` (default) renders all dots.
+     */
+    accessor maxVisibleDots: number;
     accessor scrollButtonsPosition: 'inside' | 'outside';
+    private accessor _selectedSnap;
     scrollButtons: HTMLElement;
     previousBtn: HTMLButtonElement;
     nextBtn: HTMLButtonElement;
     container: HTMLSlotElement;
-    dotNodes: HTMLButtonElement[];
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -142,6 +149,7 @@ export declare class LuxenCarousel extends LuxenElement {
     isActive(): boolean;
     renderFullscreenButton(): import("lit").TemplateResult<1>;
     renderNextPreviousButtons(): import("lit").TemplateResult<1>;
+    private renderDots;
     render(): import("lit").TemplateResult<1>;
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../src/html/elements/carousel/carousel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAG1E,KAAK,cAAc,GAAG,GAAG,GAAG,GAAG,CAAC;AAChC,KAAK,mBAAmB,GACpB,OAAO,GACP,QAAQ,GACR,KAAK,GACL,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;AACpE,KAAK,wBAAwB,GAAG,MAAM,GAAG,MAAM,CAAC;AAChD,KAAK,uBAAuB,GAAG,WAAW,GAAG,WAAW,GAAG,KAAK,CAAC;AAEjE,OAAO,EAAmB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhF,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAM1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBAAa,aAAc,SAAQ,YAAY;IAC7C,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAE9D,KAAK,EAAG,iBAAiB,CAAC;IAE1B;;OAEG;IAEH,QAAQ,CAAC,QAAQ,SAAK;IAEtB;;;;OAIG;IAEH,QAAQ,CAAC,eAAe,EAAE,GAAG,CAAC;IAE9B;;;;OAIG;IAEH,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAO;IAEpC;;;;OAIG;IAEH,QAAQ,CAAC,KAAK,EAAE,mBAAmB,CAAW;IAE9C;;OAEG;IAEH,QAAQ,CAAC,WAAW,EAAE,GAAG,CAAM;IAE/B;;;;OAIG;IAEH,QAAQ,CAAC,IAAI,UAAS;IAEtB;;;;OAIG;IAEH,QAAQ,CAAC,QAAQ,UAAS;IAE1B;;;;OAIG;IAEH,QAAQ,CAAC,QAAQ,SAAM;IAEvB;;;;OAIG;IAEH,QAAQ,CAAC,SAAS,UAAS;IAE3B;;;;OAIG;IAEH,QAAQ,CAAC,cAAc,EAAE,wBAAwB,CAAK;IAEtD;;;;OAIG;IAEH,QAAQ,CAAC,UAAU,SAAK;IAExB;;;;OAIG;IAEH,QAAQ,CAAC,aAAa,EAAE,uBAAuB,CAAe;IAG9D,QAAQ,CAAC,MAAM,UAAS;IAGxB,QAAQ,CAAC,QAAQ,UAAS;IAG1B,QAAQ,CAAC,aAAa,UAAS;IAG/B,QAAQ,CAAC,cAAc,UAAS;IAGhC,QAAQ,CAAC,aAAa,EAAE,QAAQ,GAAG,KAAK,CAAS;IAGjD,QAAQ,CAAC,qBAAqB,EAAE,QAAQ,GAAG,SAAS,CAAY;IAEtC,aAAa,EAAG,WAAW,CAAC;IAC3B,WAAW,EAAG,iBAAiB,CAAC;IACpC,OAAO,EAAG,iBAAiB,CAAC;IAC9B,SAAS,EAAG,eAAe,CAAC;IAC/B,QAAQ,EAAG,iBAAiB,EAAE,CAAC;;IAcxC,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB;cAOV,YAAY,IAAI,IAAI;IAIvC,SAAS,CAAC,WAAW;IAWrB,SAAS,CAAC,cAAc;IAMxB,SAAS,CAAC,MAAM;IAIhB,SAAS,CAAC,QAAQ;IAKlB,SAAS,CAAC,QAAQ;IAOlB,SAAS,CAAC,QAAQ;IAIlB,SAAS,CAAC,oBAAoB;IAK9B,SAAS,CAAC,oBAAoB;IAK9B,SAAS,CAAC,gBAAgB;IAiBX,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAM9D,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,cAAc;IAKtB,OAAO,IAAI,gBAAgB;IA0B3B,IAAI;IAIJ,QAAQ;IAIR,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO;IAIvC,UAAU;IAIV,YAAY;IAIZ,QAAQ;IAIR,sBAAsB;IAoBtB,yBAAyB;IAyChB,MAAM;CAuChB"}
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../src/html/elements/carousel/carousel.ts"],"names":[],"mappings":"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"}

package/dist/elements/carousel/carousel.js

@@ -15,11 +15,11 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _LuxenCarousel_autoplay_accessor_storage, _LuxenCarousel_autoplayOptions_accessor_storage, _LuxenCarousel_axis_accessor_storage, _LuxenCarousel_align_accessor_storage, _LuxenCarousel_breakpoints_accessor_storage, _LuxenCarousel_loop_accessor_storage, _LuxenCarousel_dragFree_accessor_storage, _LuxenCarousel_duration_accessor_storage, _LuxenCarousel_skipSnaps_accessor_storage, _LuxenCarousel_slidesToScroll_accessor_storage, _LuxenCarousel_startIndex_accessor_storage, _LuxenCarousel_containScroll_accessor_storage, _LuxenCarousel_single_accessor_storage, _LuxenCarousel_withDots_accessor_storage, _LuxenCarousel_withScrollbar_accessor_storage, _LuxenCarousel_withFullscreen_accessor_storage, _LuxenCarousel_dotAppearance_accessor_storage, _LuxenCarousel_scrollButtonsPosition_accessor_storage;
+var _LuxenCarousel_autoplay_accessor_storage, _LuxenCarousel_autoplayOptions_accessor_storage, _LuxenCarousel_axis_accessor_storage, _LuxenCarousel_align_accessor_storage, _LuxenCarousel_breakpoints_accessor_storage, _LuxenCarousel_loop_accessor_storage, _LuxenCarousel_dragFree_accessor_storage, _LuxenCarousel_duration_accessor_storage, _LuxenCarousel_skipSnaps_accessor_storage, _LuxenCarousel_slidesToScroll_accessor_storage, _LuxenCarousel_startIndex_accessor_storage, _LuxenCarousel_containScroll_accessor_storage, _LuxenCarousel_single_accessor_storage, _LuxenCarousel_withDots_accessor_storage, _LuxenCarousel_withScrollbar_accessor_storage, _LuxenCarousel_withFullscreen_accessor_storage, _LuxenCarousel_dotAppearance_accessor_storage, _LuxenCarousel_maxVisibleDots_accessor_storage, _LuxenCarousel_scrollButtonsPosition_accessor_storage, _LuxenCarousel__selectedSnap_accessor_storage;
 import EmblaCarousel from 'embla-carousel';
 import Autoplay from 'embla-carousel-autoplay';
-import { html, unsafeCSS } from 'lit';
-import { property, query, queryAll } from 'lit/decorators.js';
+import { html, nothing, unsafeCSS } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
 import { map } from 'lit/directives/map.js';
 import { LuxenElement } from '../../shared/luxen-element';
 import hostStyles from '../../shared/styles/host.styles';
@@ -53,6 +53,7 @@ const styles = unsafeCSS(rawStyles);
  * @cssproperty --dot-color - Color of inactive dots.
  * @cssproperty --dot-color-active - Color of active dot.
  * @cssproperty --dot-margin - Margin around dots container.
+ * @cssproperty --dot-edge-scale - Scale factor applied to edge dots that signal more dots exist beyond the visible window (default `0.5`).
  */
 export class LuxenCarousel extends LuxenElement {
     /**
@@ -145,8 +146,17 @@ export class LuxenCarousel extends LuxenElement {
     set withFullscreen(value) { __classPrivateFieldSet(this, _LuxenCarousel_withFullscreen_accessor_storage, value, "f"); }
     get dotAppearance() { return __classPrivateFieldGet(this, _LuxenCarousel_dotAppearance_accessor_storage, "f"); }
     set dotAppearance(value) { __classPrivateFieldSet(this, _LuxenCarousel_dotAppearance_accessor_storage, value, "f"); }
+    /**
+     * Maximum number of dots rendered at once. When the snap count exceeds this,
+     * a sliding window keeps the active dot in view and shrinks the edge dot(s)
+     * on the side where dots are hidden. `0` (default) renders all dots.
+     */
+    get maxVisibleDots() { return __classPrivateFieldGet(this, _LuxenCarousel_maxVisibleDots_accessor_storage, "f"); }
+    set maxVisibleDots(value) { __classPrivateFieldSet(this, _LuxenCarousel_maxVisibleDots_accessor_storage, value, "f"); }
     get scrollButtonsPosition() { return __classPrivateFieldGet(this, _LuxenCarousel_scrollButtonsPosition_accessor_storage, "f"); }
     set scrollButtonsPosition(value) { __classPrivateFieldSet(this, _LuxenCarousel_scrollButtonsPosition_accessor_storage, value, "f"); }
+    get _selectedSnap() { return __classPrivateFieldGet(this, _LuxenCarousel__selectedSnap_accessor_storage, "f"); }
+    set _selectedSnap(value) { __classPrivateFieldSet(this, _LuxenCarousel__selectedSnap_accessor_storage, value, "f"); }
     constructor() {
         super();
         _LuxenCarousel_autoplay_accessor_storage.set(this, 0);
@@ -166,7 +176,9 @@ export class LuxenCarousel extends LuxenElement {
         _LuxenCarousel_withScrollbar_accessor_storage.set(this, false);
         _LuxenCarousel_withFullscreen_accessor_storage.set(this, false);
         _LuxenCarousel_dotAppearance_accessor_storage.set(this, 'bar');
+        _LuxenCarousel_maxVisibleDots_accessor_storage.set(this, 0);
         _LuxenCarousel_scrollButtonsPosition_accessor_storage.set(this, 'inside');
+        _LuxenCarousel__selectedSnap_accessor_storage.set(this, 0);
         this.next = this.next.bind(this);
         this.previous = this.previous.bind(this);
         this.onInit = this.onInit.bind(this);
@@ -233,14 +245,7 @@ export class LuxenCarousel extends LuxenElement {
         this.previousBtn.toggleAttribute('disabled', !this.embla.canScrollPrev());
         this.nextBtn.toggleAttribute('disabled', !this.embla.canScrollNext());
         this.scrollButtons.classList.toggle('scroll-buttons--disabled', !canScroll);
-        if (this.withDots) {
-            const previous = this.embla.previousScrollSnap();
-            const selected = this.embla.selectedScrollSnap();
-            this.dotNodes[previous]?.classList.remove('dot--selected');
-            this.dotNodes[previous]?.removeAttribute('aria-selected');
-            this.dotNodes[selected]?.classList.add('dot--selected');
-            this.dotNodes[selected]?.setAttribute('aria-selected', 'true');
-        }
+        this._selectedSnap = this.embla.selectedScrollSnap();
     }
     async updated(changedProperties) {
         if (changedProperties.has('autoplay') && this.autoplay) {
@@ -360,6 +365,53 @@ export class LuxenCarousel extends LuxenElement {
       </button>
     </div>`;
     }
+    renderDots() {
+        if (!this.embla)
+            return nothing;
+        const snaps = this.embla.scrollSnapList();
+        const total = snaps.length;
+        if (total === 0)
+            return nothing;
+        const selected = this._selectedSnap;
+        const max = this.maxVisibleDots;
+        let start = 0;
+        let end = total;
+        if (max > 0 && max < total) {
+            const half = Math.floor((max - 1) / 2);
+            start = Math.max(0, selected - half);
+            end = Math.min(total, start + max);
+            if (end - start < max)
+                start = Math.max(0, end - max);
+        }
+        const edgeStart = start > 0;
+        const edgeEnd = end < total;
+        return html `<div
+      class="dots"
+      part="dots"
+      role="tablist"
+    >
+      ${map(snaps.slice(start, end), (_, i) => {
+            const index = start + i;
+            const isFirst = i === 0;
+            const isLast = i === end - start - 1;
+            const isSelected = index === selected;
+            const isEdge = !isSelected && ((isFirst && edgeStart) || (isLast && edgeEnd));
+            return html `<button
+          part="button-dot"
+          type="button"
+          role="tab"
+          class="dot dot--${this.dotAppearance} ${isSelected ? 'dot--selected' : ''}"
+          aria-label="Go to slide ${index + 1}"
+          aria-selected=${isSelected ? 'true' : nothing}
+          data-index="${index}"
+          data-edge=${isEdge ? '' : nothing}
+          @click=${this.handleDotClick}
+        >
+          <i></i>
+        </button>`;
+        })}
+    </div>`;
+    }
     render() {
         return html `
       <div class="wrapper ${this.isActive() ? '' : 'inactive'}">
@@ -374,33 +426,12 @@ export class LuxenCarousel extends LuxenElement {
           ></slot>
         </div>
         ${this.withFullscreen ? this.renderFullscreenButton() : ''}
-        ${this.renderNextPreviousButtons()}
-        ${this.withDots
-            ? html `<div
-              class="dots"
-              part="dots"
-              role="tablist"
-            >
-              ${map(this.embla.scrollSnapList(), (_, index) => {
-                return html `<button
-                  part="button-dot"
-                  type="button"
-                  role="tab"
-                  class="dot dot--${this.dotAppearance}"
-                  aria-label="Go to slide ${index + 1}"
-                  data-index="${index}"
-                  @click=${this.handleDotClick}
-                >
-                  <i></i>
-                </button>`;
-            })}
-            </div> `
-            : ''}
+        ${this.renderNextPreviousButtons()} ${this.withDots ? this.renderDots() : ''}
       </div>
     `;
     }
 }
-_LuxenCarousel_autoplay_accessor_storage = new WeakMap(), _LuxenCarousel_autoplayOptions_accessor_storage = new WeakMap(), _LuxenCarousel_axis_accessor_storage = new WeakMap(), _LuxenCarousel_align_accessor_storage = new WeakMap(), _LuxenCarousel_breakpoints_accessor_storage = new WeakMap(), _LuxenCarousel_loop_accessor_storage = new WeakMap(), _LuxenCarousel_dragFree_accessor_storage = new WeakMap(), _LuxenCarousel_duration_accessor_storage = new WeakMap(), _LuxenCarousel_skipSnaps_accessor_storage = new WeakMap(), _LuxenCarousel_slidesToScroll_accessor_storage = new WeakMap(), _LuxenCarousel_startIndex_accessor_storage = new WeakMap(), _LuxenCarousel_containScroll_accessor_storage = new WeakMap(), _LuxenCarousel_single_accessor_storage = new WeakMap(), _LuxenCarousel_withDots_accessor_storage = new WeakMap(), _LuxenCarousel_withScrollbar_accessor_storage = new WeakMap(), _LuxenCarousel_withFullscreen_accessor_storage = new WeakMap(), _LuxenCarousel_dotAppearance_accessor_storage = new WeakMap(), _LuxenCarousel_scrollButtonsPosition_accessor_storage = new WeakMap();
+_LuxenCarousel_autoplay_accessor_storage = new WeakMap(), _LuxenCarousel_autoplayOptions_accessor_storage = new WeakMap(), _LuxenCarousel_axis_accessor_storage = new WeakMap(), _LuxenCarousel_align_accessor_storage = new WeakMap(), _LuxenCarousel_breakpoints_accessor_storage = new WeakMap(), _LuxenCarousel_loop_accessor_storage = new WeakMap(), _LuxenCarousel_dragFree_accessor_storage = new WeakMap(), _LuxenCarousel_duration_accessor_storage = new WeakMap(), _LuxenCarousel_skipSnaps_accessor_storage = new WeakMap(), _LuxenCarousel_slidesToScroll_accessor_storage = new WeakMap(), _LuxenCarousel_startIndex_accessor_storage = new WeakMap(), _LuxenCarousel_containScroll_accessor_storage = new WeakMap(), _LuxenCarousel_single_accessor_storage = new WeakMap(), _LuxenCarousel_withDots_accessor_storage = new WeakMap(), _LuxenCarousel_withScrollbar_accessor_storage = new WeakMap(), _LuxenCarousel_withFullscreen_accessor_storage = new WeakMap(), _LuxenCarousel_dotAppearance_accessor_storage = new WeakMap(), _LuxenCarousel_maxVisibleDots_accessor_storage = new WeakMap(), _LuxenCarousel_scrollButtonsPosition_accessor_storage = new WeakMap(), _LuxenCarousel__selectedSnap_accessor_storage = new WeakMap();
 LuxenCarousel.styles = [hostStyles, styles];
 __decorate([
     property({ type: Number, reflect: true })
@@ -453,9 +484,15 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'dot-appearance' })
 ], LuxenCarousel.prototype, "dotAppearance", null);
+__decorate([
+    property({ type: Number, attribute: 'max-visible-dots' })
+], LuxenCarousel.prototype, "maxVisibleDots", null);
 __decorate([
     property({ type: String, attribute: 'scroll-buttons-position' })
 ], LuxenCarousel.prototype, "scrollButtonsPosition", null);
+__decorate([
+    state()
+], LuxenCarousel.prototype, "_selectedSnap", null);
 __decorate([
     query('.scroll-buttons')
 ], LuxenCarousel.prototype, "scrollButtons", void 0);
@@ -468,6 +505,3 @@ __decorate([
 __decorate([
     query('.container')
 ], LuxenCarousel.prototype, "container", void 0);
-__decorate([
-    queryAll('.dot')
-], LuxenCarousel.prototype, "dotNodes", void 0);

package/dist/elements/dialog/dialog.css

@@ -69,18 +69,28 @@ dialog {
   line-height: 1.4;
 }
 
+/* Pin body and footer so the layout stays correct when [without-header]
+   removes the header and only two children auto-place into the grid. */
 [part='body'] {
+  grid-row: 2;
   padding-inline: var(--padding);
   overflow-y: auto;
 }
 
 [part='footer'] {
+  grid-row: 3;
   display: flex;
   place-content: end;
   gap: 0.5rem;
   padding: var(--padding);
 }
 
+/* Without a header, the body has to provide its own block-start padding
+   (normally inherited visually from the header padding above it). */
+:host([without-header]) [part='body'] {
+  padding-block-start: var(--padding);
+}
+
 ::slotted(menu[slot='footer']) {
   display: contents;
 }

package/dist/elements/dropdown/dropdown.css

@@ -1,6 +1,8 @@
 :host {
+  --padding: 0.25rem;
+
   --background: var(--l-color-bg-surface, Canvas);
-  --radius: 6px;
+  --border-radius: 6px;
   --shadow: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -2px rgb(0 0 0 / 6%);
   --show-duration: 150;
   --hide-duration: 150;
@@ -19,13 +21,22 @@
   box-sizing: border-box;
   width: max-content;
   min-width: anchor-size(width);
-  padding: 0.25rem;
+  padding: var(--padding);
   margin: 0;
   border: 1px solid var(--l-color-border-overlay, light-dark(#e5e7eb, #374151));
-  border-radius: var(--radius);
+  border-radius: var(--border-radius);
   background: var(--background);
   color: var(--l-color-text-primary, CanvasText);
   box-shadow: var(--shadow);
   font-size: 0.875rem;
   line-height: 1.5;
 }
+
+/* Lightweight separator alternative to <l-divider> — same dimensions, no extra import. */
+::slotted(hr) {
+  height: 1px;
+  margin-block: var(--padding);
+  margin-inline: calc(var(--padding) * -1);
+  border: 0;
+  background: var(--l-color-divider);
+}

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

@@ -5,12 +5,15 @@ import type { Placement } from '@floating-ui/dom';
  * A dropdown menu anchored to a trigger element.
  *
  * @slot trigger - The element that triggers the dropdown.
- * @slot - Menu content (`l-dropdown-item` elements).
+ * @slot header - Optional content rendered above the menu items (e.g. a user profile row). Use an `<l-divider>` (or `<hr>`) after it to separate from items.
+ * @slot - Menu content (`l-dropdown-item` elements). Drop an `<l-divider>` (or `<hr>`) between items to render a section separator.
+ * @slot footer - Optional content rendered below the menu items (e.g. a version label or shortcut row). Use an `<l-divider>` (or `<hr>`) before it to separate from items.
  *
  * @csspart panel - The floating menu container.
  *
  * @cssproperty --background - Panel background color.
- * @cssproperty --radius - Panel border radius. Default `8px`.
+ * @cssproperty --border-radius - Panel border radius. Default `8px`.
+ * @cssproperty --padding - Panel inner padding. Default `0.25rem`. Slotted `<l-divider>` elements bleed by this amount on each side to span the panel edges.
  * @cssproperty --shadow - Panel box shadow.
  * @cssproperty --show-duration - Show animation duration in ms. Default `150`.
  * @cssproperty --hide-duration - Hide animation duration in ms. Default `150`.

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/html/elements/dropdown/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AASlD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBAAa,aAAc,SAAQ,YAAY;IAC7C,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,SAAS,CAId;IAEH,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,iBAAiB,CAAK;IAE9B,oCAAoC;IAEpC,QAAQ,CAAC,IAAI,UAAS;IAEtB,wCAAwC;IAExC,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAkB;IAE/C,2CAA2C;IAE3C,QAAQ,CAAC,QAAQ,SAAK;IAEtB,qCAAqC;IAErC,QAAQ,CAAC,QAAQ,UAAS;IAE1B,OAAO,KAAK,UAAU,GAGrB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,YAAY;IAOpB,IAAI;IAKJ,IAAI;IAKJ,MAAM;IAOG,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;YAQhC,iBAAiB;IAyB/B,OAAO,CAAC,cAAc;IActB,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,gBAAgB;IAgBxB,OAAO,CAAC,eAAe,CAErB;IAEF,OAAO,CAAC,iBAAiB,CAYvB;IAEF,OAAO,CAAC,eAAe,CAiCrB;IAEF,OAAO,CAAC,YAAY,CAKlB;IAEF,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,WAAW;IAWnB,2DAA2D;IAC3D,OAAO,CAAC,SAAS,CAMf;IAEO,MAAM;CAqBhB"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/html/elements/dropdown/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AASlD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,aAAc,SAAQ,YAAY;IAC7C,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,SAAS,CAId;IAEH,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,iBAAiB,CAAK;IAE9B,oCAAoC;IAEpC,QAAQ,CAAC,IAAI,UAAS;IAEtB,wCAAwC;IAExC,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAkB;IAE/C,2CAA2C;IAE3C,QAAQ,CAAC,QAAQ,SAAK;IAEtB,qCAAqC;IAErC,QAAQ,CAAC,QAAQ,UAAS;IAE1B,OAAO,KAAK,UAAU,GAGrB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,YAAY;IAOpB,IAAI;IAKJ,IAAI;IAKJ,MAAM;IAOG,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;YAQhC,iBAAiB;IAyB/B,OAAO,CAAC,cAAc;IActB,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,gBAAgB;IAgBxB,OAAO,CAAC,eAAe,CAQrB;IAEF,OAAO,CAAC,iBAAiB,CAYvB;IAEF,OAAO,CAAC,eAAe,CAiCrB;IAEF,OAAO,CAAC,YAAY,CAKlB;IAEF,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,WAAW;IAWnB,2DAA2D;IAC3D,OAAO,CAAC,SAAS,CAMf;IAEO,MAAM;CAwBhB"}

package/dist/elements/dropdown/dropdown.js

@@ -28,12 +28,15 @@ const styles = unsafeCSS(rawStyles);
  * A dropdown menu anchored to a trigger element.
  *
  * @slot trigger - The element that triggers the dropdown.
- * @slot - Menu content (`l-dropdown-item` elements).
+ * @slot header - Optional content rendered above the menu items (e.g. a user profile row). Use an `<l-divider>` (or `<hr>`) after it to separate from items.
+ * @slot - Menu content (`l-dropdown-item` elements). Drop an `<l-divider>` (or `<hr>`) between items to render a section separator.
+ * @slot footer - Optional content rendered below the menu items (e.g. a version label or shortcut row). Use an `<l-divider>` (or `<hr>`) before it to separate from items.
  *
  * @csspart panel - The floating menu container.
  *
  * @cssproperty --background - Panel background color.
- * @cssproperty --radius - Panel border radius. Default `8px`.
+ * @cssproperty --border-radius - Panel border radius. Default `8px`.
+ * @cssproperty --padding - Panel inner padding. Default `0.25rem`. Slotted `<l-divider>` elements bleed by this amount on each side to span the panel edges.
  * @cssproperty --shadow - Panel box shadow.
  * @cssproperty --show-duration - Show animation duration in ms. Default `150`.
  * @cssproperty --hide-duration - Hide animation duration in ms. Default `150`.
@@ -59,9 +62,15 @@ export class LuxenDropdown extends LuxenElement {
         _LuxenDropdown_distance_accessor_storage.set(this, 4);
         _LuxenDropdown_disabled_accessor_storage.set(this, false);
         // --- Event handlers ---
-        this._onTriggerClick = () => {
-            if (!this.disabled)
-                this.toggle();
+        this._onTriggerClick = (e) => {
+            if (this.disabled)
+                return;
+            this.toggle();
+            // Space/Enter on a native button dispatches click with detail=0; focus the
+            // first item so the menu is keyboard-navigable immediately on open.
+            if (this.open && e.detail === 0) {
+                requestAnimationFrame(() => this._focusFirstItem());
+            }
         };
         this._onTriggerKeyDown = (e) => {
             if (this.disabled)
@@ -296,12 +305,15 @@ export class LuxenDropdown extends LuxenElement {
       <div
         popover="auto"
         part="panel"
-        role="menu"
         @keydown=${this._onPanelKeyDown}
         @click=${this._onItemClick}
         @toggle=${this._onToggle}
       >
-        <slot></slot>
+        <slot name="header"></slot>
+        <div role="menu">
+          <slot></slot>
+        </div>
+        <slot name="footer"></slot>
       </div>
     `;
     }

package/dist/elements/input-otp/input-otp.d.ts

@@ -9,8 +9,13 @@ import { LuxenElement } from '../../shared/luxen-element';
  * @customElement l-input-otp
  *
  * @cssproperty --digits - Number of digit boxes (default: 6). Must match input's maxlength.
- * @cssproperty --size - Cell width and height (default: 2.75rem). Font size scales automatically.
- * @cssproperty --gap - Space between cells (default: 0.5rem).
+ * @cssproperty --cell-size - Cell width and height (default: 2.75rem). Font size scales automatically.
+ * @cssproperty --cell-gap - Space between cells (default: 0.5rem).
+ * @cssproperty --cell-bg-color - Cell background color.
+ * @cssproperty --cell-border-color - Cell border color.
+ * @cssproperty --cell-border-radius - Cell border-radius.
+ * @cssproperty --cell-focus-color - Border + ring color of the active (focused) cell.
+ * @cssproperty --cell-focus-ring - `box-shadow` of the active cell ring (defaults to a 1px solid ring; set to `none` to disable).
  */
 export declare class LuxenInputOtp extends LuxenElement {
     createRenderRoot(): this;
@@ -27,5 +32,6 @@ export declare class LuxenInputOtp extends LuxenElement {
     private _teardown;
     private _updateCells;
     private _clearCells;
+    private _scheduleUpdateCells;
 }
 //# sourceMappingURL=input-otp.d.ts.map

package/dist/elements/input-otp/input-otp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-otp.d.ts","sourceRoot":"","sources":["../../../src/html/elements/input-otp/input-otp.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D;;;;;;;;;;;;GAYG;AACH,qBAAa,aAAc,SAAQ,YAAY;IACpC,gBAAgB;IAIzB,sFAAsF;IAEtF,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,MAAM,CAAwB;IACtC,OAAO,CAAC,YAAY,CAAgC;IACpD,OAAO,CAAC,YAAY,CAAS;IAEpB,iBAAiB;IAKjB,oBAAoB;IAO7B,OAAO,CAAC,MAAM;IA2Dd,OAAO,CAAC,SAAS;IAoBjB,OAAO,CAAC,YAAY,CAyBlB;IAEF,OAAO,CAAC,WAAW,CAIjB;CACH"}
+{"version":3,"file":"input-otp.d.ts","sourceRoot":"","sources":["../../../src/html/elements/input-otp/input-otp.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,aAAc,SAAQ,YAAY;IACpC,gBAAgB;IAIzB,sFAAsF;IAEtF,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,MAAM,CAAwB;IACtC,OAAO,CAAC,YAAY,CAAgC;IACpD,OAAO,CAAC,YAAY,CAAS;IAEpB,iBAAiB;IAKjB,oBAAoB;IAO7B,OAAO,CAAC,MAAM;IA4Dd,OAAO,CAAC,SAAS;IAoBjB,OAAO,CAAC,YAAY,CAyBlB;IAEF,OAAO,CAAC,WAAW,CAIjB;IAEF,OAAO,CAAC,oBAAoB,CAE1B;CACH"}

package/dist/elements/input-otp/input-otp.js

@@ -16,8 +16,13 @@ import { LuxenElement } from '../../shared/luxen-element';
  * @customElement l-input-otp
  *
  * @cssproperty --digits - Number of digit boxes (default: 6). Must match input's maxlength.
- * @cssproperty --size - Cell width and height (default: 2.75rem). Font size scales automatically.
- * @cssproperty --gap - Space between cells (default: 0.5rem).
+ * @cssproperty --cell-size - Cell width and height (default: 2.75rem). Font size scales automatically.
+ * @cssproperty --cell-gap - Space between cells (default: 0.5rem).
+ * @cssproperty --cell-bg-color - Cell background color.
+ * @cssproperty --cell-border-color - Cell border color.
+ * @cssproperty --cell-border-radius - Cell border-radius.
+ * @cssproperty --cell-focus-color - Border + ring color of the active (focused) cell.
+ * @cssproperty --cell-focus-ring - `box-shadow` of the active cell ring (defaults to a 1px solid ring; set to `none` to disable).
  */
 export class LuxenInputOtp extends LuxenElement {
     constructor() {
@@ -55,6 +60,9 @@ export class LuxenInputOtp extends LuxenElement {
                 cell.removeAttribute('data-active');
             }
         };
+        this._scheduleUpdateCells = () => {
+            requestAnimationFrame(this._updateCells);
+        };
     }
     createRenderRoot() {
         return this;
@@ -111,11 +119,12 @@ export class LuxenInputOtp extends LuxenElement {
         this._initialized = true;
         // Populate cells if input already has a value (e.g. disabled with prefilled value)
         this._updateCells();
-        // Events
+        // Events — focus is deferred so it runs after the click that triggered it
+        // (otherwise selectionStart is stale and the active cell flickers).
         this._input.addEventListener('input', this._updateCells);
         this._input.addEventListener('click', this._updateCells);
         this._input.addEventListener('keyup', this._updateCells);
-        this._input.addEventListener('focus', this._updateCells);
+        this._input.addEventListener('focus', this._scheduleUpdateCells);
         this._input.addEventListener('blur', this._clearCells);
     }
     _teardown() {
@@ -124,7 +133,7 @@ export class LuxenInputOtp extends LuxenElement {
         this._input.removeEventListener('input', this._updateCells);
         this._input.removeEventListener('click', this._updateCells);
         this._input.removeEventListener('keyup', this._updateCells);
-        this._input.removeEventListener('focus', this._updateCells);
+        this._input.removeEventListener('focus', this._scheduleUpdateCells);
         this._input.removeEventListener('blur', this._clearCells);
         // Restore input to direct child
         this._container.replaceWith(this._input);

package/dist/elements/tooltip/tooltip.css

@@ -1,7 +1,6 @@
 :host {
-  --background: var(--l-color-bg-fill-brand, light-dark(#1f2937, #f9fafb));
-  --color: light-dark(#fff, #111827);
-  --radius: 4px;
+  --background-color: var(--l-color-bg-fill-brand, light-dark(#1f2937, #f9fafb));
+  --border-radius: 4px;
   --max-width: 180px;
   --arrow-size: 6px;
   --show-duration: 150ms;
@@ -18,20 +17,29 @@
   max-width: var(--max-width);
   padding: 4px 8px;
   border: 0;
-  border-radius: var(--radius);
-  background: var(--background);
-  color: var(--color);
+  border-radius: var(--border-radius);
+  background: var(--background-color);
+  color: var(
+    --text-color,
+    oklch(from var(--background-color) calc(0.59 - 0.41 * sign(l - 0.5)) 0 0)
+  );
   font-size: 0.8125rem;
   line-height: 1.4;
   filter: drop-shadow(0 1px 2px rgb(0 0 0 / 16%));
   pointer-events: none;
 }
 
+@supports (color: contrast-color(red vs black, white)) {
+  [popover] {
+    color: var(--text-color, contrast-color(var(--background-color) vs #111827, #fff to AA));
+  }
+}
+
 i {
   position: absolute;
   display: block;
   width: var(--arrow-size);
   height: var(--arrow-size);
-  background: var(--background);
+  background: var(--background-color);
   transform: rotate(45deg);
 }

package/dist/elements/tooltip/tooltip.d.ts

@@ -10,9 +10,9 @@ import type { Placement } from '@floating-ui/dom';
  * @csspart body - The tooltip popover container.
  * @csspart arrow - The directional arrow element.
  *
- * @cssproperty --background - Background color. Default: dark in light mode, light in dark mode.
- * @cssproperty --color - Text color.
- * @cssproperty --radius - Border radius. Default `4px`.
+ * @cssproperty --background-color - Background color. Default: dark in light mode, light in dark mode.
+ * @cssproperty --text-color - Text color. If unset, auto-derived from `--background-color` luminance.
+ * @cssproperty --border-radius - Border radius. Default `4px`.
  * @cssproperty --max-width - Maximum width. Default `180px`.
  * @cssproperty --arrow-size - Arrow size. Default `6px`.
  * @cssproperty --show-duration - Show animation duration. Default `150ms`.

package/dist/elements/tooltip/tooltip.js

@@ -33,9 +33,9 @@ const styles = unsafeCSS(rawStyles);
  * @csspart body - The tooltip popover container.
  * @csspart arrow - The directional arrow element.
  *
- * @cssproperty --background - Background color. Default: dark in light mode, light in dark mode.
- * @cssproperty --color - Text color.
- * @cssproperty --radius - Border radius. Default `4px`.
+ * @cssproperty --background-color - Background color. Default: dark in light mode, light in dark mode.
+ * @cssproperty --text-color - Text color. If unset, auto-derived from `--background-color` luminance.
+ * @cssproperty --border-radius - Border radius. Default `4px`.
  * @cssproperty --max-width - Maximum width. Default `180px`.
  * @cssproperty --arrow-size - Arrow size. Default `6px`.
  * @cssproperty --show-duration - Show animation duration. Default `150ms`.