@threadlabs/looma 0.10.11 → 0.11.0

package/vue/UiBreadcrumbItem.vue

@@ -0,0 +1,101 @@
+<!-- Generated by HTML Next 1.0.0-alpha.5 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed } from 'vue'
+import UiIcon from './UiIcon.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    current?: boolean
+  }>(),
+  {
+    current: false,
+  },
+)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.current && 'current',
+  ].filter(Boolean).join(' ')
+)
+
+function text(value: unknown): string {
+  if (Array.isArray(value)) return value.map(text).join(' ')
+  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
+}
+
+function attribute(value: unknown): any {
+  if (
+    value === null || value === undefined || value === false
+    || (typeof value === 'object' && !Array.isArray(value))
+  ) return undefined
+  return value === true ? '' : text(value)
+}
+</script>
+
+<template>
+  <li
+    data-component="ui-breadcrumb-item"
+    v-bind="$attrs"
+    :aria-current="typeof (({ true: 'page', false: null })[`${current}`]) === 'boolean'
+    ? String(({ true: 'page', false: null })[`${current}`])
+    : attribute(({ true: 'page', false: null })[`${current}`])"
+    :data-ui-breadcrumb-item-state="hostState || undefined"
+  >
+    <span class="separator" aria-hidden="true"><UiIcon name="chevron-right" /></span>
+    <span class="content"><slot /></span>
+  </li>
+</template>
+
+<style scoped>
+/* One step in a ui-breadcrumbs trail: a link up to that place, or the current view. A chevron leads
+       every step but the first. An icon slotted before the name sits with it. */
+[data-component~="ui-breadcrumb-item"] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  min-inline-size: 0;
+}
+
+.separator {
+  display: inline-flex;
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-xs);
+}
+
+[data-component~="ui-breadcrumb-item"]:first-child .separator {
+  display: none;
+}
+
+.content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-1);
+  min-inline-size: 0;
+}
+
+.content > :slotted(a) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-1);
+  color: var(--ui-text-secondary);
+  text-decoration: none;
+}
+
+.content > :slotted(a:hover) {
+  color: var(--ui-text-primary);
+  text-decoration: underline;
+}
+
+[data-component~="ui-breadcrumb-item"][data-ui-breadcrumb-item-state~="current"] .content {
+  color: var(--ui-text-primary);
+  font-weight: var(--ui-font-medium);
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-breadcrumb-item"][hidden] {
+  display: none;
+}
+</style>

package/vue/UiBreadcrumbs.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    label?: string;
+};
+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<{}>, {
+    label: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/UiBreadcrumbs.js

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

package/vue/UiBreadcrumbs.vue

@@ -0,0 +1,45 @@
+<!-- Generated by HTML Next 1.0.0-alpha.5 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+withDefaults(
+  defineProps<{
+    label?: string
+  }>(),
+  {
+    label: 'Breadcrumb',
+  },
+)
+</script>
+
+<template>
+  <nav data-component="ui-breadcrumbs" v-bind="$attrs" :aria-label="label">
+    <ol role="list"><slot /></ol>
+  </nav>
+</template>
+
+<style scoped>
+/* Where a view sits: a trail of ui-breadcrumb-item, from the top down to the current view. It wraps
+       rather than scrolls, so every step stays reachable. */
+[data-component~="ui-breadcrumbs"] {
+  display: block;
+  min-inline-size: 0;
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-sm);
+}
+
+ol {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ui-space-1) var(--ui-space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-breadcrumbs"][hidden] {
+  display: none;
+}
+</style>

package/vue/UiCard.d.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    as?: 'div' | 'section' | 'article' | 'aside';
+    padding?: 'sm' | 'md' | 'lg';
+    tone?: 'neutral' | 'danger';
+    variant?: 'outlined' | 'subtle' | 'elevated';
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => 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: "neutral" | "danger";
+    variant: "outlined" | "subtle" | "elevated";
+    as: "div" | "section" | "article" | "aside";
+    padding: "sm" | "md" | "lg";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/UiCard.js

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

package/vue/UiCard.vue

@@ -0,0 +1,82 @@
+<!-- Generated by HTML Next 1.0.0-alpha.5 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    as?: 'div' | 'section' | 'article' | 'aside'
+    padding?: 'sm' | 'md' | 'lg'
+    tone?: 'neutral' | 'danger'
+    variant?: 'outlined' | 'subtle' | 'elevated'
+  }>(),
+  {
+    as: 'div',
+    padding: 'md',
+    tone: 'neutral',
+    variant: 'outlined',
+  },
+)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.padding && `padding padding=${props.padding}`,
+    props.variant && `variant variant=${props.variant}`,
+    props.tone && `tone tone=${props.tone}`,
+  ].filter(Boolean).join(' ')
+)
+</script>
+
+<template>
+  <component
+    :is="as" data-component="ui-card" v-bind="$attrs" :data-ui-card-state="hostState || undefined">
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+/* A surface that groups content. Its children stack with even space between them, so a card
+       needs no layout of its own. */
+[data-component~="ui-card"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-4);
+  box-sizing: border-box;
+  min-inline-size: 0;
+  padding: var(--ui-space-5);
+  border: 1px solid var(--ui-border-default);
+  border-radius: var(--ui-radius-lg);
+  background: var(--ui-surface-raised);
+  color: var(--ui-text-primary);
+}
+
+[data-component~="ui-card"][data-ui-card-state~="padding=sm"] {
+  gap: var(--ui-space-2);
+  padding: var(--ui-space-3);
+}
+
+[data-component~="ui-card"][data-ui-card-state~="padding=lg"] {
+  padding: var(--ui-space-6);
+}
+
+[data-component~="ui-card"][data-ui-card-state~="variant=subtle"] {
+  border-color: transparent;
+  background: var(--ui-surface-muted);
+}
+
+[data-component~="ui-card"][data-ui-card-state~="variant=elevated"] {
+  border-color: var(--ui-border-subtle);
+  box-shadow: var(--ui-shadow-lg);
+}
+
+[data-component~="ui-card"][data-ui-card-state~="tone=danger"] {
+  border-color: var(--ui-danger);
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-card"][hidden] {
+  display: none;
+}
+</style>

package/vue/UiCover.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    size?: 'screen' | 'fill';
+};
+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<{}>, {
+    size: "screen" | "fill";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/UiCover.js

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

package/vue/UiCover.vue

@@ -0,0 +1,57 @@
+<!-- Generated by HTML Next 1.0.0-alpha.5 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    size?: 'screen' | 'fill'
+  }>(),
+  {
+    size: 'screen',
+  },
+)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.size && `size size=${props.size}`,
+  ].filter(Boolean).join(' ')
+)
+</script>
+
+<template>
+  <div data-component="ui-cover" v-bind="$attrs" :data-ui-cover-state="hostState || undefined">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+/* A layout primitive that centres its content in the space, both ways, with room around it: the
+       frame for a view that is one card or one message. */
+[data-component~="ui-cover"] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ui-space-6);
+  box-sizing: border-box;
+  min-block-size: 100dvh;
+  padding: var(--ui-space-6) var(--ui-space-4);
+}
+
+[data-component~="ui-cover"][data-ui-cover-state~="size=fill"] {
+  flex: 1;
+  min-block-size: 100%;
+}
+
+[data-component~="ui-cover"] > :slotted(*) {
+  max-inline-size: 100%;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-cover"][hidden] {
+  display: none;
+}
+</style>

package/vue/UiDescriptionItem.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    term?: string;
+};
+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<{}>, {
+    term: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/UiDescriptionItem.js

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

package/vue/UiDescriptionItem.vue

@@ -0,0 +1,58 @@
+<!-- Generated by HTML Next 1.0.0-alpha.5 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+withDefaults(
+  defineProps<{
+    term?: string
+  }>(),
+  {
+    term: '',
+  },
+)
+</script>
+
+<template>
+  <div data-component="ui-description-item" v-bind="$attrs">
+    <dt>{{ term }}</dt>
+    <dd><slot /></dd>
+  </div>
+</template>
+
+<style scoped>
+/* One term and its value in a ui-description-list, laid out by the list's layout. */
+[data-component~="ui-description-item"] {
+  display: var(--_ui-description-display, grid);
+  grid-column: var(--_ui-description-column, 1 / -1);
+  grid-template-columns: subgrid;
+  flex-direction: column;
+  align-items: var(--_ui-description-align, baseline);
+  gap: var(--ui-space-1) var(--ui-space-6);
+  min-inline-size: 0;
+  padding: var(--_ui-description-padding, 0);
+  border-width: var(--_ui-description-border-width, 0);
+  border-style: solid;
+  border-color: var(--ui-border-default);
+  border-radius: var(--ui-radius-md);
+  font-size: var(--ui-font-size-sm);
+}
+
+dt {
+  color: var(--ui-text-muted);
+}
+
+dd {
+  margin: 0;
+  min-inline-size: 0;
+  color: var(--ui-text-primary);
+  font-weight: var(--ui-font-medium);
+  font-size: var(--_ui-description-value-size, inherit);
+  text-align: start;
+  overflow-wrap: anywhere;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-description-item"][hidden] {
+  display: none;
+}
+</style>

package/vue/UiDescriptionList.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    layout?: 'rows' | 'tiles';
+};
+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<{}>, {
+    layout: "rows" | "tiles";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/UiDescriptionList.js

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

package/vue/UiDescriptionList.vue

@@ -0,0 +1,62 @@
+<!-- Generated by HTML Next 1.0.0-alpha.5 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    layout?: 'rows' | 'tiles'
+  }>(),
+  {
+    layout: 'rows',
+  },
+)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.layout && `layout layout=${props.layout}`,
+  ].filter(Boolean).join(' ')
+)
+</script>
+
+<template>
+  <dl
+    data-component="ui-description-list"
+    v-bind="$attrs"
+    :data-ui-description-list-state="hostState || undefined"
+  >
+    <slot />
+  </dl>
+</template>
+
+<style scoped>
+/* Named values: a term and what it is, for each item (ui-description-item). */
+/* Rows line every term up in one column and every value in the next, through subgrid. */
+[data-component~="ui-description-list"] {
+  display: grid;
+  grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
+  gap: var(--ui-space-2) var(--ui-space-6);
+  min-inline-size: 0;
+  margin: 0;
+}
+
+/* Tiles pass their shape to the items through private properties, which cross into each item. */
+[data-component~="ui-description-list"][data-ui-description-list-state~="layout=tiles"] {
+  --_ui-description-display: flex;
+  --_ui-description-column: auto;
+  --_ui-description-align: flex-start;
+  --_ui-description-value-size: var(--ui-font-size-lg);
+  --_ui-description-padding: var(--ui-space-3);
+  --_ui-description-border-width: 1px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
+  gap: var(--ui-space-3);
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-description-list"][hidden] {
+  display: none;
+}
+</style>

package/vue/UiIconButton.d.ts

@@ -12,9 +12,9 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     variant: "ghost" | "outline" | "solid";
+    round: boolean;
     disabled: boolean;
     size: "sm" | "md" | "lg";
-    round: boolean;
     anticipatory: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiList.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    layout?: 'rows' | 'grid';
+};
+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<{}>, {
+    layout: "rows" | "grid";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/UiList.js

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

package/vue/UiList.vue

@@ -0,0 +1,60 @@
+<!-- Generated by HTML Next 1.0.0-alpha.5 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    layout?: 'rows' | 'grid'
+  }>(),
+  {
+    layout: 'rows',
+  },
+)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.layout && `layout layout=${props.layout}`,
+  ].filter(Boolean).join(' ')
+)
+</script>
+
+<template>
+  <ul
+    data-component="ui-list"
+    role="list"
+    v-bind="$attrs"
+    :data-ui-list-state="hostState || undefined"
+  >
+    <slot />
+  </ul>
+</template>
+
+<style scoped>
+/* A list of items (ui-list-item). It owns the spacing between them, so a view never sets it. The
+       explicit list role keeps the list announced as one: some browsers drop it from a list with no
+       markers. */
+[data-component~="ui-list"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-list-gap, var(--ui-space-1));
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+[data-component~="ui-list"][data-ui-list-state~="layout=grid"] {
+  display: grid;
+  grid-template-columns:
+    repeat(auto-fill, minmax(min(100%, var(--ui-list-min-item-width, 14rem)), 1fr));
+  gap: var(--ui-list-gap, var(--ui-space-3));
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-list"][hidden] {
+  display: none;
+}
+</style>

package/vue/UiListItem.d.ts

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    current?: boolean;
+    variant?: 'row' | 'card';
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    description?: (props: typeof __VLS_5) => any;
+} & {
+    trailing?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    variant: "row" | "card";
+    current: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/UiListItem.js

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