@xleddyl/443-components-vue 0.3.0 → 0.5.0

package/dist/components/data/SelectionBar.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { useLocale } from "../../composables/useLocale";
 import Button from "../core/Button.vue";
 const props = defineProps({
@@ -67,12 +67,15 @@ const countText = computed(() => {
   return t("common.selected", { count: props.count });
 });
 const announcement = ref("");
+const mounted = ref(false);
 watch(
-  () => [props.count, countText.value],
-  ([count], previous) => {
-    const before = previous?.[0] ?? 0;
+  () => [props.count, countText.value, mounted.value],
+  ([count, , isMounted], previous) => {
+    if (!isMounted) return;
+    const before = previous?.[2] ? previous[0] : 0;
     if (count > 0) announcement.value = countText.value;
     else if (before > 0) announcement.value = props.clearedText ?? t("selectionBar.cleared");
   }
 );
+onMounted(() => mounted.value = true);
 </script>

package/dist/components/data/Tree.vue

@@ -79,9 +79,12 @@
          <span class="k-tree-text">
             <slot name="label" :node="entry.node" :level="entry.level">
                <span class="k-tree-label">{{ entry.node.label }}</span>
-               <span v-if="entry.node.description" class="k-tree-description">{{
-                  entry.node.description
-               }}</span>
+               <span
+                  v-if="entry.node.description"
+                  class="k-tree-description"
+                  :class="`k-tree-description-${entry.node.descriptionVariant ?? descriptionVariant}`"
+                  >{{ entry.node.description }}</span
+               >
             </slot>
          </span>
          <span v-if="entry.node.meta || $slots.meta" class="k-tree-meta">
@@ -117,6 +120,7 @@ const props = defineProps({
   size: { type: String, required: false, default: "md" },
   checkmark: { type: Boolean, required: false },
   emptyText: { type: String, required: false },
+  descriptionVariant: { type: String, required: false, default: "mono" },
   reorderable: { type: Boolean, required: false },
   nestable: { type: Boolean, required: false },
   canDrop: { type: Function, required: false },
@@ -132,7 +136,8 @@ const selected = defineModel("selected", { type: [String, Number, null], ...{ de
 const control = useFieldControl({
   invalid: () => props.invalid,
   disabled: () => props.disabled,
-  required: () => props.required
+  required: () => props.required,
+  labelable: false
 });
 const baseId = useId();
 const hintId = `${baseId}-hint`;

package/dist/components/data/Tree.vue.d.ts

@@ -1,4 +1,4 @@
-import type { TreeMove, TreeNode, TreeSize } from './types';
+import type { TreeDescriptionVariant, TreeMove, TreeNode, TreeSize } from './types';
 type NodeId = TreeNode['id'];
 declare var __VLS_12: {
     node: TreeNode;
@@ -21,6 +21,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     size?: TreeSize;
     checkmark?: boolean;
     emptyText?: string;
+    descriptionVariant?: TreeDescriptionVariant;
     reorderable?: boolean;
     nestable?: boolean;
     canDrop?: (move: TreeMove) => boolean;
@@ -234,6 +235,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     size?: TreeSize;
     checkmark?: boolean;
     emptyText?: string;
+    descriptionVariant?: TreeDescriptionVariant;
     reorderable?: boolean;
     nestable?: boolean;
     canDrop?: (move: TreeMove) => boolean;
@@ -444,6 +446,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     size: TreeSize;
     selectable: boolean;
     bordered: boolean;
+    descriptionVariant: TreeDescriptionVariant;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/data/types.d.ts

@@ -57,11 +57,13 @@ export interface TreeNode {
     id: string | number;
     label: string;
     description?: string;
+    descriptionVariant?: TreeDescriptionVariant;
     meta?: string;
     icon?: string;
     disabled?: boolean;
     children?: TreeNode[];
 }
+export type TreeDescriptionVariant = 'text' | 'mono';
 export type TreeSize = 'sm' | 'md';
 export type TreeDropPosition = 'before' | 'after' | 'inside';
 export interface TreeLocation {
@@ -75,8 +77,9 @@ export interface TreeMove {
     from: TreeLocation;
     to: TreeLocation;
 }
-export interface FilterPillOption {
-    value: string | number;
+export type FilterPillValue = string | number;
+export interface FilterPillOption<T extends FilterPillValue = FilterPillValue> {
+    value: T;
     label: string;
     valueLabel?: string;
     count?: number;
@@ -84,6 +87,8 @@ export interface FilterPillOption {
     disabled?: boolean;
     menu?: MenuItems;
     menuLabel?: string;
+    panel?: boolean;
+    panelLabel?: string;
     active?: boolean;
 }
 export type SelectionBarPlacement = 'inline' | 'sticky' | 'floating';

package/dist/components/forms/CheckboxGroup.vue

@@ -52,7 +52,8 @@ const model = defineModel({ type: Array, ...{ default: () => [] } });
 const control = useFieldControl({
   invalid: () => props.invalid,
   disabled: () => props.disabled,
-  required: () => props.required
+  required: () => props.required,
+  labelable: false
 });
 provide(CHECKBOX_GROUP_KEY, {
   name: computed(() => props.name ?? control.field?.name.value),

package/dist/components/forms/FileInput.vue

@@ -29,7 +29,7 @@
   joinIds(
     $attrs['aria-describedby'],
     control.describedBy.value,
-    hint ? hintId : void 0
+    hasHint ? hintId : void 0
   )
 "
          type="button"
@@ -44,7 +44,9 @@
             <span class="k-file-input-dropzone-title">
                <slot name="title" :over="over" :loading="loading">{{ currentTitle }}</slot>
             </span>
-            <span v-if="hint" :id="hintId" class="k-file-input-dropzone-hint">{{ hint }}</span>
+            <span v-if="hasHint" :id="hintId" class="k-file-input-dropzone-hint">
+               <slot name="hint">{{ hint }}</slot>
+            </span>
          </span>
       </button>
       <input
@@ -60,6 +62,34 @@
          :disabled="control.disabled.value || void 0"
          @change="onNativeChange"
       />
+      <input
+         ref="directoryInputRef"
+         type="file"
+         class="k-file-input-native"
+         tabindex="-1"
+         aria-hidden="true"
+         multiple
+         :disabled="control.disabled.value || void 0"
+         @change="onNativeChange"
+      />
+      <div v-if="directoryAction || $slots.actions" class="k-file-input-actions">
+         <slot
+            name="actions"
+            :browse="browse"
+            :browse-directory="browseDirectory"
+            :disabled="!interactive"
+         >
+            <Button
+               variant="ghost"
+               tone="neutral"
+               size="sm"
+               icon="folder"
+               :label="directoryActionText"
+               :disabled="!interactive"
+               @click="browseDirectory"
+            />
+         </slot>
+      </div>
       <ul v-if="list && files.length" role="list" class="k-file-input-list" :aria-label="listText">
          <li v-for="file in files" :key="fileKey(file)" class="k-file-input-item">
             <span class="k-file-input-thumb" aria-hidden="true">
@@ -68,7 +98,7 @@
             </span>
             <span class="k-file-input-meta">
                <span class="k-file-input-name" :title="filePath(file)">{{
-                  directory ? filePath(file) : file.name
+                  walksFolders ? filePath(file) : file.name
                }}</span>
                <span class="k-file-input-size">{{ formatBytes(file.size, resolvedLocale) }}</span>
             </span>
@@ -78,7 +108,7 @@
                variant="ghost"
                tone="neutral"
                icon="x-mark"
-               :aria-label="`${removeText} ${directory ? filePath(file) : file.name}`"
+               :aria-label="`${removeText} ${walksFolders ? filePath(file) : file.name}`"
                :title="removeText"
                @click="removeFile(file)"
             />
@@ -106,6 +136,7 @@ import { readDroppedFiles, useFileDrop } from "../../composables/useFileDrop";
 import {
   fileKey,
   filePath,
+  filesTree,
   formatBytes,
   isImageFile,
   matchesAccept,
@@ -119,10 +150,14 @@ defineOptions({ inheritAttrs: false });
 const props = defineProps({
   name: { type: String, required: false },
   accept: { type: [String, Array], required: false },
+  acceptMode: { type: String, required: false, default: "filter" },
   maxSize: { type: Number, required: false },
   maxFiles: { type: Number, required: false },
   multiple: { type: Boolean, required: false },
-  directory: { type: Boolean, required: false },
+  directory: { type: [Boolean, String], required: false },
+  directoryAction: { type: Boolean, required: false },
+  directoryActionLabel: { type: String, required: false },
+  skipHidden: { type: Boolean, required: false },
   list: { type: Boolean, required: false, default: true },
   loading: { type: Boolean, required: false },
   loadingText: { type: String, required: false },
@@ -144,10 +179,16 @@ const props = defineProps({
   class: { type: null, required: false },
   style: { type: null, required: false }
 });
+const slots = defineSlots();
 const { locale: appLocale, t } = useLocale();
 const resolvedLocale = computed(() => props.locale ?? appLocale.value.code);
-const titleLabel = computed(
-  () => props.title ?? t(props.directory ? "fileInput.directoryTitle" : "fileInput.title")
+const titleLabel = computed(() => {
+  if (props.title) return props.title;
+  if (props.directory === "drop") return t("fileInput.mixedTitle");
+  return t(props.directory ? "fileInput.directoryTitle" : "fileInput.title");
+});
+const directoryActionText = computed(
+  () => props.directoryActionLabel ?? t("fileInput.browseDirectory")
 );
 const loadingLabel = computed(() => props.loadingText ?? t("fileInput.loading"));
 const dropLabel = computed(() => props.dropText ?? t("fileInput.drop"));
@@ -160,10 +201,11 @@ function announceAdded(count) {
   return props.announce ? props.announce(count) : t("fileInput.added", { count });
 }
 const model = defineModel({ type: null });
-const emit = defineEmits(["invalid", "add", "remove"]);
+const emit = defineEmits(["invalid", "reject", "add", "remove"]);
 const hintId = `${useId()}-hint`;
 const rootRef = useTemplateRef("rootRef");
 const inputRef = useTemplateRef("inputRef");
+const directoryInputRef = useTemplateRef("directoryInputRef");
 const buttonRef = useTemplateRef("buttonRef");
 const previews = reactive({});
 const announcement = ref("");
@@ -182,7 +224,9 @@ const acceptList = computed(() => parseAccept(props.accept));
 const acceptAttr = computed(() => acceptList.value.join(",") || void 0);
 const formName = computed(() => props.name ?? control.field?.name.value);
 const interactive = computed(() => !control.disabled.value && !props.readonly && !props.loading);
-const isMultiple = computed(() => props.multiple || props.directory);
+const isMultiple = computed(() => props.multiple || props.directory === true);
+const walksFolders = computed(() => Boolean(props.directory));
+const hasHint = computed(() => Boolean(props.hint || slots.hint));
 const currentTitle = computed(() => {
   if (props.loading) return loadingLabel.value;
   return over.value ? dropLabel.value : titleLabel.value;
@@ -194,12 +238,14 @@ const { over } = useFileDrop(rootRef, {
   disabled: () => !interactive.value,
   onDrop: (dropped, event) => {
     const transfer = event.dataTransfer;
-    if (!props.directory) {
-      addEntries(toEntries(dropped), { source: "drop", event, dataTransfer: transfer });
+    const origin = { source: "drop", event, dataTransfer: transfer };
+    if (!walksFolders.value) {
+      const tree = filesTree(dropped, { skipHidden: props.skipHidden });
+      addEntries(tree.files, { ...origin, directories: [] });
       return;
     }
-    void readDroppedFiles(transfer).then(
-      (entries) => addEntries(entries, { source: "drop", event, dataTransfer: transfer })
+    void readDroppedFiles(transfer, { directories: true, skipHidden: props.skipHidden }).then(
+      (tree) => addEntries(tree.files, { ...origin, directories: tree.directories })
     );
   }
 });
@@ -207,22 +253,32 @@ function browse() {
   if (!interactive.value) return;
   inputRef.value?.click();
 }
+function browseDirectory() {
+  if (!interactive.value) return;
+  const input = directoryInputRef.value;
+  if (!input) return;
+  input.webkitdirectory = true;
+  input.click();
+}
 function validate(file) {
-  if (!matchesAccept(file, acceptList.value))
+  if (props.acceptMode === "filter" && !matchesAccept(file, acceptList.value))
     return { reason: "type", file, limit: acceptList.value.join(", ") };
   if (props.maxSize !== void 0 && file.size > props.maxSize)
     return { reason: "size", file, limit: props.maxSize };
   return void 0;
 }
 function addFiles(incoming) {
-  addEntries(toEntries(incoming), {
+  const tree = filesTree(incoming, { skipHidden: props.skipHidden });
+  addEntries(tree.files, {
     source: "browse",
     event: new Event("add"),
-    dataTransfer: null
+    dataTransfer: null,
+    directories: walksFolders.value ? tree.directories : []
   });
 }
 function addEntries(incomingEntries, origin) {
-  if (!interactive.value || !incomingEntries.length) return;
+  if (!interactive.value) return;
+  if (!incomingEntries.length && !origin.directories.length) return;
   for (const entry of incomingEntries) setFilePath(entry.file, entry.path);
   const incoming = incomingEntries.map((entry) => entry.file);
   const multiple = isMultiple.value;
@@ -231,37 +287,53 @@ function addEntries(incomingEntries, origin) {
   const existing = new Set(kept.map(fileKey));
   const limit = multiple ? props.maxFiles ?? Infinity : 1;
   const room = multiple ? limit - kept.length : 1;
+  const rejected = [];
+  const reject = (problem) => {
+    rejected.push(problem);
+    emit("invalid", problem);
+  };
   for (const file of multiple ? incoming : incoming.slice(0, 1)) {
     const problem = validate(file);
     if (problem) {
-      emit("invalid", problem);
+      reject(problem);
       continue;
     }
     if (existing.has(fileKey(file))) continue;
     if (accepted.length >= room) {
-      emit("invalid", { reason: "count", file, limit });
+      reject({ reason: "count", file, limit });
       continue;
     }
     accepted.push(file);
     existing.add(fileKey(file));
   }
   if (!multiple && incoming.length > 1)
-    for (const file of incoming.slice(1)) emit("invalid", { reason: "count", file, limit: 1 });
+    for (const file of incoming.slice(1)) reject({ reason: "count", file, limit: 1 });
+  const detail = { ...origin, entries: toEntries(accepted) };
+  if (rejected.length) emit("reject", rejected, detail);
+  if (!accepted.length && !origin.directories.length) return;
+  if (props.list && accepted.length)
+    model.value = multiple ? [...files.value, ...accepted] : accepted[0];
+  emit("add", accepted, detail);
   if (!accepted.length) return;
-  if (props.list) model.value = multiple ? [...files.value, ...accepted] : accepted[0];
-  emit("add", accepted, { ...origin, entries: toEntries(accepted) });
   announcement.value = props.list ? announceCount(multiple ? files.value.length : 1) : announceAdded(accepted.length);
 }
 function onNativeChange(event) {
   const target = event.target;
-  const picked = Array.from(target.files ?? []);
-  addEntries(toEntries(picked), { source: "browse", event, dataTransfer: null });
+  const tree = filesTree(Array.from(target.files ?? []), { skipHidden: props.skipHidden });
+  const folders = target.webkitdirectory;
+  addEntries(tree.files, {
+    source: "browse",
+    event,
+    dataTransfer: null,
+    directories: folders ? tree.directories : []
+  });
   target.value = "";
+  if (target === inputRef.value) syncDirectory();
 }
 function syncDirectory() {
   const input = inputRef.value;
   if (!input) return;
-  input.webkitdirectory = props.directory;
+  input.webkitdirectory = props.directory === true;
 }
 function removeFile(file) {
   const key = fileKey(file);
@@ -308,5 +380,5 @@ onMounted(() => {
 onBeforeUnmount(() => {
   for (const url of Object.values(previews)) URL.revokeObjectURL(url);
 });
-defineExpose({ focus: () => buttonRef.value?.focus(), browse, addFiles });
+defineExpose({ focus: () => buttonRef.value?.focus(), browse, browseDirectory, addFiles });
 </script>

package/dist/components/forms/FileInput.vue.d.ts

@@ -1,22 +1,32 @@
 import type { IconName } from '../../composables/useIcons';
 import type { FieldSize } from '../core/types';
-import type { FileAddDetail, FileInvalidEvent } from './types';
+import type { FileAddDetail, FileInputAcceptMode, FileInputDirectory, FileInvalidEvent } from './types';
+type __VLS_Slots = {
+    title?: (props: {
+        over: boolean;
+        loading: boolean;
+    }) => unknown;
+    hint?: () => unknown;
+    actions?: (props: {
+        browse: () => void;
+        browseDirectory: () => void;
+        disabled: boolean;
+    }) => unknown;
+};
 declare function browse(): void;
+declare function browseDirectory(): void;
 declare function addFiles(incoming: File[]): void;
-declare var __VLS_11: {
-    over: boolean;
-    loading: boolean;
-};
-type __VLS_Slots = {} & {
-    title?: (props: typeof __VLS_11) => any;
-};
 declare const __VLS_base: import("vue").DefineComponent<{
     name?: string | undefined;
     accept?: string | string[];
+    acceptMode?: FileInputAcceptMode;
     maxSize?: number;
     maxFiles?: number;
     multiple?: boolean;
-    directory?: boolean;
+    directory?: FileInputDirectory;
+    directoryAction?: boolean;
+    directoryActionLabel?: string;
+    skipHidden?: boolean;
     list?: boolean;
     loading?: boolean;
     loadingText?: string;
@@ -240,19 +250,25 @@ declare const __VLS_base: import("vue").DefineComponent<{
 }, {
     focus: () => void | undefined;
     browse: typeof browse;
+    browseDirectory: typeof browseDirectory;
     addFiles: typeof addFiles;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     remove: (file: File) => any;
     invalid: (event: FileInvalidEvent) => any;
     add: (files: File[], detail: FileAddDetail) => any;
     "update:modelValue": (value: File | File[] | null | undefined) => any;
+    reject: (events: FileInvalidEvent[], detail: FileAddDetail) => any;
 }, string, import("vue").PublicProps, Readonly<{
     name?: string | undefined;
     accept?: string | string[];
+    acceptMode?: FileInputAcceptMode;
     maxSize?: number;
     maxFiles?: number;
     multiple?: boolean;
-    directory?: boolean;
+    directory?: FileInputDirectory;
+    directoryAction?: boolean;
+    directoryActionLabel?: string;
+    skipHidden?: boolean;
     list?: boolean;
     loading?: boolean;
     loadingText?: string;
@@ -478,11 +494,13 @@ declare const __VLS_base: import("vue").DefineComponent<{
     onInvalid?: ((event: FileInvalidEvent) => any) | undefined;
     onAdd?: ((files: File[], detail: FileAddDetail) => any) | undefined;
     "onUpdate:modelValue"?: ((value: File | File[] | null | undefined) => any) | undefined;
+    onReject?: ((events: FileInvalidEvent[], detail: FileAddDetail) => any) | undefined;
 }>, {
     icon: IconName;
     invalid: boolean;
     list: boolean;
     size: FieldSize;
+    acceptMode: FileInputAcceptMode;
     previews: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/forms/RadioGroup.vue

@@ -60,7 +60,8 @@ const fallbackName = useId();
 const control = useFieldControl({
   invalid: () => props.invalid,
   disabled: () => props.disabled,
-  required: () => props.required
+  required: () => props.required,
+  labelable: false
 });
 provide(RADIO_GROUP_KEY, {
   name: computed(() => props.name ?? control.field?.name.value ?? fallbackName),

package/dist/components/forms/SegmentedControl.vue

@@ -92,7 +92,8 @@ let observer;
 const control = useFieldControl({
   invalid: () => props.invalid,
   disabled: () => props.disabled,
-  required: () => props.required
+  required: () => props.required,
+  labelable: false
 });
 function titleId(index) {
   return `${baseId}-title-${index}`;

package/dist/components/forms/types.d.ts

@@ -49,10 +49,13 @@ export interface FileInputEntry {
 }
 export interface FileAddDetail {
     entries: FileInputEntry[];
+    directories: string[];
     source: 'browse' | 'drop';
     event: Event;
     dataTransfer: DataTransfer | null;
 }
+export type FileInputDirectory = boolean | 'drop';
+export type FileInputAcceptMode = 'filter' | 'hint';
 export type PinInputMode = 'numeric' | 'alphanumeric' | 'alphabetic';
 export type RadioGroupVariant = 'default' | 'card';
 export type SliderBubble = boolean | 'always';

package/dist/components/layout/Accordion.vue.d.ts

@@ -1,4 +1,4 @@
-import type { AccordionContentVariant, AccordionItem, HeadingLevel } from './types';
+import type { AccordionContentVariant, AccordionItem, AccordionVariant, HeadingLevel } from './types';
 type Value = string | number;
 declare var __VLS_13: {
     item: AccordionItem;
@@ -18,7 +18,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     multiple?: boolean;
     collapsible?: boolean;
     level?: HeadingLevel;
-    variant?: "separated" | "plain" | "card";
+    variant?: AccordionVariant;
     contentVariant?: AccordionContentVariant;
     modelValue?: Value | Value[] | null;
     key?: PropertyKey | undefined;
@@ -220,7 +220,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     multiple?: boolean;
     collapsible?: boolean;
     level?: HeadingLevel;
-    variant?: "separated" | "plain" | "card";
+    variant?: AccordionVariant;
     contentVariant?: AccordionContentVariant;
     modelValue?: Value | Value[] | null;
     key?: PropertyKey | undefined;
@@ -418,7 +418,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: Value | Value[] | null) => any) | undefined;
 }>, {
-    variant: "plain" | "card" | "separated";
+    variant: AccordionVariant;
     level: HeadingLevel;
     collapsible: boolean;
     contentVariant: AccordionContentVariant;

package/dist/components/layout/AppShell.vue

@@ -74,7 +74,7 @@ const props = defineProps({
   skipLabel: { type: String, required: false },
   fluid: { type: Boolean, required: false },
   topbar: { type: Boolean, required: false, default: void 0 },
-  storageKey: { type: String, required: false },
+  storageKey: { type: [String, Boolean], required: false },
   shortcut: { type: [String, Boolean], required: false, default: false },
   viewTransition: { type: Boolean, required: false }
 });

package/dist/components/layout/AppShell.vue.d.ts

@@ -32,7 +32,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     skipLabel?: string;
     fluid?: boolean;
     topbar?: boolean;
-    storageKey?: string;
+    storageKey?: string | false;
     shortcut?: string | false;
     viewTransition?: boolean;
     collapsed?: boolean;
@@ -244,7 +244,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     skipLabel?: string;
     fluid?: boolean;
     topbar?: boolean;
-    storageKey?: string;
+    storageKey?: string | false;
     shortcut?: string | false;
     viewTransition?: boolean;
     collapsed?: boolean;

package/dist/components/layout/Tabs.vue

@@ -1,5 +1,12 @@
 <template>
-   <div class="k-tabs" :class="[`k-tabs-${variant}`, `k-tabs-${size}`, { 'is-fill': fill }]">
+   <div
+      class="k-tabs"
+      :class="[
+  `k-tabs-${variant}`,
+  `k-tabs-${size}`,
+  { 'is-fill': fill, 'is-stretch': stretch, 'is-inset': inset }
+]"
+   >
       <div
          ref="list"
          class="k-tabs-list"
@@ -88,6 +95,8 @@ const props = defineProps({
   activation: { type: String, required: false, default: "automatic" },
   lazy: { type: Boolean, required: false },
   fill: { type: Boolean, required: false },
+  stretch: { type: Boolean, required: false },
+  inset: { type: Boolean, required: false },
   panelFocusable: { type: Boolean, required: false, default: true }
 });
 const slots = defineSlots();

package/dist/components/layout/Tabs.vue.d.ts

@@ -19,6 +19,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     activation?: TabsActivation;
     lazy?: boolean;
     fill?: boolean;
+    stretch?: boolean;
+    inset?: boolean;
     panelFocusable?: boolean;
     modelValue?: TabItem["value"];
     key?: PropertyKey | undefined;
@@ -223,6 +225,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     activation?: TabsActivation;
     lazy?: boolean;
     fill?: boolean;
+    stretch?: boolean;
+    inset?: boolean;
     panelFocusable?: boolean;
     modelValue?: TabItem["value"];
     key?: PropertyKey | undefined;

package/dist/components/layout/types.d.ts

@@ -39,6 +39,7 @@ export interface AccordionItem {
     icon?: IconName;
     disabled?: boolean;
 }
+export type AccordionVariant = 'separated' | 'plain' | 'card' | 'outline';
 export type AccordionContentVariant = 'text' | 'neutral';
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export interface AppShellContext {