@xleddyl/443-components-vue 0.8.0 → 0.8.2

package/dist/components/forms/Calendar.vue

@@ -1,7 +1,12 @@
 <template>
    <div
       class="k-calendar"
-      :class="{ 'is-range': range, 'is-disabled': disabled, 'is-readonly': readonly }"
+      :class="{
+  'is-range': range,
+  'is-disabled': disabled,
+  'is-readonly': readonly,
+  'has-day-text': Boolean(dayText || $slots.day)
+}"
    >
       <div class="k-calendar-header">
          <button
@@ -77,7 +82,22 @@
                   @mouseenter="hoverDate = day.iso"
                   @focus="focusedDate = day.iso"
                >
-                  <span class="k-calendar-day-number">{{ day.number }}</span>
+                  <span class="k-calendar-day-number">
+                     <slot
+                        name="day"
+                        :date="day.iso"
+                        :number="day.number"
+                        :text="day.text"
+                        :selected="day.selected"
+                        :unavailable="day.unavailable"
+                        :in-month="day.inMonth"
+                     >
+                        {{ day.number }}
+                        <span v-if="day.text" class="k-calendar-day-text" aria-hidden="true">{{
+                           day.text
+                        }}</span>
+                     </slot>
+                  </span>
                </td>
             </tr>
          </tbody>
@@ -118,7 +138,8 @@ const props = defineProps({
   nextLabel: { type: String, required: false },
   disabled: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },
-  level: { type: Number, required: false, default: 2 }
+  level: { type: Number, required: false, default: 2 },
+  dayText: { type: Function, required: false }
 });
 const { locale: appLocale, t } = useLocale();
 const resolvedLocale = computed(() => props.locale ?? appLocale.value.code);
@@ -176,10 +197,12 @@ function dayLabel(iso, start, end) {
     month: "long",
     day: "numeric"
   });
-  if (!props.range || !start) return label;
-  if (iso === start) return `${label}, ${t("calendar.rangeStart")}`;
-  if (iso === end) return `${label}, ${t("calendar.rangeEnd")}`;
-  return label;
+  const extra = props.dayText?.(iso);
+  const described = extra ? `${label}, ${extra}` : label;
+  if (!props.range || !start) return described;
+  if (iso === start) return `${described}, ${t("calendar.rangeStart")}`;
+  if (iso === end) return `${described}, ${t("calendar.rangeEnd")}`;
+  return described;
 }
 const weeks = computed(() => {
   const currentMonth = monthKey(focusedDate.value);
@@ -195,6 +218,7 @@ const weeks = computed(() => {
       iso,
       inMonth,
       number: Number(iso.slice(8)),
+      text: props.dayText?.(iso),
       label: dayLabel(iso, start, end),
       unavailable: isUnavailable(iso),
       selected: selected || Boolean(props.range && start && end && iso > start && iso < end),

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

@@ -1,7 +1,16 @@
 import type { CalendarDateDisabled, CalendarRange } from './types';
-declare var __VLS_25: {};
+declare var __VLS_25: {
+    date: string;
+    number: number;
+    text: string | undefined;
+    selected: boolean;
+    unavailable: boolean;
+    inMonth: boolean;
+}, __VLS_27: {};
 type __VLS_Slots = {} & {
-    footer?: (props: typeof __VLS_25) => any;
+    day?: (props: typeof __VLS_25) => any;
+} & {
+    footer?: (props: typeof __VLS_27) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{
     range?: boolean;
@@ -15,6 +24,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     disabled?: boolean;
     readonly?: boolean;
     level?: 1 | 2 | 3 | 4 | 5 | 6;
+    dayText?: (iso: string) => string | undefined;
     modelValue?: string | CalendarRange | null | undefined;
     month?: string | undefined;
     key?: PropertyKey | undefined;
@@ -227,6 +237,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     disabled?: boolean;
     readonly?: boolean;
     level?: 1 | 2 | 3 | 4 | 5 | 6;
+    dayText?: (iso: string) => string | undefined;
     modelValue?: string | CalendarRange | null | undefined;
     month?: string | undefined;
     key?: PropertyKey | undefined;

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

@@ -476,10 +476,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
 }>, {
+    size: FieldSize;
     invalid: boolean;
     swatches: ColorSwatch[];
     placeholder: string;
-    size: FieldSize;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -490,9 +490,9 @@ declare const __VLS_export: import("vue").DefineComponent<{
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
 }>, {
-    invalid: boolean;
     size: FieldSize;
-    type: "date" | "datetime-local" | "month" | "week";
+    invalid: boolean;
+    type: "month" | "week" | "date" | "datetime-local";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -486,8 +486,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
 }> & 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

@@ -517,9 +517,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

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

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

@@ -476,10 +476,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
     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

@@ -492,8 +492,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
 }> & 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/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';

package/dist/components/overlays/ConfirmDialog.vue.d.ts

@@ -21,11 +21,11 @@ declare const __VLS_base: import("vue").DefineComponent<{
     key?: PropertyKey | undefined;
     loading?: boolean;
     prefix?: "k-modal" | "k-drawer" | undefined;
+    size?: import("./types.ts").ModalSize;
     label?: string;
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
-    size?: import("./types.ts").ModalSize;
     dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
@@ -129,6 +129,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     color?: string | undefined;
     id?: string | undefined;
     lang?: string | undefined;
+    width?: string;
     tabindex?: (string | number) | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -228,6 +229,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     hideClose?: boolean;
     beforeClose?: import("./types.ts").DialogBeforeClose;
     closedby?: import("../../index.ts").DialogClosedBy;
+    minHeight?: string;
 }, {
     confirm: typeof confirm;
     cancel: typeof cancel;
@@ -249,11 +251,11 @@ declare const __VLS_base: import("vue").DefineComponent<{
     key?: PropertyKey | undefined;
     loading?: boolean;
     prefix?: "k-modal" | "k-drawer" | undefined;
+    size?: import("./types.ts").ModalSize;
     label?: string;
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
-    size?: import("./types.ts").ModalSize;
     dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
@@ -357,6 +359,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     color?: string | undefined;
     id?: string | undefined;
     lang?: string | undefined;
+    width?: string;
     tabindex?: (string | number) | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -456,6 +459,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     hideClose?: boolean;
     beforeClose?: import("./types.ts").DialogBeforeClose;
     closedby?: import("../../index.ts").DialogClosedBy;
+    minHeight?: string;
 }> & Readonly<{
     onCancel?: (() => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;

package/dist/components/overlays/ConfirmHost.vue.d.ts

@@ -11,11 +11,11 @@ declare const __VLS_export: import("vue").DefineComponent<Partial<NonNullable<{
     readonly key?: PropertyKey | undefined;
     readonly loading?: boolean | undefined;
     readonly prefix?: "k-modal" | "k-drawer" | undefined;
+    readonly size?: import("./types.ts").ModalSize | undefined;
     readonly label?: string | undefined;
     readonly style?: import("vue").StyleValue;
     readonly results?: (string | number) | undefined;
     readonly placeholder?: string | undefined | undefined;
-    readonly size?: import("./types.ts").ModalSize | undefined;
     readonly dir?: string | undefined | undefined;
     readonly class?: import("vue").ClassValue;
     readonly role?: string | undefined | undefined;
@@ -119,6 +119,7 @@ declare const __VLS_export: import("vue").DefineComponent<Partial<NonNullable<{
     readonly color?: string | undefined | undefined;
     readonly id?: string | undefined | undefined;
     readonly lang?: string | undefined | undefined;
+    readonly width?: string | undefined;
     readonly tabindex?: (string | number) | undefined;
     readonly 'aria-activedescendant'?: string | undefined | undefined;
     readonly 'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -218,6 +219,7 @@ declare const __VLS_export: import("vue").DefineComponent<Partial<NonNullable<{
     readonly hideClose?: boolean | undefined;
     readonly beforeClose?: import("./types.ts").DialogBeforeClose | undefined;
     readonly closedby?: import("../../index.ts").DialogClosedBy | undefined;
+    readonly minHeight?: string | undefined;
     readonly onCancel?: (() => any) | undefined;
     readonly "onUpdate:open"?: ((value: boolean) => any) | undefined;
     readonly onAfterLeave?: (() => any) | undefined;
@@ -235,11 +237,11 @@ declare const __VLS_export: import("vue").DefineComponent<Partial<NonNullable<{
     readonly key?: PropertyKey | undefined;
     readonly loading?: boolean | undefined;
     readonly prefix?: "k-modal" | "k-drawer" | undefined;
+    readonly size?: import("./types.ts").ModalSize | undefined;
     readonly label?: string | undefined;
     readonly style?: import("vue").StyleValue;
     readonly results?: (string | number) | undefined;
     readonly placeholder?: string | undefined | undefined;
-    readonly size?: import("./types.ts").ModalSize | undefined;
     readonly dir?: string | undefined | undefined;
     readonly class?: import("vue").ClassValue;
     readonly role?: string | undefined | undefined;
@@ -343,6 +345,7 @@ declare const __VLS_export: import("vue").DefineComponent<Partial<NonNullable<{
     readonly color?: string | undefined | undefined;
     readonly id?: string | undefined | undefined;
     readonly lang?: string | undefined | undefined;
+    readonly width?: string | undefined;
     readonly tabindex?: (string | number) | undefined;
     readonly 'aria-activedescendant'?: string | undefined | undefined;
     readonly 'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -442,6 +445,7 @@ declare const __VLS_export: import("vue").DefineComponent<Partial<NonNullable<{
     readonly hideClose?: boolean | undefined;
     readonly beforeClose?: import("./types.ts").DialogBeforeClose | undefined;
     readonly closedby?: import("../../index.ts").DialogClosedBy | undefined;
+    readonly minHeight?: string | undefined;
     readonly onCancel?: (() => any) | undefined;
     readonly "onUpdate:open"?: ((value: boolean) => any) | undefined;
     readonly onAfterLeave?: (() => any) | undefined;

package/dist/components/overlays/ContextMenu.vue.d.ts

@@ -213,6 +213,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     level?: number;
     labelledby?: string;
     manualPositioning?: boolean;
+    matchWidth?: boolean;
     onOpenChange?: ((open: boolean) => any) | undefined;
 }, {
     openAt: (x: number, y: number) => void;
@@ -428,6 +429,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     level?: number;
     labelledby?: string;
     manualPositioning?: boolean;
+    matchWidth?: boolean;
     onOpenChange?: ((open: boolean) => any) | undefined;
 }> & Readonly<{
     onSelect?: ((item: MenuItem, event: Event) => any) | undefined;

package/dist/components/overlays/DropdownMenu.vue

@@ -11,6 +11,8 @@
       :offset="offset"
       :label="label"
       :labelledby="label ? void 0 : triggerId"
+      :match-width="matchTriggerWidth"
+      :style="minWidth ? { minWidth } : void 0"
       @open-change="isOpen = $event"
       @select="(item, event) => emit('select', item, event)"
    />
@@ -27,7 +29,9 @@ const props = defineProps({
   items: { type: Array, required: true },
   placement: { type: null, required: false, default: "bottom-start" },
   offset: { type: Number, required: false, default: 6 },
-  label: { type: String, required: false }
+  label: { type: String, required: false },
+  matchTriggerWidth: { type: Boolean, required: false },
+  minWidth: { type: String, required: false }
 });
 const emit = defineEmits(["select"]);
 const open = defineModel("open", { type: Boolean, ...{ default: false } });

package/dist/components/overlays/DropdownMenu.vue.d.ts

@@ -10,6 +10,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     placement?: OverlayPlacement;
     offset?: number;
     label?: string;
+    matchTriggerWidth?: boolean;
+    minWidth?: string;
     open?: boolean;
     key?: PropertyKey | undefined;
     prefix?: string | undefined;
@@ -212,6 +214,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     level?: number;
     labelledby?: string;
     manualPositioning?: boolean;
+    matchWidth?: boolean;
     onOpenChange?: ((open: boolean) => any) | undefined;
 }, {
     show: () => void | undefined;
@@ -224,6 +227,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     placement?: OverlayPlacement;
     offset?: number;
     label?: string;
+    matchTriggerWidth?: boolean;
+    minWidth?: string;
     open?: boolean;
     key?: PropertyKey | undefined;
     prefix?: string | undefined;
@@ -426,6 +431,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     level?: number;
     labelledby?: string;
     manualPositioning?: boolean;
+    matchWidth?: boolean;
     onOpenChange?: ((open: boolean) => any) | undefined;
 }> & Readonly<{
     onSelect?: ((item: MenuItem, event: Event) => any) | undefined;