@threadlabs/looma 0.33.1 → 0.34.0

package/vue/UiDialog.vue

@@ -84,7 +84,8 @@ const propValidityContract = {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
       target: { attribute: 'size' },
-      description: 'Choose a compact, standard, wide, or viewport-filling dialog.',
+      description:
+        'Choose a compact, standard, wide, or viewport-filling dialog. Shared surface separation adapts to dialog purpose and rendered size.',
       values: ['sm', 'md', 'lg', 'fullscreen'],
       default: 'md',
     },
@@ -362,6 +363,9 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
   inherits: false;
 }
 
+/* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
+   transparency, saturation and edge light belong to the surrounding decorative material. */
+
 /* Own the layout wrapper; nested component roots are outside these scoped rules. */
 
 /* Alerts have no close target to add height above the title. */
@@ -387,6 +391,7 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
 
 @scope (.ui-dialog) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-dialog])) {
+    --_ui-material-scale: 1;
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-dialog-duration: var(--ui-dialog-duration);
 
@@ -422,6 +427,91 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
       display var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
       overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
   }
+  :global(:scope:where([data-hn-ui-dialog])) {
+    --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
+    --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
+    --_ui-material-active: clamp(
+      0,
+      calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000),
+      1
+    );
+    --_ui-material-rim: calc(
+      (
+        var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25
+      ) *
+        var(--_ui-material-scale, 1) *
+        8px
+    );
+    --_ui-material-content-color: var(
+      --ui-dialog-surface,
+      var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated)))
+    );
+    --_ui-material-rim-color: color-mix(
+      in srgb,
+      var(--ui-material-glass, var(--ui-surface-elevated)) calc(var(--_ui-material-active) * 100%),
+      transparent
+    );
+    background:
+      linear-gradient(var(--_ui-material-content-color), var(--_ui-material-content-color))
+      padding-box,
+      linear-gradient(var(--_ui-material-rim-color), var(--_ui-material-rim-color)) border-box,
+      var(--_ui-material-content-color) padding-box;
+    border-width: calc(var(--ui-border-width) + var(--_ui-material-rim));
+    border-color: var(
+      --ui-dialog-border,
+      color-mix(
+        in oklab,
+        var(--ui-overlay-border, var(--ui-border-strong)) calc(
+          (1 - var(--_ui-material-active)) * 100%
+        ),
+        transparent
+      )
+    );
+    box-shadow: var(
+      --ui-dialog-shadow,
+      var(
+        --ui-overlay-shadow,
+        0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 8px) calc(
+          var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 24px
+        ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),
+        inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(
+          --ui-material-edge,
+          var(--ui-border-strong)
+        ),
+        var(--ui-elevation-dialog, var(--ui-shadow-xl))
+      )
+    );
+    backdrop-filter: blur(
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 18px)
+    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 0.18));
+    -webkit-backdrop-filter: blur(
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 18px)
+    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 0.18));
+  }
+
+  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    :global(:scope:where([data-hn-ui-dialog])) {
+      background: var(--_ui-material-content-color);
+    }
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    :global(:scope:where([data-hn-ui-dialog])) {
+      background: var(--_ui-material-content-color);
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :global(:scope:where([data-hn-ui-dialog])) {
+      background: Canvas;
+      border-color: CanvasText;
+      box-shadow: none;
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+    }
+  }
 
   :global(:scope[open]:where([data-hn-ui-dialog])) {
     display: flex !important;
@@ -578,6 +668,7 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
 
 @scope ([data-slotted~="ui-dialog"]:not([data-hn])) to ([data-hn], [data-slotted]) {
   :global(:where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
+    --_ui-material-scale: 1;
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-dialog-duration: var(--ui-dialog-duration);
 
@@ -613,6 +704,91 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
       display var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
       overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
   }
+  :global(:where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
+    --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
+    --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
+    --_ui-material-active: clamp(
+      0,
+      calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000),
+      1
+    );
+    --_ui-material-rim: calc(
+      (
+        var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25
+      ) *
+        var(--_ui-material-scale, 1) *
+        8px
+    );
+    --_ui-material-content-color: var(
+      --ui-dialog-surface,
+      var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated)))
+    );
+    --_ui-material-rim-color: color-mix(
+      in srgb,
+      var(--ui-material-glass, var(--ui-surface-elevated)) calc(var(--_ui-material-active) * 100%),
+      transparent
+    );
+    background:
+      linear-gradient(var(--_ui-material-content-color), var(--_ui-material-content-color))
+      padding-box,
+      linear-gradient(var(--_ui-material-rim-color), var(--_ui-material-rim-color)) border-box,
+      var(--_ui-material-content-color) padding-box;
+    border-width: calc(var(--ui-border-width) + var(--_ui-material-rim));
+    border-color: var(
+      --ui-dialog-border,
+      color-mix(
+        in oklab,
+        var(--ui-overlay-border, var(--ui-border-strong)) calc(
+          (1 - var(--_ui-material-active)) * 100%
+        ),
+        transparent
+      )
+    );
+    box-shadow: var(
+      --ui-dialog-shadow,
+      var(
+        --ui-overlay-shadow,
+        0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 8px) calc(
+          var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 24px
+        ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),
+        inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(
+          --ui-material-edge,
+          var(--ui-border-strong)
+        ),
+        var(--ui-elevation-dialog, var(--ui-shadow-xl))
+      )
+    );
+    backdrop-filter: blur(
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 18px)
+    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 0.18));
+    -webkit-backdrop-filter: blur(
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 18px)
+    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 0.18));
+  }
+
+  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    :global(:where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
+      background: var(--_ui-material-content-color);
+    }
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    :global(:where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
+      background: var(--_ui-material-content-color);
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :global(:where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
+      background: Canvas;
+      border-color: CanvasText;
+      box-shadow: none;
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+    }
+  }
 
   :global(:where(.ui-dialog)[open]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
     display: flex !important;

package/vue/UiIconButton.d.ts

@@ -26,6 +26,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     pending: {
         type: PropType<boolean | null>;
     };
+    preset: {
+        type: PropType<"none" | "primary" | "standard" | "quiet" | "destructive" | null>;
+    };
     revealed: {
         type: PropType<boolean | null>;
     };
@@ -36,7 +39,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"sm" | "md" | "lg" | null>;
     };
     tone: {
-        type: PropType<"accent" | "neutral" | null>;
+        type: PropType<"auto" | "accent" | "neutral" | "danger" | "success" | "warning" | "info" | null>;
     };
     variant: {
         type: PropType<"ghost" | "outline" | "solid" | null>;
@@ -66,6 +69,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     pending: {
         type: PropType<boolean | null>;
     };
+    preset: {
+        type: PropType<"none" | "primary" | "standard" | "quiet" | "destructive" | null>;
+    };
     revealed: {
         type: PropType<boolean | null>;
     };
@@ -76,7 +82,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"sm" | "md" | "lg" | null>;
     };
     tone: {
-        type: PropType<"accent" | "neutral" | null>;
+        type: PropType<"auto" | "accent" | "neutral" | "danger" | "success" | "warning" | "info" | null>;
     };
     variant: {
         type: PropType<"ghost" | "outline" | "solid" | null>;