@threadlabs/looma 0.28.5 → 0.28.7

package/styles/ui-floating-action-button.css

@@ -1,20 +1,27 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-floating-action-button-inset-block-end {
+/* 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-floating-action-button"] { --html-next-scope-owner: "ui-floating-action-button" !important; }
+}
+@scope ([data-component~="ui-floating-action-button"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-floating-action-button-inset-block-end {
       syntax: "*";
       inherits: false;
     }
-@property --ui-floating-action-button-inset-inline-end {
+    @property --ui-floating-action-button-inset-inline-end {
       syntax: "*";
       inherits: false;
     }
-@property --ui-floating-action-button-z-index {
+    @property --ui-floating-action-button-z-index {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-floating-action-button"]) 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-floating-action-button"]) {
       position: fixed;
       inset-block-end: calc(var(--ui-floating-action-button-inset-block-end, var(--ui-space-6)) + env(safe-area-inset-bottom));
       inset-inline-end: max(
@@ -27,7 +34,7 @@
       z-index: var(--ui-floating-action-button-z-index, 100);
     }
 
-    :scope {
+    :scope:where([data-component~="ui-floating-action-button"]) {
       appearance: none;
       border: none;
       border-radius: var(--ui-radius-round);
@@ -46,21 +53,21 @@
         box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
-    :scope:hover:enabled {
+    :scope:where([data-component~="ui-floating-action-button"]):hover:enabled {
       background: var(--ui-accent-hover);
       box-shadow: 0 6px 16px color-mix(in srgb, var(--ui-accent) 50%, transparent);
     }
 
-    :scope:active:enabled {
+    :scope:where([data-component~="ui-floating-action-button"]):active:enabled {
       transform: scale(0.94);
     }
 
-    :scope:focus-visible {
+    :scope:where([data-component~="ui-floating-action-button"]):focus-visible {
       outline: var(--ui-focus-width) solid var(--ui-focus-ring);
       outline-offset: var(--ui-focus-width);
     }
 
-    :scope:disabled {
+    :scope:where([data-component~="ui-floating-action-button"]):disabled {
       background: var(--ui-disabled-surface);
       color: var(--ui-disabled-text);
       box-shadow: none;
@@ -68,13 +75,13 @@
     }
 
     @media (min-width: 768px) {
-      :scope[data-ui-floating-action-button-state~="mobileOnly"] {
+      :scope:where([data-component~="ui-floating-action-button"])[data-ui-floating-action-button-state~="mobileOnly"] {
         display: none;
       }
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-floating-action-button"])[hidden] {
       display: none;
     }
 }

package/styles/ui-form-field.css

@@ -1,36 +1,43 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-form-field-danger {
+/* 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-form-field"] { --html-next-scope-owner: "ui-form-field" !important; }
+}
+@scope ([data-component~="ui-form-field"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-form-field-danger {
       syntax: "*";
       inherits: false;
     }
-@property --ui-form-field-help-font-size {
+    @property --ui-form-field-help-font-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-form-field-help-min-block-size {
+    @property --ui-form-field-help-min-block-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-form-field-help-text {
+    @property --ui-form-field-help-text {
       syntax: "*";
       inherits: false;
     }
-@property --ui-form-field-label-font-size {
+    @property --ui-form-field-label-font-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-form-field-label-text {
+    @property --ui-form-field-label-text {
       syntax: "*";
       inherits: false;
     }
-@property --ui-form-field-min-inline-size {
+    @property --ui-form-field-min-inline-size {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-form-field"]) 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-form-field"]) {
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-form-field-danger: var(--ui-form-field-danger);
       --_ui-form-field-help-min-block-size: var(--ui-form-field-help-min-block-size);
@@ -88,14 +95,14 @@
       display: none;
     }
 
-    :scope[data-ui-form-field-state~="invalid"] .error {
+    :scope:where([data-component~="ui-form-field"])[data-ui-form-field-state~="invalid"] .error {
       display: contents;
     }
 
     /* An error reads in the danger colour, the one the invalid control's border takes. */
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-form-field"])[hidden] {
       display: none;
     }
 }

package/styles/ui-grid.css

@@ -1,16 +1,23 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-grid-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-grid"] { --html-next-scope-owner: "ui-grid" !important; }
+}
+@scope ([data-component~="ui-grid"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-grid-gap {
       syntax: "*";
       inherits: false;
     }
-@property --ui-grid-min {
+    @property --ui-grid-min {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-grid"]) 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-grid"]) {
       --_grid-gap: var(--ui-space-4);
       --_grid-min: 12rem;
       display: grid;
@@ -34,30 +41,30 @@
       margin: 0;
     }
 
-    :scope[data-ui-grid-state~="gap=xs"] {
+    :scope:where([data-component~="ui-grid"])[data-ui-grid-state~="gap=xs"] {
       --_grid-gap: var(--ui-space-2);
     }
-    :scope[data-ui-grid-state~="gap=s"] {
+    :scope:where([data-component~="ui-grid"])[data-ui-grid-state~="gap=s"] {
       --_grid-gap: var(--ui-space-3);
     }
-    :scope[data-ui-grid-state~="gap=m"] {
+    :scope:where([data-component~="ui-grid"])[data-ui-grid-state~="gap=m"] {
       --_grid-gap: var(--ui-space-4);
     }
-    :scope[data-ui-grid-state~="gap=l"] {
+    :scope:where([data-component~="ui-grid"])[data-ui-grid-state~="gap=l"] {
       --_grid-gap: var(--ui-space-5);
     }
-    :scope[data-ui-grid-state~="gap=xl"] {
+    :scope:where([data-component~="ui-grid"])[data-ui-grid-state~="gap=xl"] {
       --_grid-gap: var(--ui-space-6);
     }
-    :scope[data-ui-grid-state~="min=md"] {
+    :scope:where([data-component~="ui-grid"])[data-ui-grid-state~="min=md"] {
       --_grid-min: 16rem;
     }
-    :scope[data-ui-grid-state~="min=lg"] {
+    :scope:where([data-component~="ui-grid"])[data-ui-grid-state~="min=lg"] {
       --_grid-min: 20rem;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-grid"])[hidden] {
       display: none;
     }
 }