@threadlabs/looma 0.23.21 → 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/UiImage.d.ts

@@ -0,0 +1,100 @@
+import type { PropType } from 'vue';
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    media?: (props: typeof __VLS_1) => any;
+} & {
+    controls?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    alt: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    height: {
+        type: PropType<number | null>;
+        default: null;
+    };
+    placement: {
+        type: PropType<"block" | "center" | "wrap-left" | "wrap-right" | null>;
+        default: string;
+    };
+    resizable: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    selected: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    src: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    width: {
+        type: PropType<number | null>;
+        default: null;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    resize: (event: CustomEvent<{
+        readonly width: number;
+        readonly height: number;
+        readonly phase: "preview" | "commit" | "cancel";
+        readonly trigger: "pointer" | "keyboard";
+    }>) => any;
+    "update:height": (value: number) => any;
+    "update:width": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    alt: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    height: {
+        type: PropType<number | null>;
+        default: null;
+    };
+    placement: {
+        type: PropType<"block" | "center" | "wrap-left" | "wrap-right" | null>;
+        default: string;
+    };
+    resizable: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    selected: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    src: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    width: {
+        type: PropType<number | null>;
+        default: null;
+    };
+}>> & Readonly<{
+    onResize?: ((event: CustomEvent<{
+        readonly width: number;
+        readonly height: number;
+        readonly phase: "preview" | "commit" | "cancel";
+        readonly trigger: "pointer" | "keyboard";
+    }>) => any) | undefined;
+    "onUpdate:height"?: ((value: number) => any) | undefined;
+    "onUpdate:width"?: ((value: number) => any) | undefined;
+}>, {
+    alt: string | null;
+    selected: boolean | null;
+    width: number | null;
+    height: number | null;
+    src: string | null;
+    placement: "center" | "block" | "wrap-left" | "wrap-right" | null;
+    resizable: boolean | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiImage.js

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