npm - luxen-ui - Versions diffs - 0.1.0 - Mend

luxen-ui 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (201) hide show

package/LICENSE +21 -0
package/README.md +98 -0
package/dist/css/elements/avatar.css +20 -0
package/dist/css/elements/badge.css +159 -0
package/dist/css/elements/button.css +171 -0
package/dist/css/elements/close-button/circle.css +66 -0
package/dist/css/elements/close-button/ring.css +71 -0
package/dist/css/elements/close-button/square.css +70 -0
package/dist/css/elements/disclosure.css +137 -0
package/dist/css/elements/divider.css +75 -0
package/dist/css/elements/input-otp.css +164 -0
package/dist/css/elements/input-stepper/default.css +245 -0
package/dist/css/elements/input-stepper/rounded.css +238 -0
package/dist/css/elements/kbd.css +21 -0
package/dist/css/elements/progress.css +114 -0
package/dist/css/elements/select.css +71 -0
package/dist/css/elements/skeleton.css +89 -0
package/dist/css/elements/tabs/enclosed.css +148 -0
package/dist/css/elements/tabs/line.css +138 -0
package/dist/css/elements/toast.css +260 -0
package/dist/css/index.css +885 -0
package/dist/custom-elements.json +14424 -0
package/dist/define.d.ts +9 -0
package/dist/define.d.ts.map +1 -0
package/dist/define.js +16 -0
package/dist/elements/avatar/avatar.css +128 -0
package/dist/elements/avatar/avatar.d.ts +21 -0
package/dist/elements/avatar/avatar.d.ts.map +1 -0
package/dist/elements/avatar/avatar.js +106 -0
package/dist/elements/avatar/index.d.ts +8 -0
package/dist/elements/avatar/index.d.ts.map +1 -0
package/dist/elements/avatar/index.js +4 -0
package/dist/elements/badge/badge.d.ts +17 -0
package/dist/elements/badge/badge.d.ts.map +1 -0
package/dist/elements/badge/badge.js +34 -0
package/dist/elements/badge/index.d.ts +8 -0
package/dist/elements/badge/index.d.ts.map +1 -0
package/dist/elements/badge/index.js +4 -0
package/dist/elements/carousel/carousel.css +205 -0
package/dist/elements/carousel/carousel.d.ts +148 -0
package/dist/elements/carousel/carousel.d.ts.map +1 -0
package/dist/elements/carousel/carousel.js +473 -0
package/dist/elements/carousel/index.d.ts +8 -0
package/dist/elements/carousel/index.d.ts.map +1 -0
package/dist/elements/carousel/index.js +4 -0
package/dist/elements/carousel-item/carousel-item.css +11 -0
package/dist/elements/carousel-item/carousel-item.d.ts +13 -0
package/dist/elements/carousel-item/carousel-item.d.ts.map +1 -0
package/dist/elements/carousel-item/carousel-item.js +20 -0
package/dist/elements/carousel-item/index.d.ts +8 -0
package/dist/elements/carousel-item/index.d.ts.map +1 -0
package/dist/elements/carousel-item/index.js +4 -0
package/dist/elements/dialog/dialog.css +92 -0
package/dist/elements/dialog/dialog.d.ts +56 -0
package/dist/elements/dialog/dialog.d.ts.map +1 -0
package/dist/elements/dialog/dialog.js +204 -0
package/dist/elements/dialog/dialog.styles.d.ts +8 -0
package/dist/elements/dialog/dialog.styles.d.ts.map +1 -0
package/dist/elements/dialog/dialog.styles.js +8 -0
package/dist/elements/dialog/index.d.ts +8 -0
package/dist/elements/dialog/index.d.ts.map +1 -0
package/dist/elements/dialog/index.js +4 -0
package/dist/elements/divider/divider.d.ts +23 -0
package/dist/elements/divider/divider.d.ts.map +1 -0
package/dist/elements/divider/divider.js +49 -0
package/dist/elements/divider/index.d.ts +8 -0
package/dist/elements/divider/index.d.ts.map +1 -0
package/dist/elements/divider/index.js +4 -0
package/dist/elements/drawer/drawer.css +66 -0
package/dist/elements/drawer/drawer.d.ts +34 -0
package/dist/elements/drawer/drawer.d.ts.map +1 -0
package/dist/elements/drawer/drawer.js +46 -0
package/dist/elements/drawer/index.d.ts +8 -0
package/dist/elements/drawer/index.d.ts.map +1 -0
package/dist/elements/drawer/index.js +4 -0
package/dist/elements/dropdown/dropdown.css +31 -0
package/dist/elements/dropdown/dropdown.d.ts +64 -0
package/dist/elements/dropdown/dropdown.d.ts.map +1 -0
package/dist/elements/dropdown/dropdown.js +322 -0
package/dist/elements/dropdown/index.d.ts +8 -0
package/dist/elements/dropdown/index.d.ts.map +1 -0
package/dist/elements/dropdown/index.js +4 -0
package/dist/elements/dropdown-item/dropdown-item.css +51 -0
package/dist/elements/dropdown-item/dropdown-item.d.ts +25 -0
package/dist/elements/dropdown-item/dropdown-item.d.ts.map +1 -0
package/dist/elements/dropdown-item/dropdown-item.js +110 -0
package/dist/elements/dropdown-item/index.d.ts +8 -0
package/dist/elements/dropdown-item/index.d.ts.map +1 -0
package/dist/elements/dropdown-item/index.js +4 -0
package/dist/elements/icon/icon.css +10 -0
package/dist/elements/icon/icon.d.ts +19 -0
package/dist/elements/icon/icon.d.ts.map +1 -0
package/dist/elements/icon/icon.js +53 -0
package/dist/elements/icon/index.d.ts +8 -0
package/dist/elements/icon/index.d.ts.map +1 -0
package/dist/elements/icon/index.js +4 -0
package/dist/elements/input-otp/index.d.ts +8 -0
package/dist/elements/input-otp/index.d.ts.map +1 -0
package/dist/elements/input-otp/index.js +4 -0
package/dist/elements/input-otp/input-otp.d.ts +31 -0
package/dist/elements/input-otp/input-otp.d.ts.map +1 -0
package/dist/elements/input-otp/input-otp.js +139 -0
package/dist/elements/input-stepper/index.d.ts +8 -0
package/dist/elements/input-stepper/index.d.ts.map +1 -0
package/dist/elements/input-stepper/index.js +4 -0
package/dist/elements/input-stepper/input-stepper.d.ts +63 -0
package/dist/elements/input-stepper/input-stepper.d.ts.map +1 -0
package/dist/elements/input-stepper/input-stepper.js +249 -0
package/dist/elements/popover/index.d.ts +8 -0
package/dist/elements/popover/index.d.ts.map +1 -0
package/dist/elements/popover/index.js +4 -0
package/dist/elements/popover/popover.css +61 -0
package/dist/elements/popover/popover.d.ts +62 -0
package/dist/elements/popover/popover.d.ts.map +1 -0
package/dist/elements/popover/popover.js +244 -0
package/dist/elements/rating/index.d.ts +8 -0
package/dist/elements/rating/index.d.ts.map +1 -0
package/dist/elements/rating/index.js +4 -0
package/dist/elements/rating/rating.css +102 -0
package/dist/elements/rating/rating.d.ts +38 -0
package/dist/elements/rating/rating.d.ts.map +1 -0
package/dist/elements/rating/rating.js +193 -0
package/dist/elements/skeleton/index.d.ts +8 -0
package/dist/elements/skeleton/index.d.ts.map +1 -0
package/dist/elements/skeleton/index.js +4 -0
package/dist/elements/skeleton/skeleton.d.ts +12 -0
package/dist/elements/skeleton/skeleton.d.ts.map +1 -0
package/dist/elements/skeleton/skeleton.js +13 -0
package/dist/elements/spinner/index.d.ts +8 -0
package/dist/elements/spinner/index.d.ts.map +1 -0
package/dist/elements/spinner/index.js +4 -0
package/dist/elements/spinner/spinner.css +28 -0
package/dist/elements/spinner/spinner.d.ts +16 -0
package/dist/elements/spinner/spinner.d.ts.map +1 -0
package/dist/elements/spinner/spinner.js +37 -0
package/dist/elements/tabs/index.d.ts +8 -0
package/dist/elements/tabs/index.d.ts.map +1 -0
package/dist/elements/tabs/index.js +4 -0
package/dist/elements/tabs/tabs.d.ts +48 -0
package/dist/elements/tabs/tabs.d.ts.map +1 -0
package/dist/elements/tabs/tabs.js +210 -0
package/dist/elements/toast/index.d.ts +9 -0
package/dist/elements/toast/index.d.ts.map +1 -0
package/dist/elements/toast/index.js +5 -0
package/dist/elements/toast/toast.d.ts +72 -0
package/dist/elements/toast/toast.d.ts.map +1 -0
package/dist/elements/toast/toast.js +375 -0
package/dist/elements/tooltip/index.d.ts +8 -0
package/dist/elements/tooltip/index.d.ts.map +1 -0
package/dist/elements/tooltip/index.js +4 -0
package/dist/elements/tooltip/tooltip.css +37 -0
package/dist/elements/tooltip/tooltip.d.ts +59 -0
package/dist/elements/tooltip/tooltip.d.ts.map +1 -0
package/dist/elements/tooltip/tooltip.js +231 -0
package/dist/elements/tree/index.d.ts +8 -0
package/dist/elements/tree/index.d.ts.map +1 -0
package/dist/elements/tree/index.js +4 -0
package/dist/elements/tree/tree.css +26 -0
package/dist/elements/tree/tree.d.ts +76 -0
package/dist/elements/tree/tree.d.ts.map +1 -0
package/dist/elements/tree/tree.js +432 -0
package/dist/elements/tree-item/index.d.ts +8 -0
package/dist/elements/tree-item/index.d.ts.map +1 -0
package/dist/elements/tree-item/index.js +4 -0
package/dist/elements/tree-item/tree-item.css +172 -0
package/dist/elements/tree-item/tree-item.d.ts +74 -0
package/dist/elements/tree-item/tree-item.d.ts.map +1 -0
package/dist/elements/tree-item/tree-item.js +301 -0
package/dist/index.d.ts +6 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +4 -0
package/dist/registry.d.ts +22 -0
package/dist/registry.d.ts.map +1 -0
package/dist/registry.js +33 -0
package/dist/shared/controllers/popover.d.ts +44 -0
package/dist/shared/controllers/popover.d.ts.map +1 -0
package/dist/shared/controllers/popover.js +359 -0
package/dist/shared/luxen-element.d.ts +20 -0
package/dist/shared/luxen-element.d.ts.map +1 -0
package/dist/shared/luxen-element.js +23 -0
package/dist/shared/luxen-form-associated-element.d.ts +49 -0
package/dist/shared/luxen-form-associated-element.d.ts.map +1 -0
package/dist/shared/luxen-form-associated-element.js +123 -0
package/dist/shared/styles/host.css +13 -0
package/dist/shared/styles/host.styles.d.ts +9 -0
package/dist/shared/styles/host.styles.d.ts.map +1 -0
package/dist/shared/styles/host.styles.js +9 -0
package/dist/skills/luxen-ui/SKILL.md +82 -0
package/dist/skills/luxen-ui/references/avatar.md +259 -0
package/dist/skills/luxen-ui/references/badge.md +289 -0
package/dist/skills/luxen-ui/references/button.md +309 -0
package/dist/skills/luxen-ui/references/close-button.md +104 -0
package/dist/skills/luxen-ui/references/dialog.md +435 -0
package/dist/skills/luxen-ui/references/drawer.md +400 -0
package/dist/skills/luxen-ui/references/progress.md +133 -0
package/dist/skills/luxen-ui/references/select.md +100 -0
package/dist/skills/luxen-ui/references/toast.md +396 -0
package/dist/skills/luxen-ui/references/tree.md +359 -0
package/package.json +116 -0
package/postcss-plugin-prefix.js +63 -0
package/vite-plugin.ts +29 -0

package/dist/skills/luxen-ui/references/toast.md ADDED Viewed

@@ -0,0 +1,396 @@
+---
+outline: deep
+---
+# Toast
+Toasts are used to display brief, non-blocking notifications that auto-dismiss. Commonly used to confirm actions, report errors, or surface system messages without interrupting the user's workflow.
+<ElementSpec
+  tag="l-toast"
+  type="custom"
+/>
+## Options
+### Basic
+Place a single `<l-toast>` element anywhere inside the `<body>`. Call `toast()` to display notifications.
+```html
+<button
+  class="l-button"
+  onclick="toast({ text: 'This is a toast notification!' })"
+>
+  Show notification
+</button>
+```
+### Variants
+Pass `variant` in the options to apply accent colors: `info`, `success`, `warning`, `danger`.
+```html
+<div class="flex gap-2 flex-wrap">
+  <button
+    class="l-button"
+    onclick="toast({ text: 'Neutral message' })"
+  >
+    Neutral
+  </button>
+  <button
+    class="l-button"
+    onclick="toast({ text: 'Informational message', variant: 'info' })"
+  >
+    Info
+  </button>
+  <button
+    class="l-button"
+    onclick="toast({ text: 'Operation successful!', variant: 'success' })"
+  >
+    Success
+  </button>
+  <button
+    class="l-button"
+    onclick="toast({ text: 'Please be careful', variant: 'warning' })"
+  >
+    Warning
+  </button>
+  <button
+    class="l-button"
+    onclick="toast({ text: 'Something went wrong', variant: 'danger' })"
+  >
+    Danger
+  </button>
+</div>
+```
+### Heading
+Pass `heading` in the options to display a title above the message.
+```html
+<div class="flex gap-2 flex-wrap">
+  <button
+    class="l-button"
+    onclick="
+      toast({
+        text: 'Your changes have been saved.',
+        heading: 'Saved',
+        variant: 'success',
+        timer: true,
+      })
+    "
+  >
+    Success
+  </button>
+  <button
+    class="l-button"
+    onclick="
+      toast({
+        text: 'This action cannot be undone.',
+        heading: 'Warning',
+        variant: 'warning',
+        timer: true,
+      })
+    "
+  >
+    Warning
+  </button>
+  <button
+    class="l-button"
+    onclick="
+      toast({ text: 'Please try again later.', heading: 'Error', variant: 'danger', timer: true })
+    "
+  >
+    Error
+  </button>
+</div>
+```
+### Icon
+Pass `icon` with an Iconify icon name to replace the accent bar with an icon, colored by variant.
+```html
+<div class="flex gap-2 flex-wrap">
+  <button
+    class="l-button"
+    onclick="
+      toast({
+        text: 'Informational message',
+        heading: 'Info',
+        variant: 'info',
+        icon: 'lucide:info',
+      })
+    "
+  >
+    Info
+  </button>
+  <button
+    class="l-button"
+    onclick="
+      toast({
+        text: 'Operation successful!',
+        heading: 'Success',
+        variant: 'success',
+        icon: 'lucide:circle-check',
+      })
+    "
+  >
+    Success
+  </button>
+  <button
+    class="l-button"
+    onclick="
+      toast({
+        text: 'Please be careful',
+        heading: 'Warning',
+        variant: 'warning',
+        icon: 'lucide:triangle-alert',
+      })
+    "
+  >
+    Warning
+  </button>
+  <button
+    class="l-button"
+    onclick="
+      toast({
+        text: 'Something went wrong',
+        heading: 'Error',
+        variant: 'danger',
+        icon: 'lucide:circle-x',
+      })
+    "
+  >
+    Danger
+  </button>
+</div>
+```
+### Duration
+Control how long the toast stays visible. Set to `0` for persistent notifications that must be manually dismissed.
+```html
+<div class="flex gap-2 flex-wrap">
+  <button
+    class="l-button"
+    onclick="toast({ text: 'Closes in 3 seconds', duration: 3000 })"
+  >
+    3s
+  </button>
+  <button
+    class="l-button"
+    onclick="toast({ text: 'Closes in 10 seconds', duration: 10000 })"
+  >
+    10s
+  </button>
+  <button
+    class="l-button"
+    onclick="toast({ text: 'Stays until dismissed', duration: 0 })"
+  >
+    Persistent
+  </button>
+  <button
+    class="l-button"
+    onclick="toast({ text: 'With countdown bar', duration: 5000, timer: true })"
+  >
+    With timer
+  </button>
+</div>
+```
+### Placement
+Position the toast stack using the `placement` attribute.
+```html
+<div class="flex gap-2 flex-wrap">
+  <button
+    class="l-button"
+    onclick="
+      document.querySelector('l-toast').placement = 'top-start';
+      toast({ text: 'Top start' });
+    "
+  >
+    Top start
+  </button>
+  <button
+    class="l-button"
+    onclick="
+      document.querySelector('l-toast').placement = 'top-center';
+      toast({ text: 'Top center' });
+    "
+  >
+    Top center
+  </button>
+  <button
+    class="l-button"
+    onclick="
+      document.querySelector('l-toast').placement = 'top-end';
+      toast({ text: 'Top end' });
+    "
+  >
+    Top end
+  </button>
+  <button
+    class="l-button"
+    onclick="
+      document.querySelector('l-toast').placement = 'bottom-start';
+      toast({ text: 'Bottom start' });
+    "
+  >
+    Bottom start
+  </button>
+  <button
+    class="l-button"
+    onclick="
+      document.querySelector('l-toast').placement = 'bottom-center';
+      toast({ text: 'Bottom center' });
+    "
+  >
+    Bottom center
+  </button>
+  <button
+    class="l-button"
+    onclick="
+      document.querySelector('l-toast').placement = 'bottom-end';
+      toast({ text: 'Bottom end' });
+    "
+  >
+    Bottom end
+  </button>
+</div>
+```
+### Programmatic API
+```js
+import { toast } from 'luxen-ui/toast';
+// Basic
+toast({ text: 'Saved successfully!' });
+// With variant
+toast({ text: 'File uploaded', variant: 'success' });
+// With heading and custom duration
+toast({
+  text: 'Undo this action?',
+  heading: 'Warning',
+  variant: 'warning',
+  duration: 0,
+});
+```
+### Features
+- **Function-based API** — call `toast({ text: '...' })` from anywhere, no component wiring needed
+- **Timer pausing on hover & focus** — countdown pauses when hovered or focused, resumes when the pointer or focus leaves
+- **Timer pausing on hidden tab** — countdown pauses when the browser tab loses visibility, resumes with the remaining time when the user returns
+- **Swipe to dismiss** — drag a toast horizontally to dismiss it; works with mouse, touch, and pen input
+- **`@starting-style` enter animations** — smooth CSS entry transitions using the `@starting-style` at-rule
+- **Keyboard dismiss** — press <kbd>Escape</kbd> to dismiss the most recent toast
+- **FLIP reorder animations** — remaining toasts animate smoothly into their new positions when one is dismissed
+## Accessibility
+### Criteria
+| Check | Description |
+|-------|-------------|
+| Live region | Container uses `role="log"` with `aria-live="polite"` for screen reader announcements |
+| Role | Items use `role="status"` (`role="alert"` for `danger` variant) |
+| Accessible name | Heading and message linked via `aria-labelledby` / `aria-describedby` |
+| Decorative elements | Icons, accent bar, and timer bar are hidden with `aria-hidden="true"` |
+| Timer pausing | Timer pauses on hover and focus, providing keyboard parity |
+| Motion | Respects `prefers-reduced-motion` |
+### Rules
+- Keep messages short and readable within the auto-dismiss duration
+- Set `duration` to `5000` or longer for readability
+- Use `variant="danger"` for critical alerts — it promotes the toast to `role="alert"`
+- Ensure any actions in toasts are also available elsewhere on the page
+- Use dialogs instead of toasts for information that requires user action
+### Keyboard interactions
+| Key | Description |
+|-----|-------------|
+| Escape | Dismisses the most recent toast |
+| Tab | Moves focus into the toast (pauses the auto-dismiss timer) |
+## API reference
+### Importing
+```js
+// Side-effect import (registers <l-toast> element)
+import 'luxen-ui/toast';
+// Or import the standalone function (auto-creates <l-toast>)
+import { toast } from 'luxen-ui/toast';
+toast({ text: 'Hello!' });
+```
+```css
+@import 'luxen-ui/css/toast';
+@import 'luxen-ui/css/close-button';
+```
+### Attributes & Properties
+<ApiTable :data="[
+  { Attribute: 'placement', Description: 'Position of the toast stack: `top-start`, `top-center`, `top-end` (default), `bottom-start`, `bottom-center`, `bottom-end`' },
+  { Attribute: 'duration', Description: 'Default auto-dismiss delay in ms. Default `5000`. Set to `0` or `Infinity` to keep open until dismissed' },
+  { Attribute: 'variant', Description: 'Default variant for toast items: `info`, `success`, `warning`, `danger`' },
+]" />
+### Methods
+<ApiTable :data="[
+  { Method: 'toast()', Arguments: '`options: ToastOptions`', Returns: '`HTMLElement`', Description: 'Creates and shows a toast notification' },
+]" />
+### ToastOptions
+<ApiTable :data="[
+  { Property: 'text', Type: '`string`', Default: '—', Description: 'The message text to display. Required unless `html` is provided' },
+  { Property: 'html', Type: '`string`', Default: '—', Description: 'HTML content for the message, sanitized via the [Sanitizer API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API). Ignored if `text` is provided' },
+  { Property: 'heading', Type: '`string`', Default: '—', Description: 'Heading text displayed above the message' },
+  { Property: 'icon', Type: '`string`', Default: '—', Description: 'Iconify icon name (e.g. `lucide:check`). Replaces the accent bar, colored by variant' },
+  { Property: 'variant', Type: '`string`', Default: 'Element\'s `variant`', Description: 'Override variant for this toast' },
+  { Property: 'duration', Type: '`number`', Default: 'Element\'s `duration`', Description: 'Override auto-dismiss delay in ms. `0` or `Infinity` to keep open until dismissed' },
+  { Property: 'timer', Type: '`boolean`', Default: '`false`', Description: 'Show a countdown progress bar at the bottom' },
+]" />
+### Events
+<ApiTable :data="[
+  { Event: 'l-show', Detail: '`{ toast }`', Description: 'Emitted when a toast begins to show. Cancelable' },
+  { Event: 'l-after-show', Detail: '`{ toast }`', Description: 'Emitted after the show animation completes' },
+  { Event: 'l-hide', Detail: '`{ toast }`', Description: 'Emitted when a toast begins to hide. Cancelable' },
+  { Event: 'l-after-hide', Detail: '`{ toast }`', Description: 'Emitted after the hide animation completes and toast is removed' },
+]" />
+### CSS classes
+<ApiTable :data="[
+  { Class: 'l-toast-item', Description: 'Toast item custom element (generated internally)' },
+  { Class: '.l-toast-accent', Description: 'Left accent bar, colored by variant' },
+  { Class: '.l-toast-content', Description: 'Content area' },
+  { Class: '.l-toast-heading', Description: 'Heading text' },
+  { Class: '.l-toast-message', Description: 'Message text' },
+  { Class: '.l-toast-timer', Description: 'Countdown progress bar (auto-added for timed toasts)' },
+]" />
+### CSS custom properties
+<ApiTable :data="[
+  { Property: '--gap', Description: 'Gap between stacked items. Default `0.5rem`' },
+  { Property: '--width', Description: 'Width of the toast stack. Default `28rem`' },
+  { Property: '--show-duration', Description: 'Show animation duration. Default `200ms`' },
+  { Property: '--hide-duration', Description: 'Hide animation duration. Default `200ms`' },
+]" />