@threadlabs/looma 0.23.22 → 0.23.23

package/vue/UiButton.vue

@@ -4,6 +4,7 @@ import { computed, getCurrentInstance, useTemplateRef, watchSyncEffect } from 'v
 import type { PropType } from 'vue'
 import { createDispatch, preserveRootFocus, useComponentHost } from './host'
 import { checkedProp, propValidityState, vPropValidity } from './props'
+import UiIcon from './UiIcon.vue'
 import UiSpinner from './UiSpinner.vue'
 
 defineOptions({ inheritAttrs: false })
@@ -119,8 +120,8 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'variant' },
       description:
-        'Emphasis: how loudly the button asks. solid fills with its tone, outline draws its tone at the edge over a wash of it, ghost carries only text until it is\n      hovered, and link is an inline text action that reads as a link. danger is solid in the danger tone, kept for the call sites that name it.',
-      values: ['outline', 'solid', 'danger', 'ghost', 'link'],
+        'Emphasis: how loudly the button asks. solid fills with its tone, outline draws its tone at the edge over a wash of it, ghost carries only text until it is\n      hovered, and link is an inline text action that reads as a link. danger is solid in the danger tone, kept for the call sites that name it. card uses the\n      same tone on a full-width action with an icon slot, wrapping content, and a centered action slot.',
+      values: ['outline', 'solid', 'danger', 'ghost', 'link', 'card'],
       default: 'outline',
     },
   },
@@ -148,7 +149,9 @@ const props = defineProps({
     default: 'button',
   },
   variant: {
-    type: null as unknown as PropType<'outline' | 'solid' | 'danger' | 'ghost' | 'link' | null>,
+    type: null as unknown as PropType<
+      'outline' | 'solid' | 'danger' | 'ghost' | 'link' | 'card' | null
+    >,
     default: 'outline',
   },
 })
@@ -260,13 +263,13 @@ const checkedProps = computed(() => ({
     'type',
     acceptedProps,
   ) as 'button' | 'submit' | 'reset',
-  variant: checkedProp<'outline' | 'solid' | 'danger' | 'ghost' | 'link'>(
+  variant: checkedProp<'outline' | 'solid' | 'danger' | 'ghost' | 'link' | 'card'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'variant',
     acceptedProps,
-  ) as 'outline' | 'solid' | 'danger' | 'ghost' | 'link',
+  ) as 'outline' | 'solid' | 'danger' | 'ghost' | 'link' | 'card',
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -448,11 +451,155 @@ const guardedBinding3 = computed(() => {
         concat(checkedProps.value.loading || checkedProps.value.pending),
       ))
 })
+let guardedBinding4Previous: any = null
+const guardedBinding4 = computed(() => {
+  const candidate: any = ((objectValue: any, indexValue: any) =>
+    objectValue === Symbol.for('html-next.invalid-result')
+      || indexValue === Symbol.for('html-next.invalid-result')
+      ? Symbol.for('html-next.invalid-result')
+      : objectValue[indexValue])(
+      { true: null, false: checkedProps.value.href },
+      concat(
+        checkedProps.value.disabled || checkedProps.value.loading || checkedProps.value.pending,
+      ),
+    )
+  if (candidate === Symbol.for('html-next.invalid-result')) {
+    return guardedBinding4Previous
+  }
+  return guardedBinding4Previous = attribute(((objectValue: any, indexValue: any) =>
+    objectValue === Symbol.for('html-next.invalid-result')
+      || indexValue === Symbol.for('html-next.invalid-result')
+      ? Symbol.for('html-next.invalid-result')
+      : objectValue[indexValue])(
+      { true: null, false: checkedProps.value.href },
+      concat(
+        checkedProps.value.disabled || checkedProps.value.loading || checkedProps.value.pending,
+      ),
+    ))
+})
+let guardedBinding5Previous: any = null
+const guardedBinding5 = computed(() => {
+  const candidate: any = ((objectValue: any, indexValue: any) =>
+    objectValue === Symbol.for('html-next.invalid-result')
+      || indexValue === Symbol.for('html-next.invalid-result')
+      ? Symbol.for('html-next.invalid-result')
+      : objectValue[indexValue])(
+      { true: 'true', false: null },
+      concat(
+        checkedProps.value.disabled || checkedProps.value.loading || checkedProps.value.pending,
+      ),
+    )
+  if (candidate === Symbol.for('html-next.invalid-result')) {
+    return guardedBinding5Previous
+  }
+  return guardedBinding5Previous = typeof (((objectValue: any, indexValue: any) =>
+      objectValue === Symbol.for('html-next.invalid-result')
+        || indexValue === Symbol.for('html-next.invalid-result')
+        ? Symbol.for('html-next.invalid-result')
+        : objectValue[indexValue])(
+        { true: 'true', false: null },
+        concat(
+          checkedProps.value.disabled || checkedProps.value.loading || checkedProps.value.pending,
+        ),
+      )) === 'boolean'
+    ? String(((objectValue: any, indexValue: any) =>
+      objectValue === Symbol.for('html-next.invalid-result')
+        || indexValue === Symbol.for('html-next.invalid-result')
+        ? Symbol.for('html-next.invalid-result')
+        : objectValue[indexValue])(
+        { true: 'true', false: null },
+        concat(
+          checkedProps.value.disabled || checkedProps.value.loading || checkedProps.value.pending,
+        ),
+      ))
+    : attribute(((objectValue: any, indexValue: any) =>
+      objectValue === Symbol.for('html-next.invalid-result')
+        || indexValue === Symbol.for('html-next.invalid-result')
+        ? Symbol.for('html-next.invalid-result')
+        : objectValue[indexValue])(
+        { true: 'true', false: null },
+        concat(
+          checkedProps.value.disabled || checkedProps.value.loading || checkedProps.value.pending,
+        ),
+      ))
+})
+let guardedBinding6Previous: any = null
+const guardedBinding6 = computed(() => {
+  const candidate: any = ((objectValue: any, indexValue: any) =>
+    objectValue === Symbol.for('html-next.invalid-result')
+      || indexValue === Symbol.for('html-next.invalid-result')
+      ? Symbol.for('html-next.invalid-result')
+      : objectValue[indexValue])(
+      { true: '0', false: null },
+      concat(
+        (checkedProps.value.loading || checkedProps.value.pending) && !checkedProps.value.disabled,
+      ),
+    )
+  if (candidate === Symbol.for('html-next.invalid-result')) {
+    return guardedBinding6Previous
+  }
+  return guardedBinding6Previous = attribute(
+    ((objectValue: any, indexValue: any) =>
+      objectValue === Symbol.for('html-next.invalid-result')
+        || indexValue === Symbol.for('html-next.invalid-result')
+        ? Symbol.for('html-next.invalid-result')
+        : objectValue[indexValue])(
+        { true: '0', false: null },
+        concat(
+          (checkedProps.value.loading || checkedProps.value.pending)
+            && !checkedProps.value.disabled,
+        ),
+      ),
+  )
+})
+let guardedBinding7Previous: any = null
+const guardedBinding7 = computed(() => {
+  const candidate: any = ((objectValue: any, indexValue: any) =>
+    objectValue === Symbol.for('html-next.invalid-result')
+      || indexValue === Symbol.for('html-next.invalid-result')
+      ? Symbol.for('html-next.invalid-result')
+      : objectValue[indexValue])(
+      { true: 'true', false: null },
+      concat(checkedProps.value.loading || checkedProps.value.pending),
+    )
+  if (candidate === Symbol.for('html-next.invalid-result')) {
+    return guardedBinding7Previous
+  }
+  return guardedBinding7Previous = typeof (((objectValue: any, indexValue: any) =>
+      objectValue === Symbol.for('html-next.invalid-result')
+        || indexValue === Symbol.for('html-next.invalid-result')
+        ? Symbol.for('html-next.invalid-result')
+        : objectValue[indexValue])(
+        { true: 'true', false: null },
+        concat(checkedProps.value.loading || checkedProps.value.pending),
+      )) === 'boolean'
+    ? String(((objectValue: any, indexValue: any) =>
+      objectValue === Symbol.for('html-next.invalid-result')
+        || indexValue === Symbol.for('html-next.invalid-result')
+        ? Symbol.for('html-next.invalid-result')
+        : objectValue[indexValue])(
+        { true: 'true', false: null },
+        concat(checkedProps.value.loading || checkedProps.value.pending),
+      ))
+    : attribute(((objectValue: any, indexValue: any) =>
+      objectValue === Symbol.for('html-next.invalid-result')
+        || indexValue === Symbol.for('html-next.invalid-result')
+        ? Symbol.for('html-next.invalid-result')
+        : objectValue[indexValue])(
+        { true: 'true', false: null },
+        concat(checkedProps.value.loading || checkedProps.value.pending),
+      ))
+})
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
   && (!(hydrationNode instanceof Element)
-    || hydrationNode.localName !== ((checkedProps.value.as === 'a') ? 'a' : ('button')))
+    || hydrationNode.localName
+      !== ((checkedProps.value.variant === 'card' && checkedProps.value.as === 'a')
+        ? 'a'
+        : ((checkedProps.value.variant === 'card')
+          ? 'button'
+          : ((checkedProps.value.as === 'a') ? 'a' : ('button')))))
 ) {
   throw Object.assign(new Error('HR005: Server markup for <ui-button> has an incompatible root.'), {
     name: 'HtmlDiagnosticError',
@@ -554,7 +701,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
 
 <template>
   <a
-    v-if="checkedProps.as === 'a'"
+    v-if="checkedProps.variant === 'card' && checkedProps.as === 'a'"
     data-component="ui-button"
     v-bind="nativeAttrs($attrs)"
     :href="guarded"
@@ -580,6 +727,84 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-button-state="hostState || undefined"
     ref="@html-next/root"
+  ><span class="card-icon"><UiSpinner
+        v-if="checkedProps.loading || checkedProps.pending"
+        size="sm"
+      />
+      <template v-if="!(checkedProps.loading || checkedProps.pending)"><slot
+          name="icon"
+        /></template></span>
+    <span class="card-content"><slot /></span>
+    <span class="card-action"><slot name="action"><UiIcon
+          name="chevron-right"
+          aria-hidden="true"
+        /></slot></span></a>
+  <button
+    v-else-if="checkedProps.variant === 'card'"
+    data-component="ui-button"
+    v-bind="nativeAttrs($attrs)"
+    :type="checkedProps.type ?? undefined"
+    :disabled="checkedProps.disabled ?? undefined"
+    :aria-disabled="guardedBinding3"
+    :aria-busy="checkedProps.loading || checkedProps.pending"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
+    :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
+    :data-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
+    :data-pending="reflectedProp('pending', 'pending', checkedProps.pending, undefined, false)"
+    :data-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
+    :data-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
+    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-stretch="reflectedProp('stretch', 'stretch', checkedProps.stretch, undefined, false)"
+    :data-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
+    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-type="reflectedProp('type', 'type', checkedProps.type, undefined, false)"
+    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-button-state="hostState || undefined"
+    ref="@html-next/root"
+  >
+    <span class="card-icon"><UiSpinner
+        v-if="checkedProps.loading || checkedProps.pending"
+        size="sm"
+      />
+      <template v-if="!(checkedProps.loading || checkedProps.pending)"><slot
+          name="icon"
+        /></template></span>
+    <span class="card-content"><slot /></span>
+    <span class="card-action"><slot name="action"><UiIcon
+          name="chevron-right"
+          aria-hidden="true"
+        /></slot></span>
+  </button>
+  <a
+    v-else-if="checkedProps.as === 'a'"
+    data-component="ui-button"
+    v-bind="nativeAttrs($attrs)"
+    :href="guardedBinding4"
+    :target="checkedProps.target ?? undefined"
+    :rel="checkedProps.rel ?? undefined"
+    :aria-disabled="guardedBinding5"
+    :aria-busy="checkedProps.loading || checkedProps.pending"
+    :tabindex="guardedBinding6"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
+    :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
+    :data-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
+    :data-pending="reflectedProp('pending', 'pending', checkedProps.pending, undefined, false)"
+    :data-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
+    :data-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
+    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-stretch="reflectedProp('stretch', 'stretch', checkedProps.stretch, undefined, false)"
+    :data-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
+    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-type="reflectedProp('type', 'type', checkedProps.type, undefined, false)"
+    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-button-state="hostState || undefined"
+    ref="@html-next/root"
   ><span v-if="checkedProps.loading || checkedProps.pending" class="spinner-wrap"><UiSpinner
         size="sm"
       /></span>
@@ -590,7 +815,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     v-bind="nativeAttrs($attrs)"
     :type="checkedProps.type ?? undefined"
     :disabled="checkedProps.disabled ?? undefined"
-    :aria-disabled="guardedBinding3"
+    :aria-disabled="guardedBinding7"
     :aria-busy="checkedProps.loading || checkedProps.pending"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
@@ -790,6 +1015,42 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
   font-size: var(--ui-font-size-md);
 }
 
+/* Card actions inherit Button's palette and behavior; only their shared layout changes.
+   The icon may contain any decorative composition. Empty icons remove their column. */
+[data-component~="ui-button"][data-ui-button-state~="variant=card"] {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: start;
+  gap: var(--ui-space-3);
+  inline-size: 100%;
+  min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-md));
+  text-align: start;
+  white-space: normal;
+  box-shadow: none;
+  background-image: none;
+}
+[data-component~="ui-button"][data-ui-button-state~="variant=card"][data-ui-button-state~="size=lg"] {
+  min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-lg));
+}
+[data-component~="ui-button"][data-ui-button-state~="variant=card"]:has(.card-icon:empty) {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+.card-icon {
+  display: flex;
+  align-items: flex-start;
+}
+.card-icon:empty {
+  display: none;
+}
+.card-content {
+  min-inline-size: 0;
+}
+.card-action {
+  display: flex;
+  align-items: center;
+  align-self: center;
+}
+
 /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
    is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
 [data-component~="ui-button"]:hover:not(:disabled, [aria-disabled="true"]) {

package/vue/UiListItem.d.ts

@@ -44,7 +44,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: boolean;
     };
 }>> & Readonly<{}>, {
-    variant: "row" | "card" | null;
+    variant: "card" | "row" | null;
     current: boolean | null;
     wrap: boolean | null;
     highlighted: boolean | null;

package/vue/UiSection.d.ts

@@ -35,7 +35,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>> & Readonly<{}>, {
     tone: "neutral" | "danger" | null;
-    variant: "plain" | "card" | "divided" | null;
+    variant: "card" | "plain" | "divided" | null;
     heading: string | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiSeparator.d.ts

@@ -1,5 +1,9 @@
 import type { PropType } from 'vue';
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    emphasis: {
+        type: PropType<"normal" | "strong" | null>;
+        default: string;
+    };
     orientation: {
         type: PropType<"horizontal" | "vertical" | null>;
         default: string;
@@ -13,6 +17,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: boolean;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    emphasis: {
+        type: PropType<"normal" | "strong" | null>;
+        default: string;
+    };
     orientation: {
         type: PropType<"horizontal" | "vertical" | null>;
         default: string;
@@ -28,6 +36,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>> & Readonly<{}>, {
     selected: boolean | null;
     orientation: "vertical" | "horizontal" | null;
+    emphasis: "strong" | "normal" | null;
     selectable: boolean | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;

package/vue/UiSeparator.vue

@@ -8,6 +8,15 @@ defineOptions({ inheritAttrs: false })
 
 const propValidityContract = {
   props: {
+    emphasis: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'emphasis' },
+      description:
+        'Normal uses the decorative divider color; strong uses the stronger enclosing-edge color for clearer separation.',
+      values: ['normal', 'strong'],
+      default: 'normal',
+    },
     orientation: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
@@ -36,6 +45,7 @@ const propValidityContract = {
   },
 } as const
 const props = defineProps({
+  emphasis: { type: null as unknown as PropType<'normal' | 'strong' | null>, default: 'normal' },
   orientation: {
     type: null as unknown as PropType<'horizontal' | 'vertical' | null>,
     default: 'horizontal',
@@ -44,11 +54,19 @@ const props = defineProps({
   selected: { type: null as unknown as PropType<boolean | null>, default: false },
 })
 const acceptedProps: Record<string, unknown> = {
+  emphasis: 'normal',
   orientation: 'horizontal',
   selectable: false,
   selected: false,
 }
 const checkedProps = computed(() => ({
+  emphasis: checkedProp<'normal' | 'strong'>(
+    props['emphasis'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'emphasis',
+    acceptedProps,
+  ) as 'normal' | 'strong',
   orientation: checkedProp<'horizontal' | 'vertical'>(
     props['orientation'],
     { kind: 'terminal', name: 'keyword' },
@@ -129,6 +147,9 @@ if (
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
+    checkedProps.value.emphasis && 'emphasis',
+    checkedProps.value.emphasis != null
+    && `emphasis=${encodeURIComponent(checkedProps.value.emphasis)}`,
     checkedProps.value.selectable && 'selectable',
     checkedProps.value.selected && 'selected',
   ].filter(Boolean).join(' ')
@@ -141,6 +162,7 @@ const hostState = computed(() =>
     v-bind="nativeAttrs($attrs)"
     :aria-orientation="checkedProps.orientation ?? undefined"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-emphasis="reflectedProp('emphasis', 'emphasis', checkedProps.emphasis, undefined, false)"
     :data-orientation="reflectedProp('orientation', 'orientation', checkedProps.orientation, undefined, false)"
     :data-selectable="reflectedProp('selectable', 'selectable', checkedProps.selectable, undefined, false)"
     :data-selected="reflectedProp('selected', 'selected', checkedProps.selected, undefined, false)"
@@ -162,14 +184,18 @@ const hostState = computed(() =>
   margin: 0;
   border: 0;
   border-block-start: var(--ui-border-width) solid
-    var(--ui-separator-color, var(--ui-border-divider));
+    var(--ui-separator-color, var(--_separator-color, var(--ui-border-divider)));
+}
+
+[data-component~="ui-separator"][data-ui-separator-state~="emphasis=strong"] {
+  --_separator-color: var(--ui-border-strong);
 }
 
 [data-component~="ui-separator"][aria-orientation="vertical"] {
   block-size: auto;
   border-block-start: 0;
   border-inline-start: var(--ui-border-width) solid
-    var(--ui-separator-color, var(--ui-border-divider));
+    var(--ui-separator-color, var(--_separator-color, var(--ui-border-divider)));
 }
 
 [data-component~="ui-separator"][data-ui-separator-state~="selectable"] {