@threadlabs/looma 0.14.7 → 0.15.0

package/vue/UiTabs.vue

@@ -8,6 +8,7 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
+    activation?: 'auto' | 'manual'
     density?: 'comfortable' | 'compact'
     label?: string
     orientation?: 'horizontal' | 'vertical'
@@ -15,6 +16,7 @@ const props = withDefaults(
     value?: string
   }>(),
   {
+    activation: 'auto',
     density: 'comfortable',
     label: 'Tabs',
     orientation: 'horizontal',
@@ -82,18 +84,18 @@ useComponentHost(controllerModule.default, {
     ref="root"
   >
     <div class="list" role="tablist" :aria-label="label" :aria-orientation="orientation" ref="list">
-      <button
-        v-for="tab in tabs"
-        :key="tab.id"
-        type="button"
-        role="tab"
-        :id="`${tab.id}-tab`"
-        :value="tab.id"
-        :aria-controls="tab.id"
-        :aria-selected="tab.id === internalValue"
-      >
-        {{ tab.label }}
-      </button>
+      <slot name="tab"><button
+          v-for="tab in tabs"
+          :key="tab.id"
+          type="button"
+          role="tab"
+          :id="`${tab.id}-tab`"
+          :value="tab.id"
+          :aria-controls="tab.id"
+          :aria-selected="tab.id === internalValue"
+        >
+          {{ tab.label }}
+        </button></slot>
     </div>
     <div class="panels" ref="panels"><slot /></div>
   </div>

package/vue/UiTextarea.d.ts

@@ -1,4 +1,5 @@
 type __VLS_Props = {
+    autosize?: boolean;
     disabled?: boolean;
     invalid?: boolean;
     readonly?: boolean;
@@ -19,6 +20,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     required: boolean;
     readonly: boolean;
     rows: number;
+    autosize: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/vue/UiTextarea.vue

@@ -8,6 +8,7 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
+    autosize?: boolean
     disabled?: boolean
     invalid?: boolean
     readonly?: boolean
@@ -18,6 +19,7 @@ const props = withDefaults(
     modelValue?: string | null
   }>(),
   {
+    autosize: false,
     disabled: false,
     invalid: false,
     readonly: false,
@@ -40,6 +42,7 @@ const root = ref<HTMLElement | null>(null)
 const hostState = computed(() =>
   [
     props.size && `size size=${props.size}`,
+    props.autosize && 'autosize',
   ].filter(Boolean).join(' ')
 )
 
@@ -61,6 +64,7 @@ useComponentHost(controllerModule.default, {
     :required="required"
     :aria-invalid="invalid"
     :rows="rows"
+    :style="{ '--_rows': rows }"
     v-model="model"
     :data-ui-textarea-state="hostState || undefined"
     ref="root"
@@ -73,6 +77,14 @@ useComponentHost(controllerModule.default, {
   syntax: "*";
   inherits: false;
 }
+@property --ui-textarea-invalid-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-textarea-invalid-focus-shadow {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-textarea-radius {
   syntax: "*";
   inherits: false;
@@ -89,11 +101,12 @@ useComponentHost(controllerModule.default, {
   min-inline-size: 0;
   min-block-size: calc(3rem * 2);
   margin: 0;
+  --_padding-block: var(--ui-space-2);
   padding: var(--ui-space-2) var(--ui-space-3);
   appearance: none;
   resize: vertical;
   border: 1px solid var(--ui-control-border, var(--ui-border-strong));
-  border-radius: var(--ui-textarea-radius, var(--ui-radius-md));
+  border-radius: var(--ui-textarea-radius, var(--ui-field-radius, var(--ui-radius-md)));
   background: var(--ui-control-surface, var(--ui-surface-elevated));
   color: var(--ui-text-primary);
   font: inherit;
@@ -133,13 +146,19 @@ useComponentHost(controllerModule.default, {
 /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
 [data-component~="ui-textarea"][aria-invalid="true"],
 [data-component~="ui-textarea"]:is(:user-invalid, [data-user-invalid]) {
-  border-color: var(--ui-danger-solid);
+  border-color: var(--ui-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)));
 }
 
 [data-component~="ui-textarea"]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
-  box-shadow:
+  box-shadow: var(
+    --ui-textarea-invalid-focus-shadow,
     var(--ui-control-inset),
-    0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
+    0 0 0 3px color-mix(
+      in srgb,
+      var(--ui-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
+      transparent
+    )
+  );
 }
 
 [data-component~="ui-textarea"]:disabled {
@@ -150,15 +169,24 @@ useComponentHost(controllerModule.default, {
 }
 
 [data-component~="ui-textarea"][data-ui-textarea-state~="size=sm"] {
+  --_padding-block: var(--ui-space-1);
   padding: var(--ui-space-1) var(--ui-space-2);
   font-size: var(--ui-font-size-sm);
 }
 
 [data-component~="ui-textarea"][data-ui-textarea-state~="size=lg"] {
+  --_padding-block: var(--ui-space-3);
   padding: var(--ui-space-3) var(--ui-space-4);
   font-size: var(--ui-font-size-md);
 }
 
+@supports (field-sizing: content) {
+  [data-component~="ui-textarea"][data-ui-textarea-state~="autosize"] {
+    field-sizing: content;
+    min-block-size: calc(var(--_rows) * 1lh + var(--_padding-block) + var(--_padding-block) + 2px);
+  }
+}
+
 /* Below 16px, iOS zooms the page into the focused field, so touch keeps body-size text. */
 @media (pointer: coarse) {
   [data-component~="ui-textarea"][data-ui-textarea-state~="size=sm"] {

package/vue/UiToast.d.ts

@@ -0,0 +1,34 @@
+type __VLS_Props = {
+    duration?: number;
+    tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    action?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    dismiss: (detail: {
+        readonly id: string;
+        readonly reason: "action" | "timeout";
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDismiss?: ((detail: {
+        readonly id: string;
+        readonly reason: "action" | "timeout";
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any) | undefined;
+}>, {
+    tone: "neutral" | "info" | "success" | "warning" | "danger";
+    duration: number;
+}, {}, {}, {}, 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/UiToast.js

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

package/vue/UiToast.vue

@@ -0,0 +1,173 @@
+<!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed, ref, useTemplateRef } from 'vue'
+import * as controllerModule from '../components/ui-toast/ui-toast.js'
+import { createDispatch, useComponentHost } from './host'
+import UiIcon from './UiIcon.vue'
+import UiIconButton from './UiIconButton.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    duration?: number
+    tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+  }>(),
+  {
+    duration: 0,
+    tone: 'neutral',
+  },
+)
+const emit = defineEmits<{
+  dismiss: [
+    detail: {
+      readonly id: string
+      readonly reason: 'action' | 'timeout'
+      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+    },
+  ]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const actionElement = useTemplateRef<HTMLElement>('action')
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.tone && `tone tone=${props.tone}`,
+  ].filter(Boolean).join(' ')
+)
+
+const isDismissDetail = (detail: unknown): boolean =>
+  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && typeof (detail as Record<string, unknown>)['id'] === 'string'
+  && ((detail as Record<string, unknown>)['reason'] === 'action'
+    || (detail as Record<string, unknown>)['reason'] === 'timeout')
+  && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+    || (detail as Record<string, unknown>)['trigger'] === 'pointer'
+    || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
+  && Object.keys(detail as object).every((key) => ['id', 'reason', 'trigger'].includes(key))
+const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
+  checks: {
+    dismiss: isDismissDetail,
+  },
+})
+
+useComponentHost(controllerModule.default, {
+  root,
+  dispatch,
+  props,
+  refs: { action: actionElement },
+})
+
+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>
+  <div
+    data-component="ui-toast"
+    v-bind="$attrs"
+    :role="attribute(
+      ({ neutral: 'status', info: 'status', success: 'status', warning: 'status', danger: 'alert' })[
+        tone
+      ],
+    )"
+    :data-ui-toast-state="hostState || undefined"
+    ref="root"
+  >
+    <div class="message"><slot /></div>
+    <div class="action" ref="action"><slot name="action" /></div>
+    <UiIconButton
+      class="dismiss"
+      size="sm"
+      variant="ghost"
+      label="Dismiss notification"
+      :round="true"
+    ><UiIcon name="x" /></UiIconButton>
+  </div>
+</template>
+
+<style scoped>
+/* Component hooks stay on this toast; group overlay values may inherit from the region. */
+@property --ui-toast-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-toast-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-toast-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-toast-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-toast-accent {
+  syntax: "*";
+  inherits: false;
+}
+
+[data-component~="ui-toast"] {
+  --_ui-toast-accent: var(--ui-border-strong);
+
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  box-sizing: border-box;
+  inline-size: 100%;
+  margin: 0;
+  padding: var(--ui-space-3) var(--ui-space-4);
+  border: 1px solid var(--ui-toast-border, var(--ui-overlay-border, var(--ui-border-default)));
+  border-inline-start: 3px solid var(--ui-toast-accent, var(--_ui-toast-accent));
+  border-radius: var(--ui-toast-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
+  background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+  color: var(--ui-text-primary);
+  box-shadow: var(
+    --ui-toast-shadow,
+    var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
+  );
+  pointer-events: auto;
+}
+
+[data-component~="ui-toast"][data-ui-toast-state~="tone=info"] {
+  --_ui-toast-accent: var(--ui-info-solid);
+}
+[data-component~="ui-toast"][data-ui-toast-state~="tone=success"] {
+  --_ui-toast-accent: var(--ui-success-solid);
+}
+[data-component~="ui-toast"][data-ui-toast-state~="tone=warning"] {
+  --_ui-toast-accent: var(--ui-warning-solid);
+}
+[data-component~="ui-toast"][data-ui-toast-state~="tone=danger"] {
+  --_ui-toast-accent: var(--ui-danger-solid);
+}
+
+.message {
+  min-inline-size: 0;
+  flex: 1;
+}
+.action:not(:has(> *)) {
+  display: none;
+}
+.dismiss {
+  margin-inline-end: calc(var(--ui-space-2) * -1);
+}
+
+[data-component~="ui-toast"][hidden] {
+  display: none;
+}
+</style>

package/vue/UiToastRegion.d.ts

@@ -1,8 +1,6 @@
 type __VLS_Props = {
-    auto?: boolean;
     duration?: number;
-    message?: string;
-    open?: boolean;
+    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -11,33 +9,19 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     show: (...args: unknown[]) => Promise<unknown>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (detail: {
-        readonly open: boolean;
-        readonly reason: "action" | "timeout" | "programmatic" | "light-dismiss" | "escape";
-        readonly trigger: "keyboard" | "pointer" | "programmatic";
-    }) => any;
-    "update:open": (value: boolean) => any;
     dismiss: (detail: {
         readonly id: string;
         readonly reason: "action" | "timeout";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClose?: ((detail: {
-        readonly open: boolean;
-        readonly reason: "action" | "timeout" | "programmatic" | "light-dismiss" | "escape";
-        readonly trigger: "keyboard" | "pointer" | "programmatic";
-    }) => any) | undefined;
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onDismiss?: ((detail: {
         readonly id: string;
         readonly reason: "action" | "timeout";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any) | undefined;
 }>, {
-    open: boolean;
-    message: string;
-    auto: boolean;
+    placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end";
     duration: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;