@threadlabs/looma 0.5.1 → 0.6.0-rc.1

package/styles/ui-tree.css

@@ -1,6 +1,12 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-tree"]) to ([data-component], [data-slotted]) {
-:scope {
+:scope[data-ui-tree-state~="density=compact"] {
+      --ui-tree-item-min-block-size: var(--ui-control-size-sm);
+      --ui-tree-item-font-size: var(--ui-font-size-sm);
+      --ui-tree-item-label-padding-block: 0;
+    }
+
+    :scope {
       display: block;
       min-inline-size: 0;
       padding-inline-start: var(--ui-tree-gutter, 0px);

package/theme-dark.css

@@ -2,137 +2,76 @@
   @media (prefers-color-scheme: dark) {
     :root:not([data-theme]) {
       color-scheme: dark;
-      --ui-surface-canvas: #1a1a1a;
-      --ui-surface-default: #1a1a1a;
-      --ui-surface-muted: #242424;
-      --ui-surface-subtle: #2e2e2e;
-      --ui-surface-elevated: #2a2a2a;
-      --ui-control-inset: inset 0 1px 2px rgb(0 0 0 / 0.35);
-      --ui-raised: 0 1px 2px rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.06);
-      --ui-raised-highlight: linear-gradient(rgb(255 255 255 / 0.04), rgb(255 255 255 / 0));
-      --ui-control-focus-halo: color-mix(in srgb, var(--ui-accent-solid) 30%, transparent);
-      --ui-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a09c' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+      --ui-surface: #1a1a1a;
+      --ui-surface-raised: #2a2a2a;
+      --ui-surface-sunken: #2e2e2e;
 
-      --ui-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
-      --ui-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.3);
-      --ui-shadow-md: 0 4px 12px rgb(0 0 0 / 0.5), 0 2px 4px rgb(0 0 0 / 0.3);
-      --ui-shadow-lg: 0 10px 28px rgb(0 0 0 / 0.55), 0 4px 10px rgb(0 0 0 / 0.35);
-      --ui-shadow-xl: 0 18px 48px rgb(0 0 0 / 0.6), 0 8px 18px rgb(0 0 0 / 0.4);
-
-      --ui-text-primary: #f0f0ec;
+      --ui-text: #f0f0ec;
       --ui-text-secondary: #a0a09c;
       --ui-text-muted: #6a6a66;
-      --ui-text-on-accent: #1a1a1a;
+      --ui-on-accent: #1a1a1a;
+      --ui-on-danger: #1a1a1a;
 
-      --ui-border-subtle: #2b2b28;
-      --ui-border-default: #333330;
+      --ui-border: #333330;
       --ui-border-strong: #4a4a46;
       --ui-focus-ring: #a99bf5;
-
-      /* Form controls need a visible 3:1 boundary and 4.5:1 placeholder text;
-         general dividers intentionally remain quieter. */
-      --ui-control-surface: #202020;
-      --ui-control-surface-disabled: #242424;
       --ui-control-border: #6f6f69;
-      --ui-control-border-hover: #92928c;
-      --ui-control-placeholder: #a0a09c;
 
-      --ui-accent-solid: #a99bf5;
+      --ui-accent: #a99bf5;
       --ui-accent-hover: #b9adff;
       --ui-accent-active: #c8beff;
-      --ui-accent-soft: #282342;
+      --ui-accent-subtle: #282342;
 
-      --ui-danger-solid: #ef6f86;
+      --ui-danger: #ef6f86;
       --ui-danger-hover: #f58a9d;
-      --ui-danger-soft: #321b22;
-      --ui-success-solid: #33cc66;
-      --ui-success-soft: #162a1f;
-      --ui-warning-solid: #ffaa22;
-      --ui-warning-soft: #2d2410;
-      --ui-info-solid: #4d9fff;
-      --ui-info-soft: #1a2a3d;
-      --ui-accent-strong-surface: #5148c8;
-      --ui-accent-on-strong: #ffffff;
-      --ui-accent-subtle-text: #b8b3ff;
-      --ui-danger-strong-surface: #a61b3c;
-      --ui-danger-on-strong: #ffffff;
-      --ui-danger-subtle-text: #ff9aae;
-      --ui-success-strong-surface: #006b2d;
-      --ui-success-on-strong: #ffffff;
-      --ui-success-subtle-text: #62dc89;
-      --ui-warning-strong-surface: #d69a0a;
-      --ui-warning-on-strong: #1f1500;
-      --ui-warning-subtle-text: #ffc45c;
-      --ui-info-strong-surface: #075cad;
-      --ui-info-on-strong: #ffffff;
-      --ui-info-subtle-text: #7eb8ff;
+      --ui-success: #33cc66;
+      --ui-warning: #ffaa22;
+      --ui-info: #4d9fff;
+
+      /* Depth reads differently on a dark surface: deeper shadows, a lit top edge. */
+      --ui-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.3);
+      --ui-shadow-lg: 0 10px 28px rgb(0 0 0 / 0.55), 0 4px 10px rgb(0 0 0 / 0.35);
+      --ui-control-inset: inset 0 1px 2px rgb(0 0 0 / 0.35);
+      --ui-raised: 0 1px 2px rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.06);
+      --ui-raised-highlight: linear-gradient(rgb(255 255 255 / 0.04), rgb(255 255 255 / 0));
+      --ui-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a09c' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
     }
   }
 
   [data-theme="dark"] {
     color-scheme: dark;
-    --ui-surface-canvas: #1a1a1a;
-    --ui-surface-default: #1a1a1a;
-    --ui-surface-muted: #242424;
-    --ui-surface-subtle: #2e2e2e;
-    --ui-surface-elevated: #2a2a2a;
-    --ui-control-inset: inset 0 1px 2px rgb(0 0 0 / 0.35);
-    --ui-raised: 0 1px 2px rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.06);
-    --ui-raised-highlight: linear-gradient(rgb(255 255 255 / 0.04), rgb(255 255 255 / 0));
-    --ui-control-focus-halo: color-mix(in srgb, var(--ui-accent-solid) 30%, transparent);
-    --ui-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a09c' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    --ui-surface: #1a1a1a;
+    --ui-surface-raised: #2a2a2a;
+    --ui-surface-sunken: #2e2e2e;
 
-    --ui-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
-    --ui-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.3);
-    --ui-shadow-md: 0 4px 12px rgb(0 0 0 / 0.5), 0 2px 4px rgb(0 0 0 / 0.3);
-    --ui-shadow-lg: 0 10px 28px rgb(0 0 0 / 0.55), 0 4px 10px rgb(0 0 0 / 0.35);
-    --ui-shadow-xl: 0 18px 48px rgb(0 0 0 / 0.6), 0 8px 18px rgb(0 0 0 / 0.4);
-
-    --ui-text-primary: #f0f0ec;
+    --ui-text: #f0f0ec;
     --ui-text-secondary: #a0a09c;
     --ui-text-muted: #6a6a66;
-    --ui-text-on-accent: #1a1a1a;
+    --ui-on-accent: #1a1a1a;
+    --ui-on-danger: #1a1a1a;
 
-    --ui-border-subtle: #2b2b28;
-    --ui-border-default: #333330;
+    --ui-border: #333330;
     --ui-border-strong: #4a4a46;
     --ui-focus-ring: #a99bf5;
-
-    /* Keep explicit dark mode identical to the system-dark palette. */
-    --ui-control-surface: #202020;
-    --ui-control-surface-disabled: #242424;
     --ui-control-border: #6f6f69;
-    --ui-control-border-hover: #92928c;
-    --ui-control-placeholder: #a0a09c;
 
-    --ui-accent-solid: #a99bf5;
+    --ui-accent: #a99bf5;
     --ui-accent-hover: #b9adff;
     --ui-accent-active: #c8beff;
-    --ui-accent-soft: #282342;
+    --ui-accent-subtle: #282342;
 
-    --ui-danger-solid: #ef6f86;
+    --ui-danger: #ef6f86;
     --ui-danger-hover: #f58a9d;
-    --ui-danger-soft: #321b22;
-    --ui-success-solid: #33cc66;
-    --ui-success-soft: #162a1f;
-    --ui-warning-solid: #ffaa22;
-    --ui-warning-soft: #2d2410;
-    --ui-info-solid: #4d9fff;
-    --ui-info-soft: #1a2a3d;
-    --ui-accent-strong-surface: #5148c8;
-    --ui-accent-on-strong: #ffffff;
-    --ui-accent-subtle-text: #b8b3ff;
-    --ui-danger-strong-surface: #a61b3c;
-    --ui-danger-on-strong: #ffffff;
-    --ui-danger-subtle-text: #ff9aae;
-    --ui-success-strong-surface: #006b2d;
-    --ui-success-on-strong: #ffffff;
-    --ui-success-subtle-text: #62dc89;
-    --ui-warning-strong-surface: #d69a0a;
-    --ui-warning-on-strong: #1f1500;
-    --ui-warning-subtle-text: #ffc45c;
-    --ui-info-strong-surface: #075cad;
-    --ui-info-on-strong: #ffffff;
-    --ui-info-subtle-text: #7eb8ff;
+    --ui-success: #33cc66;
+    --ui-warning: #ffaa22;
+    --ui-info: #4d9fff;
+
+    /* Depth reads differently on a dark surface: deeper shadows, a lit top edge. */
+    --ui-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.3);
+    --ui-shadow-lg: 0 10px 28px rgb(0 0 0 / 0.55), 0 4px 10px rgb(0 0 0 / 0.35);
+    --ui-control-inset: inset 0 1px 2px rgb(0 0 0 / 0.35);
+    --ui-raised: 0 1px 2px rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.06);
+    --ui-raised-highlight: linear-gradient(rgb(255 255 255 / 0.04), rgb(255 255 255 / 0));
+    --ui-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a09c' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
   }
 }

package/theme-high-contrast.css

@@ -2,46 +2,42 @@
   @media (prefers-contrast: more) {
     :root:not([data-contrast]) {
       color-scheme: light;
-      --ui-surface-canvas: #ffffff;
-      --ui-surface-default: #ffffff;
-      --ui-surface-muted: #f8f8f6;
-      --ui-surface-subtle: #f0f0ec;
-      --ui-surface-elevated: #ffffff;
-      --ui-text-primary: #000000;
+      --ui-surface: #ffffff;
+      --ui-surface-raised: #ffffff;
+      --ui-surface-sunken: #f0f0ec;
+      --ui-text: #000000;
       --ui-text-secondary: #111111;
       --ui-text-muted: #222222;
-      --ui-border-default: #000000;
+      --ui-border: #000000;
       --ui-border-strong: #000000;
+      --ui-control-border: #000000;
       --ui-focus-ring: #0000ff;
-      --ui-accent-solid: #0000cc;
+      --ui-accent: #0000cc;
       --ui-accent-hover: #000080;
       --ui-accent-active: #000066;
-      --ui-accent-soft: #e6e6ff;
-      --ui-danger-solid: #8b0000;
+      --ui-accent-subtle: #e6e6ff;
+      --ui-danger: #8b0000;
       --ui-danger-hover: #5c0000;
-      --ui-danger-soft: #fff0f0;
     }
   }
 
   [data-contrast="high"] {
     color-scheme: light;
-    --ui-surface-canvas: #ffffff;
-    --ui-surface-default: #ffffff;
-    --ui-surface-muted: #f8f8f6;
-    --ui-surface-subtle: #f0f0ec;
-    --ui-surface-elevated: #ffffff;
-    --ui-text-primary: #000000;
+    --ui-surface: #ffffff;
+    --ui-surface-raised: #ffffff;
+    --ui-surface-sunken: #f0f0ec;
+    --ui-text: #000000;
     --ui-text-secondary: #111111;
     --ui-text-muted: #222222;
-    --ui-border-default: #000000;
+    --ui-border: #000000;
     --ui-border-strong: #000000;
+    --ui-control-border: #000000;
     --ui-focus-ring: #0000ff;
-    --ui-accent-solid: #0000cc;
+    --ui-accent: #0000cc;
     --ui-accent-hover: #000080;
     --ui-accent-active: #000066;
-    --ui-accent-soft: #e6e6ff;
-    --ui-danger-solid: #8b0000;
+    --ui-accent-subtle: #e6e6ff;
+    --ui-danger: #8b0000;
     --ui-danger-hover: #5c0000;
-    --ui-danger-soft: #fff0f0;
   }
 }

package/theme-light.css

@@ -2,58 +2,32 @@
   :root:not([data-theme]),
   [data-theme="light"] {
     color-scheme: light;
-    --ui-surface-canvas: #ffffff;
-    --ui-surface-default: #ffffff;
-    --ui-surface-muted: #f8f8f6;
-    --ui-surface-subtle: #f0f0ec;
-    --ui-surface-elevated: #ffffff;
+    --ui-surface: #ffffff;
+    --ui-surface-raised: #ffffff;
+    --ui-surface-sunken: #f0f0ec;
 
-    --ui-text-primary: #1a1a1a;
+    --ui-text: #1a1a1a;
     --ui-text-secondary: #5c5c5c;
     --ui-text-muted: #9b9b9b;
-    --ui-text-on-accent: #ffffff;
+    --ui-on-accent: #ffffff;
+    --ui-on-danger: #ffffff;
 
-    --ui-border-subtle: #ecece8;
-    --ui-border-default: #e4e4e0;
+    --ui-border: #e4e4e0;
     --ui-border-strong: #c8c8c4;
     --ui-focus-ring: #5b55d6;
-
-    /* Form controls need a visible 3:1 boundary and 4.5:1 placeholder text;
-       general dividers intentionally remain quieter. */
-    --ui-control-surface: #ffffff;
-    --ui-control-surface-disabled: #f0f0ec;
+    /* A control needs a visible 3:1 boundary; general dividers stay quieter. */
     --ui-control-border: #858580;
-    --ui-control-border-hover: #5c5c58;
-    --ui-control-placeholder: #62625e;
 
-    --ui-accent-solid: #5b55d6;
+    --ui-accent: #5b55d6;
     --ui-accent-hover: #4b45bd;
     --ui-accent-active: #3e399e;
-    --ui-accent-soft: #efeffc;
+    --ui-accent-subtle: #efeffc;
 
-    --ui-danger-solid: #b4233f;
+    --ui-danger: #b4233f;
     --ui-danger-hover: #941d35;
-    --ui-danger-soft: #fceef1;
-    --ui-success-solid: #007a33;
-    --ui-success-soft: #edf7f1;
-    --ui-warning-solid: #cc8800;
-    --ui-warning-soft: #fdf7e6;
-    --ui-info-solid: #0066cc;
-    --ui-info-soft: #e8f0fb;
-    --ui-accent-strong-surface: #5b55d6;
-    --ui-accent-on-strong: #ffffff;
-    --ui-accent-subtle-text: #3e399e;
-    --ui-danger-strong-surface: #b4233f;
-    --ui-danger-on-strong: #ffffff;
-    --ui-danger-subtle-text: #941d35;
-    --ui-success-strong-surface: #007a33;
-    --ui-success-on-strong: #ffffff;
-    --ui-success-subtle-text: #006629;
-    --ui-warning-strong-surface: #b45309;
-    --ui-warning-on-strong: #ffffff;
-    --ui-warning-subtle-text: #704800;
-    --ui-info-strong-surface: #0066cc;
-    --ui-info-on-strong: #ffffff;
-    --ui-info-subtle-text: #0058b0;
+    --ui-success: #007a33;
+    /* Deep amber, so a solid warning surface carries white text like the other tones (5:1). */
+    --ui-warning: #b45309;
+    --ui-info: #0066cc;
   }
 }