ropav 0.0.5 → 0.0.6

package/dist/components/radio/useRadio.d.ts

@@ -4,6 +4,10 @@ export declare function useRadio(props: Readonly<RadioProps>): {
     isChecked: import('vue').ComputedRef<boolean>;
     isDisabled: import('vue').ComputedRef<boolean>;
     rootClass: import('vue').ComputedRef<string[]>;
+    rootStyle: import('vue').ComputedRef<{
+        '--_rp-radio-custom-color': string & {};
+        '--_rp-radio-custom-on-color': string;
+    } | undefined>;
     onSelect: () => void;
 };
 export declare function useRadioGroup(props: Readonly<RadioGroupProps>, emitUpdate: (value: string | number | null) => void): {

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

@@ -0,0 +1,3 @@
+export { default as Slider } from './slider';
+export { sliderColors, sliderOrientations, sliderSizes } from './types';
+export type { SliderColor, SliderMark, SliderMarkColor, SliderMarkInput, SliderOrientation, SliderProps, SliderPresetColor, SliderSize, SliderThumbStyle, SliderTooltip, SliderTooltipMode, SliderTooltipOptions, SliderValueFormatter, } from './types';

package/dist/components/slider/index.js

@@ -0,0 +1,2 @@
+import { i as sliderSizes, n as sliderColors, r as sliderOrientations, t as slider_default } from "../../slider.js";
+export { slider_default as Slider, sliderColors, sliderOrientations, sliderSizes };

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

@@ -0,0 +1,35 @@
+import { SliderProps } from './types';
+declare const __VLS_export: (__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<SliderProps & {
+        "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    } & {
+        value?: (props: {
+            value: number;
+            formattedValue: string | number;
+            percent: number;
+        }) => any;
+    } & {
+        thumb?: (props: {
+            value: number;
+            formattedValue: string | number;
+            percent: number;
+        }) => any;
+    };
+    emit: (evt: "update:modelValue", value: number) => void;
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,50 @@
+import { TooltipProps } from '../tooltip/types';
+export declare const sliderColors: readonly ["primary", "secondary", "success", "warning", "danger", "info", "neutral"];
+export declare const sliderSizes: readonly ["xs", "sm", "md", "lg", "xl"];
+export declare const sliderOrientations: readonly ["horizontal", "vertical"];
+export type SliderPresetColor = (typeof sliderColors)[number];
+export type SliderColor = SliderPresetColor | (string & {});
+export type SliderSize = (typeof sliderSizes)[number];
+export type SliderOrientation = (typeof sliderOrientations)[number];
+export type SliderValueFormatter = (value: number) => string | number;
+export type SliderTooltipMode = 'hover' | 'always';
+export type SliderTooltipOptions = Pick<TooltipProps, 'id' | 'placement' | 'color' | 'offset' | 'openDelay' | 'arrow'> & {
+    mode?: SliderTooltipMode;
+};
+export type SliderTooltip = false | SliderTooltipMode | SliderTooltipOptions;
+export type SliderMarkColor = SliderColor;
+export interface SliderMark {
+    value: number;
+    label?: string | number;
+    color?: SliderMarkColor;
+    hidden?: boolean;
+}
+export type SliderMarkInput = number | SliderMark;
+export interface SliderThumbStyle {
+    size?: number | string;
+    border?: number | string;
+    padding?: number | string;
+}
+export interface SliderProps {
+    id?: string;
+    name?: string;
+    modelValue: number;
+    min?: number;
+    max?: number;
+    step?: number | 'any';
+    marks?: SliderMarkInput[];
+    thumbStyle?: SliderThumbStyle;
+    tooltip?: SliderTooltip;
+    formatValue?: SliderValueFormatter;
+    color?: SliderColor;
+    size?: SliderSize;
+    orientation?: SliderOrientation;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    valid?: boolean;
+    ariaLabel?: string;
+    ariaValueText?: string | SliderValueFormatter;
+    describedby?: string;
+    labelledby?: string;
+}

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

@@ -0,0 +1,50 @@
+import { CSSProperties } from 'vue';
+import { SliderProps } from './types';
+type SliderStateProps = Readonly<SliderProps & {
+    min: number;
+    max: number;
+    step: number | 'any';
+    tooltip: NonNullable<SliderProps['tooltip']>;
+    orientation: NonNullable<SliderProps['orientation']>;
+}>;
+export declare function normalizeSliderValue(value: number, min: number, max: number, step: number | 'any'): number;
+export declare function normalizeSliderBounds(min: number, max: number): {
+    min: number;
+    max: number;
+};
+export declare function normalizeSliderStep(step: number | 'any'): number | "any";
+export declare function getSliderValuePercent(value: number, min: number, max: number): number;
+export declare function useSlider(props: SliderStateProps, emitUpdate: (value: number) => void): {
+    control: import('../../composables/useControlState').ControlState;
+    nativeMin: import('vue').ComputedRef<number>;
+    nativeMax: import('vue').ComputedRef<number>;
+    nativeStep: import('vue').ComputedRef<number | "any">;
+    rootClass: import('vue').ComputedRef<string[]>;
+    normalizedValue: import('vue').ComputedRef<number>;
+    valuePercent: import('vue').ComputedRef<number>;
+    formattedValue: import('vue').ComputedRef<string | number>;
+    ariaValueText: import('vue').ComputedRef<string | undefined>;
+    markItems: import('vue').ComputedRef<{
+        key: string;
+        value: number;
+        label: string | number | undefined;
+        hasLabel: boolean;
+        filled: boolean;
+        style: CSSProperties;
+    }[]>;
+    trackStyle: import('vue').ComputedRef<CSSProperties>;
+    tooltipVisible: import('vue').ComputedRef<boolean>;
+    tooltipOpen: import('vue').ComputedRef<boolean>;
+    tooltipPlacement: import('vue').ComputedRef<import('../tooltip').TooltipPlacement>;
+    tooltipId: import('vue').ComputedRef<string | undefined>;
+    tooltipColor: import('vue').ComputedRef<import('../../utils/componentColors').ComponentColorValue | undefined>;
+    tooltipOffset: import('vue').ComputedRef<import('../tooltip').TooltipOffset | undefined>;
+    tooltipOpenDelay: import('vue').ComputedRef<number>;
+    tooltipArrow: import('vue').ComputedRef<boolean>;
+    tooltipContent: import('vue').ComputedRef<string>;
+    onInput: (e: Event) => void;
+    openTooltip: () => void;
+    closeTooltip: () => void;
+    onTooltipKeydown: (event: KeyboardEvent) => void;
+};
+export {};

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

@@ -1,4 +1,5 @@
-export type SwitchColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+import { ComponentColorValue } from '../../utils/componentColors';
+export type SwitchColor = ComponentColorValue;
 export type SwitchSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface SwitchProps {
     id?: string;

package/dist/components/switch/useSwitch.d.ts

@@ -2,5 +2,8 @@ import { SwitchProps } from './types';
 export declare function useSwitch(props: Readonly<SwitchProps>, emitUpdate: (value: boolean) => void): {
     control: import('../../composables/useControlState').ControlState;
     rootClass: import('vue').ComputedRef<string[]>;
+    rootStyle: import('vue').ComputedRef<{
+        '--_rp-switch-custom-color': string & {};
+    } | undefined>;
     onChange: (e: Event) => void;
 };

package/dist/components/textarea/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Textarea } from './textarea';
-export type { TextareaProps, TextareaRadius, TextareaSize } from './types';
+export type { TextareaProps, TextareaRadius, TextareaResize, TextareaSize } from './types';

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

@@ -1,11 +1,16 @@
 export type TextareaRadius = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type TextareaSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type TextareaResize = 'none' | 'vertical' | 'both';
 export interface TextareaProps {
     id?: string;
     name?: string;
     modelValue: string;
     size?: TextareaSize;
     radius?: TextareaRadius;
+    resize?: TextareaResize;
+    autosize?: boolean;
+    minRows?: number;
+    maxRows?: number;
     placeholder?: string;
     rows?: number;
     disabled?: boolean;

package/dist/components/textarea/useTextarea.d.ts

@@ -1,7 +1,9 @@
 import { TextareaProps } from './types';
 export declare function useTextarea(props: Readonly<TextareaProps>, emitUpdate: (value: string) => void): {
+    textareaRef: import('vue').Ref<HTMLTextAreaElement | null, HTMLTextAreaElement | null>;
     control: import('../../composables/useControlState').ControlState;
     rootClass: import('vue').ComputedRef<string[]>;
+    nativeRows: import('vue').ComputedRef<number | undefined>;
     onInput: (e: Event) => void;
     focusTextarea: (e: MouseEvent) => void;
 };

package/dist/components/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tooltip } from './tooltip';
+export type { TooltipColor, TooltipOffset, TooltipOffsetOptions, TooltipPlacement, TooltipProps, TooltipSlotProps, TooltipTarget, TooltipTriggerProps, } from './types';

package/dist/components/tooltip/index.js

@@ -0,0 +1,2 @@
+import { t as tooltip_default } from "../../tooltip.js";
+export { tooltip_default as Tooltip };

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,27 @@
+import { TooltipProps } from './types';
+declare const __VLS_export: (__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<TooltipProps & {
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {
+            triggerProps: import('./types').TooltipTriggerProps;
+        }) => any;
+    } & {
+        content?: (props: {}) => any;
+    };
+    emit: (evt: "update:open", value: boolean) => void;
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,29 @@
+import { Ref } from 'vue';
+import { ComponentColorValue } from '../../utils/componentColors';
+export type TooltipPlacement = 'top' | 'right' | 'bottom' | 'left';
+export type TooltipColor = ComponentColorValue;
+export type TooltipTarget = string | HTMLElement | Ref<HTMLElement | null | undefined>;
+export interface TooltipOffsetOptions {
+    mainAxis?: number;
+    crossAxis?: number;
+}
+export type TooltipOffset = number | TooltipOffsetOptions;
+export interface TooltipTriggerProps {
+    'aria-describedby'?: string;
+}
+export interface TooltipSlotProps {
+    triggerProps: TooltipTriggerProps;
+}
+export interface TooltipProps {
+    id?: string;
+    content?: string;
+    target?: TooltipTarget | null;
+    placement?: TooltipPlacement;
+    color?: TooltipColor;
+    offset?: TooltipOffset;
+    open?: boolean;
+    openDelay?: number;
+    arrow?: boolean;
+    disabled?: boolean;
+    decorative?: boolean;
+}

package/dist/components/tooltip/useTooltip.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties } from 'vue';
+import { TooltipProps, TooltipTriggerProps } from './types';
+export declare function useTooltip(props: Readonly<TooltipProps>, emitOpenChange?: (open: boolean) => void): {
+    tooltipId: import('vue').ComputedRef<string>;
+    isOpen: import('vue').ComputedRef<boolean>;
+    isVisible: import('vue').ComputedRef<boolean>;
+    isTargetMode: import('vue').ComputedRef<boolean>;
+    shouldRenderContent: import('vue').ComputedRef<boolean>;
+    rootClass: import('vue').ComputedRef<string[]>;
+    triggerProps: import('vue').ComputedRef<TooltipTriggerProps>;
+    contentRole: import('vue').ComputedRef<"tooltip" | undefined>;
+    contentAriaHidden: import('vue').ComputedRef<"true" | undefined>;
+    contentStyle: import('vue').ComputedRef<CSSProperties | undefined>;
+    openTooltip: () => void;
+    closeTooltip: () => void;
+    onKeydown: (event: KeyboardEvent) => void;
+};

package/dist/icon-button.css

@@ -1,14 +1,26 @@
-.rp-button[data-v-4a239144] {
-  --_rp-button-accent: var(--rp-color-primary);
-  --_rp-button-accent-hover: var(--rp-color-primary-hover);
-  --_rp-button-accent-active: var(--rp-color-primary-active);
-  --_rp-button-accent-on: var(--rp-color-on-primary);
-  --_rp-button-accent-subtle-bg: var(--rp-color-primary-subtle-bg);
-  --_rp-button-accent-subtle-bg-hover: var(--rp-color-primary-subtle-bg-hover);
-  --_rp-button-accent-subtle-bg-active: var(--rp-color-primary-subtle-bg-active);
-  --_rp-button-accent-border: var(--rp-color-primary-border);
-  --_rp-button-accent-border-hover: var(--rp-color-primary-border-hover);
-  --_rp-button-accent-fg: var(--rp-color-primary-fg);
+.rp-button[data-v-7005752e] {
+  --_rp-button-accent: var(--_rp-button-custom-color, var(--rp-color-primary));
+  --_rp-button-accent-hover: var(--_rp-button-custom-hover, var(--rp-color-primary-hover));
+  --_rp-button-accent-active: var(--_rp-button-custom-active, var(--rp-color-primary-active));
+  --_rp-button-accent-on: var(--_rp-button-custom-on, var(--rp-color-on-primary));
+  --_rp-button-accent-subtle-bg: var(
+      --_rp-button-custom-subtle-bg,
+      var(--rp-color-primary-subtle-bg)
+  );
+  --_rp-button-accent-subtle-bg-hover: var(
+      --_rp-button-custom-subtle-bg-hover,
+      var(--rp-color-primary-subtle-bg-hover)
+  );
+  --_rp-button-accent-subtle-bg-active: var(
+      --_rp-button-custom-subtle-bg-active,
+      var(--rp-color-primary-subtle-bg-active)
+  );
+  --_rp-button-accent-border: var(--_rp-button-custom-border, var(--rp-color-primary-border));
+  --_rp-button-accent-border-hover: var(
+      --_rp-button-custom-border-hover,
+      var(--rp-color-primary-border-hover)
+  );
+  --_rp-button-accent-fg: var(--_rp-button-custom-fg, var(--rp-color-primary-fg));
   --_rp-button-bg: var(--rp-color-button-default-bg);
   --_rp-button-bg-hover: var(--rp-color-button-default-bg-hover);
   --_rp-button-bg-active: var(--rp-color-button-default-bg-active);
@@ -26,8 +38,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  position: relative;
   box-sizing: border-box;
-  gap: var(--rp-spacing-2);
   font-family: var(--rp-font-family);
   font-weight: var(--rp-font-weight-medium);
   line-height: var(--rp-line-height-none);
@@ -45,18 +57,18 @@
   font-size: var(--_rp-button-font-size);
   border-radius: var(--_rp-button-radius);
 }
-.rp-button[data-v-4a239144]:hover:not(:disabled) {
+.rp-button[data-v-7005752e]:hover:not(:disabled) {
   background-color: var(--_rp-button-bg-hover);
   border-color: var(--_rp-button-border-hover);
   box-shadow: var(--_rp-button-shadow-hover);
 }
-.rp-button[data-v-4a239144]:active:not(:disabled) {
+.rp-button[data-v-7005752e]:active:not(:disabled) {
   background-color: var(--_rp-button-bg-active);
   border-color: var(--_rp-button-border-active);
   box-shadow: var(--_rp-button-shadow-active);
   transform: translateY(1px);
 }
-.rp-button--color-primary[data-v-4a239144] {
+.rp-button--color-primary[data-v-7005752e] {
   --_rp-button-accent: var(--rp-color-primary);
   --_rp-button-accent-hover: var(--rp-color-primary-hover);
   --_rp-button-accent-active: var(--rp-color-primary-active);
@@ -73,7 +85,7 @@
   --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
   --_rp-button-fg: var(--_rp-button-accent-fg);
 }
-.rp-button--color-secondary[data-v-4a239144] {
+.rp-button--color-secondary[data-v-7005752e] {
   --_rp-button-accent: var(--rp-color-secondary);
   --_rp-button-accent-hover: var(--rp-color-secondary-hover);
   --_rp-button-accent-active: var(--rp-color-secondary-active);
@@ -90,7 +102,7 @@
   --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
   --_rp-button-fg: var(--_rp-button-accent-fg);
 }
-.rp-button--color-success[data-v-4a239144] {
+.rp-button--color-success[data-v-7005752e] {
   --_rp-button-accent: var(--rp-color-success);
   --_rp-button-accent-hover: var(--rp-color-success-hover);
   --_rp-button-accent-active: var(--rp-color-success-active);
@@ -107,7 +119,7 @@
   --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
   --_rp-button-fg: var(--_rp-button-accent-fg);
 }
-.rp-button--color-warning[data-v-4a239144] {
+.rp-button--color-warning[data-v-7005752e] {
   --_rp-button-accent: var(--rp-color-warning);
   --_rp-button-accent-hover: var(--rp-color-warning-hover);
   --_rp-button-accent-active: var(--rp-color-warning-active);
@@ -124,7 +136,7 @@
   --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
   --_rp-button-fg: var(--_rp-button-accent-fg);
 }
-.rp-button--color-danger[data-v-4a239144] {
+.rp-button--color-danger[data-v-7005752e] {
   --_rp-button-accent: var(--rp-color-danger);
   --_rp-button-accent-hover: var(--rp-color-danger-hover);
   --_rp-button-accent-active: var(--rp-color-danger-active);
@@ -141,7 +153,7 @@
   --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
   --_rp-button-fg: var(--_rp-button-accent-fg);
 }
-.rp-button--color-info[data-v-4a239144] {
+.rp-button--color-info[data-v-7005752e] {
   --_rp-button-accent: var(--rp-color-info);
   --_rp-button-accent-hover: var(--rp-color-info-hover);
   --_rp-button-accent-active: var(--rp-color-info-active);
@@ -158,7 +170,7 @@
   --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
   --_rp-button-fg: var(--_rp-button-accent-fg);
 }
-.rp-button--color-neutral[data-v-4a239144] {
+.rp-button--color-neutral[data-v-7005752e] {
   --_rp-button-accent: var(--rp-color-neutral);
   --_rp-button-accent-hover: var(--rp-color-neutral-hover);
   --_rp-button-accent-active: var(--rp-color-neutral-active);
@@ -175,42 +187,42 @@
   --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
   --_rp-button-fg: var(--_rp-button-accent-fg);
 }
-.rp-button--size-xs[data-v-4a239144] {
+.rp-button--size-xs[data-v-7005752e] {
   --_rp-button-height: calc(var(--rp-size-control-sm) - var(--rp-spacing-1));
   --_rp-button-padding-x: var(--rp-spacing-2);
   --_rp-button-font-size: var(--rp-font-size-xs);
 }
-.rp-button--size-sm[data-v-4a239144] {
+.rp-button--size-sm[data-v-7005752e] {
   --_rp-button-height: var(--rp-size-control-sm);
   --_rp-button-padding-x: var(--rp-spacing-3);
   --_rp-button-font-size: var(--rp-font-size-sm);
 }
-.rp-button--size-lg[data-v-4a239144] {
+.rp-button--size-lg[data-v-7005752e] {
   --_rp-button-height: var(--rp-size-control-lg);
   --_rp-button-padding-x: var(--rp-spacing-5);
   --_rp-button-font-size: var(--rp-font-size-lg);
 }
-.rp-button--size-xl[data-v-4a239144] {
+.rp-button--size-xl[data-v-7005752e] {
   --_rp-button-height: calc(var(--rp-size-control-lg) + var(--rp-spacing-2));
   --_rp-button-padding-x: var(--rp-spacing-6);
   --_rp-button-font-size: var(--rp-font-size-lg);
 }
-.rp-button--radius-xs[data-v-4a239144] {
+.rp-button--radius-xs[data-v-7005752e] {
   --_rp-button-radius: var(--rp-radius-xs);
 }
-.rp-button--radius-sm[data-v-4a239144] {
+.rp-button--radius-sm[data-v-7005752e] {
   --_rp-button-radius: var(--rp-radius-sm);
 }
-.rp-button--radius-md[data-v-4a239144] {
+.rp-button--radius-md[data-v-7005752e] {
   --_rp-button-radius: var(--rp-radius-md);
 }
-.rp-button--radius-lg[data-v-4a239144] {
+.rp-button--radius-lg[data-v-7005752e] {
   --_rp-button-radius: var(--rp-radius-lg);
 }
-.rp-button--radius-xl[data-v-4a239144] {
+.rp-button--radius-xl[data-v-7005752e] {
   --_rp-button-radius: var(--rp-radius-xl);
 }
-.rp-button--solid[data-v-4a239144] {
+.rp-button--solid[data-v-7005752e] {
   --_rp-button-bg: var(--_rp-button-accent);
   --_rp-button-bg-hover: var(--_rp-button-accent-hover);
   --_rp-button-bg-active: var(--_rp-button-accent-active);
@@ -219,7 +231,7 @@
   --_rp-button-border-active: var(--_rp-button-accent-active);
   --_rp-button-fg: var(--_rp-button-accent-on);
 }
-.rp-button--subtle[data-v-4a239144] {
+.rp-button--subtle[data-v-7005752e] {
   --_rp-button-bg: var(--_rp-button-accent-subtle-bg);
   --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
   --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
@@ -231,7 +243,7 @@
   --_rp-button-shadow-hover: none;
   --_rp-button-shadow-active: none;
 }
-.rp-button--surface[data-v-4a239144] {
+.rp-button--surface[data-v-7005752e] {
   --_rp-button-bg: var(--_rp-button-accent-subtle-bg);
   --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
   --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
@@ -243,7 +255,7 @@
   --_rp-button-shadow-hover: none;
   --_rp-button-shadow-active: none;
 }
-.rp-button--outline[data-v-4a239144] {
+.rp-button--outline[data-v-7005752e] {
   --_rp-button-bg: transparent;
   --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
   --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
@@ -255,7 +267,7 @@
   --_rp-button-shadow-hover: none;
   --_rp-button-shadow-active: none;
 }
-.rp-button--ghost[data-v-4a239144] {
+.rp-button--ghost[data-v-7005752e] {
   --_rp-button-bg: transparent;
   --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
   --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
@@ -267,7 +279,7 @@
   --_rp-button-shadow-hover: none;
   --_rp-button-shadow-active: none;
 }
-.rp-button--plain[data-v-4a239144] {
+.rp-button--plain[data-v-7005752e] {
   --_rp-button-bg: transparent;
   --_rp-button-bg-hover: transparent;
   --_rp-button-bg-active: transparent;
@@ -279,60 +291,81 @@
   --_rp-button-shadow-hover: none;
   --_rp-button-shadow-active: none;
 }
-.rp-button[data-v-4a239144]:disabled {
+.rp-button[data-v-7005752e]:disabled {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
   box-shadow: none;
   transform: none;
 }
-.rp-button[data-v-4a239144]:focus-visible {
+.rp-button[data-v-7005752e]:focus-visible {
   outline: none;
   border-color: var(--rp-color-primary);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-button__left[data-v-4a239144], .rp-button__right[data-v-4a239144] {
+.rp-button--loading .rp-button__content[data-v-7005752e] {
+  visibility: hidden;
+}
+.rp-button__content[data-v-7005752e] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--rp-spacing-2);
+}
+.rp-button__left[data-v-7005752e], .rp-button__right[data-v-7005752e] {
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
 }
-.rp-button__spinner[data-v-4a239144] {
+.rp-button__loading[data-v-7005752e] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+}
+.rp-button__spinner[data-v-7005752e] {
   display: block;
   width: 1em;
   height: 1em;
   flex-shrink: 0;
   transform-origin: center;
-  animation: rp-button-spin-4a239144 700ms linear infinite;
+  animation: rp-spinner-spin-7005752e 700ms linear infinite;
 }
-@keyframes rp-button-spin-4a239144 {
+@keyframes rp-spinner-spin-7005752e {
 to {
     transform: rotate(360deg);
 }
-}.rp-icon-button[data-v-4a239144] {
+}.rp-icon-button[data-v-7005752e] {
   width: var(--_rp-button-height);
   padding: 0;
 }
-.rp-icon-button__icon[data-v-4a239144], .rp-icon-button__spinner[data-v-4a239144] {
+.rp-icon-button__icon[data-v-7005752e] {
   width: 1em;
   height: 1em;
   flex-shrink: 0;
 }
-.rp-icon-button__icon[data-v-4a239144] {
+.rp-icon-button__icon[data-v-7005752e] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   line-height: 0;
 }
-.rp-icon-button__icon svg[data-v-4a239144-s] {
+.rp-icon-button__icon svg[data-v-7005752e-s] {
   display: block;
   width: 1em;
   height: 1em;
 }
-.rp-icon-button__spinner[data-v-4a239144] {
+.rp-icon-button__spinner[data-v-7005752e] {
   display: block;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
   transform-origin: center;
-  animation: rp-icon-button-spin-4a239144 700ms linear infinite;
+  animation: rp-spinner-spin-7005752e 700ms linear infinite;
 }
-@keyframes rp-icon-button-spin-4a239144 {
+@keyframes rp-spinner-spin-7005752e {
 to {
     transform: rotate(360deg);
 }

package/dist/icon-button.js

@@ -1,10 +1,11 @@
 import './icon-button.css';
-import { t as loader_circle_default } from "./loader-circle.js";
+import { n as loader_circle_default, t as getButtonColorStyle } from "./useButtonColor.js";
+import { r as isComponentPresetColor } from "./componentColors.js";
 import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createComponent, createIf, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, template, unref } from "vue";
+import { computed, createComponent, createIf, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, template, unref } from "vue";
 //#region src/components/icon-button/icon-button.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-4a239144 class=rp-icon-button__icon aria-hidden=true>");
-var t1 = template("<button data-v-4a239144>", 1);
+var t0 = template("<span data-v-7005752e class=rp-icon-button__icon aria-hidden=true>");
+var t1 = template("<button data-v-7005752e>", 1);
 //#endregion
 //#region src/components/icon-button/icon-button.vue
 var icon_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -28,22 +29,25 @@ var icon_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 	},
 	setup(__props) {
 		const props = __props;
-		const isLoading = computed(() => props.loading && !props.disabled);
 		const rootClass = computed(() => [...bem("rp-button", {
 			[props.variant ?? ""]: Boolean(props.variant),
-			[`color-${props.color}`]: Boolean(props.color),
+			[`color-${props.color}`]: isComponentPresetColor(props.color),
 			[`size-${props.size}`]: Boolean(props.size),
 			[`radius-${props.radius}`]: Boolean(props.radius)
 		}), "rp-icon-button"]);
+		const rootStyle = computed(() => getButtonColorStyle(props.color));
 		const n6 = t1();
 		renderEffect(() => {
+			const _loading = __props.loading;
 			setClass(n6, rootClass.value);
-			setProp(n6, "disabled", __props.disabled || isLoading.value || void 0);
+			setStyle(n6, rootStyle.value);
+			setProp(n6, "disabled", __props.disabled || _loading || void 0);
 			setProp(n6, "type", __props.type);
 			setAttr(n6, "aria-label", __props.ariaLabel || void 0);
+			setAttr(n6, "aria-busy", _loading || void 0);
 		});
 		setInsertionState(n6, null, 0);
-		createIf(() => isLoading.value, () => {
+		createIf(() => __props.loading, () => {
 			return createComponent(unref(loader_circle_default), {
 				class: "rp-icon-button__spinner",
 				"aria-hidden": "true"
@@ -56,7 +60,7 @@ var icon_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		}, 261);
 		return n6;
 	}
-}), [["__scopeId", "data-v-4a239144"]]);
+}), [["__scopeId", "data-v-7005752e"]]);
 //#endregion
 export { icon_button_default as t };