@threadlabs/looma 0.5.1 → 0.6.0-rc.1

package/vue/UiButton.vue

@@ -1,257 +1,304 @@
-<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.2 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed } from "vue";
-
-defineOptions({ inheritAttrs: false });
-
-const hn = {
-  t: (v: unknown): boolean => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
-  text: (v: unknown): string => v === undefined || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
-  attr: (v: unknown): any => v === undefined || v === null || v === false ? undefined : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? undefined : String(v),
-};
-
-const props = withDefaults(defineProps<{
-  disabled?: boolean | null;
-  size?: "sm" | "md" | "lg" | null;
-  variant?: "outline" | "solid" | "danger" | "ghost" | "link" | null;
-}>(), {
-  disabled: false,
-  size: "md",
-  variant: "outline",
-});
-
-/** The resolved values the styles' :host-state() rules test. */
-const hostState = computed(() => (["variant","size"] as const).flatMap((name) => {
-  const value = read(name);
-  const tokens: string[] = hn.t(value) ? [name] : [];
-  if (typeof value === "string" || typeof value === "number") tokens.push(`${name}=${encodeURIComponent(String(value))}`);
-  return tokens;
-}).join(" "));
-
-function read(name: string): unknown {
-  return (props as Record<string, unknown>)[name];
-}
-
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    align?: 'center' | 'start'
+    disabled?: boolean
+    size?: 'sm' | 'md' | 'lg'
+    stretch?: boolean
+    variant?: 'outline' | 'solid' | 'danger' | 'ghost' | 'link'
+  }>(),
+  {
+    align: 'center',
+    disabled: false,
+    size: 'md',
+    stretch: false,
+    variant: 'outline',
+  },
+)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.variant && `variant variant=${props.variant}`,
+    props.align && `align align=${props.align}`,
+    props.stretch && 'stretch',
+    props.size && `size size=${props.size}`,
+  ].filter(Boolean).join(' ')
+)
 </script>
 
 <template>
-  <button data-component="ui-button" type="button" v-bind="$attrs" :disabled="hn.attr(props.disabled)" :data-ui-button-state="hostState || undefined"><slot></slot></button>
+  <button
+    data-component="ui-button"
+    type="button"
+    v-bind="$attrs"
+    :disabled="disabled"
+    :data-ui-button-state="hostState || undefined"
+  >
+    <slot />
+  </button>
 </template>
 
 <style scoped>
 [data-component~="ui-button"] {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      vertical-align: middle;
-      color: var(--ui-action-secondary-text, var(--ui-text-primary));
-    }
-
-    [data-component~="ui-button"][data-ui-button-state~="variant=solid"] {
-      color: var(--ui-action-primary-text, var(--ui-text-on-accent));
-    }
-
-    [data-component~="ui-button"] {
-      appearance: none;
-      min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md, 2.5rem));
-      border: 1px solid var(--ui-button-border, var(--ui-border-strong));
-      border-radius: var(--ui-button-radius, var(--ui-radius-2));
-      background: var(--ui-button-surface, var(--ui-surface-elevated));
-      color: var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
-      font: inherit;
-      font-weight: var(--ui-font-medium, 500);
-      line-height: var(--ui-line-height-tight);
-      padding: var(--ui-space-2) var(--ui-space-3);
-      background-image: var(--ui-raised-highlight, none);
-      box-shadow: var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs)));
-      cursor: pointer;
-      transition:
-        background-color var(--ui-motion-fast) var(--ui-motion-ease),
-        border-color var(--ui-motion-fast) var(--ui-motion-ease),
-        color var(--ui-motion-fast) var(--ui-motion-ease),
-        box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
-        transform var(--ui-motion-fast) var(--ui-motion-ease);
-      margin: 0;
-    }
-
-    @supports (text-box-trim: trim-both) {
-      [data-component~="ui-button"] {
-        text-box-trim: trim-both;
-        text-box-edge: cap alphabetic;
-      }
-    }
-
-    [data-component~="ui-button"][data-ui-button-state~="size=sm"] {
-      min-block-size: var(--ui-control-size-sm, 2rem);
-      padding: var(--ui-space-1) var(--ui-space-2);
-      font-size: 0.875rem;
-    }
-
-    [data-component~="ui-button"][data-ui-button-state~="size=lg"] {
-      min-block-size: var(--ui-control-size-lg, 3rem);
-      padding: var(--ui-space-3) var(--ui-space-4);
-      font-size: 1rem;
-    }
-
-    [data-component~="ui-button"]:hover:enabled {
-      background: var(--ui-action-secondary-surface-hover, var(--ui-surface-muted));
-      border-color: var(--ui-control-border-hover, var(--ui-border-strong));
-    }
-
-    [data-component~="ui-button"]:active:enabled {
-      background: var(--ui-surface-subtle);
-    }
-
-    [data-component~="ui-button"][data-ui-button-state~="variant=solid"] {
-      border-color: var(--ui-action-primary-surface, var(--ui-accent-solid));
-      background: var(--ui-action-primary-surface, var(--ui-accent-solid));
-      color: var(--ui-action-primary-text, var(--ui-text-on-accent));
-      box-shadow: var(--ui-button-solid-shadow, inset 0 1px rgb(255 255 255 / 0.16), var(--ui-shadow-xs));
-    }
-
-    [data-component~="ui-button"][data-ui-button-state~="variant=solid"]:hover:enabled {
-      background: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
-      border-color: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
-      box-shadow: var(--ui-shadow-sm);
-      transform: translateY(-1px);
-    }
-
-    [data-component~="ui-button"][data-ui-button-state~="variant=solid"]:active:enabled {
-      background: var(--ui-action-primary-surface-active, var(--ui-accent-active));
-      border-color: var(--ui-action-primary-surface-active, var(--ui-accent-active));
-      box-shadow: none;
-      transform: translateY(0);
-    }
-
-    [data-component~="ui-button"][data-ui-button-state~="variant=danger"] {
-      border-color: var(--ui-danger-solid);
-      background: var(--ui-danger-solid);
-      color: var(--ui-text-on-accent);
-      box-shadow: var(--ui-button-danger-shadow, inset 0 1px rgb(255 255 255 / 0.14), var(--ui-shadow-xs));
-    }
-
-    [data-component~="ui-button"][data-ui-button-state~="variant=danger"]:hover:enabled {
-      background: var(--ui-danger-hover);
-      border-color: var(--ui-danger-hover);
-      box-shadow: var(--ui-shadow-sm);
-      transform: translateY(-1px);
-    }
-
-    [data-component~="ui-button"][data-ui-button-state~="variant=danger"]:active:enabled {
-      box-shadow: none;
-      transform: translateY(0);
-    }
-
-    [data-component~="ui-button"][data-ui-button-state~="variant=ghost"] {
-      border-color: transparent;
-      background: transparent;
-      box-shadow: none;
-      color: var(--ui-button-ghost-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
-    }
-
-    /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
-    [data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:hover:enabled {
-      background: var(--ui-button-ghost-hover, color-mix(in srgb, currentColor 8%, transparent));
-      border-color: transparent;
-    }
-
-    [data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:active:enabled {
-      background: var(--ui-button-ghost-active, color-mix(in srgb, currentColor 14%, transparent));
-      border-color: transparent;
-    }
-
-    /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
-    [data-component~="ui-button"]:focus-visible {
-      outline: none;
-      box-shadow:
-        var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs))),
-        var(--ui-focus-halo);
-    }
-
-    [data-component~="ui-button"][data-ui-button-state~="variant=solid"]:focus-visible {
-      box-shadow:
-        var(--ui-button-solid-shadow, inset 0 1px rgb(255 255 255 / 0.16), var(--ui-shadow-xs)),
-        var(--ui-focus-halo);
-    }
-
-    /* Disabled colours fall back to each variant's own; ghost and link take only the text colour. */
-    [data-component~="ui-button"]:disabled {
-      opacity: var(--ui-button-disabled-opacity, 0.6);
-      cursor: not-allowed;
-      border-color: var(--ui-button-disabled-border, var(--ui-button-border, var(--ui-border-strong)));
-      background-color: var(--ui-button-disabled-surface, var(--ui-button-surface, var(--ui-surface-elevated)));
-      color: var(--ui-button-disabled-text, var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary))));
-    }
-
-    [data-component~="ui-button"][data-ui-button-state~="variant=solid"]:disabled {
-      border-color: var(--ui-button-disabled-border, var(--ui-action-primary-surface, var(--ui-accent-solid)));
-      background-color: var(--ui-button-disabled-surface, var(--ui-action-primary-surface, var(--ui-accent-solid)));
-      color: var(--ui-button-disabled-text, var(--ui-action-primary-text, var(--ui-text-on-accent)));
-    }
-
-    [data-component~="ui-button"][data-ui-button-state~="variant=danger"]:disabled {
-      border-color: var(--ui-button-disabled-border, var(--ui-danger-solid));
-      background-color: var(--ui-button-disabled-surface, var(--ui-danger-solid));
-      color: var(--ui-button-disabled-text, var(--ui-text-on-accent));
-    }
-
-    [data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:disabled {
-      border-color: transparent;
-      background-color: transparent;
-      color: var(--ui-button-disabled-text, var(--ui-button-ghost-text, var(--ui-action-secondary-text, var(--ui-text-primary))));
-    }
-
-    @media (pointer: coarse) {
-      [data-component~="ui-button"] {
-        min-block-size: var(--ui-control-min-block-size, 2.75rem);
-      }
-    }
-
-    /* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
-       WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
-    [data-component~="ui-button"][data-ui-button-state~="variant=link"] {
-      display: inline;
-      min-block-size: 0;
-      padding: 0;
-      border: 0;
-      border-radius: var(--ui-radius-sm, 4px);
-      background: none;
-      box-shadow: none;
-      font: inherit;
-      color: var(--ui-button-link-color, var(--ui-text-secondary));
-      text-decoration-line: underline;
-      text-decoration-thickness: 1px;
-      text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
-      text-underline-offset: 0.2em;
-      transition: color var(--ui-motion-fast) var(--ui-motion-ease), text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
-    }
-
-    [data-component~="ui-button"][data-ui-button-state~="variant=link"]:hover:enabled {
-      color: var(--ui-button-link-hover-color, var(--ui-text-primary));
-      text-decoration-color: currentColor;
-      background: none;
-      transform: none;
-    }
-
-    [data-component~="ui-button"][data-ui-button-state~="variant=link"]:active:enabled {
-      background: none;
-      transform: none;
-    }
-
-    [data-component~="ui-button"][data-ui-button-state~="variant=link"]:disabled {
-      background: none;
-      color: var(--ui-button-disabled-text, var(--ui-button-link-color, var(--ui-text-secondary)));
-    }
-
-    [data-component~="ui-button"][data-ui-button-state~="variant=link"]:focus-visible {
-      box-shadow: none;
-      /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
-      outline: 2px solid var(--ui-focus-ring, currentColor);
-      outline-offset: 2px;
-    }
-
-    /* A component that sets its display still honours the hidden attribute on its root. */
-    [data-component~="ui-button"][hidden] {
-      display: none;
-    }
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  color: var(--ui-action-secondary-text, var(--ui-text-primary));
+}
+
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"] {
+  color: var(--ui-action-primary-text, var(--ui-text-on-accent));
+}
+
+[data-component~="ui-button"][data-ui-button-state~="align=start"] {
+  justify-content: flex-start;
+  text-align: start;
+}
+
+[data-component~="ui-button"][data-ui-button-state~="stretch"] {
+  display: flex;
+  inline-size: 100%;
+}
+
+[data-component~="ui-button"] {
+  appearance: none;
+  min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
+  border: 1px solid var(--ui-button-border, var(--ui-border-strong));
+  border-radius: var(--ui-button-radius, var(--ui-radius-md));
+  background: var(--ui-button-surface, var(--ui-surface-elevated));
+  color: var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
+  font: inherit;
+  font-weight: var(--ui-font-medium);
+  line-height: var(--ui-line-height-tight);
+  padding: var(--ui-space-2) var(--ui-space-3);
+  background-image: var(--ui-raised-highlight);
+  box-shadow: var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs)));
+  cursor: pointer;
+  transition:
+    background-color var(--ui-motion-fast) var(--ui-motion-ease),
+    border-color var(--ui-motion-fast) var(--ui-motion-ease),
+    color var(--ui-motion-fast) var(--ui-motion-ease),
+    box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+    transform var(--ui-motion-fast) var(--ui-motion-ease);
+  margin: 0;
+}
+
+@supports (text-box-trim: trim-both) {
+  [data-component~="ui-button"] {
+    text-box-trim: trim-both;
+    text-box-edge: cap alphabetic;
+  }
+}
+
+[data-component~="ui-button"][data-ui-button-state~="size=sm"] {
+  min-block-size: var(--ui-control-size-sm);
+  padding: var(--ui-space-1) var(--ui-space-2);
+  font-size: 0.875rem;
+}
+
+[data-component~="ui-button"][data-ui-button-state~="size=lg"] {
+  min-block-size: var(--ui-control-size-lg);
+  padding: var(--ui-space-3) var(--ui-space-4);
+  font-size: 1rem;
+}
+
+[data-component~="ui-button"]:hover:enabled {
+  background: var(--ui-action-secondary-surface-hover, var(--ui-surface-muted));
+  border-color: var(--ui-control-border-hover, var(--ui-border-strong));
+}
+
+[data-component~="ui-button"]:active:enabled {
+  background: var(--ui-surface-subtle);
+}
+
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"] {
+  border-color: var(--ui-action-primary-surface, var(--ui-accent-solid));
+  background: var(--ui-action-primary-surface, var(--ui-accent-solid));
+  color: var(--ui-action-primary-text, var(--ui-text-on-accent));
+  box-shadow: var(
+    --ui-button-solid-shadow,
+    inset 0 1px rgb(255 255 255 / 0.16),
+    var(--ui-shadow-xs)
+  );
+}
+
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"]:hover:enabled {
+  background: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
+  border-color: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
+  box-shadow: var(--ui-shadow-sm);
+  transform: translateY(-1px);
+}
+
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"]:active:enabled {
+  background: var(--ui-action-primary-surface-active, var(--ui-accent-active));
+  border-color: var(--ui-action-primary-surface-active, var(--ui-accent-active));
+  box-shadow: none;
+  transform: translateY(0);
+}
+
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"] {
+  border-color: var(--ui-danger-solid);
+  background: var(--ui-danger-solid);
+  color: var(--ui-text-on-accent);
+  box-shadow: var(
+    --ui-button-danger-shadow,
+    inset 0 1px rgb(255 255 255 / 0.14),
+    var(--ui-shadow-xs)
+  );
+}
+
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"]:hover:enabled {
+  background: var(--ui-danger-hover);
+  border-color: var(--ui-danger-hover);
+  box-shadow: var(--ui-shadow-sm);
+  transform: translateY(-1px);
+}
+
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"]:active:enabled {
+  box-shadow: none;
+  transform: translateY(0);
+}
+
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"] {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+  color: var(--ui-button-ghost-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
+}
+
+/* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:hover:enabled {
+  background: var(
+    --ui-button-ghost-hover-surface,
+    color-mix(in srgb, currentColor 8%, transparent)
+  );
+  border-color: transparent;
+}
+
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:active:enabled {
+  background: var(
+    --ui-button-ghost-active-surface,
+    color-mix(in srgb, currentColor 14%, transparent)
+  );
+  border-color: transparent;
+}
+
+/* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
+[data-component~="ui-button"]:focus-visible {
+  outline: none;
+  box-shadow:
+    var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs))),
+    var(--ui-focus-halo);
+}
+
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"]:focus-visible {
+  box-shadow:
+    var(--ui-button-solid-shadow, inset 0 1px rgb(255 255 255 / 0.16), var(--ui-shadow-xs)),
+    var(--ui-focus-halo);
+}
+
+/* Disabled colours fall back to each variant's own; ghost and link take only the text colour. */
+[data-component~="ui-button"]:disabled {
+  opacity: var(--ui-button-disabled-opacity, 0.6);
+  cursor: not-allowed;
+  border-color: var(--ui-button-disabled-border, var(--ui-button-border, var(--ui-border-strong)));
+  background-color: var(
+    --ui-button-disabled-surface,
+    var(--ui-button-surface, var(--ui-surface-elevated))
+  );
+  color: var(
+    --ui-button-disabled-text,
+    var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary)))
+  );
+}
+
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"]:disabled {
+  border-color: var(
+    --ui-button-disabled-border,
+    var(--ui-action-primary-surface, var(--ui-accent-solid))
+  );
+  background-color: var(
+    --ui-button-disabled-surface,
+    var(--ui-action-primary-surface, var(--ui-accent-solid))
+  );
+  color: var(--ui-button-disabled-text, var(--ui-action-primary-text, var(--ui-text-on-accent)));
+}
+
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"]:disabled {
+  border-color: var(--ui-button-disabled-border, var(--ui-danger-solid));
+  background-color: var(--ui-button-disabled-surface, var(--ui-danger-solid));
+  color: var(--ui-button-disabled-text, var(--ui-text-on-accent));
+}
+
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:disabled {
+  border-color: transparent;
+  background-color: transparent;
+  color: var(
+    --ui-button-disabled-text,
+    var(--ui-button-ghost-text, var(--ui-action-secondary-text, var(--ui-text-primary)))
+  );
+}
+
+@media (pointer: coarse) {
+  [data-component~="ui-button"] {
+    min-block-size: var(--ui-control-min-block-size);
+  }
+}
+
+/* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
+   WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
+[data-component~="ui-button"][data-ui-button-state~="variant=link"] {
+  display: inline;
+  min-block-size: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--ui-radius-sm);
+  background: none;
+  box-shadow: none;
+  font: inherit;
+  color: var(--ui-button-link-text, var(--ui-text-secondary));
+  text-decoration-line: underline;
+  text-decoration-thickness: 1px;
+  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
+  text-underline-offset: 0.2em;
+  transition:
+    color var(--ui-motion-fast) var(--ui-motion-ease),
+    text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
+}
+
+[data-component~="ui-button"][data-ui-button-state~="variant=link"]:hover:enabled {
+  color: var(--ui-button-link-hover-text, var(--ui-text-primary));
+  text-decoration-color: currentColor;
+  background: none;
+  transform: none;
+}
+
+[data-component~="ui-button"][data-ui-button-state~="variant=link"]:active:enabled {
+  background: none;
+  transform: none;
+}
+
+[data-component~="ui-button"][data-ui-button-state~="variant=link"]:disabled {
+  background: none;
+  color: var(--ui-button-disabled-text, var(--ui-button-link-text, var(--ui-text-secondary)));
+}
+
+[data-component~="ui-button"][data-ui-button-state~="variant=link"]:focus-visible {
+  box-shadow: none;
+  /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
+  outline: 2px solid var(--ui-focus-ring);
+  outline-offset: 2px;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-button"][hidden] {
+  display: none;
+}
 </style>

package/vue/UiCallout.d.ts

@@ -1,12 +1,12 @@
 type __VLS_Props = {
-    tone?: "info" | "note" | "warning" | "success" | "danger" | null;
+    tone?: 'info' | 'note' | 'warning' | 'success' | 'danger';
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    tone: "info" | "note" | "warning" | "success" | "danger" | null;
+    tone: "info" | "note" | "warning" | "success" | "danger";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;