@threadlabs/looma 0.14.8 → 0.15.1

package/vue/UiToastRegion.vue

@@ -1,35 +1,24 @@
 <!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import * as controllerModule from '../components/ui-toast-region/ui-toast-region.js'
 import { createDispatch, useComponentHost } from './host'
+import UiIcon from './UiIcon.vue'
 import UiIconButton from './UiIconButton.vue'
 
 defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
-    auto?: boolean
     duration?: number
-    message?: string
-    open?: boolean
+    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'
   }>(),
   {
-    auto: false,
-    duration: 5000,
-    message: 'Notification',
-    open: false,
+    duration: 0,
+    placement: 'top',
   },
 )
 const emit = defineEmits<{
-  'update:open': [value: boolean]
-  close: [
-    detail: {
-      readonly open: boolean
-      readonly reason: 'action' | 'timeout' | 'programmatic' | 'light-dismiss' | 'escape'
-      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
-    },
-  ]
   dismiss: [
     detail: {
       readonly id: string
@@ -40,23 +29,23 @@ const emit = defineEmits<{
 }>()
 
 const root = ref<HTMLElement | null>(null)
-const internalOpen = ref(false)
-const toasts = ref<{ id: string; message: string; role: 'alert' | 'status'; closing: boolean }[]>(
-  [],
+const toasts = ref<
+  {
+    id: string
+    message: string
+    tone: 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+    role: 'alert' | 'status'
+    closing: boolean
+  }[]
+>([])
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.placement && `placement placement=${props.placement}`,
+  ].filter(Boolean).join(' ')
 )
 
-const isCloseDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
-  && typeof (detail as Record<string, unknown>)['open'] === 'boolean'
-  && ((detail as Record<string, unknown>)['reason'] === 'action'
-    || (detail as Record<string, unknown>)['reason'] === 'timeout'
-    || (detail as Record<string, unknown>)['reason'] === 'programmatic'
-    || (detail as Record<string, unknown>)['reason'] === 'light-dismiss'
-    || (detail as Record<string, unknown>)['reason'] === 'escape')
-  && ((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) => ['open', 'reason', 'trigger'].includes(key))
 const isDismissDetail = (detail: unknown): boolean =>
   detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && typeof (detail as Record<string, unknown>)['id'] === 'string'
@@ -68,17 +57,15 @@ const isDismissDetail = (detail: unknown): boolean =>
   && Object.keys(detail as object).every((key) => ['id', 'reason', 'trigger'].includes(key))
 const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
   checks: {
-    close: isCloseDetail,
     dismiss: isDismissDetail,
   },
-  modeled: ['open'],
 })
 
 const { host, ready } = useComponentHost(controllerModule.default, {
   root,
   dispatch,
   props,
-  state: { internalOpen, toasts },
+  state: { toasts },
 })
 
 defineExpose({
@@ -100,6 +87,7 @@ defineExpose({
     aria-live="polite"
     popover="manual"
     v-bind="$attrs"
+    :data-ui-toast-region-state="hostState || undefined"
     ref="root"
   >
     <slot />
@@ -109,6 +97,7 @@ defineExpose({
       class="toast"
       :id="toast.id"
       :role="toast.role"
+      :data-tone="toast.tone"
       :class="{ closing: toast.closing }"
     >
       <span class="message">{{ toast.message }}</span>
@@ -117,22 +106,29 @@ defineExpose({
           variant="ghost"
           :round="true"
           :label="`Dismiss ${toast.message}`"
-        ><svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            aria-hidden="true"
-          >
-            <path d="M18 6 6 18M6 6l12 12"></path>
-          </svg></UiIconButton></span>
+        ><UiIcon name="x" /></UiIconButton></span>
     </div>
   </div>
 </template>
 
 <style scoped>
 /* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-toast-region-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-toast-region-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-toast-region-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-toast-region-shadow {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-toast-region-enter-duration {
   syntax: "*";
   inherits: false;
@@ -144,6 +140,10 @@ defineExpose({
 
 [data-component~="ui-toast-region"] {
   /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-toast-region-surface: var(--ui-toast-region-surface);
+  --_ui-toast-region-border: var(--ui-toast-region-border);
+  --_ui-toast-region-radius: var(--ui-toast-region-radius);
+  --_ui-toast-region-shadow: var(--ui-toast-region-shadow);
   --_ui-toast-region-enter-duration: var(--ui-toast-region-enter-duration);
   --_ui-toast-region-exit-duration: var(--ui-toast-region-exit-duration);
 
@@ -173,6 +173,29 @@ defineExpose({
   display: none;
 }
 
+[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=top-start"],
+[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-start"] {
+  left: auto;
+  right: auto;
+  inset-inline-start: calc(var(--ui-space-4) + env(safe-area-inset-left));
+  transform: none;
+}
+
+[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=top-end"],
+[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-end"] {
+  left: auto;
+  right: auto;
+  inset-inline-end: calc(var(--ui-space-4) + env(safe-area-inset-right));
+  transform: none;
+}
+
+[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom"],
+[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-start"],
+[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-end"] {
+  top: auto;
+  bottom: calc(var(--ui-space-4) + env(safe-area-inset-bottom));
+}
+
 [data-component~="ui-toast-region"] > .toast,
 [data-component~="ui-toast-region"] > :slotted(*) {
   pointer-events: auto;
@@ -183,22 +206,52 @@ defineExpose({
   grid-template-columns: 1fr auto;
   gap: var(--ui-space-2);
   align-items: start;
-  border: 1px solid var(--ui-border-default);
-  border-radius: var(--ui-radius-lg);
+  border: 1px solid
+    var(--_ui-toast-region-border, var(--ui-overlay-border, var(--ui-border-default)));
+  border-radius: var(--_ui-toast-region-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
   padding: var(--ui-space-3) var(--ui-space-4);
-  background: var(--ui-surface-elevated);
+  background: var(
+    --_ui-toast-region-surface,
+    var(--ui-overlay-surface, var(--ui-surface-elevated))
+  );
   color: var(--ui-text-primary);
-  box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+  box-shadow: var(
+    --_ui-toast-region-shadow,
+    var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
+  );
   animation: ui-toast-enter var(--_ui-toast-region-enter-duration, 0.32s)
     var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
 }
 
+.toast[data-tone="info"] {
+  border-inline-start: 3px solid var(--ui-info-solid);
+}
+.toast[data-tone="success"] {
+  border-inline-start: 3px solid var(--ui-success-solid);
+}
+.toast[data-tone="warning"] {
+  border-inline-start: 3px solid var(--ui-warning-solid);
+}
+.toast[data-tone="danger"] {
+  border-inline-start: 3px solid var(--ui-danger-solid);
+}
+
 /* Leaving slides on down and fades; the controller removes the toast when this ends. */
 .toast.closing {
   animation: ui-toast-exit var(--_ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease) both;
   pointer-events: none;
 }
 
+:is([data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom"], [data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-start"], [data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-end"])
+  .toast {
+  animation-name: ui-toast-enter-bottom;
+}
+
+:is([data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom"], [data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-start"], [data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-end"])
+  .toast.closing {
+  animation-name: ui-toast-exit-bottom;
+}
+
 @keyframes ui-toast-enter {
   from {
     opacity: 0;
@@ -221,6 +274,28 @@ defineExpose({
   }
 }
 
+@keyframes ui-toast-enter-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes ui-toast-exit-bottom {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-0.75rem);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .toast, .toast.closing {
     animation: none;

package/vue/UiTooltip.d.ts

@@ -3,7 +3,7 @@ type __VLS_Props = {
     hideDelay?: number;
     inverse?: boolean;
     open?: boolean;
-    placement?: string;
+    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
     showDelay?: number;
     trigger?: 'hover' | 'click' | 'focus';
 };
@@ -43,7 +43,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     hideDelay: number;
     inverse: boolean;
     open: boolean;
-    placement: string;
+    placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
     showDelay: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiTooltip.vue

@@ -12,7 +12,19 @@ const props = withDefaults(
     hideDelay?: number
     inverse?: boolean
     open?: boolean
-    placement?: string
+    placement?:
+      | 'top'
+      | 'top-start'
+      | 'top-end'
+      | 'bottom'
+      | 'bottom-start'
+      | 'bottom-end'
+      | 'left'
+      | 'left-start'
+      | 'left-end'
+      | 'right'
+      | 'right-start'
+      | 'right-end'
     showDelay?: number
     trigger?: 'hover' | 'click' | 'focus'
   }>(),
@@ -21,7 +33,7 @@ const props = withDefaults(
     hideDelay: 100,
     inverse: false,
     open: false,
-    placement: 'top-start',
+    placement: 'top',
     showDelay: 500,
     trigger: 'hover',
   },
@@ -52,8 +64,6 @@ const internalOpen = ref(false)
 const hostState = computed(() =>
   [
     props.inverse && 'inverse',
-    props.placement && 'placement',
-    `placement=${encodeURIComponent(props.placement)}`,
   ].filter(Boolean).join(' ')
 )
 
@@ -117,6 +127,10 @@ useComponentHost(controllerModule.default, {
   syntax: "*";
   inherits: false;
 }
+@property --ui-tooltip-offset {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-tooltip-radius {
   syntax: "*";
   inherits: false;
@@ -168,19 +182,22 @@ useComponentHost(controllerModule.default, {
 }
 
 .surface {
-  --_tooltip-line: var(--_ui-tooltip-border, var(--ui-border-default));
+  --_tooltip-line: var(--_ui-tooltip-border, var(--ui-overlay-border, var(--ui-border-default)));
   position: relative;
   box-sizing: border-box;
   max-inline-size: var(--_ui-tooltip-max-inline-size, 18rem);
   border: 1px solid var(--_tooltip-line);
-  border-radius: var(--_ui-tooltip-radius, var(--ui-radius-sm));
-  background: var(--_ui-tooltip-surface, var(--ui-surface-elevated));
+  border-radius: var(--_ui-tooltip-radius, var(--ui-overlay-radius, var(--ui-radius-sm)));
+  background: var(--_ui-tooltip-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
   color: var(--_ui-tooltip-text, var(--ui-text-primary));
   padding: var(--ui-space-1) var(--ui-space-2);
   font-family: var(--ui-font-family-sans);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-tight);
-  box-shadow: var(--_ui-tooltip-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md)));
+  box-shadow: var(
+    --_ui-tooltip-shadow,
+    var(--ui-overlay-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md)))
+  );
 }
 
 [data-component~="ui-tooltip"][data-ui-tooltip-state~="inverse"] .surface {
@@ -208,8 +225,7 @@ useComponentHost(controllerModule.default, {
   transform: rotate(45deg);
 }
 
-:is([data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom"], [data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom-start"], [data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom-end"])
-  .surface::after {
+[data-component~="ui-tooltip"][data-ui-actual-placement="bottom"] .surface::after {
   inset-block-start: calc(var(--_ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
   inset-block-end: auto;
   border-inline-end-width: 0;
@@ -220,12 +236,51 @@ useComponentHost(controllerModule.default, {
   border-start-start-radius: 1px;
 }
 
-:is([data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=top-end"], [data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom-end"])
-  .surface::after {
+[data-component~="ui-tooltip"][data-ui-actual-align="center"] .surface::after {
+  inset-inline-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.5rem) / 2);
+}
+
+[data-component~="ui-tooltip"][data-ui-actual-align="end"] .surface::after {
   inset-inline-start: auto;
   inset-inline-end: var(--ui-space-3);
 }
 
+[data-component~="ui-tooltip"][data-ui-actual-placement="left"] .surface::after,
+[data-component~="ui-tooltip"][data-ui-actual-placement="right"] .surface::after {
+  inset-block-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.5rem) / 2);
+  inset-block-end: auto;
+  border: 0 solid var(--_tooltip-line);
+}
+
+[data-component~="ui-tooltip"][data-ui-actual-placement="left"] .surface::after {
+  inset-inline-start: auto;
+  inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
+  border-inline-end-width: 1px;
+  border-block-end-width: 1px;
+}
+
+[data-component~="ui-tooltip"][data-ui-actual-placement="right"] .surface::after {
+  inset-inline-start: calc(var(--_ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
+  inset-inline-end: auto;
+  border-inline-start-width: 1px;
+  border-block-start-width: 1px;
+}
+
+[data-component~="ui-tooltip"][data-ui-actual-placement="left"][data-ui-actual-align="start"]
+  .surface::after,
+[data-component~="ui-tooltip"][data-ui-actual-placement="right"][data-ui-actual-align="start"]
+  .surface::after {
+  inset-block-start: var(--ui-space-3);
+}
+
+[data-component~="ui-tooltip"][data-ui-actual-placement="left"][data-ui-actual-align="end"]
+  .surface::after,
+[data-component~="ui-tooltip"][data-ui-actual-placement="right"][data-ui-actual-align="end"]
+  .surface::after {
+  inset-block-start: auto;
+  inset-block-end: var(--ui-space-3);
+}
+
 [data-component~="ui-tooltip"]:popover-open {
   opacity: 1;
   transform: translateY(0);

package/vue/UiTree.d.ts

@@ -4,12 +4,17 @@ type __VLS_Props = {
     label?: string;
     marquee?: boolean;
     maxDepth?: number;
+    selection?: 'none' | 'single' | 'multiple';
 };
 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, {
+    select: (detail: {
+        readonly ids: readonly (string)[];
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any;
     "update:maxDepth": (value: number) => any;
     reorder: (detail: {
         readonly sourceId: string;
@@ -31,6 +36,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((detail: {
+        readonly ids: readonly (string)[];
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any) | undefined;
     "onUpdate:maxDepth"?: ((value: number) => any) | undefined;
     onReorder?: ((detail: {
         readonly sourceId: string;
@@ -54,6 +63,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }>, {
     label: string;
     marquee: boolean;
+    selection: "none" | "single" | "multiple";
     density: "comfortable" | "compact";
     hoverExpandDelay: number;
     maxDepth: number;

package/vue/UiTree.vue

@@ -13,6 +13,7 @@ const props = withDefaults(
     label?: string
     marquee?: boolean
     maxDepth?: number
+    selection?: 'none' | 'single' | 'multiple'
   }>(),
   {
     density: 'comfortable',
@@ -20,6 +21,7 @@ const props = withDefaults(
     label: 'Tree',
     marquee: false,
     maxDepth: 0,
+    selection: 'none',
   },
 )
 const emit = defineEmits<{
@@ -47,6 +49,12 @@ const emit = defineEmits<{
       readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
     },
   ]
+  select: [
+    detail: {
+      readonly ids: readonly (string)[]
+      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+    },
+  ]
 }>()
 
 const root = ref<HTMLElement | null>(null)
@@ -102,10 +110,21 @@ const isReorderRejectedDetail = (detail: unknown): boolean =>
     ['sourceId', 'targetId', 'position', 'reason', 'maxDepth', 'resultingDepth', 'trigger']
       .includes(key)
   )
+const isSelectDetail = (detail: unknown): boolean =>
+  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && (Array.isArray((detail as Record<string, unknown>)['ids'])
+    && ((detail as Record<string, unknown>)['ids'] as unknown[]).every((item: unknown) =>
+      typeof item === 'string'
+    ))
+  && ((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) => ['ids', 'trigger'].includes(key))
 const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
   checks: {
     reorder: isReorderDetail,
     'reorder-rejected': isReorderRejectedDetail,
+    select: isSelectDetail,
   },
   modeled: ['maxDepth'],
 })
@@ -171,6 +190,14 @@ useComponentHost(controllerModule.default, {
   padding-inline-start: var(--ui-tree-gutter, 0px);
 }
 
+[data-component~="ui-tree"][data-move-mode]::after {
+  content: "Choose a destination row, or use Up and Down; Right nests inside a branch. Enter places it, Escape cancels.";
+  display: block;
+  padding: var(--ui-space-2);
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-font-size-sm);
+}
+
 /* A component that sets its display still honours the hidden attribute on its root. */
 [data-component~="ui-tree"][hidden] {
   display: none;

package/vue/UiTreeItem.d.ts

@@ -8,6 +8,7 @@ type __VLS_Props = {
     expanded?: boolean;
     itemId?: string;
     label?: string;
+    lazy?: boolean;
     marquee?: boolean;
     selected?: boolean;
     sortable?: boolean;
@@ -48,6 +49,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     dragType: string;
     dropScope: string;
     itemId: string;
+    lazy: boolean;
     sortable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;