@threadlabs/looma 0.10.11 → 0.11.0

package/vue/UiListItem.vue

@@ -0,0 +1,171 @@
+<!-- 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<{
+    current?: boolean
+    variant?: 'row' | 'card'
+  }>(),
+  {
+    current: false,
+    variant: 'row',
+  },
+)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.variant && `variant variant=${props.variant}`,
+    props.current && 'current',
+  ].filter(Boolean).join(' ')
+)
+</script>
+
+<template>
+  <li
+    data-component="ui-list-item"
+    v-bind="$attrs"
+    :aria-current="current"
+    :data-ui-list-item-state="hostState || undefined"
+  >
+    <span class="leading"><slot name="leading" /></span>
+    <span class="content"><span class="title"><slot /></span>
+      <span class="description"><slot name="description" /></span></span>
+    <span class="trailing"><slot name="trailing" /></span>
+  </li>
+</template>
+
+<style scoped>
+/* One entry in a list: something to recognise (leading, usually an icon), its name (the default
+       slot), one line about it (description), and what it offers (trailing, such as a button or a
+       badge). The title and description are one line each and end in an ellipsis, so every item in a
+       list has the same height.
+
+       A link in the title is the whole item: its hit area stretches over the item, so the icon and the
+       padding follow it too, and the item takes the link's focus ring. The link stays a real link, so
+       a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
+       stay their own. */
+[data-component~="ui-list-item"] {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--ui-list-item-gap, var(--ui-space-3));
+  min-inline-size: 0;
+  min-block-size: var(--ui-control-size, 2.5rem);
+  padding-block: var(--ui-list-item-padding-block, var(--ui-space-2));
+  padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-3));
+  border-radius: var(--ui-radius-md);
+  color: var(--ui-text-primary);
+  transition:
+    background-color var(--ui-motion-fast) var(--ui-motion-ease),
+    border-color var(--ui-motion-fast) var(--ui-motion-ease);
+}
+
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"] {
+  padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
+  padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
+  border: 1px solid var(--ui-border-default);
+  border-radius: var(--ui-radius-lg);
+  background: var(--ui-surface-raised);
+}
+
+[data-component~="ui-list-item"]:has(.title a[href]:hover) {
+  background: var(--ui-surface-hover);
+}
+
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"]:has(.title
+  a[href]:hover) {
+  border-color: var(--ui-border-strong);
+}
+
+[data-component~="ui-list-item"][data-ui-list-item-state~="current"] {
+  background: var(--ui-surface-hover);
+}
+
+[data-component~="ui-list-item"]:has(.title a[href]:focus-visible) {
+  box-shadow: 0 0 0 2px var(--ui-focus-ring);
+}
+
+.leading,
+.trailing {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--ui-space-2);
+}
+
+.leading {
+  color: var(--ui-text-muted);
+  font-size: var(--ui-list-item-icon-size, var(--ui-font-size-lg));
+}
+
+/* Trailing controls take their own clicks, above the title link's stretched hit area. */
+.trailing {
+  position: relative;
+  z-index: 1;
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-sm);
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--ui-space-0-5, 2px);
+  min-inline-size: 0;
+}
+
+.title,
+.description {
+  display: block;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.title {
+  font-size: var(--ui-font-size-md);
+  font-weight: var(--ui-font-medium);
+  line-height: var(--ui-line-height-tight);
+}
+
+.description {
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-sm);
+  line-height: var(--ui-line-height-tight);
+}
+
+.title > :slotted(a) {
+  color: inherit;
+  text-decoration: none;
+}
+
+.title > :slotted(a:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.title > :slotted(a[href])::after {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  content: "";
+}
+
+/* An unused region takes no space. */
+.leading:empty,
+.description:empty,
+.trailing:empty {
+  display: none;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-list-item"][hidden] {
+  display: none;
+}
+</style>

package/vue/UiPageHeader.d.ts

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    align?: 'start' | 'center';
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_1) => any;
+} & {
+    eyebrow?: (props: typeof __VLS_3) => any;
+} & {
+    default?: (props: typeof __VLS_5) => any;
+} & {
+    description?: (props: typeof __VLS_7) => any;
+} & {
+    actions?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    align: "start" | "center";
+}, {}, {}, {}, 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/UiPageHeader.js

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

package/vue/UiPageHeader.vue

@@ -0,0 +1,118 @@
+<!-- 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<{
+    align?: 'start' | 'center'
+  }>(),
+  {
+    align: 'start',
+  },
+)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.align && `align align=${props.align}`,
+  ].filter(Boolean).join(' ')
+)
+</script>
+
+<template>
+  <header
+    data-component="ui-page-header"
+    v-bind="$attrs"
+    :data-ui-page-header-state="hostState || undefined"
+  >
+    <span class="leading"><slot name="leading" /></span>
+    <span class="copy"><span class="eyebrow"><slot name="eyebrow" /></span>
+      <h1 class="title"><slot /></h1>
+      <span class="description"><slot name="description" /></span></span>
+    <span class="actions"><slot name="actions" /></span>
+  </header>
+</template>
+
+<style scoped>
+/* The top of a view: its title (the page's one h1), with an optional icon or mark before it, a
+       short eyebrow above it, a line or two of description under it, and the view's own actions at
+       the end. Every view titles itself the same way, at the same size. */
+[data-component~="ui-page-header"] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ui-space-3) var(--ui-space-4);
+  min-inline-size: 0;
+}
+
+.leading {
+  display: inline-flex;
+  flex: none;
+  align-self: center;
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-2xl);
+}
+
+.copy {
+  display: flex;
+  flex: 1 1 16rem;
+  flex-direction: column;
+  gap: var(--ui-space-1);
+  min-inline-size: 0;
+}
+
+.eyebrow {
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-xs);
+  font-weight: var(--ui-font-semibold);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.title {
+  margin: 0;
+  color: var(--ui-text-primary);
+  font-size: var(--ui-font-size-2xl);
+  font-weight: var(--ui-font-bold, 700);
+  line-height: var(--ui-line-height-tight);
+  overflow-wrap: anywhere;
+}
+
+.description {
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-font-size-md);
+  line-height: var(--ui-line-height);
+}
+
+.actions {
+  display: inline-flex;
+  flex: none;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ui-space-2);
+}
+
+[data-component~="ui-page-header"][data-ui-page-header-state~="align=center"] {
+  flex-direction: column;
+  text-align: center;
+}
+
+[data-component~="ui-page-header"][data-ui-page-header-state~="align=center"] .copy {
+  align-items: center;
+  flex-basis: auto;
+}
+
+.leading:empty,
+.eyebrow:empty,
+.description:empty,
+.actions:empty {
+  display: none;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-page-header"][hidden] {
+  display: none;
+}
+</style>

package/vue/UiSection.d.ts

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    heading?: string;
+    tone?: 'neutral' | 'danger';
+    variant?: 'plain' | 'card' | 'divided';
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    description?: (props: typeof __VLS_1) => any;
+} & {
+    actions?: (props: typeof __VLS_3) => any;
+} & {
+    default?: (props: typeof __VLS_5) => 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: "plain" | "card" | "divided";
+    heading: 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/UiSection.js

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

package/vue/UiSection.vue

@@ -0,0 +1,128 @@
+<!-- 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<{
+    heading?: string
+    tone?: 'neutral' | 'danger'
+    variant?: 'plain' | 'card' | 'divided'
+  }>(),
+  {
+    heading: '',
+    tone: 'neutral',
+    variant: 'plain',
+  },
+)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.variant && `variant variant=${props.variant}`,
+    props.tone && `tone tone=${props.tone}`,
+  ].filter(Boolean).join(' ')
+)
+</script>
+
+<template>
+  <section
+    data-component="ui-section"
+    v-bind="$attrs"
+    :data-ui-section-state="hostState || undefined"
+  >
+    <span class="head"><span class="copy"><h2 class="heading" :hidden="!heading">{{ heading }}</h2>
+        <span class="description"><slot name="description" /></span></span>
+      <span class="actions"><slot name="actions" /></span></span>
+    <span class="body"><slot /></span>
+  </section>
+</template>
+
+<style scoped>
+/* A part of a view: a heading, an optional line under it, actions for the whole section at its
+       end, and the content. Sections space themselves out through the Stack around them. */
+[data-component~="ui-section"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-4);
+  min-inline-size: 0;
+}
+
+[data-component~="ui-section"][data-ui-section-state~="variant=card"] {
+  padding: var(--ui-space-5);
+  border: 1px solid var(--ui-border-default);
+  border-radius: var(--ui-radius-lg);
+  background: var(--ui-surface-raised);
+}
+
+[data-component~="ui-section"][data-ui-section-state~="variant=divided"] {
+  padding-block-start: var(--ui-space-6);
+  border-block-start: 1px solid var(--ui-border-default);
+}
+
+[data-component~="ui-section"][data-ui-section-state~="variant=card"][data-ui-section-state~="tone=danger"] {
+  border-color: var(--ui-danger);
+}
+
+.head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--ui-space-2) var(--ui-space-4);
+}
+
+.copy {
+  display: flex;
+  flex: 1 1 16rem;
+  flex-direction: column;
+  gap: var(--ui-space-1);
+  min-inline-size: 0;
+}
+
+.heading {
+  margin: 0;
+  color: var(--ui-text-primary);
+  font-size: var(--ui-font-size-lg);
+  font-weight: var(--ui-font-semibold);
+  line-height: var(--ui-line-height-tight);
+}
+
+[data-component~="ui-section"][data-ui-section-state~="tone=danger"] .heading {
+  color: var(--ui-danger);
+}
+
+.description {
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-font-size-sm);
+  line-height: var(--ui-line-height);
+}
+
+.actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--ui-space-2);
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-4);
+  min-inline-size: 0;
+}
+
+.description:empty,
+.actions:empty {
+  display: none;
+}
+
+.head:has(.heading[hidden]):has(.description:empty):has(.actions:empty) {
+  display: none;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-section"][hidden] {
+  display: none;
+}
+</style>

package/vue/UiSpinner.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    label?: string;
+    size?: 'sm' | 'md';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+    size: "sm" | "md";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/vue/UiSpinner.js

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

package/vue/UiSpinner.vue

@@ -0,0 +1,87 @@
+<!-- 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<{
+    label?: string
+    size?: 'sm' | 'md'
+  }>(),
+  {
+    label: '',
+    size: 'md',
+  },
+)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.size && `size size=${props.size}`,
+  ].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>
+  <span
+    data-component="ui-spinner"
+    v-bind="$attrs"
+    :role="attribute(({ true: 'status', false: null })[`${label !== ''}`])"
+    :aria-label="typeof (({ true: label, false: null })[`${label !== ''}`]) === 'boolean'
+    ? String(({ true: label, false: null })[`${label !== ''}`])
+    : attribute(({ true: label, false: null })[`${label !== ''}`])"
+    :aria-hidden="typeof (({ true: null, false: 'true' })[`${label !== ''}`]) === 'boolean'
+    ? String(({ true: null, false: 'true' })[`${label !== ''}`])
+    : attribute(({ true: null, false: 'true' })[`${label !== ''}`])"
+    :data-ui-spinner-state="hostState || undefined"
+  ><UiIcon name="loader" /></span>
+</template>
+
+<style scoped>
+/* Something is on its way. It turns in the current text colour; with reduced motion it holds still,
+       and the label (or the text beside it) still says what is happening. */
+[data-component~="ui-spinner"] {
+  display: inline-flex;
+  flex: none;
+  color: currentColor;
+  font-size: var(--ui-font-size-lg);
+  line-height: 1;
+  animation: ui-spinner-turn 0.8s linear infinite;
+}
+
+[data-component~="ui-spinner"][data-ui-spinner-state~="size=sm"] {
+  font-size: var(--ui-font-size-md);
+}
+
+@keyframes ui-spinner-turn {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-component~="ui-spinner"] {
+    animation: none;
+  }
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-spinner"][hidden] {
+  display: none;
+}
+</style>

package/vue/UiStatusMessage.d.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    heading?: string;
+    kind?: 'empty' | 'loading' | 'error';
+    layout?: 'inline' | 'panel' | 'fill';
+};
+declare var __VLS_6: {}, __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+} & {
+    action?: (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<{}>, {
+    kind: "empty" | "loading" | "error";
+    layout: "inline" | "panel" | "fill";
+    heading: 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/UiStatusMessage.js

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