luxen-ui 0.1.0

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

@@ -0,0 +1,309 @@
+---
+outline: deep
+---
+
+# Button
+
+Buttons are used to trigger actions such as submitting forms, confirming dialogs, or navigating. They are the primary interactive control in any interface.
+
+<ElementSpec
+  tag="button"
+  type="native"
+/>
+
+## Options
+
+### Sizes
+
+Add `data-size="sm"`, `data-size="lg"`, or `data-size="xl"`. Default is md.
+
+```html
+<button
+  class="l-button"
+  data-size="sm"
+>
+  Button sm
+</button>
+<button class="l-button">Button md</button>
+<button
+  class="l-button"
+  data-size="lg"
+>
+  Button lg
+</button>
+<button
+  class="l-button"
+  data-size="xl"
+>
+  Button xl
+</button>
+```
+
+### Primary
+
+Add `data-variant="primary"`.
+
+```html
+<button
+  class="l-button"
+  data-variant="primary"
+>
+  Primary
+</button>
+<button
+  class="l-button"
+  data-variant="primary"
+  disabled
+>
+  Primary disabled
+</button>
+```
+
+### Destructive
+
+Add `data-variant="destructive"`.
+
+```html
+<button
+  class="l-button"
+  data-variant="destructive"
+>
+  Delete
+</button>
+<button
+  class="l-button"
+  data-variant="destructive"
+  disabled
+>
+  Delete
+</button>
+```
+
+### Icon-only
+
+Auto-detected when containing a single `<svg>`, `<l-icon>`, or `<iconify-icon>`.
+
+```html
+<button
+  class="l-button"
+  aria-label="Settings"
+>
+  <iconify-icon icon="lucide:settings"></iconify-icon>
+</button>
+<button
+  class="l-button"
+  data-variant="primary"
+  aria-label="Add"
+>
+  <iconify-icon icon="lucide:plus"></iconify-icon>
+</button>
+```
+
+### Disabled
+
+Native `disabled` attribute.
+
+```html
+<button
+  class="l-button"
+  disabled
+>
+  Disabled
+</button>
+<button
+  class="l-button"
+  data-variant="primary"
+  disabled
+>
+  Disabled primary
+</button>
+```
+
+### As link
+
+Use an `<a>` element instead of `<button>`.
+
+```html
+<a
+  class="l-button"
+  href="#link"
+  >Link button</a
+>
+<a
+  class="l-button"
+  data-variant="primary"
+  href="#link"
+  >Primary link</a
+>
+```
+
+### Press effect
+
+Add `data-press-effect` attribute.
+
+```html
+<button
+  class="l-button"
+  data-press-effect
+>
+  Press me
+</button>
+<button
+  class="l-button"
+  data-variant="primary"
+  data-press-effect
+>
+  Press me
+</button>
+```
+
+### Loading
+
+Add an `<l-spinner>` inside the button. The spinner inherits the button's text color.
+
+```html
+<button
+  class="l-button"
+  disabled
+>
+  <l-spinner></l-spinner>
+  Loading…
+</button>
+<button
+  class="l-button"
+  data-variant="primary"
+  disabled
+>
+  <l-spinner></l-spinner>
+  Loading…
+</button>
+```
+
+## Examples
+
+### With icon and text
+
+```html
+<button class="l-button">
+  <iconify-icon icon="lucide:download"></iconify-icon>
+  Download
+</button>
+<button
+  class="l-button"
+  data-variant="primary"
+>
+  <iconify-icon icon="lucide:send"></iconify-icon>
+  Send
+</button>
+```
+
+### Button group
+
+```html
+<div
+  role="group"
+  aria-label="Text formatting"
+  class="flex gap-0"
+>
+  <button
+    class="l-button rounded-none border-r-0"
+    aria-label="Bold"
+  >
+    <iconify-icon icon="lucide:bold"></iconify-icon>
+  </button>
+  <button
+    class="l-button rounded-none border-r-0"
+    aria-label="Italic"
+  >
+    <iconify-icon icon="lucide:italic"></iconify-icon>
+  </button>
+  <button
+    class="l-button rounded-none"
+    aria-label="Underline"
+  >
+    <iconify-icon icon="lucide:underline"></iconify-icon>
+  </button>
+</div>
+```
+
+### Form actions
+
+```html
+<div class="flex gap-2 justify-end">
+  <button class="l-button">Cancel</button>
+  <button
+    class="l-button"
+    data-variant="primary"
+  >
+    Save changes
+  </button>
+</div>
+```
+
+## Accessibility
+
+### Criteria
+
+| Check | Description |
+|-------|-------------|
+| Color | Text and background colors meet AA contrast ratios across all variants |
+| Focus state | Visible 2px focus ring for keyboard users |
+| Hover state | Clear visual change on hover |
+| Active state | Visual feedback on press |
+| Disabled state | Reduced opacity, `cursor: not-allowed`, not focusable when disabled |
+| Icon-only | Icon-only buttons must have `aria-label` for an accessible name |
+| Role | Uses native `<button>` or `<a>` — no extra ARIA role needed |
+
+### Rules
+- Use a native `<button>` element — never a `<div>` or `<span>`
+- Always add `aria-label` to icon-only buttons
+- Include `type="button"` to prevent form submission (except for submit buttons)
+- When using `<a>` as a link button, add `role="button"` only if it triggers an action rather than navigating
+
+### Keyboard interactions
+
+| Key | Description |
+|-----|-------------|
+| Enter | Activates the button |
+| Space | Activates the button |
+| Tab | Moves focus to the next focusable element |
+| Shift + Tab | Moves focus to the previous focusable element |
+
+## API reference
+
+### Importing
+
+```css
+@import 'luxen-ui/css/button';
+```
+
+### Attributes & Properties
+
+<ApiTable :data="[
+  { Attribute: 'disabled', Description: 'Disables the button' },
+  { Attribute: 'command', Description: 'Invoker command (`show-modal`, `close`, `show-popover`, etc.)' },
+  { Attribute: 'commandfor', Description: 'ID of the target element for `command`' },
+  { Attribute: 'data-variant', Description: 'Visual variant (`primary`, `destructive`)' },
+  { Attribute: 'data-size', Description: 'Size (`sm`, `lg`, `xl`). Default is md.' },
+  { Attribute: 'data-icon-only', Description: 'Icon-only mode (square button, width equals height)' },
+  { Attribute: 'data-press-effect', Description: 'Press effect (scale + translate on active)' },
+]" />
+
+### CSS classes
+
+<ApiTable :data="cssClasses" />
+
+### CSS custom properties
+
+<ApiTable :data="[
+  { Name: '--height', Description: 'Button height' },
+  { Name: '--padding-inline', Description: 'Horizontal padding' },
+  { Name: '--background-color', Description: 'Background color' },
+  { Name: '--background-color-hover', Description: 'Background on hover' },
+  { Name: '--background-color-active', Description: 'Background on press' },
+  { Name: '--text-color', Description: 'Text color' },
+  { Name: '--text-color-hover', Description: 'Text color on hover' },
+  { Name: '--border-color', Description: 'Border color' },
+  { Name: '--border-color-hover', Description: 'Border color on hover' },
+  { Name: '--font-size', Description: 'Font size' },
+]" />

package/dist/skills/luxen-ui/references/close-button.md

@@ -0,0 +1,104 @@
+---
+outline: deep
+---
+
+# Close button
+
+Close buttons are used to dismiss overlays such as dialogs, drawers, toasts, and popovers. They render a close icon without any visible label.
+
+<ElementSpec
+  tag="button"
+  type="native"
+/>
+
+## Options
+
+### Appearance
+
+Pick a visual style via `data-appearance`. Each appearance has its own CSS import.
+
+#### Ring
+
+<ComponentWrapper :html="'<button type=&quot;button&quot; class=&quot;l-close&quot; data-appearance=&quot;ring&quot; aria-label=&quot;Close&quot;></button>'" />
+
+```css
+@import 'luxen-ui/css/close-button/ring';
+```
+
+#### Square
+
+<ComponentWrapper :html="'<button type=&quot;button&quot; class=&quot;l-close&quot; data-appearance=&quot;square&quot; aria-label=&quot;Close&quot;></button>'" />
+
+```css
+@import 'luxen-ui/css/close-button/square';
+```
+
+#### Circle
+
+<ComponentWrapper :html="'<button type=&quot;button&quot; class=&quot;l-close&quot; data-appearance=&quot;circle&quot; aria-label=&quot;Close&quot;></button>'" />
+
+```css
+@import 'luxen-ui/css/close-button/circle';
+```
+
+## Accessibility
+
+### Criteria
+
+| Check | Description |
+|-------|-------------|
+| Color | Icon and background colors meet AA contrast ratios |
+| Size | Minimum 24×24px target size; larger for touch contexts |
+| Icon | Decorative icon; `aria-label` on the button provides the accessible name |
+| Hover state | Clear visual change on hover |
+| Focus state | Visible focus ring for keyboard users |
+| Active state | Visual feedback on press |
+| Disabled state | Appears inactive, not focusable when disabled |
+| Accessible name | Always provide `aria-label` or context-specific label |
+| Role | Uses native `<button>` — no extra ARIA role needed |
+
+### Rules
+- Always add `aria-label="Close"` (or a context-specific label like `aria-label="Close dialog"`)
+- Use a native `<button>` element — never a `<div>` or `<span>`
+- Include `type="button"` to prevent form submission
+
+### Keyboard interactions
+
+| Key | Description |
+|-----|-------------|
+| Enter | Activates the close button |
+| Space | Activates the close button |
+| Tab | Moves focus to the next focusable element |
+| Shift + Tab | Moves focus to the previous focusable element |
+
+## API reference
+
+### Importing
+
+```css
+@import 'luxen-ui/css/close-button/ring';
+```
+
+### Attributes & Properties
+
+<ApiTable :data="[
+  { Attribute: 'data-appearance', Description: '`ring` · `square` · `circle`' },
+  { Attribute: 'command', Description: 'Invoker command (typically `close`)' },
+  { Attribute: 'commandfor', Description: 'ID of the target element to close' },
+]" />
+
+### CSS classes
+
+<ApiTable :data="[
+  { Class: '.l-close', Description: 'Base close button with X icon via CSS mask' },
+]" />
+
+### CSS custom properties
+
+<ApiTable :data="[
+  { Name: '--size', Description: 'Button size (default: 36px)' },
+  { Name: '--icon-color', Description: 'Icon color' },
+  { Name: '--icon-size', Description: 'Icon size (default: 24px)' },
+  { Name: '--ring-color', Description: 'Hover ring color (`ring` appearance only)' },
+  { Name: '--ring-tickness', Description: 'Hover ring thickness (`ring` appearance only)' },
+]" />