@xleddyl/443-components-vue 0.8.1 → 0.8.3

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

@@ -462,8 +462,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | CalendarRange | null | undefined) => any) | undefined;
 }>, {
-    invalid: boolean;
     size: FieldSize;
+    invalid: boolean;
     format: Intl.DateTimeFormatOptions;
     closeOnSelect: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -497,9 +497,9 @@ declare const __VLS_base: import("vue").DefineComponent<{
     onReject?: ((events: FileInvalidEvent[], detail: FileAddDetail) => any) | undefined;
 }>, {
     icon: IconName;
+    size: FieldSize;
     invalid: boolean;
     list: boolean;
-    size: FieldSize;
     acceptMode: FileInputAcceptMode;
     previews: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -230,13 +230,13 @@ declare const __VLS_export: import("vue").DefineComponent<{
     popovertarget?: string | undefined;
     popovertargetaction?: import("../../index.ts").PopoverTargetAction | undefined;
     autocomplete?: import("vue").InputAutoCompleteAttribute | undefined;
+    maxlength?: (string | number) | undefined;
+    multiple?: (boolean | "true" | "false") | undefined;
     accept?: string | undefined | undefined;
     alt?: string | undefined | undefined;
     capture?: boolean | "user" | "environment" | undefined | undefined;
     crossorigin?: string | undefined | undefined;
-    maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
-    multiple?: (boolean | "true" | "false") | undefined;
     src?: string | undefined | undefined;
     onCancel?: ((payload: Event) => void) | undefined;
 }, {
@@ -474,20 +474,20 @@ declare const __VLS_export: import("vue").DefineComponent<{
     popovertarget?: string | undefined;
     popovertargetaction?: import("../../index.ts").PopoverTargetAction | undefined;
     autocomplete?: import("vue").InputAutoCompleteAttribute | undefined;
+    maxlength?: (string | number) | undefined;
+    multiple?: (boolean | "true" | "false") | undefined;
     accept?: string | undefined | undefined;
     alt?: string | undefined | undefined;
     capture?: boolean | "user" | "environment" | undefined | undefined;
     crossorigin?: string | undefined | undefined;
-    maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
-    multiple?: (boolean | "true" | "false") | undefined;
     src?: string | undefined | undefined;
     onCancel?: ((payload: Event) => void) | undefined;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: number | null | undefined) => any) | undefined;
 }>, {
-    invalid: boolean;
     size: FieldSize;
+    invalid: boolean;
     step: number;
     align: "end" | "start";
     stepper: boolean;

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

@@ -142,6 +142,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     type?: string | undefined;
     width?: (string | number) | undefined;
     tabindex?: (string | number) | undefined;
+    transform?: (value: string) => string;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
     'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined;
@@ -240,17 +241,18 @@ declare const __VLS_export: import("vue").DefineComponent<{
     onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
+    maxlength?: (string | number) | undefined;
     clearable?: boolean;
     clearLabel?: string;
     noAutofill?: boolean;
+    counter?: boolean;
     onClear?: (() => any) | undefined;
+    multiple?: (boolean | "true" | "false") | undefined;
     accept?: string | undefined;
     alt?: string | undefined;
     capture?: boolean | "user" | "environment" | undefined;
     crossorigin?: string | undefined;
-    maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
-    multiple?: (boolean | "true" | "false") | undefined;
     src?: string | undefined;
     onCancel?: ((payload: Event) => void) | undefined;
     modelModifiers?: Partial<Record<"number" | "trim", true>>;
@@ -401,6 +403,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     type?: string | undefined;
     width?: (string | number) | undefined;
     tabindex?: (string | number) | undefined;
+    transform?: (value: string) => string;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
     'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined;
@@ -499,17 +502,18 @@ declare const __VLS_export: import("vue").DefineComponent<{
     onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
+    maxlength?: (string | number) | undefined;
     clearable?: boolean;
     clearLabel?: string;
     noAutofill?: boolean;
+    counter?: boolean;
     onClear?: (() => any) | undefined;
+    multiple?: (boolean | "true" | "false") | undefined;
     accept?: string | undefined;
     alt?: string | undefined;
     capture?: boolean | "user" | "environment" | undefined;
     crossorigin?: string | undefined;
-    maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
-    multiple?: (boolean | "true" | "false") | undefined;
     src?: string | undefined;
     onCancel?: ((payload: Event) => void) | undefined;
     modelModifiers?: Partial<Record<"number" | "trim", true>>;
@@ -517,9 +521,9 @@ declare const __VLS_export: import("vue").DefineComponent<{
     onGenerate?: ((password: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
 }>, {
+    size: FieldSize;
     minLength: number;
     invalid: boolean;
-    size: FieldSize;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -229,13 +229,13 @@ declare const __VLS_export: import("vue").DefineComponent<{
     formtarget?: string | undefined | undefined;
     popovertarget?: string | undefined;
     popovertargetaction?: import("../..").PopoverTargetAction | undefined;
+    maxlength?: (string | number) | undefined;
+    multiple?: (boolean | "true" | "false") | undefined;
     accept?: string | undefined | undefined;
     alt?: string | undefined | undefined;
     capture?: boolean | "user" | "environment" | undefined | undefined;
     crossorigin?: string | undefined | undefined;
-    maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
-    multiple?: (boolean | "true" | "false") | undefined;
     src?: string | undefined | undefined;
     onCancel?: ((payload: Event) => void) | undefined;
 }, {
@@ -474,13 +474,13 @@ declare const __VLS_export: import("vue").DefineComponent<{
     formtarget?: string | undefined | undefined;
     popovertarget?: string | undefined;
     popovertargetaction?: import("../..").PopoverTargetAction | undefined;
+    maxlength?: (string | number) | undefined;
+    multiple?: (boolean | "true" | "false") | undefined;
     accept?: string | undefined | undefined;
     alt?: string | undefined | undefined;
     capture?: boolean | "user" | "environment" | undefined | undefined;
     crossorigin?: string | undefined | undefined;
-    maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
-    multiple?: (boolean | "true" | "false") | undefined;
     src?: string | undefined | undefined;
     onCancel?: ((payload: Event) => void) | undefined;
 }> & Readonly<{
@@ -488,8 +488,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     onComplete?: ((value: string) => any) | undefined;
 }>, {
     length: number;
-    invalid: boolean;
     size: FieldSize;
+    invalid: boolean;
     mode: PinInputMode;
     autocomplete: string;
     maskChar: string;

package/dist/components/forms/Select.vue

@@ -41,6 +41,7 @@
                   v-for="option in entry.options"
                   :key="keyOf(option.value)"
                   :value="keyOf(option.value)"
+                  :data-k-option="indexOf(option)"
                   :disabled="option.disabled"
                   :selected="isSelected(option.value)"
                >
@@ -50,6 +51,7 @@
             <option
                v-else
                :value="keyOf(entry.value)"
+               :data-k-option="indexOf(entry)"
                :disabled="entry.disabled"
                :selected="isSelected(entry.value)"
             >
@@ -89,8 +91,12 @@ const control = useFieldControl({
 const flatOptions = computed(
   () => props.options.flatMap((entry) => isGroup(entry) ? entry.options : [entry])
 );
+const optionIndex = computed(
+  () => new Map(flatOptions.value.map((option, index) => [option, index]))
+);
+const hasEmptyOption = computed(() => flatOptions.value.some((option) => option.value === ""));
 const isEmpty = computed(
-  () => model.value === null || model.value === void 0 || model.value === ""
+  () => model.value === null || model.value === void 0 || model.value === "" && !hasEmptyOption.value
 );
 function isGroup(entry) {
   return "options" in entry && Array.isArray(entry.options);
@@ -101,8 +107,21 @@ function keyOf(value) {
 function isSelected(value) {
   return !isEmpty.value && keyOf(value) === keyOf(model.value);
 }
+function indexOf(option) {
+  return optionIndex.value.get(option);
+}
 function onChange(event) {
-  const raw = event.target.value;
+  const select = event.target;
+  const chosen = select.selectedOptions[0];
+  const index = chosen?.dataset.kOption;
+  if (index !== void 0) {
+    const match2 = flatOptions.value[Number(index)];
+    if (match2) {
+      model.value = match2.value;
+      return;
+    }
+  }
+  const raw = select.value;
   if (raw === "" && props.placeholder !== void 0) {
     model.value = null;
     return;

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

@@ -1,7 +1,7 @@
 import type { IconName } from '../../composables/useIcons';
 import type { FieldSize } from '../core/types';
 import type { SelectOption, SelectOptionGroup } from './types';
-declare const __VLS_export: <T extends string | number>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const __VLS_export: <T extends string | number | boolean>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<({
         options?: (SelectOption<T> | SelectOptionGroup<T>)[];
         placeholder?: string;
@@ -13,9 +13,9 @@ declare const __VLS_export: <T extends string | number>(__VLS_props: NonNullable
         class?: unknown;
         style?: unknown;
     } & {
-        modelValue?: T | string | null | undefined;
+        modelValue?: T | null | undefined;
     }) & {
-        "onUpdate:modelValue"?: ((value: string | T | null | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T | null | undefined) => any) | undefined;
     } & Partial<import("vue").SelectHTMLAttributes & import("vue").ReservedProps>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -27,7 +27,7 @@ declare const __VLS_export: <T extends string | number>(__VLS_props: NonNullable
     slots: {
         default?: (props: {}) => any;
     };
-    emit: (event: "update:modelValue", value: string | T | null | undefined) => void;
+    emit: (event: "update:modelValue", value: T | null | undefined) => void;
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

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

@@ -224,13 +224,13 @@ declare const __VLS_export: import("vue").DefineComponent<{
     popovertarget?: string | undefined;
     popovertargetaction?: import("../..").PopoverTargetAction | undefined;
     autocomplete?: import("vue").InputAutoCompleteAttribute | undefined;
+    maxlength?: (string | number) | undefined;
+    multiple?: (boolean | "true" | "false") | undefined;
     accept?: string | undefined | undefined;
     alt?: string | undefined | undefined;
     capture?: boolean | "user" | "environment" | undefined | undefined;
     crossorigin?: string | undefined | undefined;
-    maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
-    multiple?: (boolean | "true" | "false") | undefined;
     src?: string | undefined | undefined;
     onCancel?: ((payload: Event) => void) | undefined;
 }, {
@@ -463,23 +463,23 @@ declare const __VLS_export: import("vue").DefineComponent<{
     popovertarget?: string | undefined;
     popovertargetaction?: import("../..").PopoverTargetAction | undefined;
     autocomplete?: import("vue").InputAutoCompleteAttribute | undefined;
+    maxlength?: (string | number) | undefined;
+    multiple?: (boolean | "true" | "false") | undefined;
     accept?: string | undefined | undefined;
     alt?: string | undefined | undefined;
     capture?: boolean | "user" | "environment" | undefined | undefined;
     crossorigin?: string | undefined | undefined;
-    maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
-    multiple?: (boolean | "true" | "false") | undefined;
     src?: string | undefined | undefined;
     onCancel?: ((payload: Event) => void) | undefined;
 }> & Readonly<{
     onChange?: ((value: number) => any) | undefined;
     "onUpdate:modelValue"?: ((value: number | null | undefined) => any) | undefined;
 }>, {
+    size: FieldSize;
     min: number;
     max: number;
     invalid: boolean;
-    size: FieldSize;
     format: (value: number) => string;
     step: number;
     bubble: SliderBubble;

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

@@ -448,8 +448,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean | null | undefined) => any) | undefined;
 }>, {
-    invalid: boolean;
     size: FieldSize;
+    invalid: boolean;
     labelPosition: "end" | "start";
     nativeValue: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -132,6 +132,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     type?: string | undefined;
     width?: (string | number) | undefined;
     tabindex?: (string | number) | undefined;
+    transform?: (value: string) => string;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
     'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined;
@@ -230,16 +231,17 @@ declare const __VLS_export: import("vue").DefineComponent<{
     onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     autocomplete?: import("vue").InputAutoCompleteAttribute | undefined;
+    maxlength?: (string | number) | undefined;
     clearLabel?: string;
     noAutofill?: boolean;
+    counter?: boolean;
     onClear?: (() => any) | undefined;
+    multiple?: (boolean | "true" | "false") | undefined;
     accept?: string | undefined;
     alt?: string | undefined;
     capture?: boolean | "user" | "environment" | undefined;
     crossorigin?: string | undefined;
-    maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
-    multiple?: (boolean | "true" | "false") | undefined;
     src?: string | undefined;
     onCancel?: ((payload: Event) => void) | undefined;
     modelModifiers?: Partial<Record<"number" | "trim", true>>;
@@ -378,6 +380,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     type?: string | undefined;
     width?: (string | number) | undefined;
     tabindex?: (string | number) | undefined;
+    transform?: (value: string) => string;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
     'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined;
@@ -476,24 +479,25 @@ declare const __VLS_export: import("vue").DefineComponent<{
     onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     autocomplete?: import("vue").InputAutoCompleteAttribute | undefined;
+    maxlength?: (string | number) | undefined;
     clearLabel?: string;
     noAutofill?: boolean;
+    counter?: boolean;
     onClear?: (() => any) | undefined;
+    multiple?: (boolean | "true" | "false") | undefined;
     accept?: string | undefined;
     alt?: string | undefined;
     capture?: boolean | "user" | "environment" | undefined;
     crossorigin?: string | undefined;
-    maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
-    multiple?: (boolean | "true" | "false") | undefined;
     src?: string | undefined;
     onCancel?: ((payload: Event) => void) | undefined;
     modelModifiers?: Partial<Record<"number" | "trim", true>>;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
 }>, {
-    invalid: boolean;
     size: FieldSize;
+    invalid: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/layout/AppShell.vue

@@ -7,7 +7,8 @@
   'is-collapsed': collapsed,
   'is-nav-open': open,
   'is-mobile': mobile,
-  'is-named': viewTransition
+  'is-named': viewTransition,
+  'is-fill': fill
 }"
       @keydown.esc="onEscape"
    >
@@ -61,7 +62,7 @@
             <slot name="topbar" :open-nav="openNav" :mobile="mobile" :collapsed="collapsed" />
          </header>
          <main :id="mainId" class="k-shell-main" tabindex="-1">
-            <div class="k-shell-content" :class="{ 'is-fluid': fluid }">
+            <div class="k-shell-content" :class="{ 'is-fluid': fluid, 'is-fill': fill }">
                <slot />
             </div>
          </main>
@@ -96,6 +97,7 @@ const props = defineProps({
   closeLabel: { type: String, required: false },
   skipLabel: { type: String, required: false },
   fluid: { type: Boolean, required: false },
+  fill: { type: Boolean, required: false },
   topbar: { type: Boolean, required: false, default: void 0 },
   storageKey: { type: [String, Boolean], required: false },
   shortcut: { type: [String, Boolean], required: false, default: false },

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

@@ -32,6 +32,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     closeLabel?: string;
     skipLabel?: string;
     fluid?: boolean;
+    fill?: boolean;
     topbar?: boolean;
     storageKey?: string | false;
     shortcut?: string | false;
@@ -245,6 +246,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     closeLabel?: string;
     skipLabel?: string;
     fluid?: boolean;
+    fill?: boolean;
     topbar?: boolean;
     storageKey?: string | false;
     shortcut?: string | false;

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

@@ -463,8 +463,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     selected: boolean;
     variant: CardVariant;
     as: string;
-    level: HeadingLevel;
     padding: CardPadding;
+    level: HeadingLevel;
     animated: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -406,8 +406,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
 }> & Readonly<{
     onCopy?: ((success: boolean) => any) | undefined;
 }>, {
-    tone: Tone;
     size: ButtonSize;
+    tone: Tone;
     variant: ButtonVariant;
     resetAfter: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/layout/PageHeader.vue

@@ -1,5 +1,11 @@
 <template>
-   <div class="k-page-header" :class="{ 'is-bordered': bordered }">
+   <div
+      class="k-page-header"
+      :class="[
+  `k-page-header-align-${align}`,
+  { 'is-bordered': bordered, 'is-truncated': truncate }
+]"
+   >
       <div class="k-page-header-heading">
          <slot name="breadcrumbs">
             <Breadcrumbs
@@ -18,7 +24,11 @@
             </span>
             <div class="k-page-header-text">
                <div class="k-page-header-title-line">
-                  <component :is="`h${level}`" class="k-page-header-title">
+                  <component
+                     :is="`h${level}`"
+                     class="k-page-header-title"
+                     :title="truncate ? title : void 0"
+                  >
                      <slot name="title">{{ title }}</slot>
                   </component>
                   <slot name="badge" />
@@ -48,6 +58,8 @@ defineProps({
   breadcrumbs: { type: Array, required: false },
   breadcrumbsAncestors: { type: Boolean, required: false },
   level: { type: Number, required: false, default: 1 },
-  bordered: { type: Boolean, required: false }
+  bordered: { type: Boolean, required: false },
+  align: { type: String, required: false, default: "end" },
+  truncate: { type: Boolean, required: false }
 });
 </script>

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

@@ -30,6 +30,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     breadcrumbsAncestors?: boolean;
     level?: HeadingLevel;
     bordered?: boolean;
+    align?: "start" | "center" | "end";
+    truncate?: boolean;
     innerHTML?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     style?: import("vue").StyleValue;
@@ -229,6 +231,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     breadcrumbsAncestors?: boolean;
     level?: HeadingLevel;
     bordered?: boolean;
+    align?: "start" | "center" | "end";
+    truncate?: boolean;
     innerHTML?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     style?: import("vue").StyleValue;
@@ -421,6 +425,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
 }> & Readonly<{}>, {
+    align: "center" | "end" | "start";
     level: HeadingLevel;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/layout/Separator.vue

@@ -1,12 +1,20 @@
 <template>
    <div
       class="k-separator"
-      :class="[`k-separator-${orientation}`, { 'has-label': Boolean(label || $slots.default) }]"
+      :class="[`k-separator-${orientation}`, { 'has-label': hasContent }]"
       :role="plain ? 'none' : 'separator'"
       :aria-orientation="!plain && orientation === 'vertical' ? 'vertical' : void 0"
    >
-      <span v-if="label || $slots.default" class="k-separator-label">
-         <slot>{{ label }}</slot>
+      <span v-if="hasText" class="k-separator-text">
+         <span v-if="label || $slots.default" class="k-separator-label">
+            <slot>{{ label }}</slot>
+         </span>
+         <span v-if="description || $slots.description" class="k-separator-description">
+            <slot name="description">{{ description }}</slot>
+         </span>
+      </span>
+      <span v-if="$slots.actions" class="k-separator-actions">
+         <slot name="actions" />
       </span>
    </div>
 </template>
@@ -16,8 +24,13 @@ import { computed, useSlots } from "vue";
 const props = defineProps({
   orientation: { type: String, required: false, default: "horizontal" },
   label: { type: String, required: false },
+  description: { type: String, required: false },
   decorative: { type: Boolean, required: false }
 });
 const slots = useSlots();
-const plain = computed(() => props.decorative || Boolean(props.label || slots.default));
+const hasText = computed(
+  () => Boolean(props.label || slots.default || props.description || slots.description)
+);
+const hasContent = computed(() => Boolean(hasText.value || slots.actions));
+const plain = computed(() => props.decorative || hasContent.value);
 </script>

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

@@ -1,10 +1,15 @@
-declare var __VLS_1: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
+} & {
+    description?: (props: typeof __VLS_3) => any;
+} & {
+    actions?: (props: typeof __VLS_5) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{
     orientation?: "horizontal" | "vertical";
     label?: string;
+    description?: string;
     decorative?: boolean;
     innerHTML?: string | undefined | undefined;
     class?: import("vue").ClassValue;
@@ -201,6 +206,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     orientation?: "horizontal" | "vertical";
     label?: string;
+    description?: string;
     decorative?: boolean;
     innerHTML?: string | undefined | undefined;
     class?: import("vue").ClassValue;

package/dist/components/layout/Tabs.vue

@@ -41,6 +41,14 @@
                >
                <span v-if="item.badgeLabel" class="k-visually-hidden">{{ item.badgeLabel }}</span>
             </template>
+            <template v-if="item.dot">
+               <span
+                  class="k-tab-dot"
+                  :class="`k-tab-dot-${item.dotTone ?? 'danger'}`"
+                  aria-hidden="true"
+               />
+               <span class="k-visually-hidden">{{ item.dotLabel ?? t("tabs.dot") }}</span>
+            </template>
          </button>
          <span class="k-tabs-indicator" aria-hidden="true" />
       </div>
@@ -76,6 +84,7 @@
 import { computed, nextTick, onMounted, ref, useId, useTemplateRef, warn, watch } from "vue";
 import { useResizeObserver } from "../../internal/core/resize";
 import Icon from "../core/Icon.vue";
+import { useLocale } from "../../composables/useLocale";
 import { rovingIndex } from "../../internal/core/roving";
 const props = defineProps({
   items: { type: Array, required: true },
@@ -89,6 +98,7 @@ const props = defineProps({
   inset: { type: Boolean, required: false },
   panelFocusable: { type: Boolean, required: false, default: true }
 });
+const { t } = useLocale();
 const slots = defineSlots();
 const model = defineModel({ type: [String, Number] });
 const baseId = useId();

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

@@ -27,6 +27,9 @@ export interface TabItem {
     badge?: string | number;
     badgeTone?: Tone;
     badgeLabel?: string;
+    dot?: boolean;
+    dotTone?: Tone;
+    dotLabel?: string;
     disabled?: boolean;
 }
 export type TabsVariant = 'segmented' | 'underline';