@threadlabs/looma 0.33.1 → 0.34.0

package/vue/UiText.vue

@@ -32,8 +32,8 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'as' },
       description:
-        'The native element the text renders: a paragraph by default, inline span, small, or strong within a line, a div for a block, a label for a control, or a\n      heading, h2 to h6, below a Page Header\'s h1 and a Section\'s h2. A heading takes its size and weight from size and weight, like any other text.',
-      values: ['p', 'span', 'div', 'small', 'strong', 'label', 'h2', 'h3', 'h4', 'h5', 'h6'],
+        'The native element the text renders: a paragraph by default, inline span, small, or strong within a line, a div for a block, a label for a control, or a\n      heading, h1 to h6. Choose its document level independently from its visual variant. The default body variant keeps the existing size and weight\n      behavior.',
+      values: ['p', 'span', 'div', 'small', 'strong', 'label', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
       default: 'p',
     },
     font: {
@@ -91,8 +91,8 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'variant' },
       description:
-        'body is running text. eyebrow is a short, uppercase, tracked label that names what follows, such as a group of links; code sets a value to copy or read\n      exactly, such as an address, in the monospace face.',
-      values: ['body', 'eyebrow', 'code'],
+        'body is running text. display is a page title, heading names a section, label identifies a control, and caption is supporting text. These roles set their\n      shared type scale, weight and leading; pair heading or display with an appropriate as heading element. eyebrow is a short, uppercase, tracked label that\n      names what follows, such as a group of links; code sets a value to copy or read exactly, such as an address, in the monospace face.',
+      values: ['body', 'display', 'heading', 'label', 'caption', 'eyebrow', 'code'],
       default: 'body',
     },
     weight: {
@@ -119,7 +119,19 @@ const props = defineProps({
   align: { type: null as unknown as PropType<'start' | 'center' | null> },
   as: {
     type: null as unknown as PropType<
-      'p' | 'span' | 'div' | 'small' | 'strong' | 'label' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | null
+      | 'p'
+      | 'span'
+      | 'div'
+      | 'small'
+      | 'strong'
+      | 'label'
+      | 'h1'
+      | 'h2'
+      | 'h3'
+      | 'h4'
+      | 'h5'
+      | 'h6'
+      | null
     >,
   },
   font: { type: null as unknown as PropType<'inherit' | 'sans' | null> },
@@ -140,7 +152,11 @@ const props = defineProps({
   },
   trim: { type: null as unknown as PropType<boolean | null> },
   truncate: { type: null as unknown as PropType<boolean | null> },
-  variant: { type: null as unknown as PropType<'body' | 'eyebrow' | 'code' | null> },
+  variant: {
+    type: null as unknown as PropType<
+      'body' | 'display' | 'heading' | 'label' | 'caption' | 'eyebrow' | 'code' | null
+    >,
+  },
   weight: {
     type: null as unknown as PropType<'inherit' | 'normal' | 'medium' | 'semibold' | null>,
   },
@@ -212,7 +228,19 @@ const checkedProps = computed(() => {
       props[BINDING_INPUTS_PROP],
     ) as 'start' | 'center',
     as: propInputs.value<
-      'p' | 'span' | 'div' | 'small' | 'strong' | 'label' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | null
+      | 'p'
+      | 'span'
+      | 'div'
+      | 'small'
+      | 'strong'
+      | 'label'
+      | 'h1'
+      | 'h2'
+      | 'h3'
+      | 'h4'
+      | 'h5'
+      | 'h6'
+      | null
     >('as', props['as'], props[BINDING_INPUTS_PROP]) as
       | 'p'
       | 'span'
@@ -220,6 +248,7 @@ const checkedProps = computed(() => {
       | 'small'
       | 'strong'
       | 'label'
+      | 'h1'
       | 'h2'
       | 'h3'
       | 'h4'
@@ -269,11 +298,16 @@ const checkedProps = computed(() => {
       props['truncate'],
       props[BINDING_INPUTS_PROP],
     ) as boolean,
-    variant: propInputs.value<'body' | 'eyebrow' | 'code' | null>(
-      'variant',
-      props['variant'],
-      props[BINDING_INPUTS_PROP],
-    ) as 'body' | 'eyebrow' | 'code',
+    variant: propInputs.value<
+      'body' | 'display' | 'heading' | 'label' | 'caption' | 'eyebrow' | 'code' | null
+    >('variant', props['variant'], props[BINDING_INPUTS_PROP]) as
+      | 'body'
+      | 'display'
+      | 'heading'
+      | 'label'
+      | 'caption'
+      | 'eyebrow'
+      | 'code',
     weight: propInputs.value<'inherit' | 'normal' | 'medium' | 'semibold' | null>(
       'weight',
       props['weight'],
@@ -311,15 +345,17 @@ checkHydratedRoot(
           ? 'strong'
           : ((checkedProps.value.as === 'label')
             ? 'label'
-            : ((checkedProps.value.as === 'h2')
-              ? 'h2'
-              : ((checkedProps.value.as === 'h3')
-                ? 'h3'
-                : ((checkedProps.value.as === 'h4')
-                  ? 'h4'
-                  : ((checkedProps.value.as === 'h5')
-                    ? 'h5'
-                    : ((checkedProps.value.as === 'h6') ? 'h6' : ('p')))))))))),
+            : ((checkedProps.value.as === 'h1')
+              ? 'h1'
+              : ((checkedProps.value.as === 'h2')
+                ? 'h2'
+                : ((checkedProps.value.as === 'h3')
+                  ? 'h3'
+                  : ((checkedProps.value.as === 'h4')
+                    ? 'h4'
+                    : ((checkedProps.value.as === 'h5')
+                      ? 'h5'
+                      : ((checkedProps.value.as === 'h6') ? 'h6' : ('p'))))))))))),
   'ui-text',
 )
 
@@ -456,6 +492,29 @@ const hostState = computed(() =>
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   ><slot /></label>
+  <h1
+    v-else-if="checkedProps.as === 'h1'"
+    class="ui-text"
+    v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-text
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-ui-text-prop-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
+    :data-ui-text-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-ui-text-prop-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-ui-text-prop-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
+    :data-ui-text-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-text-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-text-prop-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
+    :data-ui-text-prop-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
+    :data-ui-text-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-text-prop-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-ui-text-prop-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
+    :data-ui-text-state="hostState || undefined"
+    ref="@html-next/root"
+  >
+    <slot />
+  </h1>
   <h2
     v-else-if="checkedProps.as === 'h2'"
     class="ui-text"
@@ -626,7 +685,7 @@ const hostState = computed(() =>
     color: var(--ui-text-primary);
     text-align: start;
   }
-  :global(:scope:is(h2, h3, h4, h5, h6):where([data-hn-ui-text])) {
+  :global(:scope:is(h1, h2, h3, h4, h5, h6):where([data-hn-ui-text])) {
     font-family: var(--ui-font-display, inherit);
     font-size: inherit;
     font-weight: inherit;
@@ -685,10 +744,33 @@ const hostState = computed(() =>
     font-weight: var(--ui-font-semibold);
   }
 
+  :global(:scope[data-ui-text-state~="variant=display"]:where([data-hn-ui-text])),
+  :global(:scope[data-ui-text-state~="variant=heading"]:where([data-hn-ui-text])) {
+    font-family: var(--ui-font-display, var(--ui-font-family-sans));
+    font-weight: var(--ui-font-semibold);
+    line-height: var(--ui-line-height-tight);
+  }
+  :global(:scope[data-ui-text-state~="variant=display"]:where([data-hn-ui-text])) {
+    font-size: var(--ui-font-size-2xl);
+  }
+  :global(:scope[data-ui-text-state~="variant=heading"]:where([data-hn-ui-text])) {
+    font-size: var(--ui-font-size-xl);
+  }
+  :global(:scope[data-ui-text-state~="variant=label"]:where([data-hn-ui-text])) {
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-medium);
+    line-height: var(--ui-line-height);
+  }
+  :global(:scope[data-ui-text-state~="variant=caption"]:where([data-hn-ui-text])) {
+    font-size: var(--ui-font-size-sm);
+    line-height: var(--ui-line-height);
+  }
+
   :global(:scope[data-ui-text-state~="variant=eyebrow"]:where([data-hn-ui-text])) {
     font-size: var(--ui-font-size-xs);
     font-weight: var(--ui-font-semibold);
     letter-spacing: 0.06em;
+    line-height: var(--ui-line-height);
     text-transform: uppercase;
   }
   :global(:scope[data-ui-text-state~="variant=code"]:where([data-hn-ui-text])) {

package/vue/UiTooltip.vue

@@ -389,6 +389,9 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
 
 /* The label and the shortcut sit side by side, a gap apart, with the label wrapping on its own. */
 
+/* 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. */
+
 /* A keyboard shortcut follows the label after a thin divider, smaller and quieter, as menus show
    it. The label stays first in the description, so a screen reader hears the name, then the keys. */
 
@@ -399,6 +402,7 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
 
 @scope (.ui-tooltip) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-tooltip])) {
+    --_ui-material-scale: 0.08;
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-tooltip-border: var(--ui-tooltip-border);
     --_ui-tooltip-max-inline-size: var(--ui-tooltip-max-inline-size);
@@ -451,6 +455,91 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
       var(--ui-overlay-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md)))
     );
   }
+  :global(.surface:where([data-hn-ui-tooltip])) {
+    --_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, 0.08) *
+        8px
+    );
+    --_ui-material-content-color: var(
+      --_ui-tooltip-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-tooltip-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-tooltip-shadow,
+      var(
+        --ui-overlay-shadow,
+        0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.08) * 8px) calc(
+          var(--_ui-material-separation) * var(--_ui-material-scale, 0.08) * 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-tooltip, var(--ui-shadow-md))
+      )
+    );
+    backdrop-filter: blur(
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 18px)
+    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 0.18));
+    -webkit-backdrop-filter: blur(
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 18px)
+    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 0.18));
+  }
+
+  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    :global(.surface:where([data-hn-ui-tooltip])) {
+      background: var(--_ui-material-content-color);
+    }
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    :global(.surface:where([data-hn-ui-tooltip])) {
+      background: var(--_ui-material-content-color);
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :global(.surface:where([data-hn-ui-tooltip])) {
+      background: Canvas;
+      border-color: CanvasText;
+      box-shadow: none;
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+    }
+  }
   :global(.shortcut:where([data-hn-ui-tooltip])) {
     display: inline-flex !important;
     align-items: center !important;

package/vue/chunks/UiActionBar.js

@@ -1,4 +1,4 @@
-import { i as checkHydratedRoot, p as nativeAttrs, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { i as checkHydratedRoot, m as nativeAttrs, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeProps, openBlock, renderSlot, toDisplayString, unref } from "vue";
 //#region .build/vue/UiActionBar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {

package/vue/chunks/UiAffordanceScope.js

@@ -1,5 +1,5 @@
-import { i as checkHydratedRoot, o as createDispatch, p as nativeAttrs, t as _plugin_vue_export_helper_default, v as useComponentHost, y as useReflectedProp } from "./_plugin-vue_export-helper.js";
-import { f as vPropValidity, i as checkPropInput, l as propValidityState, p as vuePropInputs, r as acceptsControllerWrite, t as BINDING_INPUTS_PROP } from "./props.js";
+import { b as useReflectedProp, i as checkHydratedRoot, m as nativeAttrs, o as createDispatch, t as _plugin_vue_export_helper_default, y as useComponentHost } from "./_plugin-vue_export-helper.js";
+import { i as checkPropInput, m as vuePropInputs, p as vPropValidity, r as acceptsControllerWrite, t as BINDING_INPUTS_PROP, u as propValidityState } from "./props.js";
 import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, renderSlot, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiAffordanceScope.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [

package/vue/chunks/UiAvatar.js

@@ -1,5 +1,5 @@
-import { i as checkHydratedRoot, o as createDispatch, p as nativeAttrs, t as _plugin_vue_export_helper_default, v as useComponentHost, y as useReflectedProp } from "./_plugin-vue_export-helper.js";
-import { f as vPropValidity, i as checkPropInput, l as propValidityState, p as vuePropInputs, r as acceptsControllerWrite, t as BINDING_INPUTS_PROP } from "./props.js";
+import { b as useReflectedProp, i as checkHydratedRoot, m as nativeAttrs, o as createDispatch, t as _plugin_vue_export_helper_default, y as useComponentHost } from "./_plugin-vue_export-helper.js";
+import { i as checkPropInput, m as vuePropInputs, p as vPropValidity, r as acceptsControllerWrite, t as BINDING_INPUTS_PROP, u as propValidityState } from "./props.js";
 import { t as UiIcon_default } from "./UiIcon.js";
 import { computed, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, renderSlot, toDisplayString, unref, useTemplateRef, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiAvatar.vue?vue&type=script&setup=true&lang.ts

package/vue/chunks/UiAvatarGroup.js

@@ -1,5 +1,5 @@
-import { i as checkHydratedRoot, o as createDispatch, p as nativeAttrs, t as _plugin_vue_export_helper_default, v as useComponentHost, y as useReflectedProp } from "./_plugin-vue_export-helper.js";
-import { f as vPropValidity, i as checkPropInput, l as propValidityState, p as vuePropInputs, r as acceptsControllerWrite, t as BINDING_INPUTS_PROP } from "./props.js";
+import { b as useReflectedProp, i as checkHydratedRoot, m as nativeAttrs, o as createDispatch, t as _plugin_vue_export_helper_default, y as useComponentHost } from "./_plugin-vue_export-helper.js";
+import { i as checkPropInput, m as vuePropInputs, p as vPropValidity, r as acceptsControllerWrite, t as BINDING_INPUTS_PROP, u as propValidityState } from "./props.js";
 import { computed, createElementBlock, createElementVNode, createTextVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, renderSlot, toDisplayString, unref, useTemplateRef, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiAvatarGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [

package/vue/chunks/UiBadge.js

@@ -1,5 +1,5 @@
-import { i as checkHydratedRoot, p as nativeAttrs, t as _plugin_vue_export_helper_default, y as useReflectedProp } from "./_plugin-vue_export-helper.js";
-import { f as vPropValidity, i as checkPropInput, p as vuePropInputs, t as BINDING_INPUTS_PROP } from "./props.js";
+import { b as useReflectedProp, i as checkHydratedRoot, m as nativeAttrs, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { i as checkPropInput, m as vuePropInputs, p as vPropValidity, t as BINDING_INPUTS_PROP } from "./props.js";
 import { computed, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeProps, openBlock, renderSlot, toDisplayString, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiBadge.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [

package/vue/chunks/UiBreadcrumbItem.js

@@ -1,5 +1,5 @@
-import { a as concat, i as checkHydratedRoot, p as nativeAttrs, r as attribute, t as _plugin_vue_export_helper_default, y as useReflectedProp } from "./_plugin-vue_export-helper.js";
-import { f as vPropValidity, i as checkPropInput, p as vuePropInputs, t as BINDING_INPUTS_PROP } from "./props.js";
+import { a as concat, b as useReflectedProp, i as checkHydratedRoot, m as nativeAttrs, r as attribute, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { i as checkPropInput, m as vuePropInputs, p as vPropValidity, t as BINDING_INPUTS_PROP } from "./props.js";
 import { t as UiIcon_default } from "./UiIcon.js";
 import { computed, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, openBlock, renderSlot, toDisplayString, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiBreadcrumbItem.vue?vue&type=script&setup=true&lang.ts

package/vue/chunks/UiBreadcrumbs.js

@@ -1,5 +1,5 @@
-import { i as checkHydratedRoot, p as nativeAttrs, t as _plugin_vue_export_helper_default, y as useReflectedProp } from "./_plugin-vue_export-helper.js";
-import { f as vPropValidity, i as checkPropInput, p as vuePropInputs, t as BINDING_INPUTS_PROP } from "./props.js";
+import { b as useReflectedProp, i as checkHydratedRoot, m as nativeAttrs, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { i as checkPropInput, m as vuePropInputs, p as vPropValidity, t as BINDING_INPUTS_PROP } from "./props.js";
 import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiBreadcrumbs.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-label", "data-ui-breadcrumbs-prop-label"];