@threadlabs/looma 0.14.8 → 0.15.0

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>;

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>;