@threadlabs/looma 0.33.1 → 0.35.0

package/vue/UiCard.vue

@@ -51,16 +51,25 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'tone' },
       description:
-        'accent, info, success and warning add a quiet semantic surface. danger retains its strong leading edge for consequential content. Row highlights follow the\n      surface hue; action controls retain their own intent.',
+        'accent, info, success, warning and danger add a quiet semantic surface without changing card geometry. Row highlights follow the\n      surface hue; action controls retain their own intent.',
       values: ['neutral', 'accent', 'info', 'success', 'warning', 'danger'],
       default: 'neutral',
     },
+    treatment: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'treatment' },
+      description:
+        'How much of the theme\'s decorative material the surface expresses. standard preserves its restrained treatment; expressive uses the full material treatment.\n      This does not add elevation or require glass.',
+      values: ['standard', 'expressive'],
+      default: 'standard',
+    },
     variant: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
       target: { attribute: 'variant' },
       description:
-        'The surface. outlined is a bordered panel on the page; subtle is a quiet filled one with no border, for supporting details set apart from the flow;\n      elevated floats above the page with a shadow, for a view\'s one card, such as sign-in.',
+        'The surface. outlined is a bordered panel on the page; subtle is a quiet filled one with no border, for supporting details set apart from the flow;\n      elevated adds a subtle lift above the page, for a view\'s one card, such as sign-in. Treatment independently controls decorative material.',
       values: ['outlined', 'subtle', 'elevated'],
       default: 'outlined',
     },
@@ -75,6 +84,7 @@ const props = defineProps({
       'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | null
     >,
   },
+  treatment: { type: null as unknown as PropType<'standard' | 'expressive' | null> },
   variant: { type: null as unknown as PropType<'outlined' | 'subtle' | 'elevated' | null> },
   [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
 })
@@ -83,6 +93,7 @@ const acceptedProps: Record<string, unknown> = {
   padding: 'md',
   size: 'content',
   tone: 'neutral',
+  treatment: 'standard',
   variant: 'outlined',
 }
 const inputTracking = vuePropInputs(acceptedProps, {
@@ -90,6 +101,7 @@ const inputTracking = vuePropInputs(acceptedProps, {
   padding: 'md',
   size: 'content',
   tone: 'neutral',
+  treatment: 'standard',
   variant: 'outlined',
 }, (name, value, source, values) => {
   switch (name) {
@@ -101,6 +113,8 @@ const inputTracking = vuePropInputs(acceptedProps, {
       return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
     case 'tone':
       return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
+    case 'treatment':
+      return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
     case 'variant':
       return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
     default:
@@ -133,6 +147,11 @@ const checkedProps = computed(() => {
       props['tone'],
       props[BINDING_INPUTS_PROP],
     ) as 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger',
+    treatment: propInputs.value<'standard' | 'expressive' | null>(
+      'treatment',
+      props['treatment'],
+      props[BINDING_INPUTS_PROP],
+    ) as 'standard' | 'expressive',
     variant: propInputs.value<'outlined' | 'subtle' | 'elevated' | null>(
       'variant',
       props['variant'],
@@ -172,6 +191,9 @@ const hostState = computed(() =>
     checkedProps.value.variant && 'variant',
     checkedProps.value.variant != null
     && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
+    checkedProps.value.treatment && 'treatment',
+    checkedProps.value.treatment != null
+    && `treatment=${encodeURIComponent(checkedProps.value.treatment)}`,
     checkedProps.value.tone && 'tone',
     checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
     checkedProps.value.size && 'size',
@@ -192,6 +214,7 @@ const hostState = computed(() =>
     :data-ui-card-prop-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
     :data-ui-card-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-ui-card-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-card-prop-treatment="reflectedProp('treatment', 'treatment', checkedProps.treatment, undefined, false)"
     :data-ui-card-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-card-state="hostState || undefined"
     ref="@html-next/root"
@@ -209,6 +232,7 @@ const hostState = computed(() =>
     :data-ui-card-prop-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
     :data-ui-card-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-ui-card-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-card-prop-treatment="reflectedProp('treatment', 'treatment', checkedProps.treatment, undefined, false)"
     :data-ui-card-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-card-state="hostState || undefined"
     ref="@html-next/root"
@@ -226,6 +250,7 @@ const hostState = computed(() =>
     :data-ui-card-prop-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
     :data-ui-card-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-ui-card-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-card-prop-treatment="reflectedProp('treatment', 'treatment', checkedProps.treatment, undefined, false)"
     :data-ui-card-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-card-state="hostState || undefined"
     ref="@html-next/root"
@@ -243,6 +268,7 @@ const hostState = computed(() =>
     :data-ui-card-prop-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
     :data-ui-card-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-ui-card-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-card-prop-treatment="reflectedProp('treatment', 'treatment', checkedProps.treatment, undefined, false)"
     :data-ui-card-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-card-state="hostState || undefined"
     ref="@html-next/root"
@@ -262,6 +288,7 @@ const hostState = computed(() =>
 @scope (.ui-card) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-card])) {
     --_ui-card-surface: var(--ui-surface-raised);
+    --_ui-card-elevation: 0 0 0 transparent;
     --_ui-selection-context-surface: initial;
     --_ui-selection-context-border: initial;
     --_ui-selection-context-text: initial;
@@ -296,10 +323,61 @@ const hostState = computed(() =>
   }
 
   :global(:scope[data-ui-card-state~="variant=elevated"]:where([data-hn-ui-card])) {
+    --_ui-card-elevation: var(--ui-shadow-lg);
     border-color: var(--ui-border-subtle);
     box-shadow: var(--ui-shadow-lg);
   }
 
+  :global(:scope[data-ui-card-state~="treatment=expressive"]:where([data-hn-ui-card])) {
+    --_ui-panel-glass: clamp(0, var(--ui-glassiness, 0), 1);
+    --_ui-panel-separation: clamp(0, var(--ui-surface-separation, 0), 1);
+    --_ui-panel-rim: calc(
+      (var(--_ui-panel-separation) + var(--_ui-panel-glass) * 0.25) * 0.65 * 8px
+    );
+    border-width: calc(var(--ui-border-width) + var(--_ui-panel-rim));
+    border-color: transparent;
+    background:
+      var(--ui-surface-highlight, linear-gradient(transparent, transparent)) padding-box,
+      linear-gradient(var(--_ui-card-surface), var(--_ui-card-surface)) padding-box,
+      linear-gradient(
+      var(--ui-material-glass, var(--ui-surface-raised)),
+      var(--ui-material-glass, var(--ui-surface-raised))
+    ) border-box,
+      var(--_ui-card-surface) padding-box;
+    box-shadow:
+      var(--_ui-card-elevation),
+      var(--ui-material-glow, 0 0 transparent),
+      inset 0 0 0 var(--ui-border-width) var(--ui-material-edge, var(--ui-border-strong));
+    backdrop-filter: blur(calc(var(--_ui-panel-glass) * 0.65 * 18px))
+      saturate(calc(1 + var(--_ui-panel-glass) * 0.65 * 0.18));
+    -webkit-backdrop-filter: blur(calc(var(--_ui-panel-glass) * 0.65 * 18px))
+      saturate(calc(1 + var(--_ui-panel-glass) * 0.65 * 0.18));
+  }
+  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    :global(:scope[data-ui-card-state~="treatment=expressive"]:where([data-hn-ui-card])) {
+      background: var(--_ui-card-surface);
+    }
+  }
+  @media (prefers-reduced-transparency: reduce) {
+    :global(:scope[data-ui-card-state~="treatment=expressive"]:where([data-hn-ui-card])) {
+      background: var(--_ui-card-surface);
+      border-width: var(--ui-border-width);
+      border-color: var(--ui-border-strong);
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+    }
+  }
+  @media (forced-colors: active) {
+    :global(:scope[data-ui-card-state~="treatment=expressive"]:where([data-hn-ui-card])) {
+      background: Canvas;
+      color: CanvasText;
+      border: var(--ui-border-width) solid CanvasText;
+      box-shadow: none;
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+    }
+  }
+
   :global(:scope[data-ui-card-state~="tone=accent"]:where([data-hn-ui-card])) {
     border-color: color-mix(in srgb, var(--ui-accent) 25%, var(--ui-border-default));
     --_ui-card-surface: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface-default));
@@ -326,10 +404,6 @@ const hostState = computed(() =>
 
   :global(:scope[data-ui-card-state~="tone=danger"]:where([data-hn-ui-card])) {
     border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
-    border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
-    /* An accent edge keeps the corners on its side straight. */
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
     --_ui-card-surface: var(--ui-danger-soft);
   }
   :global(:scope[data-ui-card-state~="tone=accent"]:where([data-hn-ui-card])),

package/vue/UiCheckbox.vue

@@ -472,7 +472,8 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
     margin: max(0px, calc((1lh - var(--_ui-checkbox-size, 1.125rem)) / 2)) 0 0 !important;
     border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
     border-radius: min(var(--ui-radius-sm), calc(var(--_ui-checkbox-size, 1.125rem) / 4));
-    background: var(--ui-control-surface, var(--ui-surface-default));
+    background-color: var(--ui-control-surface, var(--ui-surface-default));
+    background-image: var(--ui-surface-highlight, none);
     box-shadow: var(--ui-control-inset);
     cursor: pointer;
     transition:
@@ -491,7 +492,8 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
   :global(input:checked:where([data-hn-ui-checkbox])),
   :global(input:indeterminate:where([data-hn-ui-checkbox])) {
     border-color: var(--ui-accent-solid);
-    background: var(--ui-accent-solid);
+    background-color: var(--ui-accent-solid);
+    background-image: var(--ui-accent-highlight, none);
     box-shadow: var(--ui-control-inset);
   }
   :global(input:checked:where([data-hn-ui-checkbox])::after) {

package/vue/UiCurveEditor.d.ts

@@ -0,0 +1,53 @@
+import type { PropType } from 'vue';
+import { type InputBindings } from './props.js';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: PropType<boolean | null>;
+    };
+    label: {
+        type: PropType<string | null>;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg" | null>;
+    };
+    value: {
+        type: PropType<string | null>;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    input: (event: CustomEvent<{
+        readonly value: string;
+    }>) => any;
+    change: (event: CustomEvent<{
+        readonly value: string;
+    }>) => any;
+    "update:value": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: PropType<boolean | null>;
+    };
+    label: {
+        type: PropType<string | null>;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg" | null>;
+    };
+    value: {
+        type: PropType<string | null>;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
+    };
+}>> & Readonly<{
+    onInput?: ((event: CustomEvent<{
+        readonly value: string;
+    }>) => any) | undefined;
+    onChange?: ((event: CustomEvent<{
+        readonly value: string;
+    }>) => any) | undefined;
+    "onUpdate:value"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/vue/UiCurveEditor.js

@@ -0,0 +1,2 @@
+import { t as UiCurveEditor_default } from "./chunks/UiCurveEditor.js";
+export { UiCurveEditor_default as default };