@xleddyl/443-components-vue 0.4.0 → 0.6.0

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

@@ -29,11 +29,14 @@ declare const __VLS_export: import("vue").DefineComponent<{
     min?: (string | number) | undefined;
     max?: (string | number) | undefined;
     pattern?: string | undefined;
+    checked?: (boolean | "true" | "false") | any[] | Set<any> | undefined;
+    indeterminate?: boolean | undefined;
     title?: string | undefined;
     list?: string | undefined;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     name?: string | undefined;
+    dir?: string | undefined;
     role?: string | undefined;
     'aria-label'?: string | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -192,7 +195,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     accesskey?: string | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined;
-    dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     enterKeyHint?: import("vue").HTMLAttributes["enterkeyhint"];
@@ -245,9 +247,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     accept?: string | undefined;
     alt?: string | undefined;
     capture?: boolean | "user" | "environment" | undefined;
-    checked?: (boolean | "true" | "false") | any[] | Set<any> | undefined;
     crossorigin?: string | undefined;
-    indeterminate?: boolean | undefined;
     maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
     multiple?: (boolean | "true" | "false") | undefined;
@@ -288,11 +288,14 @@ declare const __VLS_export: import("vue").DefineComponent<{
     min?: (string | number) | undefined;
     max?: (string | number) | undefined;
     pattern?: string | undefined;
+    checked?: (boolean | "true" | "false") | any[] | Set<any> | undefined;
+    indeterminate?: boolean | undefined;
     title?: string | undefined;
     list?: string | undefined;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     name?: string | undefined;
+    dir?: string | undefined;
     role?: string | undefined;
     'aria-label'?: string | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -451,7 +454,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     accesskey?: string | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined;
-    dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     enterKeyHint?: import("vue").HTMLAttributes["enterkeyhint"];
@@ -504,9 +506,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     accept?: string | undefined;
     alt?: string | undefined;
     capture?: boolean | "user" | "environment" | undefined;
-    checked?: (boolean | "true" | "false") | any[] | Set<any> | undefined;
     crossorigin?: string | undefined;
-    indeterminate?: boolean | undefined;
     maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
     multiple?: (boolean | "true" | "false") | undefined;
@@ -520,7 +520,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     minLength: number;
     invalid: boolean;
     size: FieldSize;
-    autocomplete: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/forms/PinInput.vue

@@ -22,6 +22,7 @@
          :data-form-type="noAutofill ? 'other' : void 0"
          :id="control.id.value"
          :name="control.field?.name.value"
+         :aria-label="label"
          v-bind="$attrs"
          :disabled="control.disabled.value || void 0"
          :required="control.required.value || void 0"
@@ -70,9 +71,10 @@
 </template>
 
 <script setup>
-import { computed, ref, useTemplateRef } from "vue";
+import { computed, ref, useAttrs, useTemplateRef } from "vue";
 import { useFieldControl } from "../../composables/useField";
 import { joinIds } from "../../internal/forms/control";
+import { hasNameAttrs, warnUnnamed } from "../../internal/forms/name";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   length: { type: Number, required: false, default: 6 },
@@ -80,6 +82,7 @@ const props = defineProps({
   mask: { type: Boolean, required: false },
   maskChar: { type: String, required: false, default: "\u2022" },
   uppercase: { type: Boolean, required: false },
+  label: { type: String, required: false },
   placeholder: { type: String, required: false },
   separatorAfter: { type: Array, required: false, default: () => [] },
   autocomplete: { type: String, required: false, default: "one-time-code" },
@@ -102,6 +105,13 @@ const control = useFieldControl({
   disabled: () => props.disabled,
   required: () => props.required
 });
+const attrs = useAttrs();
+warnUnnamed(
+  "PinInput",
+  () => Boolean(
+    props.label || control.labelledBy.value || hasNameAttrs(attrs) || inputRef.value?.labels?.length
+  )
+);
 const chars = computed(() => Array.from(model.value ?? ""));
 const activeIndex = computed(() => Math.min(caret.value, props.length - 1));
 const allowed = computed(() => {

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

@@ -6,6 +6,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     mask?: boolean;
     maskChar?: string;
     uppercase?: boolean;
+    label?: string;
     placeholder?: string | undefined;
     separatorAfter?: number[];
     autocomplete?: string | undefined;
@@ -25,10 +26,13 @@ declare const __VLS_export: import("vue").DefineComponent<{
     min?: (string | number) | undefined;
     max?: (string | number) | undefined;
     pattern?: string | undefined | undefined;
+    checked?: any[] | Set<any> | (boolean | "true" | "false") | undefined;
+    indeterminate?: boolean | undefined | undefined;
     title?: string | undefined | undefined;
     list?: string | undefined | undefined;
     results?: (string | number) | undefined;
     name?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -187,7 +191,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
@@ -229,9 +232,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     accept?: string | undefined | undefined;
     alt?: string | undefined | undefined;
     capture?: boolean | "user" | "environment" | undefined | undefined;
-    checked?: any[] | Set<any> | (boolean | "true" | "false") | undefined;
     crossorigin?: string | undefined | undefined;
-    indeterminate?: boolean | undefined | undefined;
     maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
     multiple?: (boolean | "true" | "false") | undefined;
@@ -250,6 +251,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     mask?: boolean;
     maskChar?: string;
     uppercase?: boolean;
+    label?: string;
     placeholder?: string | undefined;
     separatorAfter?: number[];
     autocomplete?: string | undefined;
@@ -269,10 +271,13 @@ declare const __VLS_export: import("vue").DefineComponent<{
     min?: (string | number) | undefined;
     max?: (string | number) | undefined;
     pattern?: string | undefined | undefined;
+    checked?: any[] | Set<any> | (boolean | "true" | "false") | undefined;
+    indeterminate?: boolean | undefined | undefined;
     title?: string | undefined | undefined;
     list?: string | undefined | undefined;
     results?: (string | number) | undefined;
     name?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -431,7 +436,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
@@ -473,9 +477,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     accept?: string | undefined | undefined;
     alt?: string | undefined | undefined;
     capture?: boolean | "user" | "environment" | undefined | undefined;
-    checked?: any[] | Set<any> | (boolean | "true" | "false") | undefined;
     crossorigin?: string | undefined | undefined;
-    indeterminate?: boolean | undefined | undefined;
     maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
     multiple?: (boolean | "true" | "false") | undefined;

package/dist/components/forms/RadioGroup.vue

@@ -2,12 +2,12 @@
    <fieldset
       :id="control.id.value"
       data-k-shake
-      :aria-labelledby="!legend && control.field ? control.field.labelId : void 0"
+      :aria-labelledby="hasLegend ? void 0 : control.labelledBy.value"
       v-bind="$attrs"
       :disabled="control.disabled.value || void 0"
       :aria-describedby="joinIds($attrs['aria-describedby'], control.describedBy.value)"
       :aria-invalid="control.invalid.value ? 'true' : void 0"
-      :aria-required="control.required.value ? 'true' : void 0"
+      :aria-required="control.required.value && !control.labelledBy.value ? 'true' : void 0"
       :aria-readonly="readonly ? 'true' : void 0"
       role="radiogroup"
       class="k-choice-group k-radio-group"
@@ -17,8 +17,8 @@
   { 'is-invalid': control.invalid.value, 'is-disabled': control.disabled.value }
 ]"
    >
-      <legend v-if="legend || $slots.legend" class="k-choice-group-legend">
-         <slot name="legend">{{ legend }}</slot>
+      <legend v-if="hasLegend" class="k-choice-group-legend">
+         <slot name="legend">{{ legendText }}</slot>
       </legend>
       <div class="k-choice-group-items">
          <slot>
@@ -37,14 +37,16 @@
 </template>
 
 <script setup>
-import { computed, provide, useId } from "vue";
+import { computed, provide, useAttrs, useId, useSlots } from "vue";
 import { useFieldControl } from "../../composables/useField";
 import { joinIds } from "../../internal/forms/control";
+import { hasNameAttrs, warnUnnamed } from "../../internal/forms/name";
 import { RADIO_GROUP_KEY } from "../../internal/forms/keys";
 import Radio from "./Radio.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   options: { type: Array, required: false, default: () => [] },
+  label: { type: String, required: false },
   legend: { type: String, required: false },
   orientation: { type: String, required: false, default: "vertical" },
   variant: { type: String, required: false, default: "default" },
@@ -63,6 +65,14 @@ const control = useFieldControl({
   required: () => props.required,
   labelable: false
 });
+const slots = useSlots();
+const attrs = useAttrs();
+const legendText = computed(() => props.label ?? props.legend);
+const hasLegend = computed(() => Boolean(legendText.value || slots.legend));
+warnUnnamed(
+  "RadioGroup",
+  () => hasLegend.value || Boolean(control.labelledBy.value) || hasNameAttrs(attrs)
+);
 provide(RADIO_GROUP_KEY, {
   name: computed(() => props.name ?? control.field?.name.value ?? fallbackName),
   size: computed(() => props.size),

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

@@ -3,6 +3,7 @@ import type { ChoiceOption, ChoiceOrientation, ChoiceValue, RadioGroupVariant }
 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<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<({
         options?: ChoiceOption<T>[];
+        label?: string;
         legend?: string;
         orientation?: ChoiceOrientation;
         variant?: RadioGroupVariant;

package/dist/components/forms/SegmentedControl.vue

@@ -3,13 +3,14 @@
       ref="rootRef"
       :id="control.id.value"
       data-k-shake
-      :aria-labelledby="control.field && !$attrs['aria-label'] ? control.field.labelId : void 0"
+      :aria-label="label"
+      :aria-labelledby="label || $attrs['aria-label'] ? void 0 : control.labelledBy.value"
       v-bind="$attrs"
       :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="props.readonly ? 'true' : void 0"
-      :aria-required="control.required.value ? 'true' : void 0"
+      :aria-required="control.required.value && !control.labelledBy.value ? 'true' : void 0"
       role="radiogroup"
       class="k-segmented"
       :class="[
@@ -64,14 +65,17 @@
 </template>
 
 <script setup>
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from "vue";
+import { computed, nextTick, onMounted, ref, useAttrs, useId, watch } from "vue";
+import { useResizeObserver } from "../../internal/core/resize";
 import { useFieldControl } from "../../composables/useField";
 import { joinIds } from "../../internal/forms/control";
+import { hasNameAttrs, warnUnnamed } from "../../internal/forms/name";
 import Icon from "../core/Icon.vue";
 import { rovingIndex } from "../../internal/core/roving";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   options: { type: Array, required: true },
+  label: { type: String, required: false },
   name: { type: String, required: false },
   size: { type: String, required: false, default: "md" },
   block: { type: Boolean, required: false },
@@ -88,13 +92,17 @@ const rootRef = ref(null);
 const itemRefs = [];
 const ready = ref(false);
 const indicator = ref({ x: 0, width: 0 });
-let observer;
 const control = useFieldControl({
   invalid: () => props.invalid,
   disabled: () => props.disabled,
   required: () => props.required,
   labelable: false
 });
+const attrs = useAttrs();
+warnUnnamed(
+  "SegmentedControl",
+  () => Boolean(props.label || control.labelledBy.value) || hasNameAttrs(attrs)
+);
 function titleId(index) {
   return `${baseId}-title-${index}`;
 }
@@ -102,7 +110,8 @@ const activeIndex = computed(
   () => props.options.findIndex((option) => option.value === model.value)
 );
 const focusIndex = computed(() => {
-  if (activeIndex.value >= 0) return activeIndex.value;
+  if (activeIndex.value >= 0 && !props.options[activeIndex.value]?.disabled)
+    return activeIndex.value;
   return Math.max(
     0,
     props.options.findIndex((option) => !option.disabled)
@@ -158,10 +167,6 @@ watch(
 onMounted(() => {
   measure();
   requestAnimationFrame(() => ready.value = true);
-  if (typeof ResizeObserver !== "undefined" && rootRef.value) {
-    observer = new ResizeObserver(measure);
-    observer.observe(rootRef.value);
-  }
 });
-onBeforeUnmount(() => observer?.disconnect());
+useResizeObserver(() => [rootRef.value], measure);
 </script>

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

@@ -3,6 +3,7 @@ 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: SegmentedOption<T>[];
+        label?: string;
         name?: string;
         size?: FieldSize;
         block?: boolean;

package/dist/components/forms/Slider.vue

@@ -22,6 +22,7 @@
             ref="inputRef"
             :id="control.id.value ?? ownId"
             :name="control.field?.name.value"
+            :aria-label="label"
             v-bind="$attrs"
             :disabled="control.disabled.value || void 0"
             :aria-invalid="control.invalid.value ? 'true' : void 0"
@@ -56,8 +57,10 @@
 import { computed, useAttrs, useId, useTemplateRef } from "vue";
 import { useFieldControl } from "../../composables/useField";
 import { joinIds } from "../../internal/forms/control";
+import { hasNameAttrs, warnUnnamed } from "../../internal/forms/name";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
+  label: { type: String, required: false },
   min: { type: Number, required: false, default: 0 },
   max: { type: Number, required: false, default: 100 },
   step: { type: Number, required: false, default: 1 },
@@ -80,6 +83,12 @@ const control = useFieldControl({
   invalid: () => props.invalid,
   disabled: () => props.disabled
 });
+warnUnnamed(
+  "Slider",
+  () => Boolean(
+    props.label || control.labelledBy.value || hasNameAttrs(attrs) || inputRef.value?.labels?.length
+  )
+);
 const current = computed(() => {
   const value = model.value ?? props.min;
   return Math.min(props.max, Math.max(props.min, value));

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

@@ -1,6 +1,7 @@
 import type { FieldSize } from '../core/types';
 import type { SliderBubble } from './types';
 declare const __VLS_export: import("vue").DefineComponent<{
+    label?: string;
     min?: (string | number) | undefined;
     max?: (string | number) | undefined;
     step?: (string | number) | undefined;
@@ -20,11 +21,14 @@ declare const __VLS_export: import("vue").DefineComponent<{
     form?: string | undefined | undefined;
     required?: (boolean | "true" | "false") | undefined;
     pattern?: string | undefined | undefined;
+    checked?: any[] | Set<any> | (boolean | "true" | "false") | undefined;
+    indeterminate?: boolean | undefined | undefined;
     title?: string | undefined | undefined;
     list?: string | undefined | undefined;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
     name?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -181,7 +185,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
@@ -224,9 +227,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     accept?: string | undefined | undefined;
     alt?: string | undefined | undefined;
     capture?: boolean | "user" | "environment" | undefined | undefined;
-    checked?: any[] | Set<any> | (boolean | "true" | "false") | undefined;
     crossorigin?: string | undefined | undefined;
-    indeterminate?: boolean | undefined | undefined;
     maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
     multiple?: (boolean | "true" | "false") | undefined;
@@ -239,6 +240,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     change: (value: number) => any;
     "update:modelValue": (value: number | null | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<{
+    label?: string;
     min?: (string | number) | undefined;
     max?: (string | number) | undefined;
     step?: (string | number) | undefined;
@@ -258,11 +260,14 @@ declare const __VLS_export: import("vue").DefineComponent<{
     form?: string | undefined | undefined;
     required?: (boolean | "true" | "false") | undefined;
     pattern?: string | undefined | undefined;
+    checked?: any[] | Set<any> | (boolean | "true" | "false") | undefined;
+    indeterminate?: boolean | undefined | undefined;
     title?: string | undefined | undefined;
     list?: string | undefined | undefined;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
     name?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -419,7 +424,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
@@ -462,9 +466,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     accept?: string | undefined | undefined;
     alt?: string | undefined | undefined;
     capture?: boolean | "user" | "environment" | undefined | undefined;
-    checked?: any[] | Set<any> | (boolean | "true" | "false") | undefined;
     crossorigin?: string | undefined | undefined;
-    indeterminate?: boolean | undefined | undefined;
     maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
     multiple?: (boolean | "true" | "false") | undefined;

package/dist/components/forms/Switch.vue

@@ -57,6 +57,7 @@
 import { computed, useAttrs, useId, useSlots, useTemplateRef } from "vue";
 import { useFieldControl } from "../../composables/useField";
 import { joinIds } from "../../internal/forms/control";
+import { hasNameAttrs, warnUnnamed } from "../../internal/forms/name";
 import Icon from "../core/Icon.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -90,6 +91,12 @@ const control = useFieldControl({
 const checked = computed(() => Boolean(model.value));
 const hasLabel = computed(() => Boolean(props.label || slots.default));
 const hasDescription = computed(() => Boolean(props.description || slots.description));
+warnUnnamed(
+  "Switch",
+  () => Boolean(
+    hasLabel.value || control.labelledBy.value || hasNameAttrs(attrs) || buttonRef.value?.labels?.length
+  )
+);
 const buttonId = computed(() => attrs.id ?? control.id.value ?? ownId);
 const formName = computed(() => props.name ?? control.field?.name.value);
 function toggle() {

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

@@ -29,6 +29,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     title?: string | undefined | undefined;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -184,7 +185,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
@@ -251,6 +251,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     title?: string | undefined | undefined;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -406,7 +407,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;

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

@@ -17,12 +17,15 @@ declare const __VLS_export: import("vue").DefineComponent<{
     value?: any;
     form?: string | undefined;
     pattern?: string | undefined;
+    checked?: (boolean | "true" | "false") | any[] | Set<any> | undefined;
+    indeterminate?: boolean | undefined;
     title?: string | undefined;
     style?: unknown;
     list?: string | undefined;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     name?: string | undefined;
+    dir?: string | undefined;
     class?: unknown;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -181,7 +184,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     accesskey?: string | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined;
-    dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     enterKeyHint?: import("vue").HTMLAttributes["enterkeyhint"];
@@ -234,9 +236,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     accept?: string | undefined;
     alt?: string | undefined;
     capture?: boolean | "user" | "environment" | undefined;
-    checked?: (boolean | "true" | "false") | any[] | Set<any> | undefined;
     crossorigin?: string | undefined;
-    indeterminate?: boolean | undefined;
     maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
     multiple?: (boolean | "true" | "false") | undefined;
@@ -263,12 +263,15 @@ declare const __VLS_export: import("vue").DefineComponent<{
     value?: any;
     form?: string | undefined;
     pattern?: string | undefined;
+    checked?: (boolean | "true" | "false") | any[] | Set<any> | undefined;
+    indeterminate?: boolean | undefined;
     title?: string | undefined;
     style?: unknown;
     list?: string | undefined;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     name?: string | undefined;
+    dir?: string | undefined;
     class?: unknown;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -427,7 +430,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     accesskey?: string | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined;
-    dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     enterKeyHint?: import("vue").HTMLAttributes["enterkeyhint"];
@@ -480,9 +482,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     accept?: string | undefined;
     alt?: string | undefined;
     capture?: boolean | "user" | "environment" | undefined;
-    checked?: (boolean | "true" | "false") | any[] | Set<any> | undefined;
     crossorigin?: string | undefined;
-    indeterminate?: boolean | undefined;
     maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
     multiple?: (boolean | "true" | "false") | undefined;

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

@@ -59,3 +59,7 @@ export type FileInputAcceptMode = 'filter' | 'hint';
 export type PinInputMode = 'numeric' | 'alphanumeric' | 'alphabetic';
 export type RadioGroupVariant = 'default' | 'card';
 export type SliderBubble = boolean | 'always';
+export type ColorSwatch = string | {
+    value: string;
+    label?: string;
+};

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

@@ -27,6 +27,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -182,7 +183,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
@@ -229,6 +229,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -384,7 +385,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;