@threadlabs/looma 0.5.2 → 0.6.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.5.2",
+  "version": "0.6.0-rc.1",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-button.css

@@ -24,16 +24,16 @@
 
     :scope {
       appearance: none;
-      min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md, 2.5rem));
+      min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
       border: 1px solid var(--ui-button-border, var(--ui-border-strong));
-      border-radius: var(--ui-button-radius, var(--ui-radius-2));
+      border-radius: var(--ui-button-radius, var(--ui-radius-md));
       background: var(--ui-button-surface, var(--ui-surface-elevated));
       color: var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
       font: inherit;
-      font-weight: var(--ui-font-medium, 500);
+      font-weight: var(--ui-font-medium);
       line-height: var(--ui-line-height-tight);
       padding: var(--ui-space-2) var(--ui-space-3);
-      background-image: var(--ui-raised-highlight, none);
+      background-image: var(--ui-raised-highlight);
       box-shadow: var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs)));
       cursor: pointer;
       transition:
@@ -53,13 +53,13 @@
     }
 
     :scope[data-ui-button-state~="size=sm"] {
-      min-block-size: var(--ui-control-size-sm, 2rem);
+      min-block-size: var(--ui-control-size-sm);
       padding: var(--ui-space-1) var(--ui-space-2);
       font-size: 0.875rem;
     }
 
     :scope[data-ui-button-state~="size=lg"] {
-      min-block-size: var(--ui-control-size-lg, 3rem);
+      min-block-size: var(--ui-control-size-lg);
       padding: var(--ui-space-3) var(--ui-space-4);
       font-size: 1rem;
     }
@@ -122,12 +122,12 @@
 
     /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
     :scope[data-ui-button-state~="variant=ghost"]:hover:enabled {
-      background: var(--ui-button-ghost-hover, color-mix(in srgb, currentColor 8%, transparent));
+      background: var(--ui-button-ghost-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
       border-color: transparent;
     }
 
     :scope[data-ui-button-state~="variant=ghost"]:active:enabled {
-      background: var(--ui-button-ghost-active, color-mix(in srgb, currentColor 14%, transparent));
+      background: var(--ui-button-ghost-active-surface, color-mix(in srgb, currentColor 14%, transparent));
       border-color: transparent;
     }
 
@@ -174,7 +174,7 @@
 
     @media (pointer: coarse) {
       :scope {
-        min-block-size: var(--ui-control-min-block-size, 2.75rem);
+        min-block-size: var(--ui-control-min-block-size);
       }
     }
 
@@ -185,11 +185,11 @@
       min-block-size: 0;
       padding: 0;
       border: 0;
-      border-radius: var(--ui-radius-sm, 4px);
+      border-radius: var(--ui-radius-sm);
       background: none;
       box-shadow: none;
       font: inherit;
-      color: var(--ui-button-link-color, var(--ui-text-secondary));
+      color: var(--ui-button-link-text, var(--ui-text-secondary));
       text-decoration-line: underline;
       text-decoration-thickness: 1px;
       text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
@@ -198,7 +198,7 @@
     }
 
     :scope[data-ui-button-state~="variant=link"]:hover:enabled {
-      color: var(--ui-button-link-hover-color, var(--ui-text-primary));
+      color: var(--ui-button-link-hover-text, var(--ui-text-primary));
       text-decoration-color: currentColor;
       background: none;
       transform: none;
@@ -211,13 +211,13 @@
 
     :scope[data-ui-button-state~="variant=link"]:disabled {
       background: none;
-      color: var(--ui-button-disabled-text, var(--ui-button-link-color, var(--ui-text-secondary)));
+      color: var(--ui-button-disabled-text, var(--ui-button-link-text, var(--ui-text-secondary)));
     }
 
     :scope[data-ui-button-state~="variant=link"]:focus-visible {
       box-shadow: none;
       /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
-      outline: 2px solid var(--ui-focus-ring, currentColor);
+      outline: 2px solid var(--ui-focus-ring);
       outline-offset: 2px;
     }
 

package/styles/ui-callout.css

@@ -13,7 +13,7 @@
       padding: var(--ui-callout-padding-block, var(--ui-space-2)) var(--ui-callout-padding-inline, var(--ui-space-3));
       border: var(--ui-callout-border-width, 1px) solid color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
       border-inline-start: var(--ui-callout-leading-border-width, 4px) solid var(--ui-callout-border, var(--_callout-border));
-      border-radius: var(--ui-radius-2);
+      border-radius: var(--ui-radius-md);
       background: var(--ui-callout-surface, var(--_callout-surface));
       color: var(--ui-callout-text, var(--ui-text-primary));
       font-family: var(--ui-font-family-sans);

package/styles/ui-checkbox.css

@@ -23,7 +23,7 @@
       block-size: var(--ui-checkbox-size, 1.125rem);
       margin: 0.125em 0 0;
       border: 1px solid var(--ui-control-border-hover, var(--ui-border-strong));
-      border-radius: var(--ui-radius-1);
+      border-radius: var(--ui-radius-sm);
       background: var(--ui-control-surface, var(--ui-surface-default));
       box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ui-text-primary) 8%, transparent);
       cursor: pointer;

package/styles/ui-cluster.css

@@ -1,7 +1,7 @@
 /* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-cluster"]) to ([data-component], [data-slotted]) {
 :scope {
-      --_layout-gap: var(--ui-space-3, 0.75rem);
+      --_layout-gap: var(--ui-space-3);
       display: flex;
       flex-wrap: wrap;
       align-items: center;
@@ -12,19 +12,19 @@
     }
 
     :scope[data-ui-cluster-state~="gap=xs"] {
-      --_layout-gap: var(--ui-space-2, 0.5rem);
+      --_layout-gap: var(--ui-space-2);
     }
     :scope[data-ui-cluster-state~="gap=s"] {
-      --_layout-gap: var(--ui-space-3, 0.75rem);
+      --_layout-gap: var(--ui-space-3);
     }
     :scope[data-ui-cluster-state~="gap=m"] {
-      --_layout-gap: var(--ui-space-4, 1rem);
+      --_layout-gap: var(--ui-space-4);
     }
     :scope[data-ui-cluster-state~="gap=l"] {
-      --_layout-gap: var(--ui-space-5, 1.5rem);
+      --_layout-gap: var(--ui-space-5);
     }
     :scope[data-ui-cluster-state~="gap=xl"] {
-      --_layout-gap: var(--ui-space-6, 2rem);
+      --_layout-gap: var(--ui-space-6);
     }
     :scope[data-ui-cluster-state~="align=start"] {
       align-items: flex-start;

package/styles/ui-combobox.css

@@ -8,15 +8,15 @@
       font: inherit;
     }
     label {
-      color: var(--ui-field-label-color, var(--ui-text-primary));
-      font-size: var(--ui-field-label-size, 0.875rem);
-      font-weight: var(--ui-field-label-weight, 500);
+      color: var(--ui-combobox-label-text, var(--ui-text-primary));
+      font-size: var(--ui-combobox-label-font-size, 0.875rem);
+      font-weight: 500;
     }
     .field {
       display: flex;
       min-inline-size: 0;
       border: 1px solid var(--ui-control-border, var(--ui-border-default));
-      border-radius: var(--ui-radius-2);
+      border-radius: var(--ui-radius-md);
       background: var(--ui-control-surface, var(--ui-surface-default));
       box-shadow: var(--ui-control-inset);
       transition: border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
@@ -35,7 +35,7 @@
       appearance: none;
       width: 100%;
       min-inline-size: 0;
-      min-block-size: calc(var(--ui-control-size-md, 2.5rem) - 2px);
+      min-block-size: calc(var(--ui-control-size-md) - 2px);
       box-sizing: border-box;
       border: 0;
       border-radius: inherit;
@@ -48,7 +48,7 @@
       outline: none;
     }
     :scope[data-ui-combobox-state~="size=sm"] input {
-      min-block-size: calc(var(--ui-field-compact-size, var(--ui-control-size-sm, 2rem)) - 2px);
+      min-block-size: calc(var(--ui-control-size-sm) - 2px);
       padding: var(--ui-space-1) var(--ui-space-2);
     }
     button {
@@ -57,19 +57,19 @@
       place-items: center;
       align-self: stretch;
       border: 0;
-      border-radius: var(--ui-radius-2);
+      border-radius: var(--ui-radius-md);
       background: transparent;
-      color: var(--ui-field-affordance-color, var(--ui-text-secondary));
+      color: var(--ui-combobox-affordance-text, var(--ui-text-secondary));
       font: inherit;
-      font-weight: var(--ui-field-affordance-weight, 400);
+      font-weight: 400;
       min-inline-size: 2rem;
       padding: 0 var(--ui-space-1);
       cursor: pointer;
     }
     .affordance-icon {
       display: block;
-      inline-size: var(--ui-icon-size-sm, 1rem);
-      block-size: var(--ui-icon-size-sm, 1rem);
+      inline-size: var(--ui-icon-size-sm);
+      block-size: var(--ui-icon-size-sm);
     }
     button:hover:enabled {
       background: var(--ui-surface-muted);
@@ -99,7 +99,7 @@
       margin: 0;
       padding: var(--ui-space-1);
       border: 1px solid var(--ui-border-default);
-      border-radius: var(--ui-radius-2);
+      border-radius: var(--ui-radius-md);
       background: var(--ui-surface-elevated);
       color: var(--ui-text-primary);
       box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
@@ -109,13 +109,13 @@
     }
     .option {
       padding: var(--ui-space-2) var(--ui-space-3);
-      border-radius: var(--ui-radius-1);
+      border-radius: var(--ui-radius-sm);
       cursor: pointer;
       overflow-wrap: anywhere;
     }
     .option:hover, .option.active {
       background: var(--ui-surface-muted);
-      outline: 1px solid var(--ui-focus-ring, currentColor);
+      outline: 1px solid var(--ui-focus-ring);
       outline-offset: -1px;
     }
     .option[aria-disabled="true"] {
@@ -124,12 +124,12 @@
     }
     .primary {
       display: block;
-      color: var(--ui-option-primary-color, var(--ui-text-primary));
-      font-weight: var(--ui-option-primary-weight, 500);
+      color: var(--ui-combobox-option-text, var(--ui-text-primary));
+      font-weight: 500;
     }
     .message, .group {
-      color: var(--ui-field-message-color, var(--ui-text-secondary));
-      font-weight: var(--ui-field-message-weight, 400);
+      color: var(--ui-combobox-message-text, var(--ui-text-secondary));
+      font-weight: 400;
       font-size: var(--ui-font-size-sm);
       line-height: var(--ui-line-height-md);
       overflow-wrap: anywhere;
@@ -165,11 +165,11 @@
       flex-wrap: wrap;
       align-items: center;
       gap: var(--ui-space-1);
-      min-block-size: var(--ui-multi-combobox-min-block-size, 2.5rem);
+      min-block-size: var(--ui-combobox-item-min-block-size, 2.5rem);
       padding: var(--ui-space-1);
     }
     :scope[data-ui-combobox-state~="multiple"] input {
-      flex: 1 0 var(--ui-multi-combobox-input-min-inline-size, 5rem);
+      flex: 1 0 var(--ui-combobox-item-input-min-inline-size, 5rem);
       width: auto;
       min-block-size: 1.75rem;
       padding: var(--ui-space-0-5) var(--ui-space-1);
@@ -178,18 +178,18 @@
       appearance: none;
       display: inline-flex;
       min-inline-size: 0;
-      max-inline-size: min(100%, var(--ui-multi-combobox-item-max-inline-size, 12rem));
+      max-inline-size: min(100%, var(--ui-combobox-item-item-max-inline-size, 12rem));
       overflow: hidden;
       padding: 0;
       border: 0;
-      border-radius: var(--ui-radius-1);
+      border-radius: var(--ui-radius-sm);
       background: transparent;
       color: inherit;
       font: inherit;
       cursor: default;
     }
     .item:focus-visible {
-      outline: 2px solid var(--ui-focus-ring, currentColor);
+      outline: 2px solid var(--ui-focus-ring);
       outline-offset: 1px;
     }
     .item:disabled {

package/styles/ui-container.css

@@ -2,7 +2,7 @@
 @scope ([data-component~="ui-container"]) to ([data-component], [data-slotted]) {
 :scope {
       --_container-measure: 65ch;
-      --_container-gutters: var(--ui-space-4, 1rem);
+      --_container-gutters: var(--ui-space-4);
       display: block;
       inline-size: 100%;
       max-inline-size: var(--ui-container-measure, var(--_container-measure));
@@ -17,13 +17,13 @@
       --_container-measure: 80ch;
     }
     :scope[data-ui-container-state~="gutters=s"] {
-      --_container-gutters: var(--ui-space-3, 0.75rem);
+      --_container-gutters: var(--ui-space-3);
     }
     :scope[data-ui-container-state~="gutters=m"] {
-      --_container-gutters: var(--ui-space-4, 1rem);
+      --_container-gutters: var(--ui-space-4);
     }
     :scope[data-ui-container-state~="gutters=l"] {
-      --_container-gutters: var(--ui-space-5, 1.5rem);
+      --_container-gutters: var(--ui-space-5);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */

package/styles/ui-context-menu.css

@@ -14,11 +14,11 @@
       padding: var(--ui-space-1);
       background: var(--ui-surface-elevated);
       border: 1px solid var(--ui-border-default);
-      border-radius: var(--ui-radius-3);
+      border-radius: var(--ui-radius-lg);
       box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
       outline: 0;
       overflow: auto;
-      z-index: var(--ui-z-overlay, 1000);
+      z-index: var(--ui-context-menu-z-index, 1000);
       min-width: 12rem;
       opacity: 0;
       transform: translateY(-4px) scale(0.99);

package/styles/ui-dialog.css

@@ -16,11 +16,11 @@
       inset: 0;
       box-sizing: border-box;
       inline-size: min(
-        calc(100% - var(--ui-dialog-viewport-gap, var(--ui-space-4, 1rem)) * 2),
+        calc(100% - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2),
         var(--ui-dialog-max-width, 440px)
       );
       max-inline-size: none;
-      max-block-size: calc(100dvh - var(--ui-dialog-viewport-gap, var(--ui-space-4, 1rem)) * 2);
+      max-block-size: calc(100dvh - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2);
       margin: auto;
       padding: 0;
       overflow: hidden;
@@ -69,8 +69,8 @@
       border: 0;
       color: var(--ui-text-primary);
       letter-spacing: normal;
-      font-size: var(--ui-font-size-lg, 1.125rem);
-      font-weight: var(--ui-font-semibold, 600);
+      font-size: var(--ui-font-size-lg);
+      font-weight: var(--ui-font-semibold);
       line-height: var(--ui-line-height-tight);
     }
 
@@ -79,11 +79,11 @@
       place-items: center;
       flex: none;
       margin-inline-start: auto;
-      inline-size: var(--ui-control-size-sm, 2rem);
-      block-size: var(--ui-control-size-sm, 2rem);
+      inline-size: var(--ui-control-size-sm);
+      block-size: var(--ui-control-size-sm);
       padding: 0;
       border: 0;
-      border-radius: var(--ui-radius-round, 999px);
+      border-radius: var(--ui-radius-round);
       background: transparent;
       color: var(--ui-text-secondary);
       cursor: pointer;
@@ -112,21 +112,21 @@
     }
 
     .close:focus-visible {
-      outline: 2px solid var(--ui-focus-ring, currentColor);
+      outline: 2px solid var(--ui-focus-ring);
       outline-offset: 2px;
     }
 
     /* A touch target, like Button on coarse pointers. */
     @media (pointer: coarse) {
       .close {
-        inline-size: var(--ui-control-min-block-size, 2.75rem);
-        block-size: var(--ui-control-min-block-size, 2.75rem);
+        inline-size: var(--ui-control-min-block-size);
+        block-size: var(--ui-control-min-block-size);
       }
     }
 
     html[data-ui-input-modality="touch"] :scope .close {
-      inline-size: var(--ui-control-min-block-size, 2.75rem);
-      block-size: var(--ui-control-min-block-size, 2.75rem);
+      inline-size: var(--ui-control-min-block-size);
+      block-size: var(--ui-control-min-block-size);
     }
 
     .body {

package/styles/ui-disclosure.css

@@ -1,6 +1,19 @@
 /* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-disclosure"]) to ([data-component], [data-slotted]) {
-/* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
+/* Density resolves into the summary row's own values; the public tokens still override them. */
+    :scope {
+      --_trigger-min-block-size: var(--ui-control-size);
+      --_trigger-padding-block: var(--ui-space-2);
+      --_trigger-padding-inline: var(--ui-space-3);
+    }
+
+    :scope[data-ui-disclosure-state~="density=compact"] {
+      --_trigger-min-block-size: var(--ui-control-size-sm);
+      --_trigger-padding-block: var(--ui-space-1);
+      --_trigger-padding-inline: var(--ui-space-2);
+    }
+
+    /* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
      * select or combobox. Stacked disclosures share their dividers. */
     :scope {
       display: block;
@@ -16,16 +29,17 @@
       gap: var(--ui-space-3);
       align-items: center;
       inline-size: 100%;
-      min-block-size: 2.5rem;
-      padding: var(--ui-space-2) var(--ui-space-3);
+      min-block-size: var(--ui-disclosure-trigger-min-block-size, var(--_trigger-min-block-size));
+      padding: var(--ui-disclosure-trigger-padding-block, var(--_trigger-padding-block))
+        var(--ui-disclosure-trigger-padding-inline, var(--_trigger-padding-inline));
       border: 0;
       background: transparent;
       color: inherit;
       font: inherit;
-      font-weight: var(--ui-font-semibold, 600);
+      font-weight: var(--ui-font-semibold);
       text-align: start;
       cursor: pointer;
-      border-radius: var(--ui-radius-1);
+      border-radius: var(--ui-radius-sm);
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
@@ -85,7 +99,9 @@
     }
 }
 @scope ([data-component~="ui-disclosure"]) to ([data-component]) {
-/* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
+/* Density resolves into the summary row's own values; the public tokens still override them. */
+
+    /* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
      * select or combobox. Stacked disclosures share their dividers. */
 
     @media (prefers-reduced-motion: reduce) {

package/styles/ui-editable.css

@@ -21,11 +21,11 @@
     .input {
       grid-area: 1 / 1;
       box-sizing: border-box;
-      min-block-size: var(--ui-control-size-sm, 2rem);
+      min-block-size: var(--ui-control-size-sm);
       margin: 0;
       padding: var(--ui-space-1) var(--ui-space-2);
       border: 1px solid transparent;
-      border-radius: var(--ui-radius-2);
+      border-radius: var(--ui-radius-md);
       font: inherit;
       line-height: var(--ui-line-height-md);
       color: inherit;
@@ -95,13 +95,13 @@
     }
 
     .actions button {
-      min-block-size: var(--ui-control-size-sm, 2rem);
+      min-block-size: var(--ui-control-size-sm);
       padding: 0 var(--ui-space-3);
       border: 1px solid var(--ui-border-strong);
-      border-radius: var(--ui-radius-2);
+      border-radius: var(--ui-radius-md);
       background: var(--ui-surface-elevated);
-      background-image: var(--ui-raised-highlight, none);
-      box-shadow: var(--ui-raised, none);
+      background-image: var(--ui-raised-highlight);
+      box-shadow: var(--ui-raised);
       color: inherit;
       font: inherit;
       font-size: var(--ui-font-size-sm);

package/styles/ui-editor-insert-table-grid.css

@@ -1,17 +1,17 @@
 /* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-editor-insert-table-grid"]) to ([data-component], [data-slotted]) {
 :scope {
-      padding: var(--ui-space-3, 12px);
-      background: var(--ui-surface, #fff);
-      border: 1px solid var(--ui-border, #e5e7eb);
-      border-radius: var(--ui-radius-md, 6px);
+      padding: var(--ui-space-3);
+      background: var(--ui-surface);
+      border: 1px solid var(--ui-border);
+      border-radius: var(--ui-radius-md);
       box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
     }
 
     .hint {
-      margin: 0 0 var(--ui-space-2, 8px);
-      font-size: var(--ui-text-sm, 0.875rem);
-      color: var(--ui-text-muted, #6b7280);
+      margin: 0 0 var(--ui-space-2);
+      font-size: var(--ui-font-size-sm);
+      color: var(--ui-text-muted);
     }
 
     .grid {
@@ -19,39 +19,39 @@
       grid-template-columns: repeat(var(--ui-editor-table-grid-cols, 8), 1.25rem);
       grid-template-rows: repeat(var(--ui-editor-table-grid-rows, 8), 1.25rem);
       gap: 2px;
-      margin-bottom: var(--ui-space-2, 8px);
+      margin-bottom: var(--ui-space-2);
     }
 
     .cell {
       width: 1.25rem;
       height: 1.25rem;
       padding: 0;
-      border: 1px solid var(--ui-border, #e5e7eb);
+      border: 1px solid var(--ui-border);
       border-radius: 2px;
-      background: var(--ui-surface, #fff);
+      background: var(--ui-surface);
       cursor: pointer;
     }
 
     .cell.selected {
-      background: var(--ui-accent-solid, var(--ui-accent, #0066cc));
-      border-color: var(--ui-accent-solid, var(--ui-accent, #0066cc));
+      background: var(--ui-accent-solid, var(--ui-accent));
+      border-color: var(--ui-accent-solid, var(--ui-accent));
     }
 
     .header {
       display: block;
-      margin-bottom: var(--ui-space-2, 8px);
-      font-size: var(--ui-text-sm, 0.875rem);
+      margin-bottom: var(--ui-space-2);
+      font-size: var(--ui-font-size-sm);
       cursor: pointer;
     }
 
     :scope .insert {
       width: 100%;
-      padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
-      border: 1px solid var(--ui-border, #e5e7eb);
-      border-radius: var(--ui-radius-sm, 4px);
-      background: var(--ui-accent-solid, var(--ui-accent, #0066cc));
-      color: var(--ui-accent-contrast, #fff);
-      font-size: var(--ui-text-sm, 0.875rem);
+      padding: var(--ui-space-2) var(--ui-space-3);
+      border: 1px solid var(--ui-border);
+      border-radius: var(--ui-radius-sm);
+      background: var(--ui-accent-solid, var(--ui-accent));
+      color: var(--ui-accent-contrast);
+      font-size: var(--ui-font-size-sm);
       cursor: pointer;
     }