luxen-ui 0.1.0

package/dist/skills/luxen-ui/SKILL.md

@@ -0,0 +1,82 @@
+---
+name: luxen-ui
+description: >-
+  Generate UI with Luxen UI, a CSS-first web component library.
+  Provides CSS classes for native HTML elements (button, select, progress,
+  close-button) and custom elements (l-badge, l-dialog, l-toast). Use when
+  building interfaces with Luxen UI.
+metadata:
+  version: "0.1.0"
+---
+
+# Luxen UI
+
+A CSS-first web component library built on web standards. Most elements are plain CSS classes applied to native HTML elements — no JavaScript required. Custom elements (like `<l-badge>`) use Lit with minimal Shadow DOM.
+
+## Installation
+
+Import per-element CSS:
+
+```css
+@import 'luxen-ui/css/button';
+@import 'luxen-ui/css/close-button/ring';
+```
+
+Or import all elements:
+
+```css
+@import 'luxen-ui/css';
+```
+
+For custom elements, also import the JavaScript:
+
+```js
+import 'luxen-ui';
+```
+
+## Available Elements
+
+| Element | Type | Selector | Reference |
+|---------|------|----------|-----------|
+| Avatar | Custom element | `<l-avatar>` | [references/avatar.md](references/avatar.md) |
+| Badge | Custom element | `<l-badge>` | [references/badge.md](references/badge.md) |
+| Button | CSS class | `.l-button` | [references/button.md](references/button.md) |
+| Close button | CSS class | `.l-close` | [references/close-button.md](references/close-button.md) |
+| Dialog | Custom element | `<l-dialog>` | [references/dialog.md](references/dialog.md) |
+| Drawer | Custom element | `<l-drawer>` | [references/drawer.md](references/drawer.md) |
+| Select | CSS class | `.l-select` | [references/select.md](references/select.md) |
+| Progress | CSS class | `.l-progress` | [references/progress.md](references/progress.md) |
+| Toast | Custom element | `<l-toast>` | [references/toast.md](references/toast.md) |
+| Tree | Custom element | `<l-tree>` | [references/tree.md](references/tree.md) |
+
+## Quick Patterns
+
+A button:
+
+```html
+<button class="l-button">Label</button>
+<button class="l-button" data-variant="primary">Primary</button>
+```
+
+A badge:
+
+```html
+<l-badge>Default</l-badge>
+<l-badge style="--variant: success">Success</l-badge>
+```
+
+A dialog:
+
+```html
+<button class="l-button" command="--show" commandfor="my-dialog">Open</button>
+<l-dialog id="my-dialog" title="Dialog title">
+  <button slot="close" class="l-close" data-appearance="ring" aria-label="Close"
+          command="--hide" commandfor="my-dialog"></button>
+  <p>Dialog content</p>
+  <div slot="footer">
+    <button class="l-button" command="--hide" commandfor="my-dialog">Close</button>
+  </div>
+</l-dialog>
+```
+
+For full usage details, see the reference files for each element.

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

@@ -0,0 +1,259 @@
+---
+outline: deep
+---
+
+# Avatar
+
+Avatars are used to represent a user or entity with a profile image, initials, or icon fallback. Commonly used in headers, comments, contact lists, and user cards.
+
+<ElementSpec
+  tag="l-avatar"
+  type="shadow"
+/>
+
+## Options
+
+### Image
+
+Set `src` and `name` attributes. Falls back to initials if the image fails to load.
+
+```html
+<l-avatar
+  src="https://i.pravatar.cc/150?img=58"
+  name="John Doe"
+></l-avatar>
+<l-avatar
+  src="https://i.pravatar.cc/150?img=32"
+  name="Jane Smith"
+></l-avatar>
+<l-avatar
+  src="https://i.pravatar.cc/150?img=11"
+  name="Alex Chen"
+></l-avatar>
+```
+
+### Initials
+
+Set `name` to auto-extract initials, or slot custom text content.
+
+```html
+<l-avatar name="John Doe"></l-avatar>
+<l-avatar name="Jane Smith"></l-avatar>
+<l-avatar name="Alex"></l-avatar>
+<l-avatar>+5</l-avatar>
+```
+
+### Custom colors
+
+Set `--color` to a base color. Text is auto-derived via relative color syntax.
+
+```html
+<div class="flex items-end gap-3">
+  <l-avatar
+    style="--color: var(--color-red-200)"
+    name="Anna Bell"
+  ></l-avatar>
+  <l-avatar
+    style="--color: var(--color-orange-200)"
+    name="Bob Chen"
+  ></l-avatar>
+  <l-avatar
+    style="--color: var(--color-yellow-200)"
+    name="Cleo Dane"
+  ></l-avatar>
+  <l-avatar
+    style="--color: var(--color-green-200)"
+    name="Dan Evans"
+  ></l-avatar>
+  <l-avatar
+    style="--color: var(--color-blue-200)"
+    name="Eve Fox"
+  ></l-avatar>
+  <l-avatar
+    style="--color: var(--color-purple-200)"
+    name="Fay Grant"
+  ></l-avatar>
+</div>
+```
+
+### Sizes
+
+Add the `size` attribute: `xs`, `sm`, `md` (default), `lg`, or `xl`.
+
+```html
+<div class="flex items-end gap-3">
+  <l-avatar
+    size="xs"
+    name="John Doe"
+  ></l-avatar>
+  <l-avatar
+    size="sm"
+    name="John Doe"
+  ></l-avatar>
+  <l-avatar name="John Doe"></l-avatar>
+  <l-avatar
+    size="lg"
+    name="John Doe"
+  ></l-avatar>
+  <l-avatar
+    size="xl"
+    name="John Doe"
+  ></l-avatar>
+</div>
+```
+
+### Circle
+
+Set `--appearance: circle` for a fully circular shape. Default is a rounded square.
+
+```html
+<l-avatar
+  style="--appearance: circle"
+  src="https://i.pravatar.cc/150?img=58"
+  name="John Doe"
+></l-avatar>
+<l-avatar
+  style="--appearance: circle"
+  name="Jane Smith"
+></l-avatar>
+<l-avatar style="--appearance: circle"></l-avatar>
+```
+
+### Badge
+
+Set `badge` to a number to show a count indicator at the bottom-right corner.
+
+```html
+<l-avatar
+  badge="3"
+  src="https://i.pravatar.cc/150?img=58"
+  name="John Doe"
+></l-avatar>
+<l-avatar
+  badge="25"
+  src="https://i.pravatar.cc/150?img=32"
+  name="Jane Smith"
+></l-avatar>
+<l-avatar
+  badge="99"
+  name="Alex Chen"
+></l-avatar>
+```
+
+### Interactive
+
+Add the `interactive` attribute to render the avatar as a `<button>`. Includes focus ring and hover state.
+
+```html
+<l-avatar
+  interactive
+  src="https://i.pravatar.cc/150?img=58"
+  name="John Doe"
+></l-avatar>
+<l-avatar
+  interactive
+  name="Jane Smith"
+></l-avatar>
+<l-avatar
+  interactive
+  style="--appearance: circle"
+  src="https://i.pravatar.cc/150?img=32"
+  name="Alex Chen"
+></l-avatar>
+```
+
+### Group
+
+Wrap avatars in `.l-avatar-group` for an overlapping stack with a surface-colored ring.
+
+```html
+<div class="grid gap-4">
+  <div class="l-avatar-group">
+    <l-avatar
+      src="https://i.pravatar.cc/150?img=58"
+      name="John Doe"
+    ></l-avatar>
+    <l-avatar
+      src="https://i.pravatar.cc/150?img=32"
+      name="Jane Smith"
+    ></l-avatar>
+    <l-avatar
+      src="https://i.pravatar.cc/150?img=12"
+      name="Alex Chen"
+    ></l-avatar>
+    <l-avatar name="Sam Wilson"></l-avatar>
+  </div>
+  <div class="l-avatar-group">
+    <l-avatar
+      style="--appearance: circle"
+      src="https://i.pravatar.cc/150?img=58"
+      name="John Doe"
+    ></l-avatar>
+    <l-avatar
+      style="--appearance: circle"
+      src="https://i.pravatar.cc/150?img=32"
+      name="Jane Smith"
+    ></l-avatar>
+    <l-avatar
+      style="--appearance: circle"
+      src="https://i.pravatar.cc/150?img=12"
+      name="Alex Chen"
+    ></l-avatar>
+    <l-avatar
+      style="--appearance: circle"
+      name="Sam Wilson"
+    ></l-avatar>
+  </div>
+</div>
+```
+
+## Accessibility
+
+### Criteria
+
+| Check | Description |
+|-------|-------------|
+| Role | Default `role="img"` communicates the avatar as an image |
+| Accessible name | `aria-label` is set automatically from the `name` attribute |
+| Interactive mode | When `interactive` is set, renders as a `<button>` with focus ring and hover states |
+| Decorative elements | Badge count is hidden from assistive tech with `aria-hidden="true"` |
+| Image fallback | Falls back to initials (then default icon) if image fails to load |
+
+### Rules
+- Always provide the `name` attribute — it drives both `aria-label` and the initials fallback
+- Add `interactive` only when the avatar triggers an action (e.g., opens a profile menu)
+
+### Keyboard interactions
+
+When `interactive` is set:
+
+| Key | Description |
+|-----|-------------|
+| Enter | Activates the avatar button |
+| Space | Activates the avatar button |
+| Tab | Moves focus to the next focusable element |
+
+## API reference
+
+### Importing
+
+```js
+import 'luxen-ui/avatar';
+```
+
+### Attributes & Properties
+
+<ApiTable :data="attributes" />
+
+### CSS classes
+
+<ApiTable :data="[
+  { Class: '.l-avatar-group', Description: 'Flex container with negative margins and surface-colored ring for overlapping avatars' },
+]" />
+
+### CSS custom properties
+
+<ApiTable :data="[
+  { Property: '--color', Description: 'Base color for initials/icon background. Text color is auto-derived via relative color syntax' },
+  { Property: '--appearance', Description: 'Set to `circle` for a fully circular shape (default is rounded square)' },
+]" />

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

@@ -0,0 +1,289 @@
+---
+outline: deep
+---
+
+# Badge
+
+Badges are used to draw attention and display statuses or counts. Commonly used in tabular data, lists, and navigation to indicate state or category.
+
+<ElementSpec
+  tag="l-badge"
+  type="custom"
+/>
+
+## Options
+
+### Appearance
+
+Add `appearance="filled"` (tinted background, no border), `appearance="filled-outlined"` (tinted background with border), or `appearance="accent"` (strong background, contrast text). Default is outlined (border, no background).
+
+```html
+<div class="flex flex-col gap-3">
+  <div class="flex flex-wrap items-center gap-2">
+    <span class="text-sm text-color-tertiary w-28">Outlined</span>
+    <l-badge>Default</l-badge>
+    <l-badge variant="info">Info</l-badge>
+    <l-badge variant="success">Success</l-badge>
+    <l-badge variant="warning">Warning</l-badge>
+    <l-badge variant="danger">Danger</l-badge>
+  </div>
+  <div class="flex flex-wrap items-center gap-2">
+    <span class="text-sm text-color-tertiary w-28">Filled</span>
+    <l-badge appearance="filled">Default</l-badge>
+    <l-badge
+      appearance="filled"
+      variant="info"
+      >Info</l-badge
+    >
+    <l-badge
+      appearance="filled"
+      variant="success"
+      >Success</l-badge
+    >
+    <l-badge
+      appearance="filled"
+      variant="warning"
+      >Warning</l-badge
+    >
+    <l-badge
+      appearance="filled"
+      variant="danger"
+      >Danger</l-badge
+    >
+  </div>
+  <div class="flex flex-wrap items-center gap-2">
+    <span class="text-sm text-color-tertiary w-28">Filled outlined</span>
+    <l-badge appearance="filled-outlined">Default</l-badge>
+    <l-badge
+      appearance="filled-outlined"
+      variant="info"
+      >Info</l-badge
+    >
+    <l-badge
+      appearance="filled-outlined"
+      variant="success"
+      >Success</l-badge
+    >
+    <l-badge
+      appearance="filled-outlined"
+      variant="warning"
+      >Warning</l-badge
+    >
+    <l-badge
+      appearance="filled-outlined"
+      variant="danger"
+      >Danger</l-badge
+    >
+  </div>
+  <div class="flex flex-wrap items-center gap-2">
+    <span class="text-sm text-color-tertiary w-28">Accent</span>
+    <l-badge appearance="accent">Default</l-badge>
+    <l-badge
+      appearance="accent"
+      variant="info"
+      >Info</l-badge
+    >
+    <l-badge
+      appearance="accent"
+      variant="success"
+      >Success</l-badge
+    >
+    <l-badge
+      appearance="accent"
+      variant="warning"
+      >Warning</l-badge
+    >
+    <l-badge
+      appearance="accent"
+      variant="danger"
+      >Danger</l-badge
+    >
+  </div>
+</div>
+```
+
+### Pill
+
+Add the `pill` attribute for a fully rounded shape.
+
+```html
+<div class="flex flex-col gap-3">
+  <div class="flex flex-wrap items-center gap-2">
+    <span class="text-sm text-color-tertiary w-28">Outlined</span>
+    <l-badge pill>Default</l-badge>
+    <l-badge
+      pill
+      variant="info"
+      >Info</l-badge
+    >
+    <l-badge
+      pill
+      variant="success"
+      >Success</l-badge
+    >
+    <l-badge
+      pill
+      variant="warning"
+      >Warning</l-badge
+    >
+    <l-badge
+      pill
+      variant="danger"
+      >Danger</l-badge
+    >
+  </div>
+  <div class="flex flex-wrap items-center gap-2">
+    <span class="text-sm text-color-tertiary w-28">Filled</span>
+    <l-badge
+      pill
+      appearance="filled"
+      >Default</l-badge
+    >
+    <l-badge
+      pill
+      appearance="filled"
+      variant="info"
+      >Info</l-badge
+    >
+    <l-badge
+      pill
+      appearance="filled"
+      variant="success"
+      >Success</l-badge
+    >
+    <l-badge
+      pill
+      appearance="filled"
+      variant="warning"
+      >Warning</l-badge
+    >
+    <l-badge
+      pill
+      appearance="filled"
+      variant="danger"
+      >Danger</l-badge
+    >
+  </div>
+  <div class="flex flex-wrap items-center gap-2">
+    <span class="text-sm text-color-tertiary w-28">Filled outlined</span>
+    <l-badge
+      pill
+      appearance="filled-outlined"
+      >Default</l-badge
+    >
+    <l-badge
+      pill
+      appearance="filled-outlined"
+      variant="info"
+      >Info</l-badge
+    >
+    <l-badge
+      pill
+      appearance="filled-outlined"
+      variant="success"
+      >Success</l-badge
+    >
+    <l-badge
+      pill
+      appearance="filled-outlined"
+      variant="warning"
+      >Warning</l-badge
+    >
+    <l-badge
+      pill
+      appearance="filled-outlined"
+      variant="danger"
+      >Danger</l-badge
+    >
+  </div>
+  <div class="flex flex-wrap items-center gap-2">
+    <span class="text-sm text-color-tertiary w-28">Accent</span>
+    <l-badge
+      pill
+      appearance="accent"
+      >Default</l-badge
+    >
+    <l-badge
+      pill
+      appearance="accent"
+      variant="info"
+      >Info</l-badge
+    >
+    <l-badge
+      pill
+      appearance="accent"
+      variant="success"
+      >Success</l-badge
+    >
+    <l-badge
+      pill
+      appearance="accent"
+      variant="warning"
+      >Warning</l-badge
+    >
+    <l-badge
+      pill
+      appearance="accent"
+      variant="danger"
+      >Danger</l-badge
+    >
+  </div>
+</div>
+```
+
+### Sizes
+
+Add `size="sm"` or `size="lg"`. Default is md.
+
+```html
+<l-badge size="sm">Small</l-badge>
+<l-badge>Medium</l-badge>
+<l-badge size="lg">Large</l-badge>
+```
+
+### Variants
+
+Add `variant="info"`, `variant="success"`, `variant="warning"`, or `variant="danger"`. Default is neutral.
+
+```html
+<l-badge>Neutral</l-badge>
+<l-badge variant="info">Info</l-badge>
+<l-badge variant="success">Success</l-badge>
+<l-badge variant="warning">Warning</l-badge>
+<l-badge variant="danger">Danger</l-badge>
+```
+
+## Accessibility
+
+### Criteria
+
+| Check | Description |
+|-------|-------------|
+| Color contrast | Text and background meet minimum contrast ratio across all appearances and variants |
+| Non-text contrast | Badge borders meet non-text contrast minimum against adjacent surfaces |
+| Not color alone | Do not rely on badge color alone to convey status — always include a text label |
+
+### Rules
+- Always include visible text inside the badge — do not use color alone to convey meaning
+- When a badge conveys dynamic status, wrap it in a `role="status"` container so screen readers announce changes
+
+## API reference
+
+### Importing
+
+```js
+import 'luxen-ui/badge';
+```
+
+```css
+@import 'luxen-ui/css/badge';
+```
+
+### Attributes & Properties
+
+<ApiTable :data="[
+  { Attribute: 'size', Description: 'Badge size (`sm`, `lg`). Default is md.' },
+  { Attribute: 'appearance', Description: 'Visual appearance (`filled`, `filled-outlined`, `accent`). Default is outlined.' },
+  { Attribute: 'variant', Description: 'Style variant (`info`, `success`, `warning`, `danger`). Default is neutral.' },
+  { Attribute: 'pill', Description: 'Fully rounded pill shape' },
+]" />