@threadlabs/looma 0.14.8 → 0.15.0

package/vue/UiMenuItem.d.ts

@@ -1,14 +1,46 @@
 type __VLS_Props = {
+    checked?: boolean;
     disabled?: boolean;
+    href?: string;
+    type?: 'action' | 'checkbox' | 'radio';
     value?: string;
 };
-declare var __VLS_1: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_15: {}, __VLS_17: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
+} & {
+    shortcut?: (props: typeof __VLS_3) => any;
+} & {
+    default?: (props: typeof __VLS_15) => any;
+} & {
+    shortcut?: (props: typeof __VLS_17) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (detail: {
+        readonly checked: boolean;
+        readonly value: string;
+        readonly type: "checkbox" | "radio";
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any;
+    "update:checked": (value: boolean) => any;
+    "update:value": (value: string) => any;
+    "update:type": (value: "checkbox" | "radio" | "action") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((detail: {
+        readonly checked: boolean;
+        readonly value: string;
+        readonly type: "checkbox" | "radio";
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any) | undefined;
+    "onUpdate:checked"?: ((value: boolean) => any) | undefined;
+    "onUpdate:value"?: ((value: string) => any) | undefined;
+    "onUpdate:type"?: ((value: "checkbox" | "radio" | "action") => any) | undefined;
+}>, {
+    type: "action" | "checkbox" | "radio";
     value: string;
     disabled: boolean;
+    href: string;
+    checked: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiMenuItem.vue

@@ -1,29 +1,127 @@
 <!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
+import { computed, ref } from 'vue'
+import * as controllerModule from '../components/ui-menu-item/ui-menu-item.js'
+import { createDispatch, useComponentHost } from './host'
+import UiIcon from './UiIcon.vue'
+
 defineOptions({ inheritAttrs: false })
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
+    checked?: boolean
     disabled?: boolean
+    href?: string
+    type?: 'action' | 'checkbox' | 'radio'
     value?: string
   }>(),
   {
+    checked: false,
     disabled: false,
+    href: '',
+    type: 'action',
     value: '',
   },
 )
+const emit = defineEmits<{
+  'update:checked': [value: boolean]
+  'update:type': [value: 'action' | 'checkbox' | 'radio']
+  'update:value': [value: string]
+  change: [
+    detail: {
+      readonly checked: boolean
+      readonly value: string
+      readonly type: 'checkbox' | 'radio'
+      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+    },
+  ]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const internalChecked = ref(false)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.type && `type type=${props.type}`,
+  ].filter(Boolean).join(' ')
+)
+
+const isChangeDetail = (detail: unknown): boolean =>
+  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && typeof (detail as Record<string, unknown>)['checked'] === 'boolean'
+  && typeof (detail as Record<string, unknown>)['value'] === 'string'
+  && ((detail as Record<string, unknown>)['type'] === 'checkbox'
+    || (detail as Record<string, unknown>)['type'] === 'radio')
+  && ((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) =>
+    ['checked', 'value', 'type', 'trigger'].includes(key)
+  )
+const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
+  checks: {
+    change: isChangeDetail,
+  },
+  modeled: ['checked', 'type', 'value'],
+})
+
+useComponentHost(controllerModule.default, {
+  root,
+  dispatch,
+  props,
+  state: { internalChecked },
+})
+
+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
+  <a
+    v-if="href && type === 'action'"
     data-component="ui-menu-item"
     role="menuitem"
     tabindex="-1"
     v-bind="$attrs"
     :aria-disabled="disabled"
     :data-value="value"
+    :href="attribute(({ true: null, false: href })[`${disabled}`])"
+    :data-ui-menu-item-state="hostState || undefined"
+    ref="root"
+  ><span class="label"><slot /></span>
+    <span class="shortcut" aria-hidden="true"><slot name="shortcut" /></span></a>
+  <div
+    v-else
+    data-component="ui-menu-item"
+    tabindex="-1"
+    v-bind="$attrs"
+    :role="attribute(({ action: 'menuitem', checkbox: 'menuitemcheckbox', radio: 'menuitemradio' })[type])"
+    :aria-checked="typeof (({ action: null, checkbox: internalChecked, radio: internalChecked })[type]) === 'boolean'
+    ? String(({ action: null, checkbox: internalChecked, radio: internalChecked })[type])
+    : attribute(({ action: null, checkbox: internalChecked, radio: internalChecked })[type])"
+    :aria-disabled="disabled"
+    :data-value="value"
+    :data-ui-menu-item-state="hostState || undefined"
+    ref="root"
   >
-    <slot />
+    <span class="indicator" aria-hidden="true"><UiIcon
+        v-if="type === 'checkbox' && internalChecked"
+        name="check"
+      />
+      <UiIcon v-if="type === 'radio' && internalChecked" name="circle-dot" /></span>
+    <span class="label"><slot /></span>
+    <span class="shortcut" aria-hidden="true"><slot name="shortcut" /></span>
   </div>
 </template>
 
@@ -55,7 +153,9 @@ withDefaults(
 }
 
 [data-component~="ui-menu-item"] {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-5);
   box-sizing: border-box;
   width: 100%;
   padding: var(
@@ -77,6 +177,7 @@ withDefaults(
     var(--_ui-default-menu-item-font-size, var(--ui-font-size-md))
   );
   font-weight: var(--ui-font-medium);
+  text-decoration: none;
   cursor: pointer;
   outline: none;
   transition:
@@ -84,14 +185,38 @@ withDefaults(
     color var(--ui-motion-fast) var(--ui-motion-ease);
 }
 
-/* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
-/* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
- * Trimming applies to block containers, so the box is a block with centred content. */
+.label {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+.indicator {
+  display: inline-flex;
+  place-items: center;
+  flex: none;
+  inline-size: var(--ui-icon-size-md);
+  color: var(--ui-accent-solid);
+}
+
+[data-component~="ui-menu-item"][data-ui-menu-item-state~="type=action"] .indicator {
+  display: none;
+}
+
+.shortcut {
+  margin-inline-start: auto;
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-normal);
+}
+
+.shortcut:empty {
+  display: none;
+}
+
+/* Keep the text row at the shared control height where cap trimming is available. */
 @supports (text-box-trim: trim-both) {
   [data-component~="ui-menu-item"] {
-    display: block;
     min-block-size: var(--ui-menu-item-min-block-size, var(--ui-control-size-md, 2.5rem));
-    align-content: center;
     text-box-trim: trim-both;
     text-box-edge: cap alphabetic;
   }
@@ -101,11 +226,22 @@ withDefaults(
   background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
 }
 
+[data-component~="ui-menu-item"]:focus-visible {
+  outline: 2px solid var(--ui-focus-ring);
+  outline-offset: -2px;
+}
+
 [data-component~="ui-menu-item"][aria-disabled="true"] {
   opacity: 0.6;
   cursor: not-allowed;
 }
 
+@media (forced-colors: active) {
+  [data-component~="ui-menu-item"]:focus-visible {
+    outline-color: Highlight;
+  }
+}
+
 /* A component that sets its display still honours the hidden attribute on its root. */
 [data-component~="ui-menu-item"][hidden] {
   display: none;

package/vue/UiPopover.d.ts

@@ -1,7 +1,7 @@
 type __VLS_Props = {
     for?: string;
     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';
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -34,7 +34,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }>, {
     for: string;
     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";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiPopover.vue

@@ -10,7 +10,19 @@ const props = withDefaults(
   defineProps<{
     for?: string
     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'
   }>(),
   {
     for: '',
@@ -84,12 +96,36 @@ useComponentHost(controllerModule.default, {
 
 <style scoped>
 /* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-popover-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-popover-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-popover-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-popover-shadow {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-popover-viewport-gap {
   syntax: "*";
   inherits: false;
 }
+@property --ui-popover-offset {
+  syntax: "*";
+  inherits: false;
+}
 
 [data-component~="ui-popover"] {
+  --_ui-popover-surface: var(--ui-popover-surface);
+  --_ui-popover-border: var(--ui-popover-border);
+  --_ui-popover-radius: var(--ui-popover-radius);
+  --_ui-popover-shadow: var(--ui-popover-shadow);
   box-sizing: border-box;
   max-inline-size: min(
     20rem,
@@ -111,10 +147,13 @@ useComponentHost(controllerModule.default, {
   max-block-size: inherit;
   overflow: auto;
   padding: var(--ui-space-3);
-  background: var(--ui-surface-elevated);
-  border: 1px solid var(--ui-border-default);
-  border-radius: var(--ui-radius-lg);
-  box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+  background: var(--_ui-popover-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+  border: 1px solid var(--_ui-popover-border, var(--ui-overlay-border, var(--ui-border-default)));
+  border-radius: var(--_ui-popover-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
+  box-shadow: var(
+    --_ui-popover-shadow,
+    var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
+  );
 }
 
 [data-component~="ui-popover"]:not([data-component~="ui-popover"][data-ui-popover-state~="internalOpen"]) {

package/vue/UiRadioGroup.d.ts

@@ -1,5 +1,6 @@
 type __VLS_Props = {
     disabled?: boolean;
+    invalid?: boolean;
     label?: string;
     name?: string;
     orientation?: 'horizontal' | 'vertical';
@@ -37,6 +38,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }>, {
     label: string;
     name: string;
+    invalid: boolean;
     value: string;
     disabled: boolean;
     required: boolean;

package/vue/UiRadioGroup.vue

@@ -9,6 +9,7 @@ defineOptions({ inheritAttrs: false })
 const props = withDefaults(
   defineProps<{
     disabled?: boolean
+    invalid?: boolean
     label?: string
     name?: string
     orientation?: 'horizontal' | 'vertical'
@@ -17,6 +18,7 @@ const props = withDefaults(
   }>(),
   {
     disabled: false,
+    invalid: false,
     label: 'Options',
     name: '',
     orientation: 'horizontal',
@@ -48,6 +50,7 @@ const internalValue = ref('')
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
+    props.invalid && 'invalid',
     props.orientation && `orientation orientation=${props.orientation}`,
   ].filter(Boolean).join(' ')
 )
@@ -92,6 +95,7 @@ useComponentHost(controllerModule.default, {
     role="radiogroup"
     v-bind="$attrs"
     :aria-required="required"
+    :aria-invalid="invalid"
     :disabled="disabled"
     :data-ui-radio-group-state="hostState || undefined"
     ref="root"
@@ -102,7 +106,16 @@ useComponentHost(controllerModule.default, {
 </template>
 
 <style scoped>
+@property --ui-radio-group-invalid-text {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-radio-group"] {
+  --_ui-radio-group-invalid-text: var(
+    --ui-radio-group-invalid-text,
+    var(--ui-field-danger, var(--ui-danger-solid))
+  );
   display: inline-flex;
   align-items: center;
   gap: var(--ui-space-2);
@@ -125,6 +138,10 @@ legend + * {
   clear: both;
 }
 
+[data-component~="ui-radio-group"][data-ui-radio-group-state~="invalid"] legend {
+  color: var(--_ui-radio-group-invalid-text);
+}
+
 [data-component~="ui-radio-group"][data-ui-radio-group-state~="orientation=vertical"] {
   display: inline-grid;
   justify-items: start;

package/vue/UiSearchShell.vue

@@ -165,10 +165,17 @@ dialog::backdrop {
   max-block-size: var(--_ui-search-shell-max-height, 80vh);
   margin-inline: auto;
   overflow: hidden;
-  background: var(--_ui-search-shell-surface, var(--ui-surface-elevated));
-  border: 1px solid var(--_ui-search-shell-border, var(--ui-border-default));
-  border-radius: var(--_ui-search-shell-radius, var(--ui-radius-dialog));
-  box-shadow: var(--_ui-search-shell-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)));
+  background: var(
+    --_ui-search-shell-surface,
+    var(--ui-overlay-surface, var(--ui-surface-elevated))
+  );
+  border: 1px solid
+    var(--_ui-search-shell-border, var(--ui-overlay-border, var(--ui-border-default)));
+  border-radius: var(--_ui-search-shell-radius, var(--ui-overlay-radius, var(--ui-radius-dialog)));
+  box-shadow: var(
+    --_ui-search-shell-shadow,
+    var(--ui-overlay-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)))
+  );
 }
 
 .search {
@@ -191,7 +198,7 @@ dialog::backdrop {
   min-block-size: var(--ui-control-min-block-size);
   padding: var(--ui-space-2) var(--ui-space-3);
   border: 1px solid var(--ui-control-border);
-  border-radius: var(--ui-radius-md);
+  border-radius: var(--ui-field-radius, var(--ui-radius-md));
   background: var(--ui-control-surface);
   color: var(--ui-text-primary);
   font: inherit;

package/vue/UiSelect.vue

@@ -69,6 +69,14 @@ useComponentHost(controllerModule.default, {
   syntax: "*";
   inherits: false;
 }
+@property --ui-select-invalid-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-select-invalid-focus-shadow {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-select-radius {
   syntax: "*";
   inherits: false;
@@ -87,7 +95,7 @@ useComponentHost(controllerModule.default, {
   margin: 0;
   padding: var(--ui-space-2) var(--ui-space-3);
   border: 1px solid var(--ui-control-border, var(--ui-border-strong));
-  border-radius: var(--ui-select-radius, var(--ui-radius-md));
+  border-radius: var(--ui-select-radius, var(--ui-field-radius, var(--ui-radius-md)));
   background-color: var(--ui-control-surface, var(--ui-surface-elevated));
   color: var(--ui-text-primary);
   color-scheme: light dark;
@@ -131,13 +139,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-select"][aria-invalid="true"],
 [data-component~="ui-select"]:is(:user-invalid, [data-user-invalid]) {
-  border-color: var(--ui-danger-solid);
+  border-color: var(--ui-select-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)));
 }
 
 [data-component~="ui-select"]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
-  box-shadow:
+  box-shadow: var(
+    --ui-select-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-select-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
+      transparent
+    )
+  );
 }
 
 [data-component~="ui-select"]:disabled {

package/vue/UiSwitch.vue

@@ -155,7 +155,7 @@ input {
   height: var(--_ui-switch-track-height, 1.5rem);
   padding: 0;
   border: 1px solid var(--ui-control-border-hover, var(--ui-border-strong));
-  border-radius: 999px;
+  border-radius: var(--ui-radius-round);
   background: var(--ui-control-surface, var(--ui-surface-default));
   box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ui-text-primary) 10%, transparent);
   cursor: pointer;
@@ -172,7 +172,7 @@ input::after {
   left: 3px;
   width: 1rem;
   height: 1rem;
-  border-radius: 999px;
+  border-radius: var(--ui-radius-round);
   background: var(--ui-text-secondary);
   box-shadow: var(--ui-shadow-xs);
   transition: transform var(--ui-motion-fast) var(--ui-motion-ease);

package/vue/UiSwitcher.d.ts

@@ -1,6 +1,7 @@
 type __VLS_Props = {
     align?: 'start' | 'center' | 'end' | 'stretch';
     gap?: 'xs' | 's' | 'm' | 'l' | 'xl';
+    limit?: number;
     threshold?: 'xs' | 'sm' | 'md' | 'lg';
 };
 declare var __VLS_1: {};

package/vue/UiSwitcher.vue

@@ -1,23 +1,39 @@
 <!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import * as controllerModule from '../components/ui-switcher/ui-switcher.js'
+import { createDispatch, useComponentHost } from './host'
 
 defineOptions({ inheritAttrs: false })
 
 const props = defineProps<{
   align?: 'start' | 'center' | 'end' | 'stretch'
   gap?: 'xs' | 's' | 'm' | 'l' | 'xl'
+  limit?: number
   threshold?: 'xs' | 'sm' | 'md' | 'lg'
 }>()
 
+const root = ref<HTMLElement | null>(null)
+const overLimit = ref(false)
+
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
+    overLimit.value && 'overLimit',
     props.gap && `gap gap=${props.gap}`,
     props.threshold && `threshold threshold=${props.threshold}`,
     props.align && `align align=${props.align}`,
   ].filter(Boolean).join(' ')
 )
+
+const dispatch = createDispatch(root)
+
+useComponentHost(controllerModule.default, {
+  root,
+  dispatch,
+  props,
+  state: { overLimit },
+})
 </script>
 
 <template>
@@ -25,6 +41,7 @@ const hostState = computed(() =>
     data-component="ui-switcher"
     v-bind="$attrs"
     :data-ui-switcher-state="hostState || undefined"
+    ref="root"
   >
     <slot />
   </div>
@@ -61,6 +78,10 @@ const hostState = computed(() =>
   flex-basis: calc((var(--_ui-switcher-threshold, 30rem) - 100%) * 999);
 }
 
+[data-component~="ui-switcher"][data-ui-switcher-state~="overLimit"] > :slotted(*) {
+  flex-basis: 100%;
+}
+
 [data-component~="ui-switcher"][data-ui-switcher-state~="gap=xs"] {
   --_switcher-gap: var(--ui-space-2);
 }

package/vue/UiTabs.d.ts

@@ -1,13 +1,16 @@
 type __VLS_Props = {
+    activation?: 'auto' | 'manual';
     density?: 'comfortable' | 'compact';
     label?: string;
     orientation?: 'horizontal' | 'vertical';
     stretch?: boolean;
     value?: string;
 };
-declare var __VLS_1: {};
+declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    tab?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (detail: {
@@ -29,6 +32,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     stretch: boolean;
     density: "comfortable" | "compact";
     orientation: "horizontal" | "vertical";
+    activation: "auto" | "manual";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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>