pxd 0.1.2 → 0.1.3

package/dist/components/scroll-text/index.d.vue.ts

@@ -1,12 +1,12 @@
 import type { ScrollTextProps } from './types';
-declare var __VLS_9: {};
+declare var __VLS_7: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_9) => any;
+    default?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ScrollTextProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScrollTextProps> & Readonly<{}>, {
     text: string;
     as: import("../../types/shared/props.js").ComponentAs;
-    speed: number | string;
+    speed: string | number;
 }, {}, {}, {}, 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/scroll-text/index.vue

@@ -24,13 +24,16 @@ const props = defineProps({
 		default: 40
 	}
 });
-const wrapRef = shallowRef();
-const contentRef = shallowRef();
-const contentStyle = shallowRef();
 let wrapWidth = 0;
 let contentWidth = 0;
 let appliedSpeed = 0;
 let initialRafId = 0;
+const wrapRef = shallowRef();
+const contentRef = shallowRef();
+const contentStyle = shallowRef();
+useResizeObserver(wrapRef, () => {
+	syncOverflow(false);
+});
 function toSpeed(value) {
 	const n = Number(value);
 	return Number.isFinite(n) && n > 0 ? n : 40;
@@ -75,9 +78,6 @@ function syncOverflow(force = false) {
 watch(() => [props.text, toSpeed(props.speed)], () => {
 	syncOverflow(true);
 }, { flush: "post" });
-useResizeObserver(wrapRef, () => {
-	syncOverflow(false);
-});
 // The first measurement is deferred to a rAF instead of running synchronously in
 // the mounted queue, where a batch of instances reading layout forces one reflow
 // per item. Inside a single rAF the browser resolves layout once and serves every

package/dist/components/scroll-text/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentAs } from '../../types/shared'
+import type { ComponentAs } from '../../types/shared/props'
 
 export interface ScrollTextProps {
   as?: ComponentAs

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

@@ -1,4 +1,5 @@
-import type { ComponentClass, ComponentDirection, Nullable } from '../../types/shared'
+import type { ComponentClass, ComponentDirection } from '../../types/shared/props'
+import type { Nullable } from '../../types/shared/utils'
 import type { CSSProperties } from 'vue'
 
 export interface ScrollableProps {

package/dist/components/search-input/index.d.vue.ts

@@ -1,9 +1,9 @@
 import type { SearchInputProps } from './types';
-declare var __VLS_17: {}, __VLS_25: {};
+declare var __VLS_15: {}, __VLS_23: {};
 type __VLS_Slots = {} & {
-    prefix?: (props: typeof __VLS_17) => any;
+    prefix?: (props: typeof __VLS_15) => any;
 } & {
-    suffix?: (props: typeof __VLS_25) => any;
+    suffix?: (props: typeof __VLS_23) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<SearchInputProps, {
     $: import("vue").ComponentInternalInstance;
@@ -83,7 +83,7 @@ declare const __VLS_base: import("vue").DefineComponent<SearchInputProps, {
         focus: (args_0: FocusEvent) => any;
         keydown: (args_0: KeyboardEvent) => any;
     }, string, {
-        align: "left" | "center" | "right";
+        align: "center" | "left" | "right";
         trimOverflow: boolean;
         wordLimitPosition: "inside" | "outside";
         clearOnPressEscape: boolean;
@@ -110,7 +110,7 @@ declare const __VLS_base: import("vue").DefineComponent<SearchInputProps, {
     $nextTick: typeof import("vue").nextTick;
     $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
 } & Readonly<{
-    align: "left" | "center" | "right";
+    align: "center" | "left" | "right";
     trimOverflow: boolean;
     wordLimitPosition: "inside" | "outside";
     clearOnPressEscape: boolean;

package/dist/components/search-input/index.vue

@@ -3,6 +3,7 @@ import LoaderCircleIcon from "@gdsicon/vue/loader-circle";
 import MagnifyingGlassIcon from "@gdsicon/vue/magnifying-glass";
 import { shallowRef } from "vue";
 import { useForwardRefExpose } from "../../composables/_internal/use-forward-ref-expose.js";
+import { isCompositionKeydown } from "../../utils/event.js";
 import PInput from "../input/index.vue";
 defineOptions({
 	name: "PSearchInput",
@@ -19,7 +20,7 @@ const props = defineProps({ loading: {
 const emits = defineEmits(["search"]);
 const inputRef = shallowRef();
 function onKeydown(event) {
-	if (event.key !== "Enter" || props.loading) {
+	if (event.key !== "Enter" || props.loading || isCompositionKeydown(event)) {
 		return;
 	}
 	const value = event.target.value;

package/dist/components/select/index.d.vue.ts

@@ -1,25 +1,28 @@
+import type { ListModelValue } from '../list/types';
 import type { SelectProps } from './types';
 declare var __VLS_16: {}, __VLS_18: {
     label: string;
-}, __VLS_27: {
-    item: import("../list/types.js").ListOption;
+}, __VLS_36: {
+    item: import("../list/types").ListOption;
     index: number;
-    group: import("../list/types.js").ListOptionGroup | undefined;
+    group: import("../list/types").ListOptionGroup | undefined;
     groupIndex: number | undefined;
-};
+}, __VLS_39: {};
 type __VLS_Slots = {} & {
     prefix?: (props: typeof __VLS_16) => any;
 } & {
     default?: (props: typeof __VLS_18) => any;
 } & {
-    item?: (props: typeof __VLS_27) => any;
+    item?: (props: typeof __VLS_36) => any;
+} & {
+    empty?: (props: typeof __VLS_39) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<SelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (args_0: import("../list/types.js").ListModelValue) => any;
-    "update:modelValue": (args_0: import("../list/types.js").ListModelValue) => any;
+    change: (args_0: ListModelValue) => any;
+    "update:modelValue": (args_0: ListModelValue) => any;
 }, string, import("vue").PublicProps, Readonly<SelectProps> & Readonly<{
-    onChange?: ((args_0: import("../list/types.js").ListModelValue) => any) | undefined;
-    "onUpdate:modelValue"?: ((args_0: import("../list/types.js").ListModelValue) => any) | undefined;
+    onChange?: ((args_0: ListModelValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: ListModelValue) => any) | undefined;
 }>, {
     suffixIcon: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/select/index.vue

@@ -1,11 +1,17 @@
 <script setup>
 import ChevronDownIcon from "@gdsicon/vue/chevron-down";
-import { computed } from "vue";
-import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { computed, nextTick, shallowRef, watch } from "vue";
+import { useListFilter } from "../../composables/_internal/use-list-filter.js";
+import { useListKeyboardController } from "../../composables/_internal/use-list-keyboard-controller.js";
+import { useListSelection } from "../../composables/_internal/use-list-selection.js";
+import { usePopoverResponsive } from "../../composables/_internal/use-popover-responsive.js";
 import { useSelectedListItems } from "../../composables/_internal/use-selected-list-item.js";
 import { useConfigProvider } from "../../contexts/config-provider.js";
+import { getUniqueId } from "../../utils/helper.js";
+import { isNil } from "../../utils/is.js";
 import PButton from "../button/index.vue";
-import PMenu from "../menu/index.vue";
+import PList from "../list/index.vue";
+import PPopover from "../popover/index.vue";
 defineOptions({
 	name: "PSelect",
 	inheritAttrs: false,
@@ -61,6 +67,14 @@ const props = defineProps({
 		type: String,
 		required: false
 	},
+	filterable: {
+		type: Boolean,
+		required: false
+	},
+	filterPlaceholder: {
+		type: String,
+		required: false
+	},
 	labelFormat: {
 		type: Function,
 		required: false
@@ -71,64 +85,173 @@ const props = defineProps({
 	}
 });
 const emits = defineEmits(["change", "update:modelValue"]);
-const modelValue = useModelValue(props, emits);
-const selectedItems = useSelectedListItems(() => props.options || [], modelValue);
-const configProvider = useConfigProvider();
-const computedSize = computed(() => props.size || configProvider.size);
+const listId = getUniqueId("select-list");
+const searchInputId = getUniqueId("select-search");
+const FILTERABLE_KEYMAP = {
+	ArrowDown: "next",
+	ArrowUp: "previous",
+	Enter: "activate",
+	Home: "first",
+	End: "last"
+};
+const DEFAULT_KEYMAP = {
+	...FILTERABLE_KEYMAP,
+	" ": "activate"
+};
+const popoverVisible = shallowRef(false);
+const listRef = shallowRef();
+const searchInputRef = shallowRef();
+const filterKeyword = shallowRef("");
+// Resolved from the full options so a selected item that the filter drops still has a label.
+const selectedItems = useSelectedListItems(() => props.options || [], () => props.modelValue);
 const translatedLabel = computed(() => {
 	if (props.labelFormat) {
 		return props.labelFormat(selectedItems.value);
 	}
 	return selectedItems.value.map((item) => item.label).join(", ");
 });
+const configProvider = useConfigProvider();
+const computedSize = computed(() => props.size || configProvider.size);
+const { isAdaptive, responsiveClasses } = usePopoverResponsive();
+// Single mode commits on pick and closes; multiple mode stays open and commits `change`
+// once when the popover closes, so a round of toggles is one event.
+const { selected, apply, reset, commit } = useListSelection(props, emits);
+const { onKeydown } = useListKeyboardController({
+	enabled: () => popoverVisible.value,
+	onCommand: (command) => listRef.value?.dispatch(command) ?? false,
+	keymap: () => props.filterable ? FILTERABLE_KEYMAP : DEFAULT_KEYMAP
+});
+const { filteredOptions } = useListFilter(() => props.options ?? [], filterKeyword);
+const listOptions = computed(() => props.filterable ? filteredOptions.value : props.options ?? []);
+function onSearchInput(ev) {
+	filterKeyword.value = ev.target.value;
+}
+function onListUpdate(next) {
+	if (isNil(next)) {
+		return;
+	}
+	if (apply(next)) {
+		popoverVisible.value = false;
+	}
+}
+watch(popoverVisible, async (visible) => {
+	if (!visible) {
+		filterKeyword.value = "";
+		commit();
+		return;
+	}
+	reset();
+	await nextTick();
+	if (props.filterable) {
+		searchInputRef.value?.focus({ preventScroll: true });
+		return;
+	}
+	listRef.value?.focus();
+});
+watch(listOptions, async () => {
+	await nextTick();
+	listRef.value?.setFirstAsActive();
+});
 </script>
 
 <template>
-  <PMenu
+  <PPopover
     data-select
-    v-model="modelValue"
+    v-model="popoverVisible"
     class="pxd-select"
-    :options="options"
+    trigger="click"
     position="bottom"
+    :auto-focus-element="filterable"
     :disabled="disabled"
-    :multiple="multiple"
-    :virtual="virtual"
-    v-bind="$attrs"
+    :adaptive="isAdaptive"
+    :wrapper-class="responsiveClasses.wrapper"
+    :content-class="responsiveClasses.content"
+    :lock-scroll-on-visible="isAdaptive"
     :close-on-press-escape="closeOnPressEscape"
+    v-bind="$attrs"
+    @wrapper-keydown="onKeydown"
   >
-    <template #default="{ popoverVisible }">
-      <PButton
-        class="px-1.5 justify-between"
-        align="left"
-        full-width
-        :class="{ 'text-gray-600': !translatedLabel }"
-        :variant="variant"
-        :shape="shape"
-        :size="computedSize"
-        :disabled="disabled"
+    <PButton
+      class="px-1.5 justify-between"
+      align="left"
+      full-width
+      :class="{ 'text-gray-600': !translatedLabel }"
+      :variant="variant"
+      :shape="shape"
+      :size="computedSize"
+      :disabled="disabled"
+    >
+      <template v-if="$slots.prefix" #prefix>
+        <slot name="prefix" />
+      </template>
+
+      <template v-if="translatedLabel">
+        <slot :label="translatedLabel">{{ translatedLabel }}</slot>
+      </template>
+      <template v-else>
+        {{ placeholder }}
+      </template>
+
+      <template v-if="suffixIcon" #suffix>
+        <ChevronDownIcon
+          class="text-sm me-1.5 text-foreground-secondary motion-safe:transition-transform"
+          :class="{ 'rotate-180': popoverVisible }"
+        />
+      </template>
+    </PButton>
+
+    <template #content>
+      <label
+        v-if="filterable"
+        :for="searchInputId"
+        class="px-3 py-2 flex items-center border-b bg-background-100"
       >
-        <template v-if="$slots.prefix" #prefix>
-          <slot name="prefix" />
-        </template>
+        <input
+          :id="searchInputId"
+          ref="searchInputRef"
+          :value="filterKeyword"
+          type="text"
+          role="combobox"
+          autocomplete="off"
+          autocorrect="off"
+          spellcheck="false"
+          aria-autocomplete="list"
+          inputmode="search"
+          :aria-controls="listId"
+          :aria-expanded="popoverVisible"
+          :aria-disabled="disabled"
+          :placeholder="filterPlaceholder"
+          class="pxd-select--search h-7 min-w-0 text-sm flex-1 appearance-none border-none bg-transparent font-inherit text-foreground outline-none"
+          @input="onSearchInput"
+          @keydown="onKeydown"
+        />
+      </label>
 
-        <template v-if="translatedLabel">
-          <slot :label="translatedLabel">{{ translatedLabel }}</slot>
-        </template>
-        <template v-else>
-          {{ placeholder }}
+      <PList
+        :id="listId"
+        ref="listRef"
+        :model-value="selected"
+        :options="listOptions"
+        :multiple="multiple"
+        :virtual="virtual"
+        :loop="!filterable"
+        :default-active-index="filterable ? 0 : -1"
+        class="max-h-68 min-h-0 flex-1"
+        @update:model-value="onListUpdate"
+      >
+        <template v-if="$slots.item" #item="itemSlotProps">
+          <slot name="item" v-bind="itemSlotProps" />
         </template>
 
-        <template v-if="suffixIcon" #suffix>
-          <ChevronDownIcon
-            class="text-sm me-1.5 text-foreground-secondary motion-safe:transition-transform"
-            :class="{ 'rotate-180': popoverVisible }"
-          />
+        <template #empty>
+          <slot name="empty">
+            <template v-if="filterKeyword">
+              {{ configProvider.locale.results.searchText }}
+              <span class="whitespace-pre text-foreground">"{{ filterKeyword }}"</span>
+            </template>
+          </slot>
         </template>
-      </PButton>
-    </template>
-
-    <template v-if="$slots.item" #item="scope">
-      <slot name="item" v-bind="scope" />
+      </PList>
     </template>
-  </PMenu>
+  </PPopover>
 </template>

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

@@ -1,4 +1,4 @@
-import type { ComponentSize, ComponentShape } from '../../types/shared'
+import type { ComponentSize, ComponentShape } from '../../types/shared/props'
 import type { ButtonVariant } from '../button/types'
 import type { ListModelValue, ListOption, ListOptions } from '../list/types'
 
@@ -13,6 +13,8 @@ export interface SelectProps {
   modelValue?: ListModelValue
   suffixIcon?: boolean
   placeholder?: string
+  filterable?: boolean
+  filterPlaceholder?: string
   labelFormat?: (items: ListOptions) => string
   closeOnPressEscape?: boolean
 }

package/dist/components/separator/index.d.vue.ts

@@ -1,6 +1,6 @@
 import type { SeparatorProps } from './types';
 declare const __VLS_export: import("vue").DefineComponent<SeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SeparatorProps> & Readonly<{}>, {
-    direction: import("../../types/shared").ComponentDirection;
+    direction: import("../../types/shared/props").ComponentDirection;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,4 +1,4 @@
-import type { ComponentDirection } from '../../types/shared'
+import type { ComponentDirection } from '../../types/shared/props'
 
 export interface SeparatorProps {
   direction?: ComponentDirection

package/dist/components/skeleton/index.d.vue.ts

@@ -4,9 +4,9 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<SkeletonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SkeletonProps> & Readonly<{}>, {
-    loading: boolean;
     shape: import("../../types/shared/props.js").ComponentShape;
     height: string | number;
+    loading: boolean;
     animated: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/skeleton/index.vue

@@ -36,6 +36,17 @@ const props = defineProps({
 		default: "default"
 	}
 });
+const computedStyle = computed(() => {
+	const { width, height, boxHeight } = props;
+	const styles = {
+		width: getCssUnitValue(width),
+		height: getCssUnitValue(height)
+	};
+	if (boxHeight) {
+		styles["margin-bottom"] = getCssUnitValue(increaseWithUnit(boxHeight, -Number(height)));
+	}
+	return styles;
+});
 const { attrs, classes } = useTailwindVariant({
 	base: "pxd-skeleton relative block shrink-0 overflow-hidden",
 	variants: {
@@ -52,17 +63,6 @@ const { attrs, classes } = useTailwindVariant({
 	loading: props.loading,
 	animated: props.animated
 }) });
-const computedStyle = computed(() => {
-	const { width, height, boxHeight } = props;
-	const styles = {
-		width: getCssUnitValue(width),
-		height: getCssUnitValue(height)
-	};
-	if (boxHeight) {
-		styles["margin-bottom"] = getCssUnitValue(increaseWithUnit(boxHeight, -Number(height)));
-	}
-	return styles;
-});
 </script>
 
 <template>

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

@@ -1,4 +1,4 @@
-import type { ComponentShape } from '../../types/shared'
+import type { ComponentShape } from '../../types/shared/props'
 
 export interface SkeletonProps {
   loading?: boolean

package/dist/components/slider/index.d.vue.ts

@@ -6,7 +6,7 @@ declare const __VLS_export: import("vue").DefineComponent<SliderProps, {}, {}, {
     onChange?: ((args_0: NonNullable<number | number[] | null | undefined>) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: NonNullable<number | number[] | null | undefined>) => any) | undefined;
 }>, {
-    variant: import("../../types/shared/props.js").ComponentVariant | "secondary";
+    variant: "secondary" | import("../../types/shared/props.js").ComponentVariant;
     modelValue: number | number[] | null;
     max: number;
     step: number | number[];

package/dist/components/slider/index.vue

@@ -392,7 +392,7 @@ onBeforeUnmount(stopDragging);
       <span
         v-for="stop in stopList"
         :key="stop.value"
-        class="pxd-slider--stop size-1 pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gray-500"
+        class="pxd-slider--stop size-1 pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gray-alpha-200"
         :style="{ left: `${stop.percentage}%` }"
       />
 

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

@@ -1,4 +1,4 @@
-import type { ComponentSize, ComponentVariant } from '../../types/shared'
+import type { ComponentSize, ComponentVariant } from '../../types/shared/props'
 
 export interface SliderProps {
   min?: number

package/dist/components/snippet/index.d.vue.ts

@@ -4,9 +4,9 @@ declare const __VLS_export: import("vue").DefineComponent<SnippetProps, {}, {},
 }, string, import("vue").PublicProps, Readonly<SnippetProps> & Readonly<{
     onCopy?: ((args_0: string) => any) | undefined;
 }>, {
-    variant: import("../../types/shared/props.js").ComponentVariantWithDefault | "inverted" | "ghost" | "secondary";
-    prompt: boolean | string;
-    copyBtn: "always" | "hover" | "hidden";
+    variant: "secondary" | "inverted" | import("../../types/shared/props.js").ComponentVariantWithDefault | "ghost";
+    prompt: string | boolean;
+    copyBtn: "hidden" | "always" | "hover";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/snippet/index.vue

@@ -39,9 +39,9 @@ const props = defineProps({
 	}
 });
 const emits = defineEmits(["copy"]);
-const configProvider = useConfigProvider();
 const computedTextList = computed(() => toArray(props.text));
 const copyText = computed(() => computedTextList.value.join("\n"));
+const configProvider = useConfigProvider();
 const { attrs, classes } = useTailwindVariant({
 	base: "pxd-snippet ps-3 pe-1 gap-4 group/snippet relative flex items-center rounded-lg border tabular-nums",
 	variants: {
@@ -74,11 +74,11 @@ function onCopy(text) {
 
 <template>
   <div data-snippet :class="classes" :data-variant="variant" v-bind="attrs">
-    <div class="pxd-snippet--container flex-1">
+    <div class="pxd-snippet--container min-w-0 flex-1">
       <pre
         v-for="(t, i) of computedTextList"
         :key="i"
-        class="m-0 p-0 leading-tight"
+        class="m-0 p-0 leading-tight break-words whitespace-pre-wrap"
         :data-prompt="prompt"
         :class="{ 'before:content-[attr(data-prompt)] before:select-none': prompt }"
         >{{ t }}</pre>
@@ -86,8 +86,10 @@ function onCopy(text) {
 
     <div
       v-if="copyBtn !== 'hidden'"
-      class="min-w-5 ms-2 max-sm:opacity-100 relative shrink-0 motion-safe:transition-opacity"
-      :class="{ 'opacity-0 group-hover/snippet:opacity-100': copyBtn === 'hover' }"
+      class="min-w-5 ms-2 max-sm:opacity-100 relative shrink-0 focus-within:opacity-100 motion-safe:transition-opacity"
+      :class="{
+  'opacity-0 group-hover/snippet:opacity-100': copyBtn === 'hover'
+}"
     >
       <PCopyButton
         size="sm"

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

@@ -1,4 +1,4 @@
-import type { ComponentSize, ComponentVariantWithDefault } from '../../types/shared'
+import type { ComponentSize, ComponentVariantWithDefault } from '../../types/shared/props'
 
 export interface SnippetProps {
   text?: string | string[] | null

package/dist/components/spinner/index.vue

@@ -13,7 +13,7 @@ const OPACITY_STEP = 1 / ITEMS_COUNT;
     data-spinner
     aria-hidden="true"
     aria-label="Loading"
-    class="pxd-spinner leading-0 transform-origin-center motion-safe:animate-spin pointer-events-none relative inline-block size-em shrink-0 overflow-hidden text-foreground-secondary content-visibility-auto intrinsic-size-auto"
+    class="pxd-spinner leading-0 transform-origin-center motion-safe:animate-spin pointer-events-none relative inline-block size-em shrink-0 overflow-hidden content-visibility-auto intrinsic-size-auto"
     v-bind="$attrs"
   >
     <span class="pxd-spinner-container top-0 left-0 absolute size-full">
@@ -33,3 +33,7 @@ const OPACITY_STEP = 1 / ITEMS_COUNT;
     </span>
   </span>
 </template>
+
+<style>
+@layer components{[data-spinner]{color:var(--color-foreground-secondary)}}
+</style>

package/dist/components/spinner-dots/index.d.vue.ts

@@ -1,6 +1,6 @@
 import type { SpinnerDotsProps } from './types';
 declare const __VLS_export: import("vue").DefineComponent<SpinnerDotsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SpinnerDotsProps> & Readonly<{}>, {
-    variant: `dots${import("./types").Range<10>}`;
+    variant: "dots0" | "dots2" | "dots1" | "dots3" | "dots4" | "dots5" | "dots6" | "dots7" | "dots8" | "dots9";
     interval: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/split-button/index.d.vue.ts

@@ -1,18 +1,18 @@
 import type { SplitButtonProps } from './types';
-declare var __VLS_14: {
+declare var __VLS_13: {
     data: import("../list/types.js").ListOption;
-}, __VLS_22: {}, __VLS_30: {
+}, __VLS_21: {}, __VLS_29: {
     item: import("../list/types.js").ListOption;
     index: number;
     group: import("../list/types.js").ListOptionGroup | undefined;
     groupIndex: number | undefined;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_14) => any;
+    default?: (props: typeof __VLS_13) => any;
 } & {
-    icon?: (props: typeof __VLS_22) => any;
+    icon?: (props: typeof __VLS_21) => any;
 } & {
-    item?: (props: typeof __VLS_30) => any;
+    item?: (props: typeof __VLS_29) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<SplitButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (args_0: import("../list/types.js").ListModelValue) => any;

package/dist/components/split-button/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentShape, ComponentSizeWithXs } from '../../types/shared'
+import type { ComponentShape, ComponentSizeWithXs } from '../../types/shared/props'
 import type { ListModelValue, ListOptions } from '../list/types'
 import { ButtonVariant } from '../button/types'
 

package/dist/components/stack/index.d.vue.ts

@@ -1,10 +1,10 @@
 import type { StackProps } from './types';
-declare var __VLS_8: {};
+declare var __VLS_7: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<StackProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<StackProps> & Readonly<{}>, {
-    as: import("../../types/shared").ComponentAs;
+    as: import("../../types/shared/props").ComponentAs;
     align: import("./types").Align;
     wrap: boolean;
     scale: number;