@xleddyl/443-components-vue 0.2.2 → 0.3.0

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

@@ -100,7 +100,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -334,7 +334,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;

package/dist/components/forms/SegmentedControl.vue

@@ -8,7 +8,8 @@
       :aria-describedby="joinIds($attrs['aria-describedby'], control.describedBy.value)"
       :aria-invalid="control.invalid.value ? 'true' : void 0"
       :aria-disabled="control.disabled.value ? 'true' : void 0"
-      :aria-readonly="readonly ? 'true' : void 0"
+      :aria-readonly="props.readonly ? 'true' : void 0"
+      :aria-required="control.required.value ? 'true' : void 0"
       role="radiogroup"
       class="k-segmented"
       :class="[
@@ -30,24 +31,40 @@
          type="button"
          role="radio"
          class="k-segmented-item"
-         :class="{ 'is-active': index === activeIndex, 'is-icon': option.icon && iconOnly }"
+         :class="{
+  'is-active': index === activeIndex,
+  'is-icon': option.icon && iconOnly,
+  'is-muted': option.muted
+}"
          :aria-checked="index === activeIndex ? 'true' : 'false'"
          :aria-label="iconOnly ? option.label : void 0"
-         :title="iconOnly ? option.label : void 0"
+         :aria-describedby="option.title && !iconOnly ? titleId(index) : void 0"
+         :title="option.title ?? (iconOnly ? option.label : void 0)"
          :tabindex="index === focusIndex ? 0 : -1"
          :disabled="control.disabled.value || option.disabled || void 0"
          @click="select(index)"
          @keydown="onKeydown($event, index)"
       >
-         <Icon v-if="option.icon" :name="option.icon" />
-         <span v-if="!iconOnly" class="k-segmented-label">{{ option.label }}</span>
+         <slot
+            name="option"
+            :option="option"
+            :index="index"
+            :active="index === activeIndex"
+            :icon-only="iconOnly"
+         >
+            <Icon v-if="option.icon" :name="option.icon" />
+            <span v-if="!iconOnly" class="k-segmented-label">{{ option.label }}</span>
+         </slot>
+         <span v-if="option.title && !iconOnly" :id="titleId(index)" class="k-visually-hidden">{{
+            option.title
+         }}</span>
       </button>
       <input v-if="formName" type="hidden" :name="formName" :value="hiddenValue" />
    </div>
 </template>
 
 <script setup>
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from "vue";
 import { useFieldControl } from "../../composables/useField";
 import { joinIds } from "../../internal/forms/control";
 import Icon from "../core/Icon.vue";
@@ -61,9 +78,12 @@ const props = defineProps({
   iconOnly: { type: Boolean, required: false },
   invalid: { type: Boolean, required: false, default: void 0 },
   disabled: { type: Boolean, required: false },
-  readonly: { type: Boolean, required: false }
+  readonly: { type: Boolean, required: false },
+  required: { type: null, required: false }
 });
+defineSlots();
 const model = defineModel({ type: null });
+const baseId = useId();
 const rootRef = ref(null);
 const itemRefs = [];
 const ready = ref(false);
@@ -71,8 +91,12 @@ const indicator = ref({ x: 0, width: 0 });
 let observer;
 const control = useFieldControl({
   invalid: () => props.invalid,
-  disabled: () => props.disabled
+  disabled: () => props.disabled,
+  required: () => props.required
 });
+function titleId(index) {
+  return `${baseId}-title-${index}`;
+}
 const activeIndex = computed(
   () => props.options.findIndex((option) => option.value === model.value)
 );

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

@@ -1,8 +1,8 @@
 import type { FieldSize } from '../core/types';
-import type { ChoiceOption, ChoiceValue } from './types';
-declare const __VLS_export: <T extends ChoiceValue>(__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<{
+import type { ChoiceValue, SegmentedOption } from './types';
+declare const __VLS_export: <T extends ChoiceValue, R extends boolean = false>(__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: ChoiceOption<T>[];
+        options: SegmentedOption<T>[];
         name?: string;
         size?: FieldSize;
         block?: boolean;
@@ -10,17 +10,25 @@ declare const __VLS_export: <T extends ChoiceValue>(__VLS_props: NonNullable<Awa
         invalid?: boolean;
         disabled?: boolean;
         readonly?: boolean;
+        required?: R;
     } & {
-        modelValue?: T | null;
+        modelValue?: R extends true ? T : T | null;
     }) & {
-        "onUpdate:modelValue"?: ((value: T | null | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: R extends true ? T : T | null | undefined) => any) | undefined;
     } & Partial<import("vue").HTMLAttributes & import("vue").ReservedProps>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: {};
-    emit: (event: "update:modelValue", value: T | null | undefined) => void;
+    slots: {
+        option?: (props: {
+            option: SegmentedOption<T>;
+            index: number;
+            active: boolean;
+            iconOnly: boolean;
+        }) => unknown;
+    };
+    emit: (event: "update:modelValue", value: R extends true ? T : T | null | undefined) => void;
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

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

@@ -25,8 +25,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
     name?: string | undefined | undefined;
-    type?: import("vue").InputTypeHTMLAttribute | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -128,6 +126,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     height?: (string | number) | undefined;
     id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
+    type?: import("vue").InputTypeHTMLAttribute | undefined;
     width?: (string | number) | undefined;
     tabindex?: (string | number) | undefined;
     'aria-activedescendant'?: string | undefined | undefined;
@@ -139,7 +138,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -176,6 +175,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;
@@ -263,8 +263,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
     name?: string | undefined | undefined;
-    type?: import("vue").InputTypeHTMLAttribute | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -366,6 +364,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     height?: (string | number) | undefined;
     id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
+    type?: import("vue").InputTypeHTMLAttribute | undefined;
     width?: (string | number) | undefined;
     tabindex?: (string | number) | undefined;
     'aria-activedescendant'?: string | undefined | undefined;
@@ -377,7 +376,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -414,6 +413,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;

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

@@ -29,8 +29,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     title?: string | undefined | undefined;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
-    type?: "submit" | "reset" | "button" | undefined | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -132,6 +130,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     color?: string | undefined | undefined;
     id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
+    type?: "submit" | "reset" | "button" | undefined | undefined;
     tabindex?: (string | number) | undefined;
     'aria-activedescendant'?: string | undefined | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -142,7 +141,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -179,6 +178,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;
@@ -251,8 +251,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     title?: string | undefined | undefined;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
-    type?: "submit" | "reset" | "button" | undefined | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -354,6 +352,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     color?: string | undefined | undefined;
     id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
+    type?: "submit" | "reset" | "button" | undefined | undefined;
     tabindex?: (string | number) | undefined;
     'aria-activedescendant'?: string | undefined | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -364,7 +363,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -401,6 +400,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;

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

@@ -23,8 +23,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     name?: string | undefined;
-    type?: string | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     class?: unknown;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -128,6 +126,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     height?: (string | number) | undefined;
     id?: string | undefined;
     lang?: string | undefined;
+    type?: string | undefined;
     width?: (string | number) | undefined;
     tabindex?: (string | number) | undefined;
     'aria-activedescendant'?: string | undefined;
@@ -176,6 +175,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined;
@@ -221,6 +221,12 @@ declare const __VLS_export: import("vue").DefineComponent<{
     formtarget?: string | undefined;
     popovertarget?: string;
     popovertargetaction?: import("../../index.ts").PopoverTargetAction;
+    onVnodeBeforeMount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
+    onVnodeMounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
+    onVnodeBeforeUpdate?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
+    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;
     autocomplete?: import("vue").InputAutoCompleteAttribute | undefined;
     clearLabel?: string;
     noAutofill?: boolean;
@@ -237,12 +243,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     src?: string | undefined;
     onCancel?: ((payload: Event) => void) | undefined;
     modelModifiers?: Partial<Record<"number" | "trim", true>>;
-    onVnodeBeforeMount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
-    onVnodeMounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
-    onVnodeBeforeUpdate?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
-    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;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | null | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<{
@@ -269,8 +269,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     name?: string | undefined;
-    type?: string | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     class?: unknown;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -374,6 +372,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     height?: (string | number) | undefined;
     id?: string | undefined;
     lang?: string | undefined;
+    type?: string | undefined;
     width?: (string | number) | undefined;
     tabindex?: (string | number) | undefined;
     'aria-activedescendant'?: string | undefined;
@@ -422,6 +421,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined;
@@ -467,6 +467,12 @@ declare const __VLS_export: import("vue").DefineComponent<{
     formtarget?: string | undefined;
     popovertarget?: string;
     popovertargetaction?: import("../../index.ts").PopoverTargetAction;
+    onVnodeBeforeMount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
+    onVnodeMounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
+    onVnodeBeforeUpdate?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
+    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;
     autocomplete?: import("vue").InputAutoCompleteAttribute | undefined;
     clearLabel?: string;
     noAutofill?: boolean;
@@ -483,12 +489,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     src?: string | undefined;
     onCancel?: ((payload: Event) => void) | undefined;
     modelModifiers?: Partial<Record<"number" | "trim", true>>;
-    onVnodeBeforeMount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
-    onVnodeMounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
-    onVnodeBeforeUpdate?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
-    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;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
 }>, {

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

@@ -8,6 +8,10 @@ export interface ChoiceOption<T = ChoiceValue> {
     disabled?: boolean;
     icon?: IconName;
 }
+export interface SegmentedOption<T = ChoiceValue> extends ChoiceOption<T> {
+    title?: string;
+    muted?: boolean;
+}
 export interface SelectOption<T = string | number> {
     label: string;
     value: T;
@@ -39,6 +43,16 @@ export interface FileInvalidEvent {
     file: File;
     limit: string | number;
 }
+export interface FileInputEntry {
+    file: File;
+    path: string;
+}
+export interface FileAddDetail {
+    entries: FileInputEntry[];
+    source: 'browse' | 'drop';
+    event: Event;
+    dataTransfer: DataTransfer | null;
+}
 export type PinInputMode = 'numeric' | 'alphanumeric' | 'alphabetic';
 export type RadioGroupVariant = 'default' | 'card';
 export type SliderBubble = boolean | 'always';

package/dist/components/layout/Accordion.vue

@@ -1,5 +1,8 @@
 <template>
-   <div class="k-accordion" :class="`k-accordion-${variant}`">
+   <div
+      class="k-accordion"
+      :class="[`k-accordion-${variant}`, { 'is-neutral': contentVariant === 'neutral' }]"
+   >
       <div
          v-for="(item, index) in items"
          :key="valueOf(item, index)"
@@ -13,15 +16,25 @@
                class="k-accordion-trigger"
                :aria-expanded="isOpen(item, index) ? 'true' : 'false'"
                :aria-controls="panelId(index)"
+               :aria-labelledby="item.description ? titleId(index) : void 0"
+               :aria-describedby="item.description ? descriptionId(index) : void 0"
                :aria-disabled="lockedOpen(item, index) ? 'true' : void 0"
                :disabled="item.disabled"
                @click="toggle(item, index)"
             >
                <Icon v-if="item.icon" :name="item.icon" class="k-accordion-icon" />
                <span class="k-accordion-title">
-                  <slot name="title" :item="item" :open="isOpen(item, index)">{{
-                     item.title
-                  }}</slot>
+                  <span :id="titleId(index)" class="k-accordion-title-text">
+                     <slot name="title" :item="item" :open="isOpen(item, index)">{{
+                        item.title
+                     }}</slot>
+                  </span>
+                  <span
+                     v-if="item.description"
+                     :id="descriptionId(index)"
+                     class="k-accordion-description"
+                     >{{ item.description }}</span
+                  >
                </span>
                <Icon name="chevron-down" class="k-accordion-chevron" />
             </button>
@@ -52,7 +65,8 @@ const props = defineProps({
   multiple: { type: Boolean, required: false },
   collapsible: { type: Boolean, required: false, default: true },
   level: { type: Number, required: false, default: 3 },
-  variant: { type: String, required: false, default: "card" }
+  variant: { type: String, required: false, default: "card" },
+  contentVariant: { type: String, required: false, default: "text" }
 });
 const model = defineModel({ type: [String, Number, Array, null], ...{ default: null } });
 const baseId = useId();
@@ -66,6 +80,12 @@ function valueOf(item, index) {
 function triggerId(index) {
   return `${baseId}-trigger-${index}`;
 }
+function titleId(index) {
+  return `${baseId}-title-${index}`;
+}
+function descriptionId(index) {
+  return `${baseId}-description-${index}`;
+}
 function panelId(index) {
   return `${baseId}-panel-${index}`;
 }

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

@@ -1,4 +1,4 @@
-import type { AccordionItem, HeadingLevel } from './types';
+import type { AccordionContentVariant, AccordionItem, HeadingLevel } from './types';
 type Value = string | number;
 declare var __VLS_13: {
     item: AccordionItem;
@@ -19,6 +19,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     collapsible?: boolean;
     level?: HeadingLevel;
     variant?: "separated" | "plain" | "card";
+    contentVariant?: AccordionContentVariant;
     modelValue?: Value | Value[] | null;
     key?: PropertyKey | undefined;
     prefix?: string | undefined | undefined;
@@ -26,7 +27,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -139,7 +139,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -176,6 +176,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;
@@ -220,6 +221,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     collapsible?: boolean;
     level?: HeadingLevel;
     variant?: "separated" | "plain" | "card";
+    contentVariant?: AccordionContentVariant;
     modelValue?: Value | Value[] | null;
     key?: PropertyKey | undefined;
     prefix?: string | undefined | undefined;
@@ -227,7 +229,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -340,7 +341,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -377,6 +378,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;
@@ -419,6 +421,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     variant: "plain" | "card" | "separated";
     level: HeadingLevel;
     collapsible: boolean;
+    contentVariant: AccordionContentVariant;
 }, {}, {}, {}, 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/layout/AppShell.vue.d.ts

@@ -43,7 +43,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -156,7 +155,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -193,6 +192,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;
@@ -255,7 +255,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -368,7 +367,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -405,6 +404,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;
@@ -446,8 +446,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
 }>, {
     variant: AppShellVariant;
-    topbar: boolean;
     shortcut: string | false;
+    topbar: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;