@deepfuture/dui-theme-default 0.0.1

package/base.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Themed base styles — minor :host defaults.
+ * Visual defaults (color, font-family, line-height, font-smoothing)
+ * live on :root in tokens.css so they cascade naturally.
+ */
+export declare const themedBase: import("lit").CSSResult;

package/base.js

@@ -0,0 +1,13 @@
+/**
+ * Themed base styles — minor :host defaults.
+ * Visual defaults (color, font-family, line-height, font-smoothing)
+ * live on :root in tokens.css so they cascade naturally.
+ */
+import { css } from "lit";
+export const themedBase = css `
+  :host {
+    font-size: inherit;
+    letter-spacing: inherit;
+    font-optical-sizing: auto;
+  }
+`;

package/components/accordion-item.d.ts

@@ -0,0 +1 @@
+export declare const accordionItemStyles: import("lit").CSSResult;

package/components/accordion-item.js

@@ -0,0 +1,89 @@
+import { css } from "lit";
+export const accordionItemStyles = css `
+  /* ── Item ── */
+
+  [part="item"] {
+    border-bottom: var(
+      --accordion-item-border,
+      var(--border-width-thin) solid var(--border)
+    );
+  }
+
+  /* ── Trigger ── */
+
+  [part="trigger"] {
+    gap: var(--space-4);
+    padding-block: var(--space-2);
+    padding-inline: 0;
+    color: var(--foreground);
+    font-family: var(--font-sans);
+    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-sm);
+    height: var(--component-height-md);
+    line-height: var(--line-height-normal);
+    border-radius: var(--radius-sm);
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-out-3);
+  }
+
+  @media (hover: hover) {
+    [part="trigger"]:hover {
+      background: color-mix(in oklch, var(--muted) 50%, transparent);
+    }
+  }
+
+  [part="trigger"]:focus-visible {
+    box-shadow:
+      0 0 0 var(--space-0_5) var(--background),
+      0 0 0 var(--space-1) var(--ring);
+    z-index: 1;
+  }
+
+  [part="trigger"][data-disabled] {
+    opacity: 0.5;
+  }
+
+  /* ── Indicator ── */
+
+  [part="indicator"] {
+    width: var(--space-4);
+    height: var(--space-4);
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-out-3);
+  }
+
+  [part="trigger"][data-open] [part="indicator"] {
+    transform: rotate(180deg);
+  }
+
+  /* ── Panel ── */
+
+  [part="panel"] {
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-out-3);
+  }
+
+  [part="panel"][data-starting-style],
+  [part="panel"][data-ending-style] {
+    height: 0;
+  }
+
+  [part="content"] {
+    padding: 0 0 var(--space-3);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-normal);
+    color: color-mix(in oklch, var(--foreground) 80%, transparent);
+  }
+
+  /* ── Reduced motion ── */
+
+  @media (prefers-reduced-motion: reduce) {
+    [part="trigger"],
+    [part="indicator"],
+    [part="panel"] {
+      transition-duration: 0s;
+    }
+  }
+`;

package/components/accordion.d.ts

@@ -0,0 +1 @@
+export declare const accordionStyles: import("lit").CSSResult;

package/components/accordion.js

@@ -0,0 +1,6 @@
+import { css } from "lit";
+export const accordionStyles = css `
+  ::slotted(:last-child) {
+    --accordion-item-border: none;
+  }
+`;

package/components/alert-dialog-popup.d.ts

@@ -0,0 +1 @@
+export declare const alertDialogPopupStyles: import("lit").CSSResult;

package/components/alert-dialog-popup.js

@@ -0,0 +1,72 @@
+import { css } from "lit";
+export const alertDialogPopupStyles = css `
+  /* ── Backdrop ── */
+
+  [part="backdrop"] {
+    background: black;
+    opacity: 0.2;
+    transition: opacity var(--duration-fast) var(--ease-out-3);
+  }
+
+  @container style(--theme: dark) {
+    [part="backdrop"] {
+      opacity: 0.7;
+    }
+  }
+
+  [part="backdrop"][data-starting-style],
+  [part="backdrop"][data-ending-style] {
+    opacity: 0;
+  }
+
+  /* ── Popup ── */
+
+  [part="popup"] {
+    margin-top: calc(-1 * var(--space-8));
+    padding: var(--space-6);
+    border-radius: var(--radius-lg);
+    border: var(--border-width-thin) solid var(--border);
+    background: var(--card);
+    color: var(--card-foreground);
+    font-family: var(--font-sans);
+    transition-duration: var(--duration-fast);
+  }
+
+  [part="popup"][data-starting-style],
+  [part="popup"][data-ending-style] {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.9);
+  }
+
+  /* ── Title ── */
+
+  [part="title"] {
+    margin-top: calc(-1 * var(--space-1));
+    margin-bottom: var(--space-1);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-lg);
+    letter-spacing: var(--letter-spacing-tighter);
+    line-height: var(--line-height-tight);
+    font-weight: var(--font-weight-medium);
+    color: var(--foreground);
+  }
+
+  /* ── Description ── */
+
+  [part="description"] {
+    margin: 0 0 var(--space-6);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-md);
+    line-height: var(--line-height-normal);
+    color: var(--muted-foreground);
+  }
+
+  /* ── Reduced motion ── */
+
+  @media (prefers-reduced-motion: reduce) {
+    [part="backdrop"],
+    [part="popup"] {
+      transition-duration: 0s;
+    }
+  }
+`;

package/components/alert-dialog.d.ts

@@ -0,0 +1 @@
+export declare const alertDialogStyles: import("lit").CSSResult;

package/components/alert-dialog.js

@@ -0,0 +1,2 @@
+import { css } from "lit";
+export const alertDialogStyles = css ``;

package/components/avatar.d.ts

@@ -0,0 +1 @@
+export declare const avatarStyles: import("lit").CSSResult;

package/components/avatar.js

@@ -0,0 +1,22 @@
+import { css } from "lit";
+export const avatarStyles = css `
+  :host {
+    --avatar-bg: var(--muted);
+    --avatar-fg: var(--muted-foreground);
+  }
+
+  [part="root"] {
+    --icon-size: calc(var(--avatar-size) * 0.5);
+    --icon-color: var(--avatar-fg);
+    border-radius: var(--radius-full);
+    background: var(--avatar-bg);
+    color: var(--avatar-fg);
+  }
+
+  [part="fallback"] {
+    font-family: var(--font-sans);
+    font-size: calc(var(--avatar-size) * 0.4);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-none);
+  }
+`;

package/components/badge.d.ts

@@ -0,0 +1 @@
+export declare const badgeStyles: import("lit").CSSResult;

package/components/badge.js

@@ -0,0 +1,58 @@
+import { css } from "lit";
+export const badgeStyles = css `
+  :host {
+    --badge-bg: var(--primary);
+    --badge-fg: var(--primary-foreground);
+    --badge-border: transparent;
+    --badge-icon-size: var(--space-3);
+    --icon-size: var(--badge-icon-size);
+    --icon-color: var(--badge-fg);
+  }
+
+  :host([variant="secondary"]) {
+    --badge-bg: var(--secondary);
+    --badge-fg: var(--secondary-foreground);
+  }
+
+  :host([variant="destructive"]) {
+    --badge-bg: var(--destructive);
+    --badge-fg: var(--destructive-foreground);
+  }
+
+  :host([variant="outline"]) {
+    --badge-bg: transparent;
+    --badge-fg: var(--primary);
+    --badge-border: color-mix(in oklch, var(--primary) 25%, transparent);
+  }
+
+  :host([variant="success"]) {
+    --badge-bg: var(--success);
+    --badge-fg: var(--success-foreground);
+  }
+
+  :host([variant="warning"]) {
+    --badge-bg: var(--warning);
+    --badge-fg: var(--warning-foreground);
+  }
+
+  :host([variant="info"]) {
+    --badge-bg: var(--info);
+    --badge-fg: var(--info-foreground);
+  }
+
+  [part="root"] {
+    gap: var(--space-1);
+    height: var(--space-5);
+    padding: 0 var(--space-2);
+    border-radius: var(--radius-full);
+    background: var(--badge-bg);
+    color: var(--badge-fg);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-xs);
+    letter-spacing: var(--letter-spacing-normal);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-snug);
+    white-space: nowrap;
+    border: var(--border-width-thin) solid var(--badge-border);
+  }
+`;

package/components/breadcrumb-ellipsis.d.ts

@@ -0,0 +1 @@
+export declare const breadcrumbEllipsisStyles: import("lit").CSSResult;

package/components/breadcrumb-ellipsis.js

@@ -0,0 +1,7 @@
+import { css } from "lit";
+export const breadcrumbEllipsisStyles = css `
+  [part="root"] {
+    color: var(--muted-foreground);
+    width: var(--space-4);
+  }
+`;

package/components/breadcrumb-item.d.ts

@@ -0,0 +1 @@
+export declare const breadcrumbItemStyles: import("lit").CSSResult;

package/components/breadcrumb-item.js

@@ -0,0 +1,6 @@
+import { css } from "lit";
+export const breadcrumbItemStyles = css `
+  [part="root"] {
+    gap: var(--space-1_5);
+  }
+`;

package/components/breadcrumb-link.d.ts

@@ -0,0 +1 @@
+export declare const breadcrumbLinkStyles: import("lit").CSSResult;

package/components/breadcrumb-link.js

@@ -0,0 +1,16 @@
+import { css } from "lit";
+export const breadcrumbLinkStyles = css `
+  [part="root"] {
+    color: var(--muted-foreground);
+  }
+
+  [part="root"] ::slotted(a) {
+    color: inherit;
+    text-decoration: none;
+    transition: color var(--duration-fast);
+  }
+
+  [part="root"] ::slotted(a:hover) {
+    color: var(--foreground);
+  }
+`;

package/components/breadcrumb-page.d.ts

@@ -0,0 +1 @@
+export declare const breadcrumbPageStyles: import("lit").CSSResult;

package/components/breadcrumb-page.js

@@ -0,0 +1,7 @@
+import { css } from "lit";
+export const breadcrumbPageStyles = css `
+  [part="root"] {
+    color: var(--foreground);
+    font-weight: var(--font-weight-regular);
+  }
+`;

package/components/breadcrumb-separator.d.ts

@@ -0,0 +1 @@
+export declare const breadcrumbSeparatorStyles: import("lit").CSSResult;

package/components/breadcrumb-separator.js

@@ -0,0 +1,7 @@
+import { css } from "lit";
+export const breadcrumbSeparatorStyles = css `
+  [part="root"] {
+    --icon-size: var(--space-3_5);
+    color: color-mix(in oklch, var(--muted-foreground) 50%, transparent);
+  }
+`;

package/components/breadcrumb.d.ts

@@ -0,0 +1 @@
+export declare const breadcrumbStyles: import("lit").CSSResult;

package/components/breadcrumb.js

@@ -0,0 +1,9 @@
+import { css } from "lit";
+export const breadcrumbStyles = css `
+  [part="root"] {
+    gap: var(--space-2);
+    font-size: var(--font-size-sm);
+    font-family: var(--font-sans);
+    color: var(--muted-foreground);
+  }
+`;

package/components/button.d.ts

@@ -0,0 +1 @@
+export declare const buttonStyles: import("lit").CSSResult;

package/components/button.js

@@ -0,0 +1,137 @@
+import { css } from "lit";
+export const buttonStyles = css `
+  /* ---------------------------------------------------------------
+   * Variables: only what variants and sizes actually toggle.
+   * Everything else — filters, transforms, clip-paths, shadows,
+   * text-decoration — consumers style via ::part(root).
+   * --------------------------------------------------------------- */
+  :host {
+    --button-bg: var(--primary);
+    --button-fg: var(--primary-foreground);
+    --button-border: transparent;
+    --button-hover-bg: color-mix(in oklch, var(--button-bg) 95%, var(--foreground));
+    --button-active-bg: color-mix(in oklch, var(--button-bg) 90%, var(--foreground));
+    --button-height: var(--component-height-md);
+    --button-width: auto;
+    --button-padding-y: var(--space-2);
+    --button-padding-x: var(--space-2_5);
+    --button-gap: var(--space-1_5);
+    --button-radius: var(--radius-md);
+    --button-font-size: var(--font-size-sm);
+    --button-icon-size: var(--space-4_5);
+  }
+
+  /* --- Variants (swap colors) --- */
+
+  :host([variant="secondary"]) {
+    --button-bg: var(--secondary);
+    --button-fg: var(--secondary-foreground);
+    --button-border: transparent;
+  }
+
+  :host([variant="destructive"]) {
+    --button-bg: var(--destructive);
+    --button-fg: var(--destructive-foreground);
+    --button-border: transparent;
+  }
+
+  :host([variant="outline"]) {
+    --button-fg: var(--foreground);
+    --button-border: var(--input);
+    --button-bg: var(--input-bg);
+    --button-hover-bg: var(--muted);
+    --button-active-bg: var(--muted);
+  }
+
+  :host([variant="ghost"]) {
+    --button-bg: transparent;
+    --button-fg: var(--foreground);
+    --button-border: transparent;
+    --button-hover-bg: var(--muted);
+    --button-active-bg: var(--muted);
+  }
+
+  :host([variant="link"]) {
+    --button-bg: transparent;
+    --button-fg: var(--foreground);
+    --button-border: transparent;
+    --button-hover-bg: transparent;
+    --button-active-bg: transparent;
+  }
+
+  /* --- Sizes (swap dimensions) --- */
+
+  :host([size="sm"]) {
+    --button-height: var(--component-height-sm);
+    --button-padding-y: var(--space-1_5);
+    --button-padding-x: var(--space-2);
+    --button-gap: var(--space-1);
+    --button-font-size: var(--font-size-xs);
+    --button-icon-size: var(--space-4);
+  }
+
+  :host([size="lg"]) {
+    --button-height: var(--component-height-lg);
+    --button-padding-y: var(--space-2_5);
+    --button-padding-x: var(--space-3);
+    --button-gap: var(--space-1_5);
+    --button-font-size: var(--font-size-sm);
+    --button-icon-size: var(--space-4_5);
+  }
+
+  /* --- Base appearance --- */
+
+  [part="root"] {
+    --icon-size: var(--button-icon-size);
+    --icon-color: var(--button-fg);
+    gap: var(--button-gap);
+    padding: var(--button-padding-y) var(--button-padding-x);
+    width: var(--button-width);
+    height: var(--button-height);
+    border: var(--border-width-thin) solid var(--button-border);
+    border-radius: var(--button-radius);
+    background: var(--button-bg);
+    color: var(--button-fg);
+    font-family: var(--font-sans);
+    font-weight: var(--font-weight-medium);
+    font-size: var(--button-font-size);
+    letter-spacing: var(--letter-spacing-tight);
+    line-height: var(--line-height-snug);
+    white-space: nowrap;
+    transition-duration: var(--duration-faster);
+    transition-timing-function: var(--ease-out-3);
+  }
+
+  /* --- Interactive states --- */
+
+  [part="root"]:hover:not(:disabled):not([aria-disabled="true"]) {
+    background: var(--button-hover-bg);
+  }
+
+  [part="root"]:active:not(:disabled):not([aria-disabled="true"]) {
+    background: var(--button-active-bg);
+  }
+
+  [part="root"]:focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 var(--space-0_5) var(--background),
+      0 0 0 var(--space-1) var(--ring);
+  }
+
+  [part="root"]:disabled,
+  [part="root"][aria-disabled="true"] {
+    opacity: 0.2;
+    cursor: not-allowed;
+  }
+
+  :host([variant="link"])
+    [part="root"]:hover:not(:disabled):not([aria-disabled="true"]) {
+    text-decoration: underline;
+    text-underline-offset: 4px;
+  }
+
+  :host([data-open]) [part="root"]:not(:disabled):not([aria-disabled="true"]) {
+    background: var(--button-hover-bg);
+  }
+`;

package/components/calendar.d.ts

@@ -0,0 +1 @@
+export declare const calendarStyles: import("lit").CSSResult;

package/components/calendar.js

@@ -0,0 +1,88 @@
+import { css } from "lit";
+export const calendarStyles = css `
+  [part="root"] {
+    padding: var(--space-3);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-sm);
+  }
+
+  [part="header"] {
+    padding-bottom: var(--space-2);
+  }
+
+  [part="heading"] {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    color: var(--foreground);
+  }
+
+  [part="prev"],
+  [part="next"] {
+    width: var(--space-7);
+    height: var(--space-7);
+    border-radius: var(--radius-md);
+    color: var(--muted-foreground);
+    font-size: var(--font-size-lg);
+    transition-property: background, color;
+    transition-duration: var(--duration-fast);
+  }
+
+  @media (hover: hover) {
+    [part="prev"]:hover,
+    [part="next"]:hover {
+      background: var(--muted);
+      color: var(--foreground);
+    }
+  }
+
+  [part="weekday"] {
+    width: var(--space-8);
+    height: var(--space-8);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-normal);
+    color: var(--muted-foreground);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  [part="day"] {
+    width: var(--space-8);
+    height: var(--space-8);
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-sm);
+    color: var(--foreground);
+    transition-property: background, color;
+    transition-duration: var(--duration-fast);
+  }
+
+  @media (hover: hover) {
+    [part="day"]:hover:not(:disabled):not([data-selected]) {
+      background: var(--muted);
+    }
+  }
+
+  [part="day"][data-today]:not([data-selected]) {
+    background: var(--accent);
+    color: var(--accent-foreground);
+  }
+
+  [part="day"][data-selected] {
+    background: var(--primary);
+    color: var(--primary-foreground);
+  }
+
+  [part="day"][data-outside-month] {
+    color: var(--muted-foreground);
+    opacity: 0.5;
+  }
+
+  [part="day"]:disabled {
+    opacity: 0.3;
+  }
+
+  [part="day"]:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+`;

package/components/center.d.ts

@@ -0,0 +1 @@
+export declare const centerStyles: import("lit").CSSResult;

package/components/center.js

@@ -0,0 +1,2 @@
+import { css } from "lit";
+export const centerStyles = css ``;

package/components/checkbox-group.d.ts

@@ -0,0 +1 @@
+export declare const checkboxGroupStyles: import("lit").CSSResult;

package/components/checkbox-group.js

@@ -0,0 +1,10 @@
+import { css } from "lit";
+export const checkboxGroupStyles = css `
+  [part="root"] {
+    gap: var(--space-1);
+  }
+
+  [part="root"][data-disabled] {
+    opacity: 0.5;
+  }
+`;

package/components/checkbox.d.ts

@@ -0,0 +1 @@
+export declare const checkboxStyles: import("lit").CSSResult;