@deepfuture/dui-theme-default 0.0.1

package/components/checkbox.js

@@ -0,0 +1,53 @@
+import { css } from "lit";
+export const checkboxStyles = css `
+  :host {
+    --checkbox-size: var(--space-4_5);
+    gap: var(--space-2);
+  }
+
+  [part="root"] {
+    width: var(--checkbox-size);
+    height: var(--checkbox-size);
+    margin-block-start: calc(
+      (var(--line-height-normal) * 1em - var(--checkbox-size)) / 2
+    );
+    border-radius: var(--radius-sm);
+    transition-duration: var(--duration-fast);
+  }
+
+  [part="root"][data-unchecked] {
+    border: var(--border-width-thin) solid var(--input);
+    background: transparent;
+  }
+
+  [part="root"][data-checked],
+  [part="root"][data-indeterminate] {
+    background: var(--primary);
+    border: var(--border-width-thin) solid var(--primary);
+  }
+
+  [part="root"][data-disabled] {
+    opacity: 0.5;
+  }
+
+  [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"][data-invalid] {
+    background: color-mix(in oklch, var(--destructive) 15%, transparent);
+    border-color: color-mix(in oklch, var(--destructive) 70%, transparent);
+  }
+
+  [part="indicator"] {
+    color: var(--primary-foreground);
+  }
+
+  .Icon {
+    width: 12px;
+    height: 12px;
+  }
+`;

package/components/collapsible.d.ts

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

package/components/collapsible.js

@@ -0,0 +1,80 @@
+import { css } from "lit";
+export const collapsibleStyles = css `
+  /* ── Trigger ── */
+
+  [part="trigger"] {
+    gap: var(--space-4);
+    padding-block: var(--space-2);
+    padding-inline: var(--space-4);
+    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: var(--space-1) var(--space-4) 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/combobox.d.ts

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

package/components/combobox.js

@@ -0,0 +1,99 @@
+import { css } from "lit";
+export const comboboxStyles = css `
+  /* ---- Chips (multi-select container) ---- */
+
+  .Chips {
+    gap: var(--space-1);
+    border: var(--border-width-thin) solid var(--input);
+    border-radius: var(--radius-md);
+    padding: var(--space-1) var(--space-8) var(--space-1) var(--space-1_5);
+    min-height: var(--component-height-md);
+    background: var(--input-bg);
+    transition-property: border-color, box-shadow;
+    transition-duration: var(--duration-fast);
+  }
+
+  .Chips:focus-within:has(:focus-visible) {
+    box-shadow:
+      0 0 0 var(--space-0_5) var(--background),
+      0 0 0 var(--space-1) var(--ring);
+  }
+
+  .Chips[data-disabled] {
+    opacity: 0.5;
+  }
+
+  /* ---- Input ---- */
+
+  .Input {
+    height: var(--component-height-md);
+    color: var(--foreground);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-normal);
+  }
+
+  .Input::placeholder {
+    color: var(--muted-foreground);
+  }
+
+  /* Single-select input wrapper */
+  .InputWrapper .Input {
+    width: 100%;
+    min-height: var(--component-height-md);
+    padding: var(--space-2) var(--space-8) var(--space-2) var(--space-2);
+    border: var(--border-width-thin) solid var(--input);
+    border-radius: var(--radius-md);
+    transition-property: border-color, box-shadow;
+    transition-duration: var(--duration-fast);
+    background: var(--input-bg);
+  }
+
+  .InputWrapper .Input:focus-visible {
+    box-shadow:
+      0 0 0 var(--space-0_5) var(--background),
+      0 0 0 var(--space-1) var(--ring);
+  }
+
+  .InputWrapper .Input[data-disabled] {
+    opacity: 0.5;
+  }
+
+  .Arrow {
+    --icon-size: var(--space-4);
+    right: var(--space-3);
+    color: var(--foreground);
+  }
+
+  /* Multi-select input (inside chips) */
+  .Chips .Input {
+    height: var(--space-6);
+    margin-left: var(--space-1_5);
+  }
+
+  /* ---- Chip ---- */
+
+  .Chip {
+    gap: var(--space-1);
+    background: var(--secondary);
+    color: var(--secondary-foreground);
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-xs);
+    padding: var(--space-0_5) var(--space-0_5) var(--space-0_5) var(--space-2);
+  }
+
+  .ChipRemove {
+    padding: var(--space-0_5);
+    color: inherit;
+    border-radius: var(--radius-sm);
+    --icon-size: var(--space-3_5);
+  }
+
+  .ChipRemove:hover {
+    background: color-mix(
+      in oklch,
+      var(--secondary-foreground) 15%,
+      transparent
+    );
+  }
+`;

package/components/command-empty.d.ts

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

package/components/command-empty.js

@@ -0,0 +1,8 @@
+import { css } from "lit";
+export const commandEmptyStyles = css `
+  .Empty {
+    padding: var(--space-6);
+    font-size: var(--font-size-sm);
+    color: var(--muted-foreground);
+  }
+`;

package/components/command-group.d.ts

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

package/components/command-group.js

@@ -0,0 +1,13 @@
+import { css } from "lit";
+export const commandGroupStyles = css `
+  .Group {
+    padding: var(--space-1_5);
+  }
+
+  .Heading {
+    padding: var(--space-1_5) var(--space-2);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-medium);
+    color: var(--muted-foreground);
+  }
+`;

package/components/command-input.d.ts

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

package/components/command-input.js

@@ -0,0 +1,24 @@
+import { css } from "lit";
+export const commandInputStyles = css `
+  .InputWrapper {
+    gap: var(--space-2);
+    border-bottom: var(--border-width-thin) solid var(--border);
+    padding-inline: var(--space-3);
+  }
+
+  .SearchIcon {
+    color: var(--muted-foreground);
+    width: var(--space-4);
+    height: var(--space-4);
+  }
+
+  .Input {
+    height: var(--component-height-lg);
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-sm);
+  }
+
+  .Input::placeholder {
+    color: var(--muted-foreground);
+  }
+`;

package/components/command-item.d.ts

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

package/components/command-item.js

@@ -0,0 +1,24 @@
+import { css } from "lit";
+export const commandItemStyles = css `
+  .Item {
+    gap: var(--space-2);
+    border-radius: var(--radius-sm);
+    padding: var(--space-1_5) var(--space-2);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .Item[data-selected] {
+    background: var(--secondary);
+    color: var(--foreground);
+  }
+
+  .Item[aria-disabled="true"] {
+    opacity: 0.5;
+  }
+
+  ::slotted(dui-icon) {
+    --icon-size: var(--space-4);
+    color: var(--muted-foreground);
+  }
+`;

package/components/command-list.d.ts

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

package/components/command-list.js

@@ -0,0 +1,11 @@
+import { css } from "lit";
+export const commandListStyles = css `
+  dui-scroll-area {
+    max-height: 300px;
+    height: auto;
+  }
+
+  .List {
+    padding: var(--space-1) 0;
+  }
+`;

package/components/command-separator.d.ts

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

package/components/command-separator.js

@@ -0,0 +1,8 @@
+import { css } from "lit";
+export const commandSeparatorStyles = css `
+  .Separator {
+    height: 1px;
+    margin-inline: calc(-1 * var(--space-1));
+    background: var(--border);
+  }
+`;

package/components/command-shortcut.d.ts

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

package/components/command-shortcut.js

@@ -0,0 +1,7 @@
+import { css } from "lit";
+export const commandShortcutStyles = css `
+  .Shortcut {
+    font-size: var(--font-size-xs);
+    color: var(--muted-foreground);
+  }
+`;

package/components/command.d.ts

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

package/components/command.js

@@ -0,0 +1,8 @@
+import { css } from "lit";
+export const commandStyles = css `
+  :host {
+    border-radius: var(--radius-md);
+    background: var(--popover);
+    color: var(--popover-foreground);
+  }
+`;

package/components/data-table.d.ts

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

package/components/data-table.js

@@ -0,0 +1,113 @@
+import { css } from "lit";
+export const dataTableStyles = css `
+  .DataTable {
+    gap: var(--space-2);
+  }
+
+  .TableWindow {
+    border: var(--border-width-thin) solid var(--border);
+    border-radius: var(--radius-md);
+    scrollbar-color: var(--muted-foreground) transparent;
+    scrollbar-width: thin;
+  }
+
+  table {
+    font-family: var(--font-sans);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-normal);
+  }
+
+  th {
+    height: var(--component-height-lg);
+    padding: 0 var(--space-3);
+    font-weight: var(--font-weight-medium);
+    font-size: var(--font-size-xs);
+    color: var(--muted-foreground);
+    background: var(--muted);
+    border-bottom: var(--border-width-thin) solid var(--border);
+  }
+
+  th[aria-sort]:hover {
+    color: var(--foreground);
+  }
+
+  .HeaderContent {
+    gap: var(--space-1);
+  }
+
+  .SortIcon {
+    width: var(--space-3_5);
+    height: var(--space-3_5);
+    opacity: 0.4;
+  }
+
+  th[aria-sort="ascending"] .SortIcon,
+  th[aria-sort="descending"] .SortIcon {
+    opacity: 1;
+    color: var(--foreground);
+  }
+
+  tbody tr {
+    border-bottom: var(--border-width-thin) solid var(--border);
+    transition-duration: var(--duration-fast);
+  }
+
+  tbody tr:last-child {
+    border-bottom: none;
+  }
+
+  tbody tr:hover {
+    background: var(--muted);
+  }
+
+  td {
+    padding: var(--space-2) var(--space-3);
+    vertical-align: middle;
+  }
+
+  .EmptyRow td {
+    height: 96px;
+    text-align: center;
+    color: var(--muted-foreground);
+  }
+
+  .Pagination {
+    padding: 0 var(--space-1);
+    font-size: var(--font-size-sm);
+    color: var(--muted-foreground);
+  }
+
+  .PageInfo {
+    gap: var(--space-1);
+  }
+
+  .PageControls {
+    gap: var(--space-1);
+  }
+
+  .PageButton {
+    width: var(--component-height-sm);
+    height: var(--component-height-sm);
+    border: var(--border-width-thin) solid var(--border);
+    border-radius: var(--radius-md);
+    color: var(--foreground);
+    font-size: var(--font-size-sm);
+    transition-property: background;
+    transition-duration: var(--duration-fast);
+  }
+
+  .PageButton:hover:not(:disabled) {
+    background: var(--muted);
+  }
+
+  .PageButton:disabled {
+    opacity: 0.3;
+  }
+
+  .PageButton:focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 var(--space-0_5) var(--background),
+      0 0 0 var(--space-1) var(--ring);
+  }
+`;

package/components/dialog-popup.d.ts

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

package/components/dialog-popup.js

@@ -0,0 +1,72 @@
+import { css } from "lit";
+export const dialogPopupStyles = 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/dialog.d.ts

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

package/components/dialog.js

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

package/components/dropzone.d.ts

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

package/components/dropzone.js

@@ -0,0 +1,32 @@
+import { css } from "lit";
+export const dropzoneStyles = css `
+  :host([disabled]) {
+    opacity: 0.5;
+  }
+
+  [part="root"] {
+    border: 2px dashed var(--border);
+    border-radius: var(--radius-md);
+    background: var(--background);
+    color: var(--foreground);
+    padding: var(--space-4);
+    transition-duration: var(--duration-fast);
+  }
+
+  [part="root"]:hover {
+    border-color: var(--ring);
+    background: var(--muted);
+  }
+
+  [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"][data-dragover] {
+    border-color: var(--ring);
+    background: var(--muted);
+  }
+`;

package/components/hstack.d.ts

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

package/components/hstack.js

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

package/components/input.d.ts

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

package/components/input.js

@@ -0,0 +1,53 @@
+import { css } from "lit";
+export const inputStyles = css `
+  [part="input"] {
+    padding: var(--space-2);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-normal);
+    height: var(--component-height-md);
+    color: var(--foreground);
+    border: var(--border-width-thin) solid var(--input);
+    background: var(--input-bg);
+    border-radius: var(--radius-md);
+    transition-duration: var(--duration-fast);
+  }
+
+  [part="input"]::placeholder {
+    color: var(--muted-foreground);
+  }
+
+  [part="input"]:focus-visible {
+    box-shadow:
+      0 0 0 var(--space-0_5) var(--background),
+      0 0 0 var(--space-1) var(--ring);
+  }
+
+  [part="input"]:disabled {
+    opacity: 0.5;
+  }
+
+  [part="input"][data-invalid] {
+    border-color: var(--destructive);
+  }
+
+  [part="input"][data-invalid]:focus-visible {
+    box-shadow:
+      0 0 0 var(--space-0_5) var(--background),
+      0 0 0 var(--space-1) var(--ring);
+  }
+
+  /* Password bullets are tiny at small font sizes — bump them up */
+  [part="input"][type="password"]:not(:placeholder-shown) {
+    font-size: var(--font-size-2xl);
+    font-weight: var(--font-weight-bold);
+  }
+
+  /* Autofill overrides */
+  [part="input"]:-webkit-autofill,
+  [part="input"]:-webkit-autofill:hover,
+  [part="input"]:-webkit-autofill:focus {
+    -webkit-text-fill-color: var(--foreground);
+    transition: background-color 5000s ease-in-out 0s;
+  }
+`;

package/components/link.d.ts

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

package/components/link.js

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