@threadlabs/looma 0.22.13 → 0.23.0

package/tokens.css

@@ -23,7 +23,7 @@
     --ui-surface-raised: #ffffff;
     --ui-surface-sunken: #f0f0ec;
     --ui-text: #1a1a1a;
-    --ui-focus-halo: 0 0 0 3px color-mix(in srgb, var(--ui-focus-ring) 40%, transparent);
+    --ui-focus-halo: 0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(in srgb, var(--ui-focus-ring) 40%, transparent);
 
     /* Type. */
     --ui-font-sans:
@@ -48,6 +48,11 @@
     --ui-space-3: 0.75rem;
     --ui-space-4: 1rem;
 
+    /* Line dimensions by role. Accent edges follow ordinary lines unless deliberately themed;
+       keyboard focus is independent so a quiet border theme cannot erase the focus indicator. */
+    --ui-border-width: 1px;
+    --ui-focus-width: 2px;
+
     /* Radius. */
     --ui-radius-sm: 0.25rem;
     --ui-radius-md: 0.5rem;
@@ -80,6 +85,8 @@
      never has to: these exist so components share one vocabulary, not to be configured. */
   :root,
   :where([data-theme], [data-contrast]) {
+    --ui-accent-line-width: var(--ui-border-width);
+
     /* Type scale, from the base size. */
     --ui-font-size-2xs: calc(var(--ui-font-size) * 0.6875);
     --ui-font-size-xs: calc(var(--ui-font-size) * 0.75);
@@ -168,6 +175,12 @@
 
     /* Intent tones: a solid surface, its foreground, and a soft tint of each. */
     --ui-accent-solid: var(--ui-accent);
+    /* One quiet selection recipe for destination/content rows. Hue derives from the brand;
+       corners derive from the scale, and selected labels retain their resting weight. */
+    --ui-selection-surface: color-mix(in oklab, var(--ui-accent) 6%, var(--ui-surface));
+    --ui-selection-text: var(--ui-accent-subtle-text);
+    --ui-selection-radius: var(--ui-radius-md);
+
     --ui-accent-soft: var(--ui-accent-subtle);
     --ui-accent-contrast: var(--ui-on-accent);
     --ui-accent-strong-surface: var(--ui-accent);
@@ -210,7 +223,7 @@
     --ui-control-focus: var(--ui-focus-ring);
     /* Derived from the ring, not a near-white tint, so the halo shows on any surface. */
     --ui-control-focus-halo: color-mix(in srgb, var(--ui-focus-ring) 24%, transparent);
-    --ui-control-focus-halo-shadow: 0 0 0 3px var(--ui-control-focus-halo);
+    --ui-control-focus-halo-shadow: 0 0 0 calc(var(--ui-focus-width) * 1.5) var(--ui-control-focus-halo);
     --ui-control-size-md: var(--ui-control-size);
     --ui-control-size-lg: calc(var(--ui-control-size) * 1.2);
 
@@ -292,15 +305,16 @@
 @layer components {
   [data-ui-choice-option] {
     padding: var(--ui-space-2) var(--ui-space-3);
-    border-radius: var(--ui-radius-sm);
+    border-radius: var(--ui-selection-radius);
+    color: var(--ui-text-primary);
     cursor: pointer;
     overflow-wrap: anywhere;
   }
 
   [data-ui-choice-option]:is(:hover, .active) {
     background: var(--ui-surface-muted);
-    outline: 1px solid var(--ui-focus-ring);
-    outline-offset: -1px;
+    outline: var(--ui-border-width) solid var(--ui-focus-ring);
+    outline-offset: calc(-1 * var(--ui-border-width));
   }
 
   [data-ui-choice-option][aria-disabled="true"],
@@ -311,9 +325,9 @@
     cursor: not-allowed;
   }
 
-  [data-ui-choice-option]:not([data-multiple])[aria-selected="true"] {
-    background: color-mix(in srgb, var(--ui-accent-solid) 10%, var(--ui-control-surface));
-    box-shadow: inset 2px 0 var(--ui-accent-solid);
+  [data-ui-choice-option][aria-selected="true"]:not([aria-disabled="true"]) {
+    background: var(--ui-selection-surface);
+    color: var(--ui-selection-text);
   }
 
   [data-ui-choice-option][data-multiple] {
@@ -327,7 +341,7 @@
     flex: none;
     inline-size: 1.125rem;
     block-size: 1.125rem;
-    border: 1px solid var(--ui-control-border-hover, var(--ui-border-strong));
+    border: var(--ui-border-width) solid var(--ui-control-border-hover, var(--ui-border-strong));
     border-radius: var(--ui-radius-sm);
     background-color: var(--ui-control-surface);
     background-repeat: no-repeat;
@@ -347,6 +361,13 @@
     );
   }
 
+  @media (forced-colors: active) {
+    [data-ui-choice-option][aria-selected="true"]:not([aria-disabled="true"]):not(.active) {
+      outline: var(--ui-border-width) solid Highlight;
+      outline-offset: calc(-1 * var(--ui-border-width));
+    }
+  }
+
   [aria-disabled="true"] [data-ui-choice-option] {
     color: var(--ui-disabled-text);
     cursor: not-allowed;

package/vanilla/UiCard.d.ts

@@ -7,7 +7,8 @@ export interface UiCardElement extends HTMLElement {
 }
 export interface UiCardProps {
   as?: "div" | "section" | "article" | "aside" | null;
-  padding?: "sm" | "md" | "lg" | null;
+  padding?: "xs" | "sm" | "md" | "lg" | null;
+  size?: "content" | "sm" | "md" | "lg" | null;
   tone?: "neutral" | "danger" | null;
   variant?: "outlined" | "subtle" | "elevated" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;

package/vanilla/UiCard.js

@@ -2,7 +2,7 @@
 import { componentRootIndex, manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-card.css";
 
-const definition = {...{"contract":{"tag":"ui-card","props":{"as":{"type":{"kind":"terminal","name":"keyword"},"values":["div","section","article","aside"],"required":false,"target":{"attribute":"as"},"default":"div"},"padding":{"type":{"kind":"terminal","name":"keyword"},"values":["sm","md","lg"],"required":false,"target":{"attribute":"padding"},"default":"md"},"tone":{"type":{"kind":"terminal","name":"keyword"},"values":["neutral","danger"],"required":false,"target":{"attribute":"tone"},"default":"neutral"},"variant":{"type":{"kind":"terminal","name":"keyword"},"values":["outlined","subtle","elevated"],"required":false,"target":{"attribute":"variant"},"default":"outlined"}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"section","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'section'","testPlan":{"source":"as = 'section'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"section"}},"dependencies":["as"]}}},{"kind":"element","name":"article","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'article'","testPlan":{"source":"as = 'article'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"article"}},"dependencies":["as"]}}},{"kind":"element","name":"aside","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'aside'","testPlan":{"source":"as = 'aside'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"aside"}},"dependencies":["as"]}}},{"kind":"element","name":"div","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"div","choices":["section","article","aside","div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-card","props":{"as":{"type":{"kind":"terminal","name":"keyword"},"values":["div","section","article","aside"],"required":false,"target":{"attribute":"as"},"default":"div"},"padding":{"type":{"kind":"terminal","name":"keyword"},"values":["xs","sm","md","lg"],"required":false,"target":{"attribute":"padding"},"default":"md"},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["content","sm","md","lg"],"required":false,"target":{"attribute":"size"},"default":"content"},"tone":{"type":{"kind":"terminal","name":"keyword"},"values":["neutral","danger"],"required":false,"target":{"attribute":"tone"},"default":"neutral"},"variant":{"type":{"kind":"terminal","name":"keyword"},"values":["outlined","subtle","elevated"],"required":false,"target":{"attribute":"variant"},"default":"outlined"}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"section","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'section'","testPlan":{"source":"as = 'section'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"section"}},"dependencies":["as"]}}},{"kind":"element","name":"article","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'article'","testPlan":{"source":"as = 'article'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"article"}},"dependencies":["as"]}}},{"kind":"element","name":"aside","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'aside'","testPlan":{"source":"as = 'aside'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"aside"}},"dependencies":["as"]}}},{"kind":"element","name":"div","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"div","choices":["section","article","aside","div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiCard(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vanilla/UiDisclosure.d.ts

@@ -10,6 +10,7 @@ export interface UiDisclosureElement extends HTMLDivElement {
 export interface UiDisclosureProps {
   density?: "comfortable" | "compact" | null;
   disabled?: boolean | null;
+  fill?: boolean | null;
   headingLevel?: number | null;
   name?: string | null;
   open?: boolean | null;

package/vanilla/UiDisclosure.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-disclosure/ui-disclosure.js";
 import "../styles/ui-disclosure.css";
 
-const definition = {...{"contract":{"tag":"ui-disclosure","props":{"density":{"type":{"kind":"terminal","name":"keyword"},"values":["comfortable","compact"],"required":false,"target":{"attribute":"density"},"default":"comfortable"},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"headingLevel":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"headinglevel"},"default":0},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"summary":{"type":"string","required":false,"target":{"attribute":"summary"},"default":"Details"}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"heading"},{"kind":"attribute","name":"role","expression":"headingRole","expressionPlan":{"source":"headingRole","ast":{"kind":"id","name":"headingRole"},"dependencies":["headingRole"]}},{"kind":"attribute","name":"aria-level","expression":"headingAriaLevel","expressionPlan":{"source":"headingAriaLevel","ast":{"kind":"id","name":"headingAriaLevel"},"dependencies":["headingAriaLevel"]}}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"trigger"},{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"aria-controls","expression":"contentId","expressionPlan":{"source":"contentId","ast":{"kind":"id","name":"contentId"},"dependencies":["contentId"]}},{"kind":"attribute","name":"aria-expanded","expression":"internalOpen","expressionPlan":{"source":"internalOpen","ast":{"kind":"id","name":"internalOpen"},"dependencies":["internalOpen"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"summary"}],"children":[{"kind":"slot","fallback":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"summary","expressionPlan":{"source":"summary","ast":{"kind":"id","name":"summary"},"dependencies":["summary"]}}],"children":[]}],"name":"summary"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"chevron"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"ref":"trigger"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"panel"},{"kind":"attribute","name":"id","expression":"contentId","expressionPlan":{"source":"contentId","ast":{"kind":"id","name":"contentId"},"dependencies":["contentId"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"panel-inner"}],"children":[{"kind":"slot"}]}],"ref":"panel"}]},"declarations":[{"kind":"state","name":"internalOpen","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"contentId","type":"string","value":"","expression":{"source":"\"\"","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"headingRole","type":"keyword"},{"kind":"state","name":"headingAriaLevel","type":"integer"},{"kind":"event","name":"open","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","programmatic","light-dismiss","escape"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","programmatic","light-dismiss","escape"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-disclosure","props":{"density":{"type":{"kind":"terminal","name":"keyword"},"values":["comfortable","compact"],"required":false,"target":{"attribute":"density"},"default":"comfortable"},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"fill":{"type":"boolean","required":false,"target":{"attribute":"fill"},"default":false},"headingLevel":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"headinglevel"},"default":0},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"summary":{"type":"string","required":false,"target":{"attribute":"summary"},"default":"Details"}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"heading"},{"kind":"attribute","name":"role","expression":"headingRole","expressionPlan":{"source":"headingRole","ast":{"kind":"id","name":"headingRole"},"dependencies":["headingRole"]}},{"kind":"attribute","name":"aria-level","expression":"headingAriaLevel","expressionPlan":{"source":"headingAriaLevel","ast":{"kind":"id","name":"headingAriaLevel"},"dependencies":["headingAriaLevel"]}}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"trigger"},{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"aria-controls","expression":"contentId","expressionPlan":{"source":"contentId","ast":{"kind":"id","name":"contentId"},"dependencies":["contentId"]}},{"kind":"attribute","name":"aria-expanded","expression":"internalOpen","expressionPlan":{"source":"internalOpen","ast":{"kind":"id","name":"internalOpen"},"dependencies":["internalOpen"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"summary"}],"children":[{"kind":"slot","fallback":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"summary","expressionPlan":{"source":"summary","ast":{"kind":"id","name":"summary"},"dependencies":["summary"]}}],"children":[]}],"name":"summary"}]},{"kind":"slot","fallback":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"chevron"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"name":"indicator"}],"ref":"trigger"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"panel"},{"kind":"attribute","name":"id","expression":"contentId","expressionPlan":{"source":"contentId","ast":{"kind":"id","name":"contentId"},"dependencies":["contentId"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"panel-inner"}],"children":[{"kind":"slot"}]}],"ref":"panel"}]},"declarations":[{"kind":"state","name":"internalOpen","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"contentId","type":"string","value":"","expression":{"source":"\"\"","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"headingRole","type":"keyword"},{"kind":"state","name":"headingAriaLevel","type":"integer"},{"kind":"event","name":"open","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","programmatic","light-dismiss","escape"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","programmatic","light-dismiss","escape"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiDisclosure(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -36,10 +36,19 @@ export function createUiDisclosure(options = {}) {
   element2.append(element3);
   }
   element1.append(element2);
+  if (slots["indicator"] ?? [].length > 0) {
+    for (const child of slots["indicator"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
+      projected.push([node, "indicator"]);
+      element1.append(node);
+    }
+  } else {
   const element4 = document.createElement("span");
   element4.setAttribute("class", "chevron");
   element4.setAttribute("aria-hidden", "true");
   element1.append(element4);
+  }
   element0.append(element1);
   element.append(element0);
   const element5 = document.createElement("div");