@sewadah/selaras 0.8.0 → 0.10.0

package/dist/runtime/components/Input.vue

@@ -1,13 +1,13 @@
 <script setup>
-import { computed, mergeProps } from "vue";
+import { computed, mergeProps, nextTick, ref, useAttrs } from "vue";
 import { useFormField } from "../composables/use-form-field";
-import { useIcons } from "../composables/use-icons";
-import { useMessages } from "../composables/use-messages";
+import FieldClearButton from "../internal/FieldClearButton.vue";
 import { inputTheme } from "../theme/input";
+import { useFieldAdornments } from "../utils/field-adornments";
+import { canClearField, fieldClearWidths, isFieldReadonly } from "../utils/field-clear";
 import { isNativeInputA11yAttr, isNativeInputAttr } from "../utils/native-input";
 import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useFallthroughAttrs, useRootProps, useThemeProps } from "../utils/ui";
-import Button from "./Button.vue";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -26,21 +26,29 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
+const slots = defineSlots();
+const { leading, trailing, padding, clearOffset } = useFieldAdornments();
 const field = useFormField();
+const attrs = useAttrs();
+const inputRef = ref();
 const effectivePlaceholder = computed(() => props.placeholder || (field?.floatingLabel.value ? " " : void 0));
 const inputId = computed(() => props.id ?? field?.id);
 const inputInvalid = computed(() => props.invalid || (field?.invalid.value ?? false));
 const describedBy = computed(() => field?.describedBy.value);
-const hasValue = computed(() => props.modelValue !== void 0 && props.modelValue !== "");
-const showClear = computed(() => !!props.clearable && !props.disabled && hasValue.value);
-function clear() {
+const hasValue = computed(() => props.modelValue != null && props.modelValue !== "");
+const showClear = computed(() => canClearField(props.clearable, hasValue.value, props.disabled, isFieldReadonly(attrs.readonly)));
+async function clear() {
+  if (!showClear.value)
+    return;
   emit("update:modelValue", "");
+  await nextTick();
+  inputRef.value?.focus();
 }
 const themeProps = useThemeProps("input");
 const effectiveSize = computed(() => props.size ?? field?.size ?? themeProps.value.size ?? "md");
-const clearSize = computed(() => ({ sm: "sm", md: "sm", lg: "md" })[effectiveSize.value]);
-const icons = useIcons();
-const messages = useMessages();
+const adornmentButtonSize = computed(() => ({ sm: "sm", md: "sm", lg: "md" })[effectiveSize.value]);
+const adornmentScope = computed(() => ({ disabled: !!props.disabled, size: effectiveSize.value, buttonSize: adornmentButtonSize.value }));
+const clearWidth = computed(() => fieldClearWidths[effectiveSize.value]);
 const theme = useComponentTheme("input", inputTheme);
 const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? themeProps.value.color ?? "primary", "primary"));
 const ui = computed(() => theme.value({
@@ -55,13 +63,23 @@ const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root, { excl
 const nativeInputAttrs = useFallthroughAttrs(isInputAttr);
 const baseProps = computed(() => resolveSlot(ui.value.base, props.ui?.base));
 const inputProps = computed(() => mergeProps(baseProps.value, nativeInputAttrs.value));
+function adornedInputProps() {
+  return mergeProps({ style: padding(!!slots.leading, !!slots.trailing, showClear.value ? clearWidth.value : "0rem") }, inputProps.value);
+}
+function clearProps() {
+  return mergeProps({ style: slots.trailing ? clearOffset() : void 0 }, resolveSlot(ui.value.clear, props.ui?.clear));
+}
 </script>
 
 <template>
-  <div :data-selaras-color="inputInvalid ? 'danger' : effectiveColor" :data-selaras-field-leading="icon ? '' : void 0" v-bind="rootProps">
-    <Icon v-if="icon" :name="icon" v-bind="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon)" />
+  <div :data-selaras-color="inputInvalid ? 'danger' : effectiveColor" :data-selaras-field-leading="icon || slots.leading ? '' : void 0" v-bind="rootProps">
+    <fieldset v-if="slots.leading" ref="leading" :disabled="disabled" :inert="disabled || void 0" v-bind="resolveSlot(ui.leading, props.ui?.leading)">
+      <slot name="leading" v-bind="adornmentScope" />
+    </fieldset>
+    <Icon v-else-if="icon" :name="icon" v-bind="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon)" />
     <input
       :id="inputId"
+      ref="inputRef"
       data-ui-group-item
       :value="modelValue"
       :type="type"
@@ -70,24 +88,22 @@ const inputProps = computed(() => mergeProps(baseProps.value, nativeInputAttrs.v
       :disabled="disabled"
       :aria-invalid="inputInvalid || void 0"
       :aria-describedby="describedBy"
-      v-bind="inputProps"
+      v-bind="adornedInputProps()"
       @input="$emit('update:modelValue', $event.target.value)"
     >
-    <Button
+    <FieldClearButton
       v-if="showClear"
-      :size="clearSize"
-      variant="text"
-      color="neutral"
-      :aria-label="messages.clear"
-      v-bind="resolveSlot(ui.clear, props.ui?.clear)"
+      :size="effectiveSize"
+      v-bind="clearProps()"
       @click="clear"
     >
-      <template #icon="{ class: iconClass }">
-        <slot name="clear-icon">
-          <Icon :name="icons.close" :class="iconClass" />
-        </slot>
+      <template v-if="slots['clear-icon']" #default>
+        <slot name="clear-icon" />
       </template>
-    </Button>
-    <Icon v-else-if="trailingIcon" :name="trailingIcon" v-bind="resolveSlot(ui.trailingIcon, props.ui?.trailingIcon)" />
+    </FieldClearButton>
+    <Icon v-else-if="trailingIcon && !slots.trailing" :name="trailingIcon" v-bind="resolveSlot(ui.trailingIcon, props.ui?.trailingIcon)" />
+    <fieldset v-if="slots.trailing" ref="trailing" :disabled="disabled" :inert="disabled || void 0" v-bind="resolveSlot(ui.trailing, props.ui?.trailing)">
+      <slot name="trailing" v-bind="adornmentScope" />
+    </fieldset>
   </div>
 </template>

package/dist/runtime/components/Input.vue.d.ts

@@ -1,9 +1,11 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { InputThemeSlots } from '../theme/input.js';
 import type { ColorRole } from '../utils/color-registry.js';
+import type { FieldAdornmentSlotProps } from '../utils/field-adornments.js';
 import type { UiProp } from '../utils/ui.js';
 import { inputTheme } from '../theme/input.js';
 type InputVariants = VariantProps<typeof inputTheme>;
+type __VLS_Slots = InputSlots;
 export interface InputProps {
     id?: string;
     name?: string;
@@ -23,10 +25,11 @@ export interface InputProps {
 export interface InputEmits {
     'update:modelValue': [value: string];
 }
-declare var __VLS_15: {};
-type __VLS_Slots = {} & {
-    'clear-icon'?: (props: typeof __VLS_15) => any;
-};
+export interface InputSlots {
+    'leading'?: (props: FieldAdornmentSlotProps) => any;
+    'trailing'?: (props: FieldAdornmentSlotProps) => any;
+    'clear-icon'?: () => any;
+}
 declare const __VLS_base: import("vue").DefineComponent<InputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<InputProps> & Readonly<{

package/dist/runtime/components/Select.vue

@@ -75,6 +75,12 @@ const unscopedSlots = ["header", "footer", "empty", "empty-filter", "filter-icon
     @update:model-value="updateValue"
     @update:search-term="emit('update:searchTerm', $event)"
   >
+    <template v-if="slots.leading" #leading="scope">
+      <slot name="leading" v-bind="scope" />
+    </template>
+    <template v-if="slots.trailing" #trailing="scope">
+      <slot name="trailing" v-bind="scope" />
+    </template>
     <template v-if="slots.item" #item="{ item }">
       <slot name="item" :item="itemData(item)" />
     </template>

package/dist/runtime/components/Textarea.d.vue.ts

@@ -1,9 +1,11 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { TextareaThemeSlots } from '../theme/textarea.js';
 import type { ColorRole } from '../utils/color-registry.js';
+import type { FieldAdornmentSlotProps } from '../utils/field-adornments.js';
 import type { UiProp } from '../utils/ui.js';
 import { textareaTheme } from '../theme/textarea.js';
 type TextareaVariants = VariantProps<typeof textareaTheme>;
+type __VLS_Slots = TextareaSlots;
 export interface TextareaProps {
     id?: string;
     name?: string;
@@ -27,10 +29,11 @@ export interface TextareaProps {
 export interface TextareaEmits {
     'update:modelValue': [value: string];
 }
-declare var __VLS_15: {};
-type __VLS_Slots = {} & {
-    'clear-icon'?: (props: typeof __VLS_15) => any;
-};
+export interface TextareaSlots {
+    'leading'?: (props: FieldAdornmentSlotProps) => any;
+    'trailing'?: (props: FieldAdornmentSlotProps) => any;
+    'clear-icon'?: () => any;
+}
 declare const __VLS_base: import("vue").DefineComponent<TextareaProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<TextareaProps> & Readonly<{

package/dist/runtime/components/Textarea.vue

@@ -1,13 +1,13 @@
 <script setup>
-import { computed, mergeProps, nextTick, onMounted, ref, watch } from "vue";
+import { computed, mergeProps, nextTick, onMounted, ref, useAttrs, watch } from "vue";
 import { useFormField } from "../composables/use-form-field";
-import { useIcons } from "../composables/use-icons";
-import { useMessages } from "../composables/use-messages";
+import FieldClearButton from "../internal/FieldClearButton.vue";
 import { textareaTheme } from "../theme/textarea";
+import { useFieldAdornments } from "../utils/field-adornments";
+import { canClearField, fieldClearWidths, isFieldReadonly } from "../utils/field-clear";
 import { isNativeInputA11yAttr, isNativeInputAttr } from "../utils/native-input";
 import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useFallthroughAttrs, useRootProps } from "../utils/ui";
-import Button from "./Button.vue";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -28,20 +28,28 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
+const slots = defineSlots();
+const { leading, trailing, padding, clearOffset } = useFieldAdornments();
 const field = useFormField();
+const attrs = useAttrs();
+const textareaRef = ref();
 const effectivePlaceholder = computed(() => props.placeholder || (field?.floatingLabel.value ? " " : void 0));
 const textareaId = computed(() => props.id ?? field?.id);
 const textareaInvalid = computed(() => props.invalid || (field?.invalid.value ?? false));
 const describedBy = computed(() => field?.describedBy.value);
-const hasValue = computed(() => props.modelValue !== void 0 && props.modelValue !== "");
-const showClear = computed(() => !!props.clearable && !props.disabled && hasValue.value);
-function clear() {
+const hasValue = computed(() => props.modelValue != null && props.modelValue !== "");
+const showClear = computed(() => canClearField(props.clearable, hasValue.value, props.disabled, isFieldReadonly(attrs.readonly)));
+async function clear() {
+  if (!showClear.value)
+    return;
   emit("update:modelValue", "");
+  await nextTick();
+  textareaRef.value?.focus();
 }
 const effectiveSize = computed(() => props.size ?? field?.size ?? "md");
-const clearSize = computed(() => ({ sm: "sm", md: "sm", lg: "md" })[effectiveSize.value]);
-const icons = useIcons();
-const messages = useMessages();
+const adornmentButtonSize = computed(() => ({ sm: "sm", md: "sm", lg: "md" })[effectiveSize.value]);
+const adornmentScope = computed(() => ({ disabled: !!props.disabled, size: effectiveSize.value, buttonSize: adornmentButtonSize.value }));
+const clearWidth = computed(() => fieldClearWidths[effectiveSize.value]);
 const theme = useComponentTheme("textarea", textareaTheme);
 const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
 const ui = computed(() => theme.value({
@@ -56,7 +64,6 @@ const isTextareaAttr = (key) => isNativeInputAttr(key) || isNativeInputA11yAttr(
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root, { exclude: isTextareaAttr });
 const nativeTextareaAttrs = useFallthroughAttrs(isTextareaAttr);
 const baseProps = computed(() => mergeProps(resolveSlot(ui.value.base, props.ui?.base), nativeTextareaAttrs.value));
-const textareaRef = ref();
 async function resize() {
   if (!props.autoresize || !textareaRef.value)
     return;
@@ -66,8 +73,8 @@ async function resize() {
   if (props.maxrows) {
     const cs = getComputedStyle(el);
     const lineHeight = Number.parseFloat(cs.lineHeight);
-    const padding = Number.parseFloat(cs.paddingTop) + Number.parseFloat(cs.paddingBottom);
-    const maxHeight = lineHeight * props.maxrows + padding;
+    const padding2 = Number.parseFloat(cs.paddingTop) + Number.parseFloat(cs.paddingBottom);
+    const maxHeight = lineHeight * props.maxrows + padding2;
     el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`;
     el.style.overflowY = el.scrollHeight > maxHeight ? "auto" : "hidden";
     return;
@@ -76,11 +83,20 @@ async function resize() {
 }
 onMounted(resize);
 watch(() => props.modelValue, resize);
+function adornedInputProps() {
+  return mergeProps({ style: padding(!!slots.leading, !!slots.trailing, showClear.value ? clearWidth.value : "0rem") }, baseProps.value);
+}
+function clearProps() {
+  return mergeProps({ style: slots.trailing ? clearOffset() : void 0 }, resolveSlot(ui.value.clear, props.ui?.clear));
+}
 </script>
 
 <template>
-  <div :data-selaras-color="textareaInvalid ? 'danger' : effectiveColor" :data-selaras-field-leading="icon ? '' : void 0" v-bind="rootProps">
-    <Icon v-if="icon" :name="icon" v-bind="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon)" />
+  <div :data-selaras-color="textareaInvalid ? 'danger' : effectiveColor" :data-selaras-field-leading="icon || slots.leading ? '' : void 0" v-bind="rootProps">
+    <fieldset v-if="slots.leading" ref="leading" :disabled="disabled" :inert="disabled || void 0" v-bind="resolveSlot(ui.leading, props.ui?.leading)">
+      <slot name="leading" v-bind="adornmentScope" />
+    </fieldset>
+    <Icon v-else-if="icon" :name="icon" v-bind="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon)" />
     <textarea
       :id="textareaId"
       ref="textareaRef"
@@ -92,25 +108,23 @@ watch(() => props.modelValue, resize);
       :disabled="disabled"
       :aria-invalid="textareaInvalid || void 0"
       :aria-describedby="describedBy"
-      v-bind="baseProps"
+      v-bind="adornedInputProps()"
       @input="$emit('update:modelValue', $event.target.value);
   resize()"
     />
-    <Button
+    <FieldClearButton
       v-if="showClear"
-      :size="clearSize"
-      variant="text"
-      color="neutral"
-      :aria-label="messages.clear"
-      v-bind="resolveSlot(ui.clear, props.ui?.clear)"
+      :size="effectiveSize"
+      v-bind="clearProps()"
       @click="clear"
     >
-      <template #icon="{ class: iconClass }">
-        <slot name="clear-icon">
-          <Icon :name="icons.close" :class="iconClass" />
-        </slot>
+      <template v-if="slots['clear-icon']" #default>
+        <slot name="clear-icon" />
       </template>
-    </Button>
-    <Icon v-else-if="trailingIcon" :name="trailingIcon" v-bind="resolveSlot(ui.trailingIcon, props.ui?.trailingIcon)" />
+    </FieldClearButton>
+    <Icon v-else-if="trailingIcon && !slots.trailing" :name="trailingIcon" v-bind="resolveSlot(ui.trailingIcon, props.ui?.trailingIcon)" />
+    <fieldset v-if="slots.trailing" ref="trailing" :disabled="disabled" :inert="disabled || void 0" v-bind="resolveSlot(ui.trailing, props.ui?.trailing)">
+      <slot name="trailing" v-bind="adornmentScope" />
+    </fieldset>
   </div>
 </template>

package/dist/runtime/components/Textarea.vue.d.ts

@@ -1,9 +1,11 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { TextareaThemeSlots } from '../theme/textarea.js';
 import type { ColorRole } from '../utils/color-registry.js';
+import type { FieldAdornmentSlotProps } from '../utils/field-adornments.js';
 import type { UiProp } from '../utils/ui.js';
 import { textareaTheme } from '../theme/textarea.js';
 type TextareaVariants = VariantProps<typeof textareaTheme>;
+type __VLS_Slots = TextareaSlots;
 export interface TextareaProps {
     id?: string;
     name?: string;
@@ -27,10 +29,11 @@ export interface TextareaProps {
 export interface TextareaEmits {
     'update:modelValue': [value: string];
 }
-declare var __VLS_15: {};
-type __VLS_Slots = {} & {
-    'clear-icon'?: (props: typeof __VLS_15) => any;
-};
+export interface TextareaSlots {
+    'leading'?: (props: FieldAdornmentSlotProps) => any;
+    'trailing'?: (props: FieldAdornmentSlotProps) => any;
+    'clear-icon'?: () => any;
+}
 declare const __VLS_base: import("vue").DefineComponent<TextareaProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<TextareaProps> & Readonly<{

package/dist/runtime/components/Toolbar.d.vue.ts

@@ -0,0 +1,25 @@
+import type { ToolbarThemeSlots } from '../theme/toolbar.js';
+import type { ColorRole } from '../utils/color-registry.js';
+import type { UiProp } from '../utils/ui.js';
+type __VLS_Slots = ToolbarSlots;
+export interface ToolbarProps {
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'sm' | 'md' | 'lg';
+    color?: ColorRole;
+    disabled?: boolean;
+    loop?: boolean;
+    dir?: 'ltr' | 'rtl';
+    ui?: UiProp<ToolbarThemeSlots>;
+}
+export interface ToolbarSlots {
+    default?: () => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<ToolbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToolbarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Toolbar.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { ToolbarRoot } from "reka-ui";
+import { computed, provide } from "vue";
+import { toolbarTheme } from "../theme/toolbar";
+import { TOOLBAR_CONTEXT } from "../utils/toolbar";
+import { useComponentTheme, useRootProps, useThemeProps } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  orientation: { type: String, required: false, default: "horizontal" },
+  size: { type: String, required: false },
+  color: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  loop: { type: Boolean, required: false, default: true },
+  dir: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const defaults = useThemeProps("toolbar");
+const context = computed(() => ({
+  size: props.size ?? defaults.value.size ?? "sm",
+  color: props.color ?? defaults.value.color ?? "primary",
+  disabled: !!props.disabled,
+  orientation: props.orientation
+}));
+provide(TOOLBAR_CONTEXT, context);
+const theme = useComponentTheme("toolbar", toolbarTheme);
+const ui = computed(() => theme.value({ orientation: props.orientation }));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+</script>
+
+<template>
+  <ToolbarRoot :orientation="orientation" :dir="dir" :loop="loop" :aria-disabled="disabled || void 0" v-bind="rootProps">
+    <slot />
+  </ToolbarRoot>
+</template>

package/dist/runtime/components/Toolbar.vue.d.ts

@@ -0,0 +1,25 @@
+import type { ToolbarThemeSlots } from '../theme/toolbar.js';
+import type { ColorRole } from '../utils/color-registry.js';
+import type { UiProp } from '../utils/ui.js';
+type __VLS_Slots = ToolbarSlots;
+export interface ToolbarProps {
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'sm' | 'md' | 'lg';
+    color?: ColorRole;
+    disabled?: boolean;
+    loop?: boolean;
+    dir?: 'ltr' | 'rtl';
+    ui?: UiProp<ToolbarThemeSlots>;
+}
+export interface ToolbarSlots {
+    default?: () => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<ToolbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToolbarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ToolbarButton.d.vue.ts

@@ -0,0 +1,20 @@
+import type { ButtonProps } from './Button.vue.js';
+type __VLS_Slots = ToolbarButtonSlots;
+export interface ToolbarButtonProps extends ButtonProps {
+    /** Formatting state owned by the editor; omitted for ordinary actions. */
+    pressed?: boolean;
+    /** Composes a custom trigger into the toolbar's keyboard navigation. */
+    asChild?: boolean;
+}
+export interface ToolbarButtonSlots {
+    default?: () => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<ToolbarButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToolbarButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ToolbarButton.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { ToolbarButton } from "reka-ui";
+import { computed, inject } from "vue";
+import { toolbarButtonTheme } from "../theme/toolbar-button";
+import { TOOLBAR_CONTEXT } from "../utils/toolbar";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Button from "./Button.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  pressed: { type: Boolean, required: false, default: void 0 },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  to: { type: String, required: false },
+  type: { type: String, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  block: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  raised: { type: Boolean, required: false },
+  icon: { type: String, required: false },
+  trailingIcon: { type: String, required: false },
+  square: { type: Boolean, required: false, default: void 0 },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const toolbar = inject(TOOLBAR_CONTEXT, void 0);
+const disabled = computed(() => props.disabled || toolbar?.value.disabled);
+const size = computed(() => props.size ?? toolbar?.value.size ?? "sm");
+const color = computed(() => props.color ?? toolbar?.value.color ?? "primary");
+const theme = useComponentTheme("toolbarButton", toolbarButtonTheme);
+const ui = computed(() => theme.value({ size: size.value, variant: props.variant ?? "ghost" }));
+const rootProps = useRootProps(() => ui.value.base, () => props.ui?.base);
+</script>
+
+<template>
+  <ToolbarButton as-child :disabled="disabled" :aria-pressed="pressed" :data-state="pressed === void 0 ? void 0 : pressed ? 'on' : 'off'" v-bind="rootProps">
+    <slot v-if="asChild" />
+    <Button v-else v-bind="as ? { as } : {}" :to="to" :type="type" :disabled="disabled" :size="size" :color="color" :variant="variant ?? 'ghost'" :icon="icon" :trailing-icon="trailingIcon" :square="square" :loading="loading" :raised="raised" :block="block" :ui="{ leadingIcon: resolveSlot(ui.leadingIcon, props.ui?.leadingIcon), trailingIcon: resolveSlot(ui.trailingIcon, props.ui?.trailingIcon) }">
+      <template v-if="$slots.default" #default>
+        <slot />
+      </template>
+    </Button>
+  </ToolbarButton>
+</template>

package/dist/runtime/components/ToolbarButton.vue.d.ts

@@ -0,0 +1,20 @@
+import type { ButtonProps } from './Button.vue.js';
+type __VLS_Slots = ToolbarButtonSlots;
+export interface ToolbarButtonProps extends ButtonProps {
+    /** Formatting state owned by the editor; omitted for ordinary actions. */
+    pressed?: boolean;
+    /** Composes a custom trigger into the toolbar's keyboard navigation. */
+    asChild?: boolean;
+}
+export interface ToolbarButtonSlots {
+    default?: () => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<ToolbarButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToolbarButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ToolbarSeparator.d.vue.ts

@@ -0,0 +1,10 @@
+import type { ToolbarSeparatorThemeSlots } from '../theme/toolbar-separator.js';
+import type { UiProp } from '../utils/ui.js';
+export interface ToolbarSeparatorProps {
+    orientation?: 'horizontal' | 'vertical';
+    decorative?: boolean;
+    ui?: UiProp<ToolbarSeparatorThemeSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<ToolbarSeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToolbarSeparatorProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ToolbarSeparator.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { Separator } from "reka-ui";
+import { computed, inject } from "vue";
+import { toolbarSeparatorTheme } from "../theme/toolbar-separator";
+import { TOOLBAR_CONTEXT } from "../utils/toolbar";
+import { useComponentTheme, useRootProps } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  orientation: { type: String, required: false },
+  decorative: { type: Boolean, required: false, default: true },
+  ui: { type: Object, required: false }
+});
+const toolbar = inject(TOOLBAR_CONTEXT, void 0);
+const orientation = computed(() => props.orientation ?? (toolbar?.value.orientation === "vertical" ? "horizontal" : "vertical"));
+const theme = useComponentTheme("toolbarSeparator", toolbarSeparatorTheme);
+const ui = computed(() => theme.value({ orientation: orientation.value }));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+</script>
+
+<template>
+  <Separator :orientation="orientation" :decorative="decorative" v-bind="rootProps" />
+</template>

package/dist/runtime/components/ToolbarSeparator.vue.d.ts

@@ -0,0 +1,10 @@
+import type { ToolbarSeparatorThemeSlots } from '../theme/toolbar-separator.js';
+import type { UiProp } from '../utils/ui.js';
+export interface ToolbarSeparatorProps {
+    orientation?: 'horizontal' | 'vertical';
+    decorative?: boolean;
+    ui?: UiProp<ToolbarSeparatorThemeSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<ToolbarSeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToolbarSeparatorProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ToolbarToggleGroup.d.vue.ts

@@ -0,0 +1,37 @@
+import type { ToolbarToggleGroupThemeSlots } from '../theme/toolbar-toggle-group.js';
+import type { ColorRole } from '../utils/color-registry.js';
+import type { UiProp } from '../utils/ui.js';
+import type { ToggleGroupItemDef } from './ToggleGroup.vue.js';
+type __VLS_Slots = ToolbarToggleGroupSlots;
+export interface ToolbarToggleGroupProps {
+    items: (string | ToggleGroupItemDef)[];
+    type?: 'single' | 'multiple';
+    modelValue?: string | string[];
+    defaultValue?: string | string[];
+    disabled?: boolean;
+    iconOnly?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    color?: ColorRole;
+    ui?: UiProp<ToolbarToggleGroupThemeSlots>;
+}
+export interface ToolbarToggleGroupEmits {
+    'update:modelValue': [value: string | string[]];
+}
+export interface ToolbarToggleGroupSlots {
+    item?: (props: {
+        item: ToggleGroupItemDef;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<ToolbarToggleGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[]) => any;
+}, string, import("vue").PublicProps, Readonly<ToolbarToggleGroupProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};