luxen-ui 0.1.0

package/dist/define.d.ts

@@ -0,0 +1,9 @@
+import { type ElementBaseName } from './registry';
+/**
+ * Register a Luxen element with the custom elements registry.
+ *
+ * @param baseName - The element's base name (e.g. `'badge'`, `'toast-item'`).
+ * @param elementClass - The custom element class to define.
+ */
+export declare function define(baseName: ElementBaseName, elementClass: CustomElementConstructor): void;
+//# sourceMappingURL=define.d.ts.map

package/dist/define.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../src/html/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyC,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAEzF;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,QAAQ,EAAE,eAAe,EAAE,YAAY,EAAE,wBAAwB,GAAG,IAAI,CAO9F"}

package/dist/define.js

@@ -0,0 +1,16 @@
+import { markRegistered, isRegistered, tagName } from './registry';
+/**
+ * Register a Luxen element with the custom elements registry.
+ *
+ * @param baseName - The element's base name (e.g. `'badge'`, `'toast-item'`).
+ * @param elementClass - The custom element class to define.
+ */
+export function define(baseName, elementClass) {
+    if (isRegistered(baseName))
+        return;
+    markRegistered(baseName);
+    const tag = tagName(baseName);
+    if (!customElements.get(tag)) {
+        customElements.define(tag, elementClass);
+    }
+}

package/dist/elements/avatar/avatar.css

@@ -0,0 +1,128 @@
+:host {
+  --_size: 40px;
+  --_font-size: 1rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: var(--_size);
+  height: var(--_size);
+  border-radius: calc(var(--_size) * 0.2);
+  isolation: isolate;
+  vertical-align: middle;
+  flex-shrink: 0;
+  color: var(--l-color-text-secondary);
+}
+
+:host([size='xs']) {
+  --_size: 24px;
+  --_font-size: 0.75rem;
+}
+:host([size='sm']) {
+  --_size: 32px;
+  --_font-size: 0.875rem;
+}
+:host([size='lg']) {
+  --_size: 48px;
+  --_font-size: 1.25rem;
+}
+:host([size='xl']) {
+  --_size: 56px;
+  --_font-size: 1.25rem;
+}
+
+img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+.initials {
+  margin: auto;
+}
+
+.icon {
+  width: 60%;
+  height: 60%;
+  color: currentColor;
+}
+
+.badge {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  z-index: 1;
+  height: 12px;
+  min-width: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline: 2px;
+  border-radius: 3px;
+  box-shadow: 0 0 0 2px var(--l-color-surface);
+  background-color: var(--l-color-surface);
+  font-size: 0.625rem;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  color: var(--l-color-text-primary);
+  overflow: hidden;
+}
+
+/*
+ * Inset ring via ::after so it renders on top of the <img>.
+ * A box-shadow on :host would be covered by the image since
+ * it fills the entire element with object-fit: cover.
+ */
+.base::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 1px light-dark(oklch(0 0 0 / 7%), oklch(100% 0 0 / 10%));
+  pointer-events: none;
+}
+
+.base {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  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);
+  font-size: var(--_font-size);
+  font-weight: 500;
+  line-height: 1;
+  text-transform: uppercase;
+  padding: 0;
+  cursor: inherit;
+}
+
+button.base {
+  cursor: pointer;
+}
+
+button.base:focus-visible {
+  outline: 2px solid var(--l-focus-ring);
+  outline-offset: 2px;
+}
+
+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/avatar/avatar.d.ts

@@ -0,0 +1,21 @@
+import { LuxenElement } from '../../shared/luxen-element';
+/**
+ * @summary An avatar component for displaying user images, initials, or a default icon.
+ * @customElement l-avatar
+ */
+export declare class LuxenAvatar extends LuxenElement {
+    static styles: import("lit").CSSResult[];
+    src: string;
+    name: string;
+    size: string;
+    badge: number;
+    interactive: boolean;
+    private _hasError;
+    willUpdate(changed: Map<string, unknown>): void;
+    connectedCallback(): void;
+    updated(): void;
+    private get _tag();
+    render(): import("lit").TemplateResult;
+    private _onError;
+}
+//# sourceMappingURL=avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/html/elements/avatar/avatar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAqB1D;;;GAGG;AACH,qBAAa,WAAY,SAAQ,YAAY;IAC3C,MAAM,CAAC,MAAM,4BAAwB;IAGrC,GAAG,SAAM;IAGT,IAAI,SAAM;IAGV,IAAI,SAAQ;IAGZ,KAAK,SAAK;IAGV,WAAW,UAAS;IAEX,OAAO,CAAC,SAAS,CAAS;IAEnC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMxC,iBAAiB;IAOjB,OAAO;IASP,OAAO,KAAK,IAAI,GAEf;IAED,MAAM;IA6BN,OAAO,CAAC,QAAQ;CAGjB"}

package/dist/elements/avatar/avatar.js

@@ -0,0 +1,106 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing, svg, unsafeCSS } from 'lit';
+import { LuxenElement } from '../../shared/luxen-element';
+import { html as staticHtml, literal } from 'lit/static-html.js';
+import { property, state } from 'lit/decorators.js';
+import hostStyles from '../../shared/styles/host.styles';
+import rawStyles from './avatar.css?inline';
+const styles = unsafeCSS(rawStyles);
+function getInitials(name) {
+    return name
+        .match(/(\b\S)?/g)
+        .join('')
+        .match(/(^\S|\S$)?/g)
+        .join('')
+        .toUpperCase();
+}
+const defaultIcon = svg `<svg class="icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+  <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
+</svg>`;
+/**
+ * @summary An avatar component for displaying user images, initials, or a default icon.
+ * @customElement l-avatar
+ */
+export class LuxenAvatar extends LuxenElement {
+    constructor() {
+        super(...arguments);
+        this.src = '';
+        this.name = '';
+        this.size = 'md';
+        this.badge = 0;
+        this.interactive = false;
+        this._hasError = false;
+    }
+    willUpdate(changed) {
+        if (changed.has('src')) {
+            this._hasError = false;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'img');
+        }
+    }
+    updated() {
+        if (this.name) {
+            this.setAttribute('aria-label', this.name);
+        }
+        const isCircle = getComputedStyle(this).getPropertyValue('--appearance').trim() === 'circle';
+        this.style.borderRadius = isCircle ? '50%' : '';
+    }
+    get _tag() {
+        return this.interactive ? literal `button` : literal `div`;
+    }
+    render() {
+        const content = this.src && !this._hasError
+            ? html `<img
+            src=${this.src}
+            alt=${this.name || ''}
+            @error=${this._onError}
+          />`
+            : this.name
+                ? html `<span class="initials">${getInitials(this.name)}</span>`
+                : html `<slot>${defaultIcon}</slot>`;
+        return staticHtml `
+      <${this._tag} class="base" type=${this.interactive ? 'button' : nothing}>
+        ${content}
+      </${this._tag}>
+      ${this.badge
+            ? html `<div
+              class="badge"
+              aria-hidden="true"
+            >
+              ${this.badge}
+            </div>`
+            : nothing}
+    `;
+    }
+    _onError() {
+        this._hasError = true;
+    }
+}
+LuxenAvatar.styles = [hostStyles, styles];
+__decorate([
+    property()
+], LuxenAvatar.prototype, "src", void 0);
+__decorate([
+    property()
+], LuxenAvatar.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true })
+], LuxenAvatar.prototype, "size", void 0);
+__decorate([
+    property({ type: Number })
+], LuxenAvatar.prototype, "badge", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LuxenAvatar.prototype, "interactive", void 0);
+__decorate([
+    state()
+], LuxenAvatar.prototype, "_hasError", void 0);

package/dist/elements/avatar/index.d.ts

@@ -0,0 +1,8 @@
+import { LuxenAvatar } from './avatar';
+export * from './avatar';
+declare global {
+    interface HTMLElementTagNameMap {
+        'l-avatar': LuxenAvatar;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/avatar/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,cAAc,UAAU,CAAC;AAGzB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,WAAW,CAAC;KACzB;CACF"}

package/dist/elements/avatar/index.js

@@ -0,0 +1,4 @@
+import { define } from '../../define';
+import { LuxenAvatar } from './avatar';
+export * from './avatar';
+define('avatar', LuxenAvatar);

package/dist/elements/badge/badge.d.ts

@@ -0,0 +1,17 @@
+import { LuxenElement } from '../../shared/luxen-element';
+/**
+ * @summary A badge component for displaying small status indicators.
+ * @customElement l-badge
+ */
+export declare class LuxenBadge extends LuxenElement {
+    createRenderRoot(): this;
+    /** Style variant: `info`, `success`, `warning`, `danger`, or `neutral` (default) */
+    variant?: string;
+    /** Display as pill shape */
+    pill: boolean;
+    /** Badge size: `sm`, `lg`. Default is md. */
+    size?: string;
+    /** Visual appearance: `filled`, `filled-outlined`, `accent`. Default is outlined. */
+    appearance?: string;
+}
+//# sourceMappingURL=badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/html/elements/badge/badge.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D;;;GAGG;AACH,qBAAa,UAAW,SAAQ,YAAY;IACjC,gBAAgB;IAIzB,oFAAoF;IACvD,OAAO,CAAC,EAAE,MAAM,CAAC;IAE9C,4BAA4B;IACgB,IAAI,UAAS;IAEzD,6CAA6C;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IAE3C,qFAAqF;IACxD,UAAU,CAAC,EAAE,MAAM,CAAC;CAClD"}

package/dist/elements/badge/badge.js

@@ -0,0 +1,34 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { property } from 'lit/decorators.js';
+import { LuxenElement } from '../../shared/luxen-element';
+/**
+ * @summary A badge component for displaying small status indicators.
+ * @customElement l-badge
+ */
+export class LuxenBadge extends LuxenElement {
+    constructor() {
+        super(...arguments);
+        /** Display as pill shape */
+        this.pill = false;
+    }
+    createRenderRoot() {
+        return this;
+    }
+}
+__decorate([
+    property({ reflect: true })
+], LuxenBadge.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LuxenBadge.prototype, "pill", void 0);
+__decorate([
+    property({ reflect: true })
+], LuxenBadge.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], LuxenBadge.prototype, "appearance", void 0);

package/dist/elements/badge/index.d.ts

@@ -0,0 +1,8 @@
+import { LuxenBadge } from './badge';
+export * from './badge';
+declare global {
+    interface HTMLElementTagNameMap {
+        'l-badge': LuxenBadge;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/badge/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,cAAc,SAAS,CAAC;AAGxB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,UAAU,CAAC;KACvB;CACF"}

package/dist/elements/badge/index.js

@@ -0,0 +1,4 @@
+import { define } from '../../define';
+import { LuxenBadge } from './badge';
+export * from './badge';
+define('badge', LuxenBadge);

package/dist/elements/carousel/carousel.css

@@ -0,0 +1,205 @@
+:host {
+  --slide-height: 19rem;
+  --slide-size: 100%;
+  --slide-gap: 0;
+
+  --button-size: 48px;
+  --button-arrow-size: 20px;
+  --button-arrow-color: #4b5563;
+  --button-offset: 8px;
+  --button-border-color: #e5e7eb;
+  --button-border-radius: 8px;
+  --button-bg: rgba(255, 255, 255, 0.8);
+  --button-color: inherit;
+  --button-box-shadow-hover: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
+
+  --dot-color: #9ca3af;
+  --dot-color-active: #111827;
+  --dot-margin: 0.5rem 0;
+
+  --scrollbar-color: #d1d5db transparent;
+
+  display: block;
+  /* Note: moving this elsewhere (e.g wrapper) may bug the container translate position */
+  position: relative;
+  container-type: inline-size;
+}
+
+:host([single]) {
+  --slide-size: 100%;
+  --slide-gap: 0;
+}
+
+:host([axis='y']) .container {
+  flex-direction: column;
+  max-height: var(--slide-height);
+}
+
+:host([axis='y']) .viewport {
+  max-height: var(--slide-height);
+}
+
+.viewport {
+  overflow: hidden;
+}
+
+:host([with-scrollbar]) .viewport {
+  overflow-x: scroll;
+  scrollbar-color: var(--scrollbar-color); /* progress / track */
+  scrollbar-gutter: stable both-edges;
+  scrollbar-width: thin;
+}
+
+.container {
+  backface-visibility: hidden;
+  display: flex;
+  gap: var(--slide-gap);
+  touch-action: pan-y pinch-zoom;
+}
+
+::slotted(l-carousel-item) {
+  flex: 0 0 var(--slide-size);
+  min-width: 0;
+}
+
+/*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   SCROLL BUTTONS
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+.scroll-buttons--inside {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.scroll-buttons--outside {
+  display: flex;
+  gap: 8px;
+  justify-content: end;
+  padding-block: 8px;
+}
+
+.scroll-buttons--disabled,
+.inactive .scroll-buttons {
+  display: none;
+}
+
+.button-next,
+.button-previous,
+.button-fullscreen {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  appearance: none;
+  touch-action: manipulation;
+  border: 1px solid var(--button-border-color);
+  border-radius: var(--button-border-radius);
+  width: var(--button-size);
+  height: var(--button-size);
+  background-color: var(--button-bg);
+  color: var(--button-color);
+  cursor: pointer;
+  pointer-events: auto;
+  -webkit-tap-highlight-color: rgba(49, 49, 49, 0.5);
+}
+
+.scroll-buttons--inside .button-previous,
+.scroll-buttons--inside .button-next,
+.button-fullscreen {
+  position: absolute;
+  top: calc(50% - (var(--button-size) / 2));
+  z-index: 1;
+}
+
+.scroll-buttons--inside .button-previous {
+  left: var(--button-offset);
+}
+
+.scroll-buttons--inside .button-next {
+  right: var(--button-offset);
+}
+
+.scroll-buttons--inside .button:disabled {
+  visibility: hidden;
+}
+
+.button:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.4;
+}
+
+.button-fullscreen {
+  border-radius: 4px;
+  right: var(--button-offset);
+  top: var(--button-offset);
+  width: calc(var(--button-size) * 0.75);
+  height: calc(var(--button-size) * 0.75);
+}
+
+@container (min-width: 640px) {
+  .button-fullscreen {
+    width: var(--button-size);
+    height: var(--button-size);
+  }
+}
+
+@media (hover: hover) {
+  .button:hover:not(:disabled) {
+    box-shadow: var(--button-box-shadow-hover);
+  }
+}
+
+.button svg {
+  width: var(--button-arrow-size);
+  height: var(--button-arrow-size);
+  color: var(--button-arrow-color);
+}
+
+/*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   DOTS
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+.dots {
+  display: flex;
+  justify-content: center;
+  margin: var(--dot-margin);
+}
+
+.dot {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-items: center;
+  touch-action: manipulation;
+  background: none;
+  padding-inline: 0.25rem;
+  padding-block: 0.5rem;
+  border: 0;
+  cursor: pointer;
+}
+
+.dot--bar i {
+  background: var(--dot-color);
+  height: 0.125rem;
+  width: 1rem;
+}
+
+.dot--selected i {
+  background: var(--dot-color-active);
+}
+
+.dot--circle i {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 8px;
+  border: 2px solid var(--dot-color-active);
+}
+
+.dot--circle.dot--selected i {
+  width: 30px;
+}