luxen-ui 0.1.0

package/dist/skills/luxen-ui/references/drawer.md

@@ -0,0 +1,400 @@
+---
+outline: deep
+---
+
+# Drawer
+
+Drawers display supplementary content in a panel that slides in from a screen edge. Commonly used for navigation menus, filters, and detail views without leaving the current page.
+
+<ElementSpec
+  tag="l-drawer"
+  type="shadow"
+/>
+
+## Options
+
+### Basic
+
+Open with `command="--show"` on a trigger button. Slides in from the left.
+
+```html
+<button
+  type="button"
+  class="l-button"
+  command="--show"
+  commandfor="drawer-default"
+>
+  Open drawer
+</button>
+
+<l-drawer
+  id="drawer-default"
+  title="Drawer"
+>
+  <button
+    slot="close"
+    type="button"
+    class="l-close"
+    data-appearance="ring"
+    aria-label="Close"
+    command="--hide"
+    commandfor="drawer-default"
+  ></button>
+  <p>This drawer slides in from the left.</p>
+</l-drawer>
+```
+
+### Placement
+
+Set `placement` to control which edge the drawer slides from. Defaults to `start` (inline-start). Use `placement="end"` for the inline-end edge or `placement="bottom"` for the block-end edge.
+
+#### End
+
+```html
+<button
+  type="button"
+  class="l-button"
+  command="--show"
+  commandfor="drawer-end"
+>
+  Open right drawer
+</button>
+
+<l-drawer
+  id="drawer-end"
+  title="Drawer"
+  placement="end"
+>
+  <button
+    slot="close"
+    type="button"
+    class="l-close"
+    data-appearance="ring"
+    aria-label="Close"
+    command="--hide"
+    commandfor="drawer-end"
+  ></button>
+  <p>This drawer slides in from the right.</p>
+</l-drawer>
+```
+
+#### Bottom
+
+```html
+<button
+  type="button"
+  class="l-button"
+  command="--show"
+  commandfor="drawer-bottom"
+>
+  Open bottom drawer
+</button>
+
+<l-drawer
+  id="drawer-bottom"
+  title="Drawer"
+  placement="bottom"
+>
+  <button
+    slot="close"
+    type="button"
+    class="l-close"
+    data-appearance="ring"
+    aria-label="Close"
+    command="--hide"
+    commandfor="drawer-bottom"
+  ></button>
+  <p>This drawer slides in from the bottom.</p>
+</l-drawer>
+```
+
+### Light dismiss
+
+Add `light-dismiss` to close when the backdrop is clicked.
+
+```html
+<button
+  type="button"
+  class="l-button"
+  command="--show"
+  commandfor="drawer-light-dismiss"
+>
+  Open drawer
+</button>
+
+<l-drawer
+  id="drawer-light-dismiss"
+  title="Drawer"
+  light-dismiss
+>
+  <button
+    slot="close"
+    type="button"
+    class="l-close"
+    data-appearance="ring"
+    aria-label="Close"
+    command="--hide"
+    commandfor="drawer-light-dismiss"
+  ></button>
+  <p>Click the backdrop or press Escape to close.</p>
+</l-drawer>
+```
+
+## Examples
+
+### Navigation
+
+Mobile navigation menu with link items.
+
+```html
+<button
+  type="button"
+  class="l-button"
+  command="--show"
+  commandfor="drawer-nav"
+>
+  Menu
+</button>
+
+<l-drawer
+  id="drawer-nav"
+  title="Navigation"
+>
+  <button
+    slot="close"
+    type="button"
+    class="l-close"
+    data-appearance="ring"
+    aria-label="Close"
+    command="--hide"
+    commandfor="drawer-nav"
+  ></button>
+  <nav>
+    <ul class="flex flex-col gap-1">
+      <li>
+        <a
+          href="#"
+          class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium hover:bg-gray-100"
+          >Home</a
+        >
+      </li>
+      <li>
+        <a
+          href="#"
+          class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium hover:bg-gray-100"
+          >Products</a
+        >
+      </li>
+      <li>
+        <a
+          href="#"
+          class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium hover:bg-gray-100"
+          >Orders</a
+        >
+      </li>
+      <li>
+        <a
+          href="#"
+          class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium hover:bg-gray-100"
+          >Customers</a
+        >
+      </li>
+      <li>
+        <a
+          href="#"
+          class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium hover:bg-gray-100"
+          >Settings</a
+        >
+      </li>
+    </ul>
+  </nav>
+</l-drawer>
+```
+
+### Filters
+
+Right-side filter panel with a footer for actions.
+
+```html
+<button
+  type="button"
+  class="l-button"
+  command="--show"
+  commandfor="drawer-filters"
+>
+  Filters
+</button>
+
+<l-drawer
+  id="drawer-filters"
+  title="Filters"
+  placement="end"
+  style="--size: 380px"
+>
+  <button
+    slot="close"
+    type="button"
+    class="l-close"
+    data-appearance="ring"
+    aria-label="Close"
+    command="--hide"
+    commandfor="drawer-filters"
+  ></button>
+  <div class="flex flex-col gap-6">
+    <fieldset>
+      <legend class="text-sm font-medium mb-2">Category</legend>
+      <div class="flex flex-col gap-2">
+        <label class="flex items-center gap-2 text-sm"
+          ><input
+            type="checkbox"
+            checked
+          />
+          Electronics</label
+        >
+        <label class="flex items-center gap-2 text-sm"><input type="checkbox" /> Clothing</label>
+        <label class="flex items-center gap-2 text-sm"><input type="checkbox" /> Books</label>
+      </div>
+    </fieldset>
+    <fieldset>
+      <legend class="text-sm font-medium mb-2">Price range</legend>
+      <div class="flex flex-col gap-2">
+        <label class="flex items-center gap-2 text-sm"
+          ><input
+            type="radio"
+            name="price"
+            checked
+          />
+          All prices</label
+        >
+        <label class="flex items-center gap-2 text-sm"
+          ><input
+            type="radio"
+            name="price"
+          />
+          Under $50</label
+        >
+        <label class="flex items-center gap-2 text-sm"
+          ><input
+            type="radio"
+            name="price"
+          />
+          $50 – $100</label
+        >
+        <label class="flex items-center gap-2 text-sm"
+          ><input
+            type="radio"
+            name="price"
+          />
+          Over $100</label
+        >
+      </div>
+    </fieldset>
+  </div>
+  <menu slot="footer">
+    <button
+      type="button"
+      class="l-button"
+      command="--hide"
+      commandfor="drawer-filters"
+    >
+      Cancel
+    </button>
+    <button
+      type="button"
+      class="l-button"
+      data-variant="primary"
+    >
+      Apply
+    </button>
+  </menu>
+</l-drawer>
+```
+
+## Accessibility
+
+### Criteria
+
+| Check | Description |
+|-------|-------------|
+| Role | Rendered as a native `<dialog>` in the shadow root — built-in `dialog` role and modal semantics |
+| Accessible name | The `title` property is rendered as an `<h2>` inside the drawer header |
+| Focus management | Focus is trapped inside the modal; moves to the first focusable element on open |
+| Focus restoration | Focus returns to the trigger element when the drawer closes |
+| Close button | Consumer provides the close button via `slot="close"` with `aria-label="Close"` |
+| Motion | Slide animation respects `prefers-reduced-motion` |
+
+### Rules
+- Always set a meaningful `title` — it becomes the drawer heading and accessible name
+- Put the close button in `slot="close"` with `class="l-close"` and `command="--hide"` `commandfor="<id>"`
+- Use `command="--show"` and `command="--hide"` with `commandfor` pointing at the drawer id. The `--` prefix is mandatory for custom elements
+
+### Keyboard interactions
+
+| Key | Description |
+|-----|-------------|
+| Escape | Closes the drawer |
+| Tab | Cycles focus through focusable elements inside the drawer |
+| Shift + Tab | Cycles focus backward through focusable elements inside the drawer |
+
+## API reference
+
+### Importing
+
+```js
+import 'luxen-ui/drawer';
+```
+
+### Attributes & Properties
+
+<ApiTable :data="[
+  { Attribute: 'title', Description: 'Drawer title rendered in the header as an `<h2>`' },
+  { Attribute: 'open', Description: 'Whether the drawer is open. Reflects to attribute' },
+  { Attribute: 'light-dismiss', Description: 'Close when the backdrop is clicked' },
+  { Attribute: 'placement', Description: 'Edge the drawer slides from: `start` (default), `end`, or `bottom`' },
+]" />
+
+### Commands
+
+Open and close the drawer by toggling its `open` property, or via the [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API) from any light-DOM button. Custom commands must start with `--`.
+
+<ApiTable :data="[
+  { Command: '--show', Description: 'Sets `open = true`' },
+  { Command: '--hide', Description: 'Sets `open = false`' },
+]" />
+
+### Events
+
+<ApiTable :data="[
+  { Event: 'show', Description: 'Fired when the drawer opens' },
+  { Event: 'after-show', Description: 'Fired after the open animation completes' },
+  { Event: 'hide', Description: 'Fired when the drawer is about to close. Cancelable — call `event.preventDefault()` to keep it open' },
+  { Event: 'after-hide', Description: 'Fired after the close animation completes' },
+]" />
+
+### Slots
+
+<ApiTable :data="[
+  { Slot: '(default)', Description: 'Body content' },
+  { Slot: 'close', Description: 'Close button (typically `<button class=&quot;l-close&quot;>`)' },
+  { Slot: 'footer', Description: 'Footer actions' },
+]" />
+
+### CSS parts
+
+<ApiTable :data="[
+  { Part: 'dialog', Description: 'The native `<dialog>` element' },
+  { Part: 'header', Description: 'The header wrapper containing the title and close slot' },
+  { Part: 'title', Description: 'The drawer title heading' },
+  { Part: 'body', Description: 'The body wrapper around the default slot' },
+  { Part: 'footer', Description: 'The footer wrapper around the footer slot' },
+]" />
+
+### CSS custom properties
+
+<ApiTable :data="[
+  { Name: '--size', Description: 'Drawer size on the axis perpendicular to its edge (width for `start`/`end`, height for `bottom`). Default `320px`' },
+  { Name: '--border-radius', Description: 'Border radius on the inner edges. Default `0.75rem`' },
+  { Name: '--show-duration', Description: 'Open transition duration. Default `200ms`' },
+  { Name: '--hide-duration', Description: 'Close transition duration. Default `200ms`' },
+  { Name: '--backdrop', Description: 'Backdrop color' },
+]" />

package/dist/skills/luxen-ui/references/progress.md

@@ -0,0 +1,133 @@
+---
+outline: deep
+---
+
+# Progress
+
+Progress bars are used to indicate the completion status of a task. Commonly used for file uploads, multi-step processes, and loading indicators with a known duration.
+
+<ElementSpec
+  tag="progress"
+  type="native"
+/>
+
+## Options
+
+### With value
+
+Set the `value` attribute between `0` and `1`.
+
+```html
+<progress
+  class="l-progress"
+  aria-label="Loading content…"
+  value="0.6"
+/>
+```
+
+### Indeterminate
+
+Omit the `value` attribute for an indeterminate animation.
+
+```html
+<progress
+  class="l-progress"
+  aria-label="Loading content…"
+/>
+```
+
+### Vertical
+
+Add `data-orientation="vertical"` attribute.
+
+```html
+<style>
+  @scope (#demo-vertical) {
+    .l-progress {
+      --track-color: var(--color-purple-200);
+      --indicator-color: var(--color-purple-800);
+    }
+  }
+</style>
+
+<ul
+  id="demo-vertical"
+  class="grid w-full"
+>
+  <li class="flex px-3 py-2 h-16 bg-white">
+    <progress
+      class="l-progress"
+      aria-label="Loading content…"
+      data-orientation="vertical"
+      value="1"
+    ></progress>
+    <div class="flex-1 px-4 content-center text-sm font-semibold">Paiement acceptée</div>
+  </li>
+
+  <li class="flex px-3 py-2 h-16 bg-purple-100">
+    <progress
+      class="l-progress"
+      aria-label="Loading content…"
+      data-orientation="vertical"
+    ></progress>
+    <div class="flex-1 px-4 content-center text-sm font-semibold">
+      Première récurrence en cours de traitement
+    </div>
+  </li>
+
+  <li class="flex px-3 py-2 h-16 bg-white">
+    <progress
+      class="l-progress"
+      aria-label="Loading content…"
+      data-orientation="vertical"
+      value="0"
+    ></progress>
+    <div class="flex-1 px-4 content-center text-sm font-semibold">Transaction Terminée</div>
+  </li>
+</ul>
+```
+
+## Accessibility
+
+### Criteria
+
+| Check | Description |
+|-------|-------------|
+| Role | Uses native `<progress>` — implicit `progressbar` role |
+| Accessible name | Must have an associated `<label>` or `aria-label` |
+| Color | Indicator and track colors meet non-text contrast ratio |
+| Motion | Indeterminate animation respects `prefers-reduced-motion` |
+
+### Rules
+- Always pair the `<progress>` element with a visible `<label>` or `aria-label`
+- Set `value` for determinate progress; omit for indeterminate
+
+## API reference
+
+### Importing
+
+```css
+@import 'luxen-ui/css/progress';
+```
+
+### Attributes & Properties
+
+<ApiTable :data="[
+  { Attribute: 'value', Description: 'Current progress between `0` and `1` (omit for indeterminate)' },
+  { Attribute: 'data-orientation=&quot;vertical&quot;', Description: 'Vertical orientation' },
+]" />
+
+### CSS classes
+
+<ApiTable :data="[
+  { Class: '.l-progress', Description: 'Base progress bar style' },
+]" />
+
+### CSS custom properties
+
+<ApiTable :data="[
+  { Name: '--size', Description: 'Bar thickness (default: 4px)' },
+  { Name: '--track-color', Description: 'Track background color' },
+  { Name: '--indicator-color', Description: 'Fill/indicator color' },
+  { Name: '--indeterminate-animation', Description: 'Animation name for indeterminate state' },
+]" />

package/dist/skills/luxen-ui/references/select.md

@@ -0,0 +1,100 @@
+---
+outline: deep
+---
+
+# Select
+
+Selects are used to pick a single option from a dropdown list. Commonly used in forms for choosing categories, countries, or any predefined set of values.
+
+<ElementSpec
+  tag="select"
+  type="native"
+/>
+
+## Options
+
+```html
+<select class="l-select">
+  <button class="l-button">
+    <selectedcontent> </selectedcontent>
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="currentColor"
+        d="m7 10l5 5l5-5z"
+      />
+    </svg>
+  </button>
+  <option class="l-select-item">
+    <span class="option-text">Item 1</span>
+  </option>
+  <option class="l-select-item">
+    <span class="option-text">Item 2</span>
+  </option>
+  <option class="l-select-item">
+    <span class="option-text">Item 3</span>
+  </option>
+</select>
+```
+
+## Accessibility
+
+### Criteria
+
+| Check | Description |
+|-------|-------------|
+| Role | Uses native `<select>` — built-in `combobox`/`listbox` semantics |
+| Accessible name | Must have an associated `<label>` element |
+| Disabled state | Native `disabled` attribute prevents interaction and announces as disabled |
+| Required state | Native `required` attribute communicates mandatory field to assistive tech |
+
+### Rules
+- Always pair the `<select>` with a visible `<label>` element using `for`/`id`
+- Use native `<option>` elements for choices — the browser handles all ARIA semantics
+
+### Keyboard interactions
+
+| Key | Description |
+|-----|-------------|
+| Enter | Opens the option list or confirms selection |
+| Space | Opens the option list |
+| ArrowDown | Moves to the next option |
+| ArrowUp | Moves to the previous option |
+| Tab | Moves focus to the next focusable element |
+
+## API reference
+
+### Importing
+
+```css
+@import 'luxen-ui/css/select';
+```
+
+### Attributes & Properties
+
+<ApiTable :data="[
+  { Attribute: 'disabled', Description: 'Disables the select' },
+  { Attribute: 'required', Description: 'Marks the field as required' },
+  { Attribute: 'multiple', Description: 'Allows multiple selections' },
+]" />
+
+### Events
+
+<ApiTable :data="events" />
+
+### CSS classes
+
+<ApiTable :data="[
+  { Class: '.l-select', Description: 'Base select element with `appearance: base-select`' },
+  { Class: '.l-select-item', Description: 'Option styling with checkmark indicator' },
+]" />
+
+### CSS custom properties
+
+<ApiTable :data="[
+  { Name: '--radius', Description: 'Border radius (default: 4px)' },
+  { Name: '--border-color', Description: 'Border color (adapts to light/dark)' },
+]" />