@threadlabs/looma 0.28.5 → 0.28.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.28.5",
+  "version": "0.28.7",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",
@@ -82,7 +82,6 @@
     "./*.css"
   ],
   "dependencies": {
-    "@nextwebwg/html-next": "1.0.0-alpha.35",
     "dompurify": "3.4.15",
     "highlight.js": "11.11.2",
     "lowlight": "^3.3.0",
@@ -90,6 +89,7 @@
     "lucide": "~0.554.0"
   },
   "peerDependencies": {
+    "@nextwebwg/html-next": "1.0.0-alpha.51",
     "@tiptap/core": ">=2 <3",
     "@tiptap/pm": ">=2 <3",
     "@tiptap/vue-3": ">=2 <3",
@@ -110,6 +110,7 @@
     }
   },
   "devDependencies": {
+    "@nextwebwg/html-next": "1.0.0-alpha.51",
     "@vitejs/plugin-vue": "^6.0.9",
     "vite": "^8.3.0",
     "vue": "^3.5.43",

package/styles/ui-action-bar.css

@@ -1,15 +1,22 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-action-bar-gap {
+/* Generated by HTML Next 1.0.0-alpha.51. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-action-bar"] { --html-next-scope-owner: "ui-action-bar" !important; }
+}
+@scope ([data-component~="ui-action-bar"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-action-bar-gap {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-action-bar"]) to ([data-component], [data-slotted]) {
-/* This component's hooks style the element they are set on, and never a nested one. */
 
     /* The action row of a form or dialog. Tertiary actions (Back, Cancel, Discard) sit at the start
        edge; secondary actions (Save as draft, Preview) sit just before the primary one, which ends the
        row. The bar arranges its actions and leaves their look to them. */
-    :scope {
+    :scope:where([data-component~="ui-action-bar"]) {
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-action-bar-gap: var(--ui-action-bar-gap);
 
@@ -65,7 +72,7 @@
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-action-bar"])[hidden] {
       display: none;
     }
 }

package/styles/ui-affordance-scope.css

@@ -1,22 +1,29 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.51. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-affordance-scope"] { --html-next-scope-owner: "ui-affordance-scope" !important; }
+}
 @scope ([data-component~="ui-affordance-scope"]) to ([data-component], [data-slotted]) {
-:scope {
+:scope:where([data-component~="ui-affordance-scope"]) {
       display: contents;
       --ui-affordance-scope-engaged: 0;
       --ui-affordance-scope-guide: 1;
     }
 
-    :scope[data-ui-affordance-scope-state~="engaged"] {
+    :scope:where([data-component~="ui-affordance-scope"])[data-ui-affordance-scope-state~="engaged"] {
       --ui-affordance-scope-engaged: 1;
     }
 
     /* Published to descendants: each guide multiplies its opacity by it, so none reaches them all. */
-    :scope[data-ui-affordance-scope-state~="guide=none"] {
+    :scope:where([data-component~="ui-affordance-scope"])[data-ui-affordance-scope-state~="guide=none"] {
       --ui-affordance-scope-guide: 0;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-affordance-scope"])[hidden] {
       display: none;
     }
 }

package/styles/ui-avatar-group.css

@@ -1,16 +1,23 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-avatar-group-edge-ring {
+/* Generated by HTML Next 1.0.0-alpha.51. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-avatar-group"] { --html-next-scope-owner: "ui-avatar-group" !important; }
+}
+@scope ([data-component~="ui-avatar-group"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-avatar-group-edge-ring {
       syntax: "*";
       inherits: false;
     }
-@property --ui-avatar-group-overlap-shadow {
+    @property --ui-avatar-group-overlap-shadow {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-avatar-group"]) to ([data-component], [data-slotted]) {
-/* This component's hooks style the element they are set on, and never a nested one. */
 
-    :scope {
+    :scope:where([data-component~="ui-avatar-group"]) {
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-avatar-group-overlap-shadow: var(--ui-avatar-group-overlap-shadow);
       --_ui-avatar-group-edge-ring: var(--ui-avatar-group-edge-ring);
@@ -28,7 +35,7 @@
     /* Overlap and the separating shadow are applied by the controller: slotted avatars are nested
      * component roots outside this style scope. */
 
-    :scope:dir(rtl) {
+    :scope:where([data-component~="ui-avatar-group"]):dir(rtl) {
       --_overlap-shadow: 1px 0 0 0 rgb(0 0 0 / 0.22);
     }
 
@@ -52,13 +59,13 @@
       flex-shrink: 0;
     }
 
-    :scope[data-ui-avatar-group-state~="size=sm"] .overflow {
+    :scope:where([data-component~="ui-avatar-group"])[data-ui-avatar-group-state~="size=sm"] .overflow {
       margin-inline-start: -0.25rem;
       inline-size: 1.75rem;
       block-size: 1.75rem;
     }
 
-    :scope[data-ui-avatar-group-state~="size=xs"] .overflow {
+    :scope:where([data-component~="ui-avatar-group"])[data-ui-avatar-group-state~="size=xs"] .overflow {
       margin-inline-start: -0.1875rem;
       inline-size: 1.25rem;
       block-size: 1.25rem;
@@ -72,7 +79,7 @@
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-avatar-group"])[hidden] {
       display: none;
     }
 }

package/styles/ui-avatar.css

@@ -1,28 +1,35 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-avatar-border {
+/* Generated by HTML Next 1.0.0-alpha.51. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-avatar"] { --html-next-scope-owner: "ui-avatar" !important; }
+}
+@scope ([data-component~="ui-avatar"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-avatar-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-avatar-radius {
+    @property --ui-avatar-radius {
       syntax: "*";
       inherits: false;
     }
-@property --ui-avatar-surface {
+    @property --ui-avatar-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-avatar-text {
+    @property --ui-avatar-text {
       syntax: "*";
       inherits: false;
     }
-@property --ui-avatar-active-ring {
+    @property --ui-avatar-active-ring {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-avatar"]) to ([data-component], [data-slotted]) {
-/* This component's hooks style the element they are set on, and never a nested one. */
 
-    :scope {
+    :scope:where([data-component~="ui-avatar"]) {
       --_ui-default-icon-size: 1.25rem;
       display: inline-grid;
       place-items: center;
@@ -41,14 +48,14 @@
       text-transform: uppercase;
     }
 
-    :scope[data-ui-avatar-state~="size=sm"] {
+    :scope:where([data-component~="ui-avatar"])[data-ui-avatar-state~="size=sm"] {
       --_ui-default-icon-size: 1rem;
       inline-size: 1.75rem;
       block-size: 1.75rem;
       font-size: var(--ui-font-size-xs);
     }
 
-    :scope[data-ui-avatar-state~="size=xs"] {
+    :scope:where([data-component~="ui-avatar"])[data-ui-avatar-state~="size=xs"] {
       --_ui-default-icon-size: 0.75rem;
       inline-size: 1.25rem;
       block-size: 1.25rem;
@@ -57,21 +64,21 @@
       letter-spacing: 0.02em;
     }
 
-    :scope[data-ui-avatar-state~="hasImage"] {
+    :scope:where([data-component~="ui-avatar"])[data-ui-avatar-state~="hasImage"] {
       border-color: var(--ui-avatar-border, var(--ui-border-strong));
     }
 
-    :scope[data-ui-avatar-state~="shape=circle"] {
+    :scope:where([data-component~="ui-avatar"])[data-ui-avatar-state~="shape=circle"] {
       box-shadow: var(--ui-shadow-sm);
     }
 
-    :scope[data-ui-avatar-state~="shape=square"] {
+    :scope:where([data-component~="ui-avatar"])[data-ui-avatar-state~="shape=square"] {
       border-radius: var(--ui-avatar-radius, var(--ui-radius-md));
     }
 
     /* An outline, not a dot: the avatar clips its content to the circle, and an outline is drawn
        outside the box, so the ring survives the clip and the overlap in an Avatar Group. */
-    :scope[data-ui-avatar-state~="active"] {
+    :scope:where([data-component~="ui-avatar"])[data-ui-avatar-state~="active"] {
       outline: var(--ui-border-width) solid var(--ui-avatar-active-ring, var(--ui-accent-solid));
       outline-offset: var(--ui-border-width);
     }
@@ -103,7 +110,7 @@
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-avatar"])[hidden] {
       display: none;
     }
 }