ropav 0.0.4 → 0.0.6

package/README.md

@@ -1,60 +1,38 @@
 # Ropav
 
-Experimental UI component library for Vue Vapor.
+Minimal UI components for Vue Vapor.
 
-## Install
-
-```bash
-pnpm add ropav vue
-```
-
-## Usage
+Ropav components require Vapor mode. Use `createVaporApp`, or install Vue's
+Vapor interop plugin in a regular app.
 
 ```ts
-import 'ropav/base.css';
-import { Button, Input } from 'ropav';
+import { createVaporApp } from 'vue';
+
+createVaporApp(App).mount('#app');
 ```
 
-Deep imports are available for individual components:
+or
 
 ```ts
-import { Button } from 'ropav/button';
-```
-
-## Theming and tokens
+import { createApp, vaporInteropPlugin } from 'vue';
 
-`ropav/base.css` exposes the public runtime token API as CSS custom properties. These
-tokens are intended for stable theme axes that consumers may override without
-rebuilding the library:
+createApp(App).use(vaporInteropPlugin).mount('#app');
+```
 
-- semantic colors, surfaces, text, borders, focus rings, overlays, `on-*`, and
-  `*-fg`
-- typography: `--rp-font-family`, `--rp-font-size-*`, `--rp-font-weight-*`, and
-  `--rp-line-height-*`
-- density and control primitives: `--rp-spacing-*`, `--rp-size-control-*`,
-  `--rp-border-width-*`, and `--rp-opacity-disabled`
-- radius, shadows, and transitions
+## Install
 
-Sass tokens exported through `ropav/scss/*` are implementation/build-time tokens.
-They may include raw palette values, z-index values, component layout constants,
-and mixin inputs that are not part of the runtime CSS variable contract.
+```bash
+pnpm add ropav
+```
 
-Component-local custom properties that start with `--_` are private implementation
-details. They are not versioned API and may change between releases.
+## Setup
 
-Migration note: Ropav only supports the allowlisted runtime tokens above as public
-CSS variables. Raw palette variables such as `--rp-color-gray-*`,
-`--rp-color-white`, `--rp-color-black`, z-index variables, component layout
-variables, and component-state variables such as `--rp-button-solid-hover-bg` are
-not public runtime tokens.
+```ts
+import 'ropav/base.css';
+```
 
-## Development
+Import the components you need:
 
-```bash
-pnpm install
-pnpm dev
-pnpm lint
-pnpm format:check
-pnpm test
-pnpm build
+```ts
+import { Button } from 'ropav';
 ```

package/dist/base.css

@@ -11,20 +11,20 @@
   --rp-color-text-secondary: #646464;
   --rp-color-text-disabled: #8d8d8d;
   --rp-color-text-inverted: #ffffff;
-  --rp-color-background: #ffffff;
-  --rp-color-surface: #ffffff;
+  --rp-color-background: #f9f9f9;
+  --rp-color-surface: #fcfcfc;
   --rp-color-surface-raised: #ffffff;
   --rp-color-surface-muted: #f9f9f9;
   --rp-color-surface-hover: #f0f0f0;
-  --rp-color-button-default-bg: #f9f9f9;
-  --rp-color-button-default-bg-hover: #f0f0f0;
+  --rp-color-button-default-bg: var(--rp-color-surface);
+  --rp-color-button-default-bg-hover: var(--rp-color-surface-hover);
   --rp-color-button-default-bg-active: #e8e8e8;
   --rp-color-surface-inverted: #202020;
   --rp-color-overlay: rgba(17, 17, 17, 0.55);
   --rp-color-border: #d9d9d9;
   --rp-color-border-hover: #bbbbbb;
   --rp-color-focus-ring: color-mix(in srgb, var(--rp-color-primary) 32%, transparent);
-  --rp-color-control-bg: #f9f9f9;
+  --rp-color-control-bg: var(--rp-color-surface);
   --rp-color-control-readonly-bg: var(--rp-color-surface-muted);
   --rp-color-control-fg: var(--rp-color-text);
   --rp-color-control-placeholder: var(--rp-color-text-secondary);
@@ -126,6 +126,7 @@
   --rp-spacing-10: 2.5rem;
   --rp-spacing-12: 3rem;
   --rp-radius-none: 0;
+  --rp-radius-xs: 0.25rem;
   --rp-radius-sm: 0.375rem;
   --rp-radius-md: 0.75rem;
   --rp-radius-lg: 1rem;
@@ -151,20 +152,20 @@ html.dark {
   --rp-color-text-secondary: #b4b4b4;
   --rp-color-text-disabled: #6e6e6e;
   --rp-color-text-inverted: #202020;
-  --rp-color-background: #111111;
-  --rp-color-surface: #111111;
-  --rp-color-surface-raised: #191919;
-  --rp-color-surface-muted: #191919;
-  --rp-color-surface-hover: #222222;
-  --rp-color-button-default-bg: #191919;
-  --rp-color-button-default-bg-hover: #222222;
-  --rp-color-button-default-bg-active: #2a2a2a;
+  --rp-color-background: #191919;
+  --rp-color-surface: #222222;
+  --rp-color-surface-raised: #2a2a2a;
+  --rp-color-surface-muted: #222222;
+  --rp-color-surface-hover: #2a2a2a;
+  --rp-color-button-default-bg: var(--rp-color-surface);
+  --rp-color-button-default-bg-hover: var(--rp-color-surface-hover);
+  --rp-color-button-default-bg-active: #313131;
   --rp-color-surface-inverted: #f9f9f9;
   --rp-color-overlay: rgba(17, 17, 17, 0.75);
   --rp-color-border: #3a3a3a;
   --rp-color-border-hover: #606060;
   --rp-color-focus-ring: color-mix(in srgb, var(--rp-color-primary) 45%, transparent);
-  --rp-color-control-bg: #191919;
+  --rp-color-control-bg: var(--rp-color-surface);
   --rp-color-control-readonly-bg: var(--rp-color-surface-muted);
   --rp-color-control-fg: #eeeeee;
   --rp-color-control-placeholder: #6e6e6e;
@@ -220,4 +221,25 @@ html.dark {
   --rp-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
   --rp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
   --rp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
+}
+
+.rp-spinner {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  transform-origin: center;
+  animation: rp-spinner-spin 700ms linear infinite;
+}
+
+.rp-spinner > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+@keyframes rp-spinner-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }

package/dist/button-group.css

@@ -0,0 +1,50 @@
+.rp-button-group[data-v-d9f79a5b] {
+  display: inline-flex;
+  align-items: stretch;
+  gap: var(--rp-spacing-2);
+  font-family: var(--rp-font-family);
+  vertical-align: middle;
+}
+.rp-button-group--vertical[data-v-d9f79a5b] {
+  flex-direction: column;
+}
+.rp-button-group--wrap[data-v-d9f79a5b] {
+  flex-wrap: wrap;
+}
+.rp-button-group--attached[data-v-d9f79a5b] {
+  gap: 0;
+}
+.rp-button-group--attached[data-v-d9f79a5b]:focus-within {
+  position: relative;
+  z-index: 1;
+}
+.rp-button-group--attached .rp-button[data-v-d9f79a5b-s] {
+  position: relative;
+  border-radius: 0;
+  box-shadow: none;
+}
+.rp-button-group--attached .rp-button[data-v-d9f79a5b-s]:is(:hover, :focus-visible) {
+  z-index: 1;
+}
+.rp-button-group--attached:not(.rp-button-group--vertical) .rp-button[data-v-d9f79a5b-s]:not(:first-child) {
+  margin-inline-start: calc(var(--rp-border-width-thin) * -1);
+}
+.rp-button-group--attached:not(.rp-button-group--vertical) .rp-button[data-v-d9f79a5b-s]:first-child {
+  border-start-start-radius: var(--_rp-button-radius);
+  border-end-start-radius: var(--_rp-button-radius);
+}
+.rp-button-group--attached:not(.rp-button-group--vertical) .rp-button[data-v-d9f79a5b-s]:last-child {
+  border-start-end-radius: var(--_rp-button-radius);
+  border-end-end-radius: var(--_rp-button-radius);
+}
+.rp-button-group--attached.rp-button-group--vertical .rp-button[data-v-d9f79a5b-s]:not(:first-child) {
+  margin-block-start: calc(var(--rp-border-width-thin) * -1);
+}
+.rp-button-group--attached.rp-button-group--vertical .rp-button[data-v-d9f79a5b-s]:first-child {
+  border-start-start-radius: var(--_rp-button-radius);
+  border-start-end-radius: var(--_rp-button-radius);
+}
+.rp-button-group--attached.rp-button-group--vertical .rp-button[data-v-d9f79a5b-s]:last-child {
+  border-end-start-radius: var(--_rp-button-radius);
+  border-end-end-radius: var(--_rp-button-radius);
+}

package/dist/button-group.js

@@ -0,0 +1,49 @@
+import './button-group.css';
+import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { computed, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, template } from "vue";
+//#region src/components/button-group/button-group.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-v-d9f79a5b role=group>", 1);
+//#endregion
+//#region src/components/button-group/button-group.vue
+var button_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpButtonGroup",
+	__name: "button-group",
+	props: {
+		id: {},
+		orientation: { default: "horizontal" },
+		attached: {
+			type: Boolean,
+			default: false
+		},
+		wrap: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: {},
+		describedby: {},
+		labelledby: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const rootClass = computed(() => bem("rp-button-group", {
+			vertical: props.orientation === "vertical",
+			attached: props.attached,
+			wrap: props.wrap
+		}));
+		const n1 = t0();
+		renderEffect(() => {
+			setProp(n1, "id", __props.id);
+			setClass(n1, rootClass.value);
+			setAttr(n1, "aria-label", __props.ariaLabel || void 0);
+			setAttr(n1, "aria-labelledby", __props.labelledby);
+			setAttr(n1, "aria-describedby", __props.describedby);
+		});
+		setInsertionState(n1, null, 0);
+		createSlot("default", null, null, 1);
+		return n1;
+	}
+}), [["__scopeId", "data-v-d9f79a5b"]]);
+//#endregion
+export { button_group_default as t };
+
+//# sourceMappingURL=button-group.js.map

package/dist/button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.js","names":[],"sources":["../src/components/button-group/button-group.vue","../src/components/button-group/button-group.vue"],"sourcesContent":["<template>\n    <div\n        :id=\"id\"\n        :class=\"rootClass\"\n        role=\"group\"\n        :aria-label=\"ariaLabel || undefined\"\n        :aria-labelledby=\"labelledby\"\n        :aria-describedby=\"describedby\"\n    >\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport { bem } from '@/utils/bem';\nimport type { ButtonGroupProps } from './types';\n\ndefineOptions({ name: 'RpButtonGroup' });\n\nconst props = withDefaults(defineProps<ButtonGroupProps>(), {\n    orientation: 'horizontal',\n    attached: false,\n    wrap: false,\n});\n\nconst rootClass = computed(() =>\n    bem('rp-button-group', {\n        vertical: props.orientation === 'vertical',\n        attached: props.attached,\n        wrap: props.wrap,\n    }),\n);\n</script>\n\n<style src=\"./button-group.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div\n        :id=\"id\"\n        :class=\"rootClass\"\n        role=\"group\"\n        :aria-label=\"ariaLabel || undefined\"\n        :aria-labelledby=\"labelledby\"\n        :aria-describedby=\"describedby\"\n    >\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport { bem } from '@/utils/bem';\nimport type { ButtonGroupProps } from './types';\n\ndefineOptions({ name: 'RpButtonGroup' });\n\nconst props = withDefaults(defineProps<ButtonGroupProps>(), {\n    orientation: 'horizontal',\n    attached: false,\n    wrap: false,\n});\n\nconst rootClass = computed(() =>\n    bem('rp-button-group', {\n        vertical: props.orientation === 'vertical',\n        attached: props.attached,\n        wrap: props.wrap,\n    }),\n);\n</script>\n\n<style src=\"./button-group.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,QAAQ;EAMd,MAAM,YAAY,eACd,IAAI,mBAAmB;GACnB,UAAU,MAAM,gBAAgB;GAChC,UAAU,MAAM;GAChB,MAAM,MAAM;EAChB,CAAC,CACL;;;eA9BS,MAAI,QAAA,EAAE;gBACC,UAAA,KAAS;eAEhB,cAAY,QAAA,aAAa,KAAA,CAAS;eAClC,mBAAiB,QAAA,UAAU;eAC3B,oBAAkB,QAAA,WAAW"}

package/dist/button.css

@@ -1,14 +1,26 @@
-.rp-button[data-v-b8d57358] {
-  --_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-4a751fe6] {
+  --_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-b8d57358]:hover:not(:disabled) {
+.rp-button[data-v-4a751fe6]: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-b8d57358]:active:not(:disabled) {
+.rp-button[data-v-4a751fe6]: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-b8d57358] {
+.rp-button--color-primary[data-v-4a751fe6] {
   --_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-b8d57358] {
+.rp-button--color-secondary[data-v-4a751fe6] {
   --_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-b8d57358] {
+.rp-button--color-success[data-v-4a751fe6] {
   --_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-b8d57358] {
+.rp-button--color-warning[data-v-4a751fe6] {
   --_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-b8d57358] {
+.rp-button--color-danger[data-v-4a751fe6] {
   --_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-b8d57358] {
+.rp-button--color-info[data-v-4a751fe6] {
   --_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-b8d57358] {
+.rp-button--color-neutral[data-v-4a751fe6] {
   --_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-b8d57358] {
+.rp-button--size-xs[data-v-4a751fe6] {
   --_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-b8d57358] {
+.rp-button--size-sm[data-v-4a751fe6] {
   --_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-b8d57358] {
+.rp-button--size-lg[data-v-4a751fe6] {
   --_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-b8d57358] {
+.rp-button--size-xl[data-v-4a751fe6] {
   --_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-b8d57358] {
-  --_rp-button-radius: var(--rp-radius-sm);
+.rp-button--radius-xs[data-v-4a751fe6] {
+  --_rp-button-radius: var(--rp-radius-xs);
 }
-.rp-button--radius-sm[data-v-b8d57358] {
+.rp-button--radius-sm[data-v-4a751fe6] {
   --_rp-button-radius: var(--rp-radius-sm);
 }
-.rp-button--radius-md[data-v-b8d57358] {
+.rp-button--radius-md[data-v-4a751fe6] {
   --_rp-button-radius: var(--rp-radius-md);
 }
-.rp-button--radius-lg[data-v-b8d57358] {
+.rp-button--radius-lg[data-v-4a751fe6] {
   --_rp-button-radius: var(--rp-radius-lg);
 }
-.rp-button--radius-xl[data-v-b8d57358] {
+.rp-button--radius-xl[data-v-4a751fe6] {
   --_rp-button-radius: var(--rp-radius-xl);
 }
-.rp-button--solid[data-v-b8d57358] {
+.rp-button--solid[data-v-4a751fe6] {
   --_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-b8d57358] {
+.rp-button--subtle[data-v-4a751fe6] {
   --_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-b8d57358] {
+.rp-button--surface[data-v-4a751fe6] {
   --_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-b8d57358] {
+.rp-button--outline[data-v-4a751fe6] {
   --_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-b8d57358] {
+.rp-button--ghost[data-v-4a751fe6] {
   --_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-b8d57358] {
+.rp-button--plain[data-v-4a751fe6] {
   --_rp-button-bg: transparent;
   --_rp-button-bg-hover: transparent;
   --_rp-button-bg-active: transparent;
@@ -279,31 +291,49 @@
   --_rp-button-shadow-hover: none;
   --_rp-button-shadow-active: none;
 }
-.rp-button[data-v-b8d57358]:disabled {
+.rp-button[data-v-4a751fe6]:disabled {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
   box-shadow: none;
   transform: none;
 }
-.rp-button[data-v-b8d57358]:focus-visible {
+.rp-button[data-v-4a751fe6]: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-b8d57358], .rp-button__right[data-v-b8d57358] {
+.rp-button--loading .rp-button__content[data-v-4a751fe6] {
+  visibility: hidden;
+}
+.rp-button__content[data-v-4a751fe6] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--rp-spacing-2);
+}
+.rp-button__left[data-v-4a751fe6], .rp-button__right[data-v-4a751fe6] {
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
 }
-.rp-button__spinner[data-v-b8d57358] {
+.rp-button__loading[data-v-4a751fe6] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+}
+.rp-button__spinner[data-v-4a751fe6] {
   display: block;
   width: 1em;
   height: 1em;
   flex-shrink: 0;
   transform-origin: center;
-  animation: rp-button-spin-b8d57358 700ms linear infinite;
+  animation: rp-spinner-spin-4a751fe6 700ms linear infinite;
 }
-@keyframes rp-button-spin-b8d57358 {
+@keyframes rp-spinner-spin-4a751fe6 {
 to {
     transform: rotate(360deg);
 }

package/dist/button.js

@@ -1,20 +1,13 @@
 import './button.css';
+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 { child, computed, createComponent, createIf, createSlot, defineVaporComponent, markRaw, renderEffect, setClass, setInsertionState, setProp, template, unref } from "vue";
-//#region ~icons/lucide/loader-circle
-var t0$1 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"M21 12a9 9 0 1 1-6.219-8.56\">", 3, 1);
-function render(_ctx) {
-	return t0$1();
-}
-var loader_circle_default = markRaw(defineVaporComponent({
-	name: "lucide-loader-circle",
-	render
-}));
-//#endregion
+import { child, computed, createComponent, createIf, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, template, unref } from "vue";
 //#region src/components/button/button.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-b8d57358 class=rp-button__left>");
-var t1 = template("<span data-v-b8d57358 class=rp-button__right>");
-var t2 = template("<button data-v-b8d57358><span data-v-b8d57358 class=rp-button__label></span>", 1);
+var t0 = template("<span data-v-4a751fe6 class=rp-button__loading aria-hidden=true>");
+var t1 = template("<span data-v-4a751fe6 class=rp-button__left>");
+var t2 = template("<span data-v-4a751fe6 class=rp-button__right>");
+var t3 = template("<button data-v-4a751fe6><span data-v-4a751fe6 class=rp-button__content><span data-v-4a751fe6 class=rp-button__label></span>", 1);
 //#endregion
 //#region src/components/button/button.vue
 var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -37,46 +30,54 @@ var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 	},
 	setup(__props, { slots: $slots }) {
 		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)
+			[`radius-${props.radius}`]: Boolean(props.radius),
+			loading: props.loading
 		}));
-		const n13 = t2();
-		const n8 = child(n13, 2);
+		const rootStyle = computed(() => getButtonColorStyle(props.color));
+		const n17 = t3();
+		const n16 = child(n17, 1);
+		const n11 = child(n16, 1);
 		renderEffect(() => {
-			setClass(n13, rootClass.value);
-			setProp(n13, "disabled", __props.disabled || isLoading.value || void 0);
-			setProp(n13, "type", __props.type);
+			const _loading = __props.loading;
+			setClass(n17, rootClass.value);
+			setStyle(n17, rootStyle.value);
+			setProp(n17, "disabled", __props.disabled || _loading || void 0);
+			setProp(n17, "type", __props.type);
+			setAttr(n17, "aria-busy", _loading || void 0);
 		});
-		setInsertionState(n13, 0, 0);
-		createIf(() => isLoading.value, () => {
-			return createComponent(unref(loader_circle_default), {
-				class: "rp-button__spinner",
-				"aria-hidden": "true"
-			});
+		setInsertionState(n17, 0, 0);
+		createIf(() => __props.loading, () => {
+			const n5 = t0();
+			setInsertionState(n5, null, 0);
+			createSlot("loading", null, () => {
+				return createComponent(unref(loader_circle_default), { class: "rp-button__spinner" });
+			}, 1);
+			return n5;
 		});
-		setInsertionState(n13, 0, 1);
-		createIf(() => $slots.left && !isLoading.value, () => {
-			const n6 = t0();
-			setInsertionState(n6, null, 0);
+		renderEffect(() => setAttr(n16, "aria-hidden", __props.loading || void 0));
+		setInsertionState(n16, 0, 0);
+		createIf(() => $slots.left, () => {
+			const n9 = t1();
+			setInsertionState(n9, null, 0);
 			createSlot("left", null, null, 1);
-			return n6;
+			return n9;
 		});
-		setInsertionState(n8, null, 0);
+		setInsertionState(n11, null, 0);
 		createSlot("default", null, null, 1);
-		setInsertionState(n13, null, 3);
+		setInsertionState(n16, null, 2);
 		createIf(() => $slots.right, () => {
-			const n12 = t1();
-			setInsertionState(n12, null, 0);
+			const n15 = t2();
+			setInsertionState(n15, null, 0);
 			createSlot("right", null, null, 1);
-			return n12;
+			return n15;
 		});
-		return n13;
+		return n17;
 	}
-}), [["__scopeId", "data-v-b8d57358"]]);
+}), [["__scopeId", "data-v-4a751fe6"]]);
 //#endregion
 export { button_default as t };