@threadlabs/looma 0.9.2 → 0.10.1

package/package.json

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

package/styles/ui-editor-toolbar.css

@@ -1,36 +1,83 @@
 /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-editor-toolbar"]) to ([data-component], [data-slotted]) {
 :scope {
+      /* The colour the edge fades blend into: whatever the toolbar is painted with. */
+      --_matte: var(--ui-editor-toolbar-surface, var(--ui-surface));
+
       position: sticky;
       top: 0;
       z-index: var(--ui-editor-toolbar-z-index, 10);
       display: flex;
       align-items: center;
-      justify-content: flex-start;
-      gap: var(--ui-editor-toolbar-gap, 2px);
       padding: var(--ui-editor-toolbar-padding-block, 6px) var(--ui-editor-toolbar-padding-inline, 12px);
       min-height: var(--ui-editor-toolbar-min-height, 48px);
-      /* More controls than the column is wide is normal at a readable measure, so the row wraps.
-         Scrolling hid the tail behind an invisible scrollbar. */
-      flex-wrap: wrap;
-      row-gap: var(--ui-editor-toolbar-row-gap, var(--ui-editor-toolbar-gap, 2px));
       background: var(--ui-editor-toolbar-surface, var(--ui-surface));
       border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
     }
 
-    :scope::-webkit-scrollbar {
+    /* One row, always. When the controls outgrow the space, the row scrolls sideways rather than
+       wrapping into several lines, and a fade at each edge that has more to show says so. */
+    .strip {
+      display: flex;
+      flex: 1 1 auto;
+      align-items: center;
+      justify-content: flex-start;
+      gap: var(--ui-editor-toolbar-gap, 2px);
+      min-width: 0;
+      overflow-x: auto;
+      overflow-y: hidden;
+      overscroll-behavior-inline: contain;
+      scrollbar-width: none;
+    }
+
+    .strip::-webkit-scrollbar {
       display: none;
     }
 
+    /* The fades are mattes laid over the strip in the toolbar's own colour, not a mask, so a floating
+       toolbar's border and shadow stay whole. Each appears only while that edge hides controls. */
+    :scope::before,
+    :scope::after {
+      position: absolute;
+      z-index: 1;
+      inset-block: 0;
+      inline-size: var(--ui-editor-toolbar-fade-size, 32px);
+      content: "";
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity var(--ui-motion-fast, 120ms) var(--ui-motion-ease, ease);
+    }
+
+    :scope::before {
+      inset-inline-start: 0;
+      background: linear-gradient(to right, var(--_matte), transparent);
+    }
+
+    :scope::after {
+      inset-inline-end: 0;
+      background: linear-gradient(to left, var(--_matte), transparent);
+    }
+
+    :scope:dir(rtl)::before {
+      background: linear-gradient(to left, var(--_matte), transparent);
+    }
+
+    :scope:dir(rtl)::after {
+      background: linear-gradient(to right, var(--_matte), transparent);
+    }
+
+    :scope[data-ui-editor-toolbar-state~="overflowStart"]::before,
+    :scope[data-ui-editor-toolbar-state~="overflowEnd"]::after {
+      opacity: 1;
+    }
+
     :scope[data-ui-editor-toolbar-state~="floating"] {
-      flex-wrap: nowrap;
-      position: static;
+      position: relative;
       top: auto;
       width: max-content;
       max-width: min(calc(100vw - 24px), 100%);
       min-height: auto;
       padding: var(--ui-editor-toolbar-floating-padding, 4px);
-      overflow-x: visible;
       background: color-mix(in srgb, var(--ui-editor-toolbar-surface, var(--ui-surface)) 96%, transparent);
       border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
       border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
@@ -52,7 +99,7 @@
       }
 
       :scope[data-ui-editor-toolbar-state~="floating"] {
-        position: static;
+        position: relative;
         inset: auto;
         min-height: auto;
         border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
@@ -63,9 +110,10 @@
 
     /* Inside LoomaEditor's sticky shell, the shell is the sticky surface. */
     .looma-editor__sticky-toolbar-shell :scope {
-      position: static;
+      --_matte: var(--ui-editor-toolbar-surface, var(--ui-surface));
+
+      position: relative;
       min-height: var(--ui-editor-toolbar-min-height, 48px);
-      overscroll-behavior-inline: contain;
       background: transparent;
       border: 0;
       box-shadow: none;
@@ -77,10 +125,6 @@
       max-width: none;
       min-height: 100%;
       padding: 0;
-      overflow-x: auto;
-      overflow-y: hidden;
-      overscroll-behavior-inline: contain;
-      scroll-snap-type: x mandatory;
       background: transparent;
       border: 0;
       border-radius: 0;
@@ -88,16 +132,26 @@
       backdrop-filter: none;
     }
 
+    .looma-editor__mobile-toolbar-shell :scope[data-ui-editor-toolbar-state~="floating"] .strip {
+      scroll-snap-type: x mandatory;
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope[hidden] {
       display: none;
     }
 }
 @scope ([data-component~="ui-editor-toolbar"]) to ([data-component]) {
-:scope > :where([data-slotted], [data-slotted] *):is(*) {
+/* One row, always. When the controls outgrow the space, the row scrolls sideways rather than
+       wrapping into several lines, and a fade at each edge that has more to show says so. */
+
+    .strip > :where([data-slotted], [data-slotted] *):is(*) {
       flex: 0 0 auto;
     }
 
+    /* The fades are mattes laid over the strip in the toolbar's own colour, not a mask, so a floating
+       toolbar's border and shadow stay whole. Each appears only while that edge hides controls. */
+
     :where([data-slotted], [data-slotted] *):is(.divider) {
       width: 1px;
       height: 20px;

package/vanilla/UiCheckbox.d.ts

@@ -10,6 +10,7 @@ export interface UiCheckboxProps {
   checked?: boolean | null;
   disabled?: boolean | null;
   indeterminate?: boolean | null;
+  name?: string | null;
   required?: boolean | null;
   value?: string | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;

package/vanilla/UiCheckbox.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-checkbox/ui-checkbox.js";
 import "../styles/ui-checkbox.css";
 
-const definition = {...{"contract":{"tag":"ui-checkbox","props":{"checked":{"type":"boolean","required":false,"target":{"attribute":"checked"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"indeterminate":{"type":"boolean","required":false,"target":{"property":"indeterminate"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":"on"}}},"template":{"kind":"element","name":"label","attributes":[],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"checkbox"},{"kind":"property","key":"checked","name":"checked","expression":"internalChecked","expressionPlan":{"source":"internalChecked","ast":{"kind":"id","name":"internalChecked"},"dependencies":["internalChecked"]}},{"kind":"property","key":"indeterminate","name":"indeterminate","expression":"indeterminate","expressionPlan":{"source":"indeterminate","ast":{"kind":"id","name":"indeterminate"},"dependencies":["indeterminate"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}}],"children":[],"ref":"input"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]}]},"declarations":[{"kind":"state","name":"internalChecked","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"change","type":"object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"label","choices":["label"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-checkbox","props":{"checked":{"type":"boolean","required":false,"target":{"attribute":"checked"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"indeterminate":{"type":"boolean","required":false,"target":{"property":"indeterminate"},"default":false},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":"on"}}},"template":{"kind":"element","name":"label","attributes":[],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"checkbox"},{"kind":"property","key":"checked","name":"checked","expression":"internalChecked","expressionPlan":{"source":"internalChecked","ast":{"kind":"id","name":"internalChecked"},"dependencies":["internalChecked"]}},{"kind":"property","key":"indeterminate","name":"indeterminate","expression":"indeterminate","expressionPlan":{"source":"indeterminate","ast":{"kind":"id","name":"indeterminate"},"dependencies":["indeterminate"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"name","expression":"name","expressionPlan":{"source":"name","ast":{"kind":"id","name":"name"},"dependencies":["name"]}},{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}}],"children":[],"ref":"input"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]}]},"declarations":[{"kind":"state","name":"internalChecked","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"change","type":"object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"label","choices":["label"]}},source:{file:import.meta.url},css:""};
 
 export function createUiCheckbox(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
@@ -24,9 +24,12 @@ export function createUiCheckbox(options = {}) {
   const value2 = componentProps["required"] === undefined ? false : componentProps["required"];
   if (value2 === true) element0.setAttribute("required", "");
   else element0.removeAttribute("required");
-  const value3 = componentProps["value"] === undefined ? "on" : componentProps["value"];
-  if (value3 === null || value3 === undefined) element0.removeAttribute("value");
-  else element0.setAttribute("value", String(value3));
+  const value3 = componentProps["name"] === undefined ? "" : componentProps["name"];
+  if (value3 === null || value3 === undefined) element0.removeAttribute("name");
+  else element0.setAttribute("name", String(value3));
+  const value4 = componentProps["value"] === undefined ? "on" : componentProps["value"];
+  if (value4 === null || value4 === undefined) element0.removeAttribute("value");
+  else element0.setAttribute("value", String(value4));
   element.append(element0);
   const element1 = document.createElement("span");
   element1.setAttribute("class", "label");