@plexui/vue 0.0.0-stage → 0.1.1

package/dist/es/components/Input/Input.js

@@ -0,0 +1,247 @@
+import clsx, {} from "clsx";
+import { defineComponent, h, mergeProps, nextTick, onMounted, ref, useId, watch, withDirectives } from "vue";
+import { X } from "../Icon/index.js";
+import { vDefaultValue } from "../../lib/defaultValue.js";
+import { hasContent } from "../../lib/slotContent.js";
+import s from "@plexui/styles/components/Input/Input.module.css";
+// Vue port of packages/ui/src/components/Input/Input.tsx.
+// - `class` goes to the container; every other attribute and native listener
+//   (`@input`, `@change`, `@focus`, `style`, `placeholder`, ...) goes to the
+//   <input>, as React spreads its rest props there.
+// - `value` + `update:value` support `v-model:value`; `default-value` sets the
+//   initial value of an uncontrolled input through `vDefaultValue` (server
+//   markup, hydration and later changes as in React), so re-renders never
+//   reset what the user typed.
+// - `startAdornment` / `endAdornment` are slots. `onClear` stays a function
+//   prop (`@clear` in templates) because its presence adds the clear button.
+// - `autoComplete` reaches the <input> as `autocomplete`, and `invalid` also
+//   sets `aria-invalid` there unless the caller passes its own, as in React.
+const InputComponent = defineComponent({
+    name: "Input",
+    inheritAttrs: false,
+    props: {
+        /** Visual style of the input. @default "outline" */
+        variant: { type: String, default: "outline" },
+        /** Controls the size of the input: `3xs` 22px up to `3xl` 48px. @default "md" */
+        size: { type: String, default: "md" },
+        /** Controls gutter on the edges of the input, defaults to value from `size`. */
+        gutterSize: String,
+        /** Disables the input visually and from interactions. @default false */
+        disabled: { type: Boolean, default: false },
+        /** Makes the input read-only. @default false */
+        readOnly: { type: Boolean, default: false },
+        /** Native spelling of `readOnly` (`<Input readonly />`). @default false */
+        readonly: { type: Boolean, default: false },
+        /** Mark the input as invalid. @default false */
+        invalid: { type: Boolean, default: false },
+        /**
+         * Allow autofill extensions to appear in the input.
+         * @default true when `type="password"` or `name` is set, otherwise false
+         */
+        allowAutofillExtensions: { type: Boolean, default: undefined },
+        /** Select all contents of the input when mounted, and whenever it turns true. @default false */
+        autoSelect: { type: Boolean, default: undefined },
+        /** Shows the clear button while the input has a value; called when it is clicked. */
+        onClear: Function,
+        /** Fully rounded pill shape. @default false */
+        pill: { type: Boolean, default: undefined },
+        /** Applies a negative margin using the current gutter to optically align the input with surrounding content. */
+        opticallyAlign: String,
+        id: String,
+        name: String,
+        /** @default "text" */
+        type: { type: String, default: "text" },
+        /** Controlled value. Bind `v-model:value` to keep it in sync. */
+        value: { type: [String, Number], default: undefined },
+        /** Initial value when uncontrolled. */
+        defaultValue: { type: [String, Number], default: undefined },
+        /** Native `autocomplete` of the <input>. */
+        autoComplete: String,
+    },
+    emits: {
+        "update:value": (_value) => true,
+        "autofill": () => true,
+    },
+    setup(props, { attrs, slots, emit, expose }) {
+        const inputRef = ref(null);
+        // Prevent 1Password from appearing: 1Password won't display if it thinks this field is for searching
+        // Allow user to override this for connecting to labels.
+        const onePasswordPreventionId = `search-ui-input-${useId()}`;
+        const focused = ref(false);
+        // Redirect clicks on the container and adornments
+        const handleMouseDown = (evt) => {
+            const input = inputRef.value;
+            // Bail out if the target is not an element or the input is not found
+            if (!evt.target || !(evt.target instanceof Element) || !input) {
+                return;
+            }
+            // Bail out if the target is inside the input
+            if (input.contains(evt.target)) {
+                return;
+            }
+            // Bail out if the target is a button
+            if (evt.target.closest("button, [type='button'], [role='button'], [role='menuitem']")) {
+                return;
+            }
+            evt.preventDefault();
+            // If the input is not focused, focus it
+            if (document.activeElement !== input) {
+                input.focus();
+            }
+            const { left, top } = input.getBoundingClientRect();
+            const { clientX, clientY } = evt;
+            // "Before" the input: top/left
+            const isBefore = clientY < top || clientX < left;
+            // email, number and other types without the selection API throw on setSelectionRange
+            const hasSelection = input.selectionStart !== null;
+            // If this is the first click, clear the selection.
+            if (evt.detail === 1) {
+                if (!hasSelection)
+                    return;
+                if (isBefore) {
+                    input.setSelectionRange(0, 0);
+                }
+                else {
+                    const length = input.value.length;
+                    input.setSelectionRange(length, length);
+                }
+            }
+            // If this is the second click, select the first or last word
+            else if (evt.detail === 2) {
+                if (!hasSelection)
+                    return;
+                // Split the input value into words and non-word characters
+                const words = input.value.match(/\w+|[^\w\s]/g) || [];
+                const selectedWord = isBefore ? words.at(0) : words.at(-1);
+                if (selectedWord) {
+                    const wordIndex = isBefore ? input.value.indexOf(selectedWord) : input.value.lastIndexOf(selectedWord);
+                    input.setSelectionRange(wordIndex, wordIndex + selectedWord.length);
+                }
+            }
+            // If this is the third click or greater, select the entire input
+            else {
+                input.select();
+            }
+        };
+        const selectIfAuto = () => {
+            if (props.autoSelect) {
+                inputRef.value?.select();
+            }
+        };
+        onMounted(selectIfAuto);
+        watch(() => props.autoSelect, selectIfAuto, { flush: "post" });
+        // The clear button unmounts once the value is gone, so keep focus in the input
+        const handleClear = (evt) => {
+            inputRef.value?.focus();
+            props.onClear?.(evt);
+        };
+        const handleAnimationStart = (evt) => {
+            if (evt.animationName === "native-autofill-in") {
+                emit("autofill");
+            }
+        };
+        const handleInput = (evt) => {
+            const target = evt.currentTarget;
+            emit("update:value", target.value);
+            // Like a React controlled input, a `value` the parent does not update
+            // is put back (Vue only re-applies `value` when this component renders)
+            void nextTick(() => {
+                if (props.value === undefined)
+                    return;
+                const value = String(props.value);
+                if (target.value !== value)
+                    target.value = value;
+            });
+        };
+        expose({ focus: () => inputRef.value?.focus(), input: inputRef });
+        return () => {
+            const { class: className, ...restAttrs } = attrs;
+            const { value, defaultValue, disabled } = props;
+            const readOnly = props.readOnly || props.readonly;
+            // Default to `true` when type="password" or presence of `name`
+            const allowAutofillExtensions = props.allowAutofillExtensions ?? (props.type === "password" || !!props.name);
+            const startAdornment = slots.startAdornment?.();
+            const endAdornment = slots.endAdornment?.();
+            const hasStartAdornment = hasContent(startAdornment);
+            const hasEndAdornment = hasContent(endAdornment);
+            // Determine if clear button should be shown
+            const hasValue = value !== undefined ? !!value : !!defaultValue;
+            const showClearButton = !!props.onClear && hasValue && !disabled && !readOnly;
+            return h("div", {
+                "class": clsx(s.Container, className),
+                "data-slot": "input",
+                "data-variant": props.variant,
+                "data-size": props.size,
+                "data-gutter-size": props.gutterSize,
+                "data-focused": focused.value,
+                "data-disabled": disabled ? "" : undefined,
+                "data-readonly": readOnly ? "" : undefined,
+                "data-invalid": props.invalid ? "" : undefined,
+                "data-pill": props.pill ? "" : undefined,
+                "data-optically-align": props.opticallyAlign,
+                "data-has-start-adornment": hasStartAdornment ? "" : undefined,
+                "data-has-end-adornment": hasEndAdornment || showClearButton ? "" : undefined,
+                "onMousedown": handleMouseDown,
+            }, [
+                hasStartAdornment ? startAdornment : null,
+                withDirectives(h("input", mergeProps(restAttrs, {
+                    "ref": inputRef,
+                    "id": props.id || (allowAutofillExtensions ? undefined : onePasswordPreventionId),
+                    "class": s.Input,
+                    "type": props.type,
+                    // Only when set, so a native `autocomplete` attribute still applies
+                    ...(props.autoComplete !== undefined ? { autocomplete: props.autoComplete } : {}),
+                    // Expose the visual invalid state to assistive tech; an explicit aria-invalid wins
+                    "aria-invalid": restAttrs["aria-invalid"] ?? (props.invalid || undefined),
+                    "name": props.name,
+                    // Controlled: the `value` property follows the prop. Uncontrolled:
+                    // `vDefaultValue` below sets the initial value, as in React.
+                    ...(value !== undefined ? { value } : {}),
+                    "readonly": readOnly,
+                    "disabled": disabled,
+                    "onInput": handleInput,
+                    "onFocus": () => {
+                        focused.value = true;
+                    },
+                    "onBlur": () => {
+                        focused.value = false;
+                    },
+                    "onAnimationstart": handleAnimationStart,
+                    // Prevent LastPass and 1Password from appearing
+                    "data-lpignore": allowAutofillExtensions ? undefined : true,
+                    "data-1p-ignore": allowAutofillExtensions ? undefined : true,
+                })), [[vDefaultValue, value === undefined ? defaultValue : undefined]]),
+                showClearButton
+                    ? h("button", { "type": "button", "aria-label": "Clear input", "class": s.Clear, "onClick": handleClear }, [
+                        h(X),
+                    ])
+                    : null,
+                hasEndAdornment ? endAdornment : null,
+            ]);
+        };
+    },
+});
+/** Text input with adornment slots, a clear button and autofill-extension control. */
+export const Input = InputComponent;
+/**
+ * Canonical inline action button for Input adornments (React
+ * `Input.AdornmentButton`): mic toggle, visibility toggle, copy, ... It sizes
+ * itself off the parent Input so it matches the built-in clear button.
+ */
+const InputAdornmentButtonComponent = defineComponent({
+    name: "InputAdornmentButton",
+    props: {
+        /** @default "button" */
+        type: { type: String, default: "button" },
+        /**
+         * Semantic color tint for the pressed (`aria-pressed="true"`) state, the
+         * same palette Button accepts. Unset keeps the neutral primary-soft tint.
+         */
+        color: String,
+    },
+    setup(props, { slots }) {
+        return () => h("button", { "type": props.type, "class": s.AdornmentButton, "data-color": props.color }, slots.default?.());
+    },
+});
+export const InputAdornmentButton = InputAdornmentButtonComponent;
+//# sourceMappingURL=Input.js.map

package/dist/es/components/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/Input/Input.ts"],"names":[],"mappings":"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","sourcesContent":["import clsx, { type ClassValue } from \"clsx\"\nimport { defineComponent, h, mergeProps, nextTick, onMounted, ref, useId, watch, withDirectives, type ButtonHTMLAttributes, type InputHTMLAttributes, type PropType } from \"vue\"\nimport type { ControlSize, SemanticColor, Sizes, Variants } from \"@plexui/styles/types\"\nimport { X } from \"../Icon/index.js\"\nimport { vDefaultValue } from \"../../lib/defaultValue.js\"\nimport { hasContent } from \"../../lib/slotContent.js\"\nimport s from \"@plexui/styles/components/Input/Input.module.css\"\n\n// Vue port of packages/ui/src/components/Input/Input.tsx.\n// - `class` goes to the container; every other attribute and native listener\n//   (`@input`, `@change`, `@focus`, `style`, `placeholder`, ...) goes to the\n//   <input>, as React spreads its rest props there.\n// - `value` + `update:value` support `v-model:value`; `default-value` sets the\n//   initial value of an uncontrolled input through `vDefaultValue` (server\n//   markup, hydration and later changes as in React), so re-renders never\n//   reset what the user typed.\n// - `startAdornment` / `endAdornment` are slots. `onClear` stays a function\n//   prop (`@clear` in templates) because its presence adds the clear button.\n// - `autoComplete` reaches the <input> as `autocomplete`, and `invalid` also\n//   sets `aria-invalid` there unless the caller passes its own, as in React.\n\nconst InputComponent = defineComponent({\n  name: \"Input\",\n  inheritAttrs: false,\n  props: {\n    /** Visual style of the input. @default \"outline\" */\n    variant: { type: String as PropType<Variants<\"outline\" | \"soft\" | \"ghost\">>, default: \"outline\" },\n    /** Controls the size of the input: `3xs` 22px up to `3xl` 48px. @default \"md\" */\n    size: { type: String as PropType<ControlSize>, default: \"md\" },\n    /** Controls gutter on the edges of the input, defaults to value from `size`. */\n    gutterSize: String as PropType<Sizes<\"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\">>,\n    /** Disables the input visually and from interactions. @default false */\n    disabled: { type: Boolean, default: false },\n    /** Makes the input read-only. @default false */\n    readOnly: { type: Boolean, default: false },\n    /** Native spelling of `readOnly` (`<Input readonly />`). @default false */\n    readonly: { type: Boolean, default: false },\n    /** Mark the input as invalid. @default false */\n    invalid: { type: Boolean, default: false },\n    /**\n     * Allow autofill extensions to appear in the input.\n     * @default true when `type=\"password\"` or `name` is set, otherwise false\n     */\n    allowAutofillExtensions: { type: Boolean, default: undefined },\n    /** Select all contents of the input when mounted, and whenever it turns true. @default false */\n    autoSelect: { type: Boolean, default: undefined },\n    /** Shows the clear button while the input has a value; called when it is clicked. */\n    onClear: Function as PropType<(event: MouseEvent) => void>,\n    /** Fully rounded pill shape. @default false */\n    pill: { type: Boolean, default: undefined },\n    /** Applies a negative margin using the current gutter to optically align the input with surrounding content. */\n    opticallyAlign: String as PropType<\"start\" | \"end\">,\n    id: String,\n    name: String,\n    /** @default \"text\" */\n    type: { type: String, default: \"text\" },\n    /** Controlled value. Bind `v-model:value` to keep it in sync. */\n    value: { type: [String, Number] as PropType<string | number>, default: undefined },\n    /** Initial value when uncontrolled. */\n    defaultValue: { type: [String, Number] as PropType<string | number>, default: undefined },\n    /** Native `autocomplete` of the <input>. */\n    autoComplete: String,\n  },\n  emits: {\n    \"update:value\": (_value: string) => true,\n    \"autofill\": () => true,\n  },\n  setup(props, { attrs, slots, emit, expose }) {\n    const inputRef = ref<HTMLInputElement | null>(null)\n    // Prevent 1Password from appearing: 1Password won't display if it thinks this field is for searching\n    // Allow user to override this for connecting to labels.\n    const onePasswordPreventionId = `search-ui-input-${useId()}`\n    const focused = ref(false)\n\n    // Redirect clicks on the container and adornments\n    const handleMouseDown = (evt: MouseEvent) => {\n      const input = inputRef.value\n      // Bail out if the target is not an element or the input is not found\n      if (!evt.target || !(evt.target instanceof Element) || !input) {\n        return\n      }\n      // Bail out if the target is inside the input\n      if (input.contains(evt.target)) {\n        return\n      }\n      // Bail out if the target is a button\n      if (evt.target.closest(\"button, [type='button'], [role='button'], [role='menuitem']\")) {\n        return\n      }\n\n      evt.preventDefault()\n      // If the input is not focused, focus it\n      if (document.activeElement !== input) {\n        input.focus()\n      }\n\n      const { left, top } = input.getBoundingClientRect()\n      const { clientX, clientY } = evt\n      // \"Before\" the input: top/left\n      const isBefore = clientY < top || clientX < left\n      // email, number and other types without the selection API throw on setSelectionRange\n      const hasSelection = input.selectionStart !== null\n\n      // If this is the first click, clear the selection.\n      if (evt.detail === 1) {\n        if (!hasSelection) return\n        if (isBefore) {\n          input.setSelectionRange(0, 0)\n        } else {\n          const length = input.value.length\n          input.setSelectionRange(length, length)\n        }\n      }\n      // If this is the second click, select the first or last word\n      else if (evt.detail === 2) {\n        if (!hasSelection) return\n        // Split the input value into words and non-word characters\n        const words = input.value.match(/\\w+|[^\\w\\s]/g) || []\n        const selectedWord = isBefore ? words.at(0) : words.at(-1)\n        if (selectedWord) {\n          const wordIndex = isBefore ? input.value.indexOf(selectedWord) : input.value.lastIndexOf(selectedWord)\n          input.setSelectionRange(wordIndex, wordIndex + selectedWord.length)\n        }\n      }\n      // If this is the third click or greater, select the entire input\n      else {\n        input.select()\n      }\n    }\n\n    const selectIfAuto = () => {\n      if (props.autoSelect) {\n        inputRef.value?.select()\n      }\n    }\n    onMounted(selectIfAuto)\n    watch(() => props.autoSelect, selectIfAuto, { flush: \"post\" })\n\n    // The clear button unmounts once the value is gone, so keep focus in the input\n    const handleClear = (evt: MouseEvent) => {\n      inputRef.value?.focus()\n      props.onClear?.(evt)\n    }\n\n    const handleAnimationStart = (evt: AnimationEvent) => {\n      if (evt.animationName === \"native-autofill-in\") {\n        emit(\"autofill\")\n      }\n    }\n\n    const handleInput = (evt: Event) => {\n      const target = evt.currentTarget as HTMLInputElement\n      emit(\"update:value\", target.value)\n      // Like a React controlled input, a `value` the parent does not update\n      // is put back (Vue only re-applies `value` when this component renders)\n      void nextTick(() => {\n        if (props.value === undefined) return\n        const value = String(props.value)\n        if (target.value !== value) target.value = value\n      })\n    }\n\n    expose({ focus: () => inputRef.value?.focus(), input: inputRef })\n\n    return () => {\n      const { class: className, ...restAttrs } = attrs\n      const { value, defaultValue, disabled } = props\n      const readOnly = props.readOnly || props.readonly\n      // Default to `true` when type=\"password\" or presence of `name`\n      const allowAutofillExtensions = props.allowAutofillExtensions ?? (props.type === \"password\" || !!props.name)\n      const startAdornment = slots.startAdornment?.()\n      const endAdornment = slots.endAdornment?.()\n      const hasStartAdornment = hasContent(startAdornment)\n      const hasEndAdornment = hasContent(endAdornment)\n\n      // Determine if clear button should be shown\n      const hasValue = value !== undefined ? !!value : !!defaultValue\n      const showClearButton = !!props.onClear && hasValue && !disabled && !readOnly\n\n      return h(\n        \"div\",\n        {\n          \"class\": clsx(s.Container, className as ClassValue),\n          \"data-slot\": \"input\",\n          \"data-variant\": props.variant,\n          \"data-size\": props.size,\n          \"data-gutter-size\": props.gutterSize,\n          \"data-focused\": focused.value,\n          \"data-disabled\": disabled ? \"\" : undefined,\n          \"data-readonly\": readOnly ? \"\" : undefined,\n          \"data-invalid\": props.invalid ? \"\" : undefined,\n          \"data-pill\": props.pill ? \"\" : undefined,\n          \"data-optically-align\": props.opticallyAlign,\n          \"data-has-start-adornment\": hasStartAdornment ? \"\" : undefined,\n          \"data-has-end-adornment\": hasEndAdornment || showClearButton ? \"\" : undefined,\n          \"onMousedown\": handleMouseDown,\n        },\n        [\n          hasStartAdornment ? startAdornment : null,\n          withDirectives(\n            h(\n              \"input\",\n              mergeProps(restAttrs, {\n                \"ref\": inputRef,\n                \"id\": props.id || (allowAutofillExtensions ? undefined : onePasswordPreventionId),\n                \"class\": s.Input,\n                \"type\": props.type,\n                // Only when set, so a native `autocomplete` attribute still applies\n                ...(props.autoComplete !== undefined ? { autocomplete: props.autoComplete } : {}),\n                // Expose the visual invalid state to assistive tech; an explicit aria-invalid wins\n                \"aria-invalid\": restAttrs[\"aria-invalid\"] ?? (props.invalid || undefined),\n                \"name\": props.name,\n                // Controlled: the `value` property follows the prop. Uncontrolled:\n                // `vDefaultValue` below sets the initial value, as in React.\n                ...(value !== undefined ? { value } : {}),\n                \"readonly\": readOnly,\n                \"disabled\": disabled,\n                \"onInput\": handleInput,\n                \"onFocus\": () => {\n                  focused.value = true\n                },\n                \"onBlur\": () => {\n                  focused.value = false\n                },\n                \"onAnimationstart\": handleAnimationStart,\n                // Prevent LastPass and 1Password from appearing\n                \"data-lpignore\": allowAutofillExtensions ? undefined : true,\n                \"data-1p-ignore\": allowAutofillExtensions ? undefined : true,\n              }),\n            ),\n            [[vDefaultValue, value === undefined ? defaultValue : undefined]],\n          ),\n          showClearButton\n            ? h(\"button\", { \"type\": \"button\", \"aria-label\": \"Clear input\", \"class\": s.Clear, \"onClick\": handleClear }, [\n                h(X),\n              ])\n            : null,\n          hasEndAdornment ? endAdornment : null,\n        ],\n      )\n    }\n  },\n})\n\ntype InputOwnProps = InstanceType<typeof InputComponent>[\"$props\"]\n\n/** Input props plus the native <input> attributes that fall through to it, as in React. */\nexport type InputProps = InputOwnProps & Omit<InputHTMLAttributes, keyof InputOwnProps>\n\n/** Text input with adornment slots, a clear button and autofill-extension control. */\nexport const Input = InputComponent as typeof InputComponent & { new (): { $props: InputProps } }\n\n/**\n * Canonical inline action button for Input adornments (React\n * `Input.AdornmentButton`): mic toggle, visibility toggle, copy, ... It sizes\n * itself off the parent Input so it matches the built-in clear button.\n */\nconst InputAdornmentButtonComponent = defineComponent({\n  name: \"InputAdornmentButton\",\n  props: {\n    /** @default \"button\" */\n    type: { type: String as PropType<\"button\" | \"submit\" | \"reset\">, default: \"button\" },\n    /**\n     * Semantic color tint for the pressed (`aria-pressed=\"true\"`) state, the\n     * same palette Button accepts. Unset keeps the neutral primary-soft tint.\n     */\n    color: String as PropType<SemanticColor>,\n  },\n  setup(props, { slots }) {\n    return () =>\n      h(\"button\", { \"type\": props.type, \"class\": s.AdornmentButton, \"data-color\": props.color }, slots.default?.())\n  },\n})\n\ntype InputAdornmentButtonOwnProps = InstanceType<typeof InputAdornmentButtonComponent>[\"$props\"]\n\n/** AdornmentButton props plus the native <button> attributes that fall through to it. */\nexport type InputAdornmentButtonProps = InputAdornmentButtonOwnProps &\n  Omit<ButtonHTMLAttributes, keyof InputAdornmentButtonOwnProps>\n\nexport const InputAdornmentButton = InputAdornmentButtonComponent as typeof InputAdornmentButtonComponent & {\n  new (): { $props: InputAdornmentButtonProps }\n}\n"]}

package/dist/es/components/Input/index.js

@@ -0,0 +1,2 @@
+export { Input, InputAdornmentButton } from "./Input.js";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,oBAAoB,EAAmD,MAAM,YAAY,CAAA","sourcesContent":["export { Input, InputAdornmentButton, type InputAdornmentButtonProps, type InputProps } from \"./Input.js\"\n"]}

package/dist/es/components/InputGroup/InputGroup.js

@@ -0,0 +1,245 @@
+import { defineComponent, h, inject, nextTick, onMounted, provide, ref, watch, withDirectives, } from "vue";
+import { Button } from "../Button/index.js";
+import { vDefaultValue, vServerText } from "../../lib/defaultValue.js";
+import s from "@plexui/styles/components/InputGroup/InputGroup.module.css";
+const InputGroupKey = Symbol("InputGroup");
+const CONTROL_SELECTOR = "[data-slot='input-group-control']";
+// A fallthrough listener is a function or, when merged, an array of them
+const callListeners = (listener, evt) => {
+    for (const fn of Array.isArray(listener) ? listener : [listener]) {
+        if (typeof fn === "function")
+            fn(evt);
+    }
+};
+/** Button size for each group size: the closest Button that fits inside the control */
+const BUTTON_SIZE = {
+    "3xs": "3xs",
+    "2xs": "3xs",
+    "xs": "3xs",
+    "sm": "3xs",
+    "md": "2xs",
+    "lg": "sm",
+    "xl": "md",
+    "2xl": "lg",
+    "3xl": "xl",
+};
+const InputGroupComponent = defineComponent({
+    name: "InputGroup",
+    inheritAttrs: false,
+    props: {
+        /** Visual style of the group. @default "outline" */
+        variant: { type: String, default: "outline" },
+        /** Controls the size of the group, on the same scale as Input: `3xs` 22px up to `3xl` 48px. @default "md" */
+        size: { type: String, default: "md" },
+        /** Fully rounded group, with pill buttons inside. @default false */
+        pill: { type: Boolean, default: false },
+        /** Disables the control and the buttons inside the group. @default false */
+        disabled: { type: Boolean, default: false },
+        /** Mark the group as invalid. @default false */
+        invalid: { type: Boolean, default: false },
+    },
+    setup(props, { attrs, slots }) {
+        provide(InputGroupKey, {
+            get size() {
+                return props.size;
+            },
+            get pill() {
+                return props.pill;
+            },
+            get disabled() {
+                return props.disabled;
+            },
+            get invalid() {
+                return props.invalid;
+            },
+        });
+        // Clicks on the frame, icons and text focus the control, as in Input
+        const handleMouseDown = (evt) => {
+            callListeners(attrs.onMousedown, evt);
+            const control = evt.currentTarget.querySelector(CONTROL_SELECTOR);
+            const { target } = evt;
+            if (evt.defaultPrevented || !control || !(target instanceof Element) || control.contains(target)) {
+                return;
+            }
+            // Buttons, links, menus and other controls in the addons take their own clicks
+            if (target.closest("button, a, input, textarea, select, [role='button'], [role='menuitem']")) {
+                return;
+            }
+            evt.preventDefault();
+            control.focus();
+        };
+        return () => {
+            const { class: className, onMousedown: _onMousedown, ...restAttrs } = attrs;
+            return h("div", {
+                "role": "group",
+                "data-slot": "input-group",
+                "data-variant": props.variant,
+                "data-size": props.size,
+                "data-pill": props.pill ? "" : undefined,
+                "data-disabled": props.disabled ? "" : undefined,
+                "data-invalid": props.invalid ? "" : undefined,
+                "class": [s.InputGroup, className],
+                "onMousedown": handleMouseDown,
+                ...restAttrs,
+            }, slots.default?.());
+        };
+    },
+});
+/** An input or textarea with icons, text, buttons and menus attached inside one frame. */
+export const InputGroup = InputGroupComponent;
+// `value` / `default-value` / `update:value` for the native control, as in Input
+const controlProps = {
+    /** Controlled value; use with `v-model:value` */
+    value: { type: [String, Number], default: undefined },
+    /** Initial value of an uncontrolled control */
+    defaultValue: { type: [String, Number], default: undefined },
+    /** Disables the control; defaults to the group's `disabled` */
+    disabled: { type: Boolean, default: undefined },
+};
+const useControl = (props, emit) => {
+    const group = inject(InputGroupKey, null);
+    const handleInput = (evt) => {
+        const target = evt.currentTarget;
+        emit("update:value", target.value);
+        // Like a React controlled input, a `value` the parent does not update is put back
+        void nextTick(() => {
+            if (props.value === undefined)
+                return;
+            const value = String(props.value);
+            if (target.value !== value)
+                target.value = value;
+        });
+    };
+    return { group, handleInput };
+};
+const InputGroupInputComponent = defineComponent({
+    name: "InputGroupInput",
+    props: {
+        ...controlProps,
+        /** @default "text" */
+        type: { type: String, default: "text" },
+    },
+    emits: {
+        "update:value": (_value) => true,
+    },
+    setup(props, { emit }) {
+        const { group, handleInput } = useControl(props, emit);
+        return () => withDirectives(h("input", {
+            "type": props.type,
+            "data-slot": "input-group-control",
+            "class": s.Control,
+            "disabled": props.disabled ?? group?.disabled,
+            // Expose the group's invalid state to assistive tech; an explicit aria-invalid wins
+            "aria-invalid": group?.invalid || undefined,
+            ...(props.value !== undefined ? { value: props.value } : {}),
+            "onInput": handleInput,
+        }), [[vDefaultValue, props.value === undefined ? props.defaultValue : undefined]]);
+    },
+});
+/** The native <input> of the group, without its own frame (React `InputGroup.Input`). */
+export const InputGroupInput = InputGroupInputComponent;
+const InputGroupTextareaComponent = defineComponent({
+    name: "InputGroupTextarea",
+    props: {
+        ...controlProps,
+        /** @default 3 */
+        rows: { type: [Number, String], default: 3 },
+    },
+    emits: {
+        "update:value": (_value) => true,
+    },
+    setup(props, { emit }) {
+        const group = inject(InputGroupKey, null);
+        const textareaRef = ref(null);
+        // Set imperatively, like React DOM: a `value` prop would make Vue mirror
+        // it into a `value` attribute, which React never renders
+        const syncValue = () => {
+            const textarea = textareaRef.value;
+            if (!textarea || props.value === undefined)
+                return;
+            const value = String(props.value);
+            if (textarea.value !== value)
+                textarea.value = value;
+        };
+        onMounted(() => {
+            // React's initTextarea: the initial text becomes the (dirty) value
+            const textarea = textareaRef.value;
+            const initialValue = textarea?.textContent ?? "";
+            if (textarea && initialValue !== "")
+                textarea.value = initialValue;
+        });
+        watch(() => props.value, syncValue, { flush: "post" });
+        const handleInput = (evt) => {
+            emit("update:value", evt.currentTarget.value);
+            // A controlled value the parent did not update wins over the typed text
+            void nextTick(syncValue);
+        };
+        return () => {
+            // React keeps the textarea's text content in sync with the controlled
+            // value, else with `defaultValue`
+            const textContent = String(props.value ?? props.defaultValue ?? "");
+            return withDirectives(h("textarea", {
+                "ref": textareaRef,
+                "rows": props.rows,
+                "data-slot": "input-group-control",
+                "class": s.Control,
+                "disabled": props.disabled ?? group?.disabled,
+                "aria-invalid": group?.invalid || undefined,
+                textContent,
+                "onInput": handleInput,
+            }), [[vServerText, textContent]]);
+        };
+    },
+});
+/** The native <textarea> of the group (React `InputGroup.Textarea`). */
+export const InputGroupTextarea = InputGroupTextareaComponent;
+/** Icons, text and buttons beside, above or below the control (React `InputGroup.Addon`). */
+export const InputGroupAddon = defineComponent({
+    name: "InputGroupAddon",
+    props: {
+        /**
+         * Where the addon sits: before or after the control on its line, or as a
+         * row above or below it.
+         * @default "inline-start"
+         */
+        align: { type: String, default: "inline-start" },
+    },
+    setup(props, { slots }) {
+        return () => h("div", { "data-slot": "input-group-addon", "data-align": props.align, "class": s.Addon }, slots.default?.());
+    },
+});
+const InputGroupButtonComponent = defineComponent({
+    name: "InputGroupButton",
+    props: {
+        /** Color for the button. @default "secondary" */
+        color: { type: String, default: "secondary" },
+        /** Style variant. @default "ghost" */
+        variant: { type: String, default: "ghost" },
+        pill: { type: Boolean, default: undefined },
+        disabled: { type: Boolean, default: undefined },
+    },
+    setup(props, { slots }) {
+        const group = inject(InputGroupKey, null);
+        return () => h(Button, {
+            color: props.color,
+            variant: props.variant,
+            size: BUTTON_SIZE[group?.size ?? "md"],
+            pill: props.pill ?? group?.pill,
+            disabled: props.disabled ?? group?.disabled,
+            class: s.Button,
+        }, slots);
+    },
+});
+/**
+ * A ghost `Button` sized from the group (React `InputGroup.Button`). Takes the
+ * Button props except `size`; `pill` and `disabled` default to the group's.
+ */
+export const InputGroupButton = InputGroupButtonComponent;
+/** Text and icons inside an addon: prefixes, units, counters (React `InputGroup.Text`). */
+export const InputGroupText = defineComponent({
+    name: "InputGroupText",
+    setup(_props, { slots }) {
+        return () => h("span", { "data-slot": "input-group-text", "class": s.Text }, slots.default?.());
+    },
+});
+//# sourceMappingURL=InputGroup.js.map

package/dist/es/components/InputGroup/InputGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroup.js","sourceRoot":"","sources":["../../../../src/components/InputGroup/InputGroup.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  defineComponent,\n  h,\n  inject,\n  nextTick,\n  onMounted,\n  provide,\n  ref,\n  watch,\n  withDirectives,\n  type HTMLAttributes,\n  type InjectionKey,\n  type InputHTMLAttributes,\n  type PropType,\n  type TextareaHTMLAttributes,\n} from \"vue\"\nimport type { ControlSize, Variants } from \"@plexui/styles/types\"\nimport { Button, type ButtonColor, type ButtonProps } from \"../Button/index.js\"\nimport { vDefaultValue, vServerText } from \"../../lib/defaultValue.js\"\nimport s from \"@plexui/styles/components/InputGroup/InputGroup.module.css\"\n\n// Vue port of packages/ui/src/components/InputGroup/InputGroup.tsx.\n// Exports are flat (`InputGroupInput` for `InputGroup.Input`, ...). The group\n// provides its size, pill, disabled and invalid state to the parts, as the\n// React context does. React spreads the remaining props after its own\n// attributes, so caller attributes win; Vue's attribute fallthrough merges\n// them the same way. `InputGroupInput` / `InputGroupTextarea` take\n// `v-model:value` and `default-value` like Input and Textarea (the textarea's\n// text content follows the value and its value is set imperatively, as in\n// Textarea).\n\ntype InputGroupContext = {\n  readonly size: ControlSize\n  readonly pill: boolean\n  readonly disabled: boolean\n  readonly invalid: boolean\n}\n\nconst InputGroupKey: InjectionKey<InputGroupContext> = Symbol(\"InputGroup\")\n\nconst CONTROL_SELECTOR = \"[data-slot='input-group-control']\"\n\n// A fallthrough listener is a function or, when merged, an array of them\nconst callListeners = (listener: unknown, evt: Event) => {\n  for (const fn of Array.isArray(listener) ? listener : [listener]) {\n    if (typeof fn === \"function\") fn(evt)\n  }\n}\n\n/** Button size for each group size: the closest Button that fits inside the control */\nconst BUTTON_SIZE: Record<ControlSize, ControlSize> = {\n  \"3xs\": \"3xs\",\n  \"2xs\": \"3xs\",\n  \"xs\": \"3xs\",\n  \"sm\": \"3xs\",\n  \"md\": \"2xs\",\n  \"lg\": \"sm\",\n  \"xl\": \"md\",\n  \"2xl\": \"lg\",\n  \"3xl\": \"xl\",\n}\n\nconst InputGroupComponent = defineComponent({\n  name: \"InputGroup\",\n  inheritAttrs: false,\n  props: {\n    /** Visual style of the group. @default \"outline\" */\n    variant: { type: String as PropType<Variants<\"outline\" | \"soft\">>, default: \"outline\" },\n    /** Controls the size of the group, on the same scale as Input: `3xs` 22px up to `3xl` 48px. @default \"md\" */\n    size: { type: String as PropType<ControlSize>, default: \"md\" },\n    /** Fully rounded group, with pill buttons inside. @default false */\n    pill: { type: Boolean, default: false },\n    /** Disables the control and the buttons inside the group. @default false */\n    disabled: { type: Boolean, default: false },\n    /** Mark the group as invalid. @default false */\n    invalid: { type: Boolean, default: false },\n  },\n  setup(props, { attrs, slots }) {\n    provide(InputGroupKey, {\n      get size() {\n        return props.size\n      },\n      get pill() {\n        return props.pill\n      },\n      get disabled() {\n        return props.disabled\n      },\n      get invalid() {\n        return props.invalid\n      },\n    })\n\n    // Clicks on the frame, icons and text focus the control, as in Input\n    const handleMouseDown = (evt: MouseEvent) => {\n      callListeners(attrs.onMousedown, evt)\n      const control = (evt.currentTarget as HTMLElement).querySelector<HTMLElement>(CONTROL_SELECTOR)\n      const { target } = evt\n      if (evt.defaultPrevented || !control || !(target instanceof Element) || control.contains(target)) {\n        return\n      }\n      // Buttons, links, menus and other controls in the addons take their own clicks\n      if (target.closest(\"button, a, input, textarea, select, [role='button'], [role='menuitem']\")) {\n        return\n      }\n      evt.preventDefault()\n      control.focus()\n    }\n\n    return () => {\n      const { class: className, onMousedown: _onMousedown, ...restAttrs } = attrs\n      return h(\n        \"div\",\n        {\n          \"role\": \"group\",\n          \"data-slot\": \"input-group\",\n          \"data-variant\": props.variant,\n          \"data-size\": props.size,\n          \"data-pill\": props.pill ? \"\" : undefined,\n          \"data-disabled\": props.disabled ? \"\" : undefined,\n          \"data-invalid\": props.invalid ? \"\" : undefined,\n          \"class\": [s.InputGroup, className],\n          \"onMousedown\": handleMouseDown,\n          ...restAttrs,\n        },\n        slots.default?.(),\n      )\n    }\n  },\n})\n\ntype InputGroupOwnProps = InstanceType<typeof InputGroupComponent>[\"$props\"]\n\n/** InputGroup props plus the native <div> attributes that fall through to it, as in React. */\nexport type InputGroupProps = InputGroupOwnProps & Omit<HTMLAttributes, keyof InputGroupOwnProps>\n\n/** An input or textarea with icons, text, buttons and menus attached inside one frame. */\nexport const InputGroup = InputGroupComponent as typeof InputGroupComponent & {\n  new (): { $props: InputGroupProps }\n}\n\n// `value` / `default-value` / `update:value` for the native control, as in Input\nconst controlProps = {\n  /** Controlled value; use with `v-model:value` */\n  value: { type: [String, Number] as PropType<string | number>, default: undefined },\n  /** Initial value of an uncontrolled control */\n  defaultValue: { type: [String, Number] as PropType<string | number>, default: undefined },\n  /** Disables the control; defaults to the group's `disabled` */\n  disabled: { type: Boolean, default: undefined },\n}\n\nconst useControl = (props: { value?: string | number }, emit: (event: \"update:value\", value: string) => void) => {\n  const group = inject(InputGroupKey, null)\n  const handleInput = (evt: Event) => {\n    const target = evt.currentTarget as HTMLInputElement | HTMLTextAreaElement\n    emit(\"update:value\", target.value)\n    // Like a React controlled input, a `value` the parent does not update is put back\n    void nextTick(() => {\n      if (props.value === undefined) return\n      const value = String(props.value)\n      if (target.value !== value) target.value = value\n    })\n  }\n  return { group, handleInput }\n}\n\nconst InputGroupInputComponent = defineComponent({\n  name: \"InputGroupInput\",\n  props: {\n    ...controlProps,\n    /** @default \"text\" */\n    type: { type: String, default: \"text\" },\n  },\n  emits: {\n    \"update:value\": (_value: string) => true,\n  },\n  setup(props, { emit }) {\n    const { group, handleInput } = useControl(props, emit)\n    return () =>\n      withDirectives(\n        h(\"input\", {\n          \"type\": props.type,\n          \"data-slot\": \"input-group-control\",\n          \"class\": s.Control,\n          \"disabled\": props.disabled ?? group?.disabled,\n          // Expose the group's invalid state to assistive tech; an explicit aria-invalid wins\n          \"aria-invalid\": group?.invalid || undefined,\n          ...(props.value !== undefined ? { value: props.value } : {}),\n          \"onInput\": handleInput,\n        }),\n        [[vDefaultValue, props.value === undefined ? props.defaultValue : undefined]],\n      )\n  },\n})\n\ntype InputGroupInputOwnProps = InstanceType<typeof InputGroupInputComponent>[\"$props\"]\n\n/** InputGroupInput props plus the native <input> attributes that fall through to it. */\nexport type InputGroupInputProps = InputGroupInputOwnProps &\n  Omit<InputHTMLAttributes, keyof InputGroupInputOwnProps | \"size\">\n\n/** The native <input> of the group, without its own frame (React `InputGroup.Input`). */\nexport const InputGroupInput = InputGroupInputComponent as typeof InputGroupInputComponent & {\n  new (): { $props: InputGroupInputProps }\n}\n\nconst InputGroupTextareaComponent = defineComponent({\n  name: \"InputGroupTextarea\",\n  props: {\n    ...controlProps,\n    /** @default 3 */\n    rows: { type: [Number, String] as PropType<number | string>, default: 3 },\n  },\n  emits: {\n    \"update:value\": (_value: string) => true,\n  },\n  setup(props, { emit }) {\n    const group = inject(InputGroupKey, null)\n    const textareaRef = ref<HTMLTextAreaElement | null>(null)\n\n    // Set imperatively, like React DOM: a `value` prop would make Vue mirror\n    // it into a `value` attribute, which React never renders\n    const syncValue = () => {\n      const textarea = textareaRef.value\n      if (!textarea || props.value === undefined) return\n      const value = String(props.value)\n      if (textarea.value !== value) textarea.value = value\n    }\n    onMounted(() => {\n      // React's initTextarea: the initial text becomes the (dirty) value\n      const textarea = textareaRef.value\n      const initialValue = textarea?.textContent ?? \"\"\n      if (textarea && initialValue !== \"\") textarea.value = initialValue\n    })\n    watch(() => props.value, syncValue, { flush: \"post\" })\n\n    const handleInput = (evt: Event) => {\n      emit(\"update:value\", (evt.currentTarget as HTMLTextAreaElement).value)\n      // A controlled value the parent did not update wins over the typed text\n      void nextTick(syncValue)\n    }\n\n    return () => {\n      // React keeps the textarea's text content in sync with the controlled\n      // value, else with `defaultValue`\n      const textContent = String(props.value ?? props.defaultValue ?? \"\")\n      return withDirectives(\n        h(\"textarea\", {\n          \"ref\": textareaRef,\n          \"rows\": props.rows,\n          \"data-slot\": \"input-group-control\",\n          \"class\": s.Control,\n          \"disabled\": props.disabled ?? group?.disabled,\n          \"aria-invalid\": group?.invalid || undefined,\n          textContent,\n          \"onInput\": handleInput,\n        }),\n        [[vServerText, textContent]],\n      )\n    }\n  },\n})\n\ntype InputGroupTextareaOwnProps = InstanceType<typeof InputGroupTextareaComponent>[\"$props\"]\n\n/** InputGroupTextarea props plus the native <textarea> attributes that fall through to it. */\nexport type InputGroupTextareaProps = InputGroupTextareaOwnProps &\n  Omit<TextareaHTMLAttributes, keyof InputGroupTextareaOwnProps>\n\n/** The native <textarea> of the group (React `InputGroup.Textarea`). */\nexport const InputGroupTextarea = InputGroupTextareaComponent as typeof InputGroupTextareaComponent & {\n  new (): { $props: InputGroupTextareaProps }\n}\n\nexport type InputGroupAddonAlign = \"inline-start\" | \"inline-end\" | \"block-start\" | \"block-end\"\n\n/** Icons, text and buttons beside, above or below the control (React `InputGroup.Addon`). */\nexport const InputGroupAddon = defineComponent({\n  name: \"InputGroupAddon\",\n  props: {\n    /**\n     * Where the addon sits: before or after the control on its line, or as a\n     * row above or below it.\n     * @default \"inline-start\"\n     */\n    align: { type: String as PropType<InputGroupAddonAlign>, default: \"inline-start\" },\n  },\n  setup(props, { slots }) {\n    return () =>\n      h(\n        \"div\",\n        { \"data-slot\": \"input-group-addon\", \"data-align\": props.align, \"class\": s.Addon },\n        slots.default?.(),\n      )\n  },\n})\n\nexport type InputGroupAddonProps = InstanceType<typeof InputGroupAddon>[\"$props\"] &\n  Omit<HTMLAttributes, keyof InstanceType<typeof InputGroupAddon>[\"$props\"]>\n\nconst InputGroupButtonComponent = defineComponent({\n  name: \"InputGroupButton\",\n  props: {\n    /** Color for the button. @default \"secondary\" */\n    color: { type: String as PropType<ButtonColor>, default: \"secondary\" },\n    /** Style variant. @default \"ghost\" */\n    variant: { type: String as PropType<Variants<\"solid\" | \"soft\" | \"outline\" | \"ghost\">>, default: \"ghost\" },\n    pill: { type: Boolean, default: undefined },\n    disabled: { type: Boolean, default: undefined },\n  },\n  setup(props, { slots }) {\n    const group = inject(InputGroupKey, null)\n    return () =>\n      h(\n        Button,\n        {\n          color: props.color,\n          variant: props.variant,\n          size: BUTTON_SIZE[group?.size ?? \"md\"],\n          pill: props.pill ?? group?.pill,\n          disabled: props.disabled ?? group?.disabled,\n          class: s.Button,\n        },\n        slots,\n      )\n  },\n})\n\ntype InputGroupButtonOwnProps = InstanceType<typeof InputGroupButtonComponent>[\"$props\"]\n\n/** InputGroupButton props plus the Button props (except `size`) that fall through to it, as in React. */\nexport type InputGroupButtonProps = InputGroupButtonOwnProps &\n  Omit<ButtonProps, keyof InputGroupButtonOwnProps | \"size\">\n\n/**\n * A ghost `Button` sized from the group (React `InputGroup.Button`). Takes the\n * Button props except `size`; `pill` and `disabled` default to the group's.\n */\nexport const InputGroupButton = InputGroupButtonComponent as typeof InputGroupButtonComponent & {\n  new (): { $props: InputGroupButtonProps }\n}\n\n/** Text and icons inside an addon: prefixes, units, counters (React `InputGroup.Text`). */\nexport const InputGroupText = defineComponent({\n  name: \"InputGroupText\",\n  setup(_props, { slots }) {\n    return () => h(\"span\", { \"data-slot\": \"input-group-text\", \"class\": s.Text }, slots.default?.())\n  },\n})\n\nexport type InputGroupTextProps = HTMLAttributes\n"]}

package/dist/es/components/InputGroup/index.js

@@ -0,0 +1,2 @@
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, } from "./InputGroup.js";
+//# sourceMappingURL=index.js.map

package/dist/es/components/InputGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/InputGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,kBAAkB,GAQnB,MAAM,iBAAiB,CAAA","sourcesContent":["export {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n  type InputGroupAddonAlign,\n  type InputGroupAddonProps,\n  type InputGroupButtonProps,\n  type InputGroupInputProps,\n  type InputGroupProps,\n  type InputGroupTextareaProps,\n  type InputGroupTextProps,\n} from \"./InputGroup.js\"\n"]}

package/dist/es/components/Kbd/Kbd.js

@@ -0,0 +1,26 @@
+import { defineComponent, h } from "vue";
+import s from "@plexui/styles/components/Kbd/Kbd.module.css";
+// Vue port of packages/ui/src/components/Kbd/Kbd.tsx. Attributes fall
+// through to the <kbd> (and the group's <span>), as React spreads them.
+const KbdComponent = defineComponent({
+    name: "Kbd",
+    props: {
+        /** Height and text size: `xs` 16px, `sm` 20px, `md` 24px. @default "sm" */
+        size: { type: String, default: "sm" },
+        /** `soft` fills the key, `outline` draws its edge; both mix the text color. @default "soft" */
+        variant: { type: String, default: "soft" },
+    },
+    setup(props, { slots }) {
+        return () => h("kbd", { "class": s.Kbd, "data-size": props.size, "data-variant": props.variant }, slots.default?.());
+    },
+});
+/** A key or a shortcut, such as ⌘K, in a tooltip, a menu item or a sentence. */
+export const Kbd = KbdComponent;
+/** Keys pressed together: a row of `Kbd` (React `Kbd.Group`). */
+export const KbdGroup = defineComponent({
+    name: "KbdGroup",
+    setup(_props, { slots }) {
+        return () => h("span", { class: s.Group }, slots.default?.());
+    },
+});
+//# sourceMappingURL=Kbd.js.map