@plexui/vue 0.0.0-stage → 0.1.1

package/dist/es/components/Alert/Alert.js

@@ -0,0 +1,125 @@
+import clsx from "clsx";
+import { defineComponent, h, onBeforeUnmount, onMounted, ref, watch, } from "vue";
+import { CheckCircle, Info, Warning } from "../Icon/index.js";
+import { Button } from "../Button/index.js";
+import { hasContent } from "../../lib/slotContent.js";
+import s from "@plexui/styles/components/Alert/Alert.module.css";
+/** Default indicator icon, chosen from the color (which signals intention). */
+const Indicator = (color) => {
+    switch (color) {
+        case "warning":
+        case "caution":
+        case "danger":
+            return h(Warning);
+        case "success":
+            return h(CheckCircle);
+        default:
+            return h(Info);
+    }
+};
+// usehooks-ts `extractSize` for the content box
+const contentBoxSize = (entry, sizeType) => {
+    const box = entry.contentBoxSize;
+    if (!box)
+        return entry.contentRect[sizeType === "inlineSize" ? "width" : "height"];
+    // Firefox once reported a single object instead of an array
+    return Array.isArray(box) ? box[0]?.[sizeType] : box[sizeType];
+};
+const AlertComponent = defineComponent({
+    name: "Alert",
+    props: {
+        /** Color of the alert. @default "primary" */
+        color: { type: String, default: "primary" },
+        /** Style variant. @default "outline" */
+        variant: { type: String, default: "outline" },
+        /** Title displayed in the alert (or the `title` slot). */
+        title: String,
+        /** Description text displayed in the alert (or the `description` slot). */
+        description: String,
+        /** Places `actions` at the end or the bottom. Automatic from sizing when unset. */
+        actionsPlacement: String,
+        /** `false` hides the indicator. Use the `indicator` slot to replace it. */
+        indicator: { type: Boolean, default: undefined },
+        /** Class applied to the actions container */
+        actionsClassName: String,
+        /** Shows the Dismiss button; called when it is clicked. */
+        onDismiss: Function,
+        /** A full-width strip across a page or panel: square corners, lines above and below only. @default false */
+        banner: { type: Boolean, default: false },
+    },
+    setup(props, { slots }) {
+        const containerRef = ref(null);
+        const actionsRef = ref(null);
+        const actionsAutoPlacement = ref("end");
+        const containerWidth = ref(undefined);
+        let observer;
+        onMounted(() => {
+            const container = containerRef.value;
+            if (!container)
+                return;
+            if (typeof window === "undefined" || !("ResizeObserver" in window))
+                return;
+            let previousWidth;
+            let previousHeight;
+            observer = new ResizeObserver(([entry]) => {
+                if (!entry)
+                    return;
+                const width = contentBoxSize(entry, "inlineSize");
+                const height = contentBoxSize(entry, "blockSize");
+                if (width !== previousWidth || height !== previousHeight) {
+                    previousWidth = width;
+                    previousHeight = height;
+                    containerWidth.value = width;
+                }
+            });
+            observer.observe(container, { box: "content-box" });
+        });
+        onBeforeUnmount(() => observer?.disconnect());
+        watch(containerWidth, (width) => {
+            const actionsWidth = actionsRef.value?.clientWidth ?? 0;
+            if (actionsWidth && width) {
+                // If actions are larger than a third of the container width, wrap them.
+                actionsAutoPlacement.value = actionsWidth > width / 3 ? "bottom" : "end";
+            }
+        });
+        return () => {
+            const { color } = props;
+            const title = slots.title ? slots.title() : props.title;
+            const description = slots.description ? slots.description() : props.description;
+            const actions = slots.actions?.();
+            const showActions = hasContent(actions) || !!props.onDismiss;
+            return h("div", {
+                "ref": containerRef,
+                "class": s.Alert,
+                "data-variant": props.variant,
+                "data-color": color,
+                "role": color === "danger" ? "alert" : undefined,
+                "data-actions-placement": props.actionsPlacement ?? actionsAutoPlacement.value,
+                "data-banner": props.banner ? "" : undefined,
+            }, [
+                props.indicator === false
+                    ? null
+                    : h("div", { class: s.Indicator }, slots.indicator ? slots.indicator() : [Indicator(color)]),
+                h("div", { class: s.Content }, [
+                    h("div", { class: s.Message }, [
+                        hasContent([title]) ? h("div", { class: s.Title }, [title]) : null,
+                        hasContent([description])
+                            ? h("div", { class: s.Description }, [description])
+                            : null,
+                    ]),
+                    showActions
+                        ? h("div", { class: clsx(s.Actions, props.actionsClassName), ref: actionsRef }, [
+                            actions,
+                            props.onDismiss
+                                ? h(Button, { type: "button", onClick: props.onDismiss, color, variant: "soft", pill: true }, { default: () => "Dismiss" })
+                                : null,
+                        ])
+                        : null,
+                ]),
+            ]);
+        };
+    },
+});
+/** Inline message with a semantic color, optional title, description and actions. */
+export const Alert = AlertComponent;
+//# sourceMappingURL=Alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../../src/components/Alert/Alert.ts"],"names":[],"mappings":"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","sourcesContent":["import clsx from \"clsx\"\nimport {\n  defineComponent,\n  h,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  watch,\n  type HTMLAttributes,\n  type PropType,\n  type VNodeArrayChildren,\n  type VNodeChild,\n} from \"vue\"\nimport type { SemanticColors, Variants } from \"@plexui/styles/types\"\nimport { CheckCircle, Info, Warning } from \"../Icon/index.js\"\nimport { Button } from \"../Button/index.js\"\nimport { hasContent } from \"../../lib/slotContent.js\"\nimport s from \"@plexui/styles/components/Alert/Alert.module.css\"\n\n// Vue port of packages/ui/src/components/Alert/Alert.tsx. ReactNode props\n// are slots (`title`, `description`, `actions`, `indicator`), with string\n// props as fallback for `title` and `description`. `:indicator=\"false\"`\n// hides the indicator. `onDismiss` stays a function prop (`@dismiss` in\n// templates) because its presence adds the Dismiss button.\n// The actions auto placement mirrors usehooks-ts `useResizeObserver`: it\n// reacts to the container's content-box width only.\n\nexport type AlertColor = SemanticColors<\n  \"primary\" | \"danger\" | \"success\" | \"info\" | \"discovery\" | \"caution\" | \"warning\"\n>\n\n/** Default indicator icon, chosen from the color (which signals intention). */\nconst Indicator = (color: AlertColor) => {\n  switch (color) {\n    case \"warning\":\n    case \"caution\":\n    case \"danger\":\n      return h(Warning)\n    case \"success\":\n      return h(CheckCircle)\n    default:\n      return h(Info)\n  }\n}\n\n// usehooks-ts `extractSize` for the content box\nconst contentBoxSize = (entry: ResizeObserverEntry, sizeType: \"inlineSize\" | \"blockSize\") => {\n  const box = entry.contentBoxSize as ReadonlyArray<ResizeObserverSize> | ResizeObserverSize | undefined\n  if (!box) return entry.contentRect[sizeType === \"inlineSize\" ? \"width\" : \"height\"]\n  // Firefox once reported a single object instead of an array\n  return Array.isArray(box) ? box[0]?.[sizeType] : (box as ResizeObserverSize)[sizeType]\n}\n\nconst AlertComponent = defineComponent({\n  name: \"Alert\",\n  props: {\n    /** Color of the alert. @default \"primary\" */\n    color: { type: String as PropType<AlertColor>, default: \"primary\" },\n    /** Style variant. @default \"outline\" */\n    variant: { type: String as PropType<Variants<\"solid\" | \"soft\" | \"outline\">>, default: \"outline\" },\n    /** Title displayed in the alert (or the `title` slot). */\n    title: String,\n    /** Description text displayed in the alert (or the `description` slot). */\n    description: String,\n    /** Places `actions` at the end or the bottom. Automatic from sizing when unset. */\n    actionsPlacement: String as PropType<\"end\" | \"bottom\">,\n    /** `false` hides the indicator. Use the `indicator` slot to replace it. */\n    indicator: { type: Boolean, default: undefined },\n    /** Class applied to the actions container */\n    actionsClassName: String,\n    /** Shows the Dismiss button; called when it is clicked. */\n    onDismiss: Function as PropType<(event: MouseEvent) => void>,\n    /** A full-width strip across a page or panel: square corners, lines above and below only. @default false */\n    banner: { type: Boolean, default: false },\n  },\n  setup(props, { slots }) {\n    const containerRef = ref<HTMLDivElement | null>(null)\n    const actionsRef = ref<HTMLDivElement | null>(null)\n    const actionsAutoPlacement = ref<\"end\" | \"bottom\">(\"end\")\n    const containerWidth = ref<number | undefined>(undefined)\n\n    let observer: ResizeObserver | undefined\n    onMounted(() => {\n      const container = containerRef.value\n      if (!container) return\n      if (typeof window === \"undefined\" || !(\"ResizeObserver\" in window)) return\n      let previousWidth: number | undefined\n      let previousHeight: number | undefined\n      observer = new ResizeObserver(([entry]) => {\n        if (!entry) return\n        const width = contentBoxSize(entry, \"inlineSize\")\n        const height = contentBoxSize(entry, \"blockSize\")\n        if (width !== previousWidth || height !== previousHeight) {\n          previousWidth = width\n          previousHeight = height\n          containerWidth.value = width\n        }\n      })\n      observer.observe(container, { box: \"content-box\" })\n    })\n    onBeforeUnmount(() => observer?.disconnect())\n\n    watch(containerWidth, (width) => {\n      const actionsWidth = actionsRef.value?.clientWidth ?? 0\n\n      if (actionsWidth && width) {\n        // If actions are larger than a third of the container width, wrap them.\n        actionsAutoPlacement.value = actionsWidth > width / 3 ? \"bottom\" : \"end\"\n      }\n    })\n\n    return () => {\n      const { color } = props\n      const title: VNodeChild = slots.title ? slots.title() : props.title\n      const description: VNodeChild = slots.description ? slots.description() : props.description\n      const actions = slots.actions?.()\n      const showActions = hasContent(actions) || !!props.onDismiss\n\n      return h(\n        \"div\",\n        {\n          \"ref\": containerRef,\n          \"class\": s.Alert,\n          \"data-variant\": props.variant,\n          \"data-color\": color,\n          \"role\": color === \"danger\" ? \"alert\" : undefined,\n          \"data-actions-placement\": props.actionsPlacement ?? actionsAutoPlacement.value,\n          \"data-banner\": props.banner ? \"\" : undefined,\n        },\n        [\n          props.indicator === false\n            ? null\n            : h(\"div\", { class: s.Indicator }, slots.indicator ? slots.indicator() : [Indicator(color)]),\n          h(\"div\", { class: s.Content }, [\n            h(\"div\", { class: s.Message }, [\n              hasContent([title as VNodeArrayChildren]) ? h(\"div\", { class: s.Title }, [title]) : null,\n              hasContent([description as VNodeArrayChildren])\n                ? h(\"div\", { class: s.Description }, [description])\n                : null,\n            ]),\n            showActions\n              ? h(\"div\", { class: clsx(s.Actions, props.actionsClassName), ref: actionsRef }, [\n                  actions,\n                  props.onDismiss\n                    ? h(\n                        Button,\n                        { type: \"button\", onClick: props.onDismiss, color, variant: \"soft\", pill: true },\n                        { default: () => \"Dismiss\" },\n                      )\n                    : null,\n                ])\n              : null,\n          ]),\n        ],\n      )\n    }\n  },\n})\n\ntype AlertOwnProps = InstanceType<typeof AlertComponent>[\"$props\"]\n\n/** Alert props plus the native <div> attributes that fall through to it, as in React. */\nexport type AlertProps = AlertOwnProps & Omit<HTMLAttributes, keyof AlertOwnProps>\n\n/** Inline message with a semantic color, optional title, description and actions. */\nexport const Alert = AlertComponent as typeof AlertComponent & { new (): { $props: AlertProps } }\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAoC,MAAM,YAAY,CAAA","sourcesContent":["export { Alert, type AlertColor, type AlertProps } from \"./Alert.js\"\n"]}

package/dist/es/components/Avatar/Avatar.js

@@ -0,0 +1,117 @@
+import { defineComponent, h, onMounted, ref } from "vue";
+import { toCssVariables } from "../../lib/helpers.js";
+import s from "@plexui/styles/components/Avatar/Avatar.module.css";
+const avatarProps = {
+    /** Size of the avatar's width & height, in pixels. */
+    size: Number,
+    /** Display a formatted count of overflow objects. */
+    overflowCount: Number,
+    /** Name used to display initials from */
+    name: String,
+    /** Color used for the avatar. @default "secondary" */
+    color: { type: String, default: "secondary" },
+    /** Style variant of the avatar. @default "soft" */
+    variant: { type: String, default: "soft" },
+    /** URL of the image to display as the avatar */
+    imageUrl: String,
+    /** Icon component to render in the avatar circle (e.g. `Robot` from `@plexui/vue/components/Icon`) */
+    Icon: [Object, Function],
+};
+const validateImageUrl = (imageUrl) => {
+    if (!imageUrl) {
+        return;
+    }
+    // Avoid specific pattern of images from gravatar.com, which use a pair of initials, instead of a single initial.
+    if (imageUrl.includes("gravatar.com") && imageUrl.includes("cdn.auth0.com")) {
+        return;
+    }
+    return imageUrl;
+};
+const renderImage = (url, status, onLoad, onError, imgRef) => h("span", { class: s.AvatarImageContainer }, [
+    h("img", {
+        "ref": imgRef,
+        "onLoad": onLoad,
+        "onError": onError,
+        "src": url,
+        "class": s.AvatarImage,
+        "data-loaded": status === "loaded" ? "" : undefined,
+        "alt": "",
+        "role": "presentation",
+    }),
+]);
+const renderInitial = (name = "") => h("span", { class: s.AvatarInitial }, name.charAt(0).toUpperCase());
+const renderOverflowCount = (count) => {
+    const formattedCount = new Intl.NumberFormat("en", {
+        notation: "compact",
+        compactDisplay: "short",
+        maximumFractionDigits: 0,
+    })
+        .format(count)
+        .toLocaleLowerCase();
+    return h("span", { "class": s.AvatarOverflowCount, "data-letter-count": formattedCount.length }, [
+        h("span", { class: s.AvatarOverflowCountSymbol }, "+"),
+        formattedCount,
+    ]);
+};
+const AvatarInner = defineComponent({
+    name: "AvatarInner",
+    inheritAttrs: false,
+    props: avatarProps,
+    setup(props, { attrs }) {
+        const imageStatus = ref();
+        const img = ref(null);
+        // An image that loaded before hydration fired its load event before Vue
+        // listened for it: read the element instead, as React does
+        onMounted(() => {
+            if (img.value && imageStatus.value !== "loaded" && img.value.complete && img.value.naturalWidth > 0) {
+                imageStatus.value = "loaded";
+            }
+        });
+        return () => {
+            const { class: className, ...restAttrs } = attrs;
+            const isInteractive = !!(attrs.onPointerdown || attrs.onClick);
+            const { imageUrl, overflowCount, Icon } = props;
+            // Render a placeholder layer (initials / overflow / icon) behind the
+            // image so slow networks never leave the avatar visually empty while
+            // the image is loading. The image overlays it once loaded and hides
+            // it when it fails, so the avatar is never blank.
+            const placeholder = overflowCount
+                ? renderOverflowCount(overflowCount)
+                : Icon
+                    ? h(Icon, { class: s.AvatarIcon })
+                    : renderInitial(props.name);
+            const children = imageUrl && imageStatus.value !== "error"
+                ? [
+                    placeholder,
+                    renderImage(imageUrl, imageStatus.value, () => (imageStatus.value = "loaded"), () => (imageStatus.value = "error"), img),
+                ]
+                : [placeholder];
+            return h(isInteractive ? "button" : "span", {
+                "class": [s.Avatar, className],
+                "style": toCssVariables({ "avatar-size": props.size }),
+                "role": isInteractive ? undefined : "presentation",
+                // An interactive avatar is a button; name it by the full name, not the initial
+                "aria-label": isInteractive ? props.name : undefined,
+                "data-color": props.color,
+                "data-variant": props.variant,
+                "type": isInteractive ? "button" : undefined,
+                ...restAttrs,
+            }, children);
+        };
+    },
+});
+const AvatarComponent = defineComponent({
+    name: "Avatar",
+    inheritAttrs: false,
+    props: avatarProps,
+    setup(props, { attrs }) {
+        // Keying off of imageUrl remounts the avatar when it changes, which
+        // resets the image status, as React's `key={validImageUrl}` does
+        return () => {
+            const validImageUrl = validateImageUrl(props.imageUrl);
+            return h(AvatarInner, { ...attrs, ...props, imageUrl: validImageUrl, key: validImageUrl });
+        };
+    },
+});
+export const Avatar = AvatarComponent;
+//# sourceMappingURL=Avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.ts"],"names":[],"mappings":"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","sourcesContent":["import { defineComponent, h, onMounted, ref, type Component, type HTMLAttributes, type PropType, type Ref, type VNode } from \"vue\"\nimport type { SemanticColors, Variants } from \"@plexui/styles/types\"\nimport { toCssVariables } from \"../../lib/helpers.js\"\nimport s from \"@plexui/styles/components/Avatar/Avatar.module.css\"\n\n// Vue port of packages/ui/src/components/Avatar/Avatar.tsx. Props, defaults\n// and rendered attributes match React 1:1 (checked by the parity tests).\n//\n// React spreads every prop it does not use (`onClick`, `onPointerDown`, `id`,\n// `style`, ...) onto the root after its own attributes. Here those arrive as\n// `attrs` and are spread last the same way, so a caller's `role`, `type` or\n// `style` wins. A `click` or `pointerdown` listener makes the avatar a button.\n\ntype ImageStatus = undefined | \"error\" | \"loaded\"\n\nexport type AvatarColor = SemanticColors<\"primary\" | \"secondary\" | \"success\" | \"info\" | \"discovery\" | \"danger\">\n\nconst avatarProps = {\n  /** Size of the avatar's width & height, in pixels. */\n  size: Number,\n  /** Display a formatted count of overflow objects. */\n  overflowCount: Number,\n  /** Name used to display initials from */\n  name: String,\n  /** Color used for the avatar. @default \"secondary\" */\n  color: { type: String as PropType<AvatarColor>, default: \"secondary\" },\n  /** Style variant of the avatar. @default \"soft\" */\n  variant: { type: String as PropType<Variants<\"soft\" | \"solid\">>, default: \"soft\" },\n  /** URL of the image to display as the avatar */\n  imageUrl: String,\n  /** Icon component to render in the avatar circle (e.g. `Robot` from `@plexui/vue/components/Icon`) */\n  Icon: [Object, Function] as PropType<Component>,\n}\n\nconst validateImageUrl = (imageUrl?: string): string | undefined => {\n  if (!imageUrl) {\n    return\n  }\n\n  // Avoid specific pattern of images from gravatar.com, which use a pair of initials, instead of a single initial.\n  if (imageUrl.includes(\"gravatar.com\") && imageUrl.includes(\"cdn.auth0.com\")) {\n    return\n  }\n\n  return imageUrl\n}\n\nconst renderImage = (\n  url: string,\n  status: ImageStatus,\n  onLoad: () => void,\n  onError: () => void,\n  imgRef: Ref<HTMLImageElement | null>,\n) =>\n  h(\"span\", { class: s.AvatarImageContainer }, [\n    h(\"img\", {\n      \"ref\": imgRef,\n      \"onLoad\": onLoad,\n      \"onError\": onError,\n      \"src\": url,\n      \"class\": s.AvatarImage,\n      \"data-loaded\": status === \"loaded\" ? \"\" : undefined,\n      \"alt\": \"\",\n      \"role\": \"presentation\",\n    }),\n  ])\n\nconst renderInitial = (name = \"\") => h(\"span\", { class: s.AvatarInitial }, name.charAt(0).toUpperCase())\n\nconst renderOverflowCount = (count: number) => {\n  const formattedCount = new Intl.NumberFormat(\"en\", {\n    notation: \"compact\",\n    compactDisplay: \"short\",\n    maximumFractionDigits: 0,\n  })\n    .format(count)\n    .toLocaleLowerCase()\n\n  return h(\"span\", { \"class\": s.AvatarOverflowCount, \"data-letter-count\": formattedCount.length }, [\n    h(\"span\", { class: s.AvatarOverflowCountSymbol }, \"+\"),\n    formattedCount,\n  ])\n}\n\nconst AvatarInner = defineComponent({\n  name: \"AvatarInner\",\n  inheritAttrs: false,\n  props: avatarProps,\n  setup(props, { attrs }) {\n    const imageStatus = ref<ImageStatus>()\n    const img = ref<HTMLImageElement | null>(null)\n\n    // An image that loaded before hydration fired its load event before Vue\n    // listened for it: read the element instead, as React does\n    onMounted(() => {\n      if (img.value && imageStatus.value !== \"loaded\" && img.value.complete && img.value.naturalWidth > 0) {\n        imageStatus.value = \"loaded\"\n      }\n    })\n\n    return () => {\n      const { class: className, ...restAttrs } = attrs\n      const isInteractive = !!(attrs.onPointerdown || attrs.onClick)\n      const { imageUrl, overflowCount, Icon } = props\n\n      // Render a placeholder layer (initials / overflow / icon) behind the\n      // image so slow networks never leave the avatar visually empty while\n      // the image is loading. The image overlays it once loaded and hides\n      // it when it fails, so the avatar is never blank.\n      const placeholder = overflowCount\n        ? renderOverflowCount(overflowCount)\n        : Icon\n          ? h(Icon, { class: s.AvatarIcon })\n          : renderInitial(props.name)\n\n      const children: VNode[] =\n        imageUrl && imageStatus.value !== \"error\"\n          ? [\n              placeholder,\n              renderImage(\n                imageUrl,\n                imageStatus.value,\n                () => (imageStatus.value = \"loaded\"),\n                () => (imageStatus.value = \"error\"),\n                img,\n              ),\n            ]\n          : [placeholder]\n\n      return h(\n        isInteractive ? \"button\" : \"span\",\n        {\n          \"class\": [s.Avatar, className],\n          \"style\": toCssVariables({ \"avatar-size\": props.size }),\n          \"role\": isInteractive ? undefined : \"presentation\",\n          // An interactive avatar is a button; name it by the full name, not the initial\n          \"aria-label\": isInteractive ? props.name : undefined,\n          \"data-color\": props.color,\n          \"data-variant\": props.variant,\n          \"type\": isInteractive ? \"button\" : undefined,\n          ...restAttrs,\n        },\n        children,\n      )\n    }\n  },\n})\n\nconst AvatarComponent = defineComponent({\n  name: \"Avatar\",\n  inheritAttrs: false,\n  props: avatarProps,\n  setup(props, { attrs }) {\n    // Keying off of imageUrl remounts the avatar when it changes, which\n    // resets the image status, as React's `key={validImageUrl}` does\n    return () => {\n      const validImageUrl = validateImageUrl(props.imageUrl)\n      return h(AvatarInner, { ...attrs, ...props, imageUrl: validImageUrl, key: validImageUrl })\n    }\n  },\n})\n\ntype AvatarOwnProps = InstanceType<typeof AvatarComponent>[\"$props\"]\n\n/**\n * Avatar props plus the attributes and listeners that fall through to the root,\n * as React's rest props do. `onClick` / `onPointerdown` make the avatar interactive.\n */\nexport type AvatarProps = AvatarOwnProps & Omit<HTMLAttributes, keyof AvatarOwnProps>\n\nexport const Avatar = AvatarComponent as typeof AvatarComponent & { new (): { $props: AvatarProps } }\n"]}

package/dist/es/components/Avatar/AvatarGroup.js

@@ -0,0 +1,60 @@
+import { Comment, Fragment, cloneVNode, createTextVNode, defineComponent, h, isVNode, } from "vue";
+import { toCssVariables } from "../../lib/helpers.js";
+import s from "@plexui/styles/components/Avatar/AvatarGroup.module.css";
+// PatchFlags.KEYED_FRAGMENT | PatchFlags.UNKEYED_FRAGMENT: the fragment of a v-for
+const LIST_FRAGMENT = 128 | 256;
+// Port of React's `Children.toArray`: flattens lists (arrays, and the
+// fragment a v-for renders, which is React's `.map()` array) but keeps any
+// other fragment as one child, like React keeps `<>...</>`. Drops empty
+// children (v-if comments) and keys every child by its position or own key,
+// so reversing the order moves avatars instead of re-rendering them in place.
+const toChildArray = (children, prefix = ".") => {
+    const result = [];
+    (children ?? []).forEach((child, index) => {
+        if (child == null || typeof child === "boolean") {
+            return;
+        }
+        if (Array.isArray(child)) {
+            result.push(...toChildArray(child, `${prefix}${index}:`));
+            return;
+        }
+        const vnode = isVNode(child) ? child : createTextVNode(String(child));
+        if (vnode.type === Comment) {
+            return;
+        }
+        const name = vnode.key == null ? String(index) : `$${String(vnode.key)}`;
+        if (vnode.type === Fragment && vnode.patchFlag & LIST_FRAGMENT && Array.isArray(vnode.children)) {
+            result.push(...toChildArray(vnode.children, `${prefix}${name}:`));
+            return;
+        }
+        result.push(cloneVNode(vnode, { key: `${prefix}${name}` }));
+    });
+    return result;
+};
+/**
+ * Port of packages/ui/src/components/Avatar/AvatarGroup.tsx. Like React, only
+ * `class` is applied; other attributes are not forwarded.
+ */
+export const AvatarGroup = defineComponent({
+    name: "AvatarGroup",
+    inheritAttrs: false,
+    props: {
+        /** Determines stacking layer order. @default "start" */
+        stack: { type: String, default: "start" },
+        /** Size all avatars in the group, in pixels. */
+        size: Number,
+    },
+    setup(props, { slots, attrs }) {
+        return () => {
+            const childrenArray = toChildArray(slots.default?.());
+            // Conditionally reverse the array depending on desired stacking priority
+            const maybeReversedChildren = props.stack === "start" ? childrenArray.slice().reverse() : childrenArray;
+            return h("div", {
+                "class": [s.Group, attrs.class],
+                "data-stack": props.stack,
+                "style": toCssVariables({ "avatar-size": props.size }),
+            }, maybeReversedChildren);
+        };
+    },
+});
+//# sourceMappingURL=AvatarGroup.js.map

package/dist/es/components/Avatar/AvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../../src/components/Avatar/AvatarGroup.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Comment,\n  Fragment,\n  cloneVNode,\n  createTextVNode,\n  defineComponent,\n  h,\n  isVNode,\n  type PropType,\n  type VNode,\n  type VNodeArrayChildren,\n} from \"vue\"\nimport { toCssVariables } from \"../../lib/helpers.js\"\nimport s from \"@plexui/styles/components/Avatar/AvatarGroup.module.css\"\n\n// PatchFlags.KEYED_FRAGMENT | PatchFlags.UNKEYED_FRAGMENT: the fragment of a v-for\nconst LIST_FRAGMENT = 128 | 256\n\n// Port of React's `Children.toArray`: flattens lists (arrays, and the\n// fragment a v-for renders, which is React's `.map()` array) but keeps any\n// other fragment as one child, like React keeps `<>...</>`. Drops empty\n// children (v-if comments) and keys every child by its position or own key,\n// so reversing the order moves avatars instead of re-rendering them in place.\nconst toChildArray = (children: VNodeArrayChildren | undefined, prefix = \".\"): VNode[] => {\n  const result: VNode[] = []\n\n  ;(children ?? []).forEach((child, index) => {\n    if (child == null || typeof child === \"boolean\") {\n      return\n    }\n\n    if (Array.isArray(child)) {\n      result.push(...toChildArray(child, `${prefix}${index}:`))\n      return\n    }\n\n    const vnode = isVNode(child) ? child : createTextVNode(String(child))\n    if (vnode.type === Comment) {\n      return\n    }\n\n    const name = vnode.key == null ? String(index) : `$${String(vnode.key)}`\n    if (vnode.type === Fragment && vnode.patchFlag & LIST_FRAGMENT && Array.isArray(vnode.children)) {\n      result.push(...toChildArray(vnode.children, `${prefix}${name}:`))\n      return\n    }\n\n    result.push(cloneVNode(vnode, { key: `${prefix}${name}` }))\n  })\n\n  return result\n}\n\n/**\n * Port of packages/ui/src/components/Avatar/AvatarGroup.tsx. Like React, only\n * `class` is applied; other attributes are not forwarded.\n */\nexport const AvatarGroup = defineComponent({\n  name: \"AvatarGroup\",\n  inheritAttrs: false,\n  props: {\n    /** Determines stacking layer order. @default \"start\" */\n    stack: { type: String as PropType<\"start\" | \"end\">, default: \"start\" },\n    /** Size all avatars in the group, in pixels. */\n    size: Number,\n  },\n  setup(props, { slots, attrs }) {\n    return () => {\n      const childrenArray = toChildArray(slots.default?.())\n      // Conditionally reverse the array depending on desired stacking priority\n      const maybeReversedChildren = props.stack === \"start\" ? childrenArray.slice().reverse() : childrenArray\n\n      return h(\n        \"div\",\n        {\n          \"class\": [s.Group, attrs.class],\n          \"data-stack\": props.stack,\n          \"style\": toCssVariables({ \"avatar-size\": props.size }),\n        },\n        maybeReversedChildren,\n      )\n    }\n  },\n})\n\nexport type AvatarGroupProps = InstanceType<typeof AvatarGroup>[\"$props\"]\n"]}

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

@@ -0,0 +1,3 @@
+export { Avatar } from "./Avatar.js";
+export { AvatarGroup } from "./AvatarGroup.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAsC,MAAM,aAAa,CAAA;AACxE,OAAO,EAAE,WAAW,EAAyB,MAAM,kBAAkB,CAAA","sourcesContent":["export { Avatar, type AvatarColor, type AvatarProps } from \"./Avatar.js\"\nexport { AvatarGroup, type AvatarGroupProps } from \"./AvatarGroup.js\"\n"]}

package/dist/es/components/Badge/Badge.js

@@ -0,0 +1,27 @@
+import { defineComponent, h } from "vue";
+import { wrapTextNodeSiblings } from "../../lib/renderHelpers.js";
+import s from "@plexui/styles/components/Badge/Badge.module.css";
+const BadgeComponent = defineComponent({
+    name: "Badge",
+    props: {
+        /** Visual style of the badge. @default "soft" */
+        variant: { type: String, default: "soft" },
+        /** Size scale of the badge: `sm` 20px, `md` 22px, `lg` 24px. @default "sm" */
+        size: { type: String, default: "sm" },
+        /** Determines if the badge should be a fully rounded pill shape. @default false */
+        pill: { type: Boolean, default: false },
+        /** Color of the badge, related to its meaning or intent. @default "secondary" */
+        color: { type: String, default: "secondary" },
+    },
+    setup(props, { slots }) {
+        return () => h("div", {
+            "class": s.Badge,
+            "data-color": props.color,
+            "data-size": props.size,
+            "data-pill": props.pill ? "" : undefined,
+            "data-variant": props.variant,
+        }, wrapTextNodeSiblings(slots.default?.()));
+    },
+});
+export const Badge = BadgeComponent;
+//# sourceMappingURL=Badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAsC,MAAM,KAAK,CAAA;AAE5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAA;AACjE,OAAO,CAAC,MAAM,kDAAkD,CAAA;AAUhE,MAAM,cAAc,GAAG,eAAe,CAAC;IACrC,IAAI,EAAE,OAAO;IACb,KAAK,EAAE;QACL,iDAAiD;QACjD,OAAO,EAAE,EAAE,IAAI,EAAE,MAA0D,EAAE,OAAO,EAAE,MAAM,EAAE;QAC9F,8EAA8E;QAC9E,IAAI,EAAE,EAAE,IAAI,EAAE,MAA6C,EAAE,OAAO,EAAE,IAAI,EAAE;QAC5E,mFAAmF;QACnF,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE;QACvC,iFAAiF;QACjF,KAAK,EAAE,EAAE,IAAI,EAAE,MAA8B,EAAE,OAAO,EAAE,WAAW,EAAE;KACtE;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE;QACpB,OAAO,GAAG,EAAE,CACV,CAAC,CACC,KAAK,EACL;YACE,OAAO,EAAE,CAAC,CAAC,KAAK;YAChB,YAAY,EAAE,KAAK,CAAC,KAAK;YACzB,WAAW,EAAE,KAAK,CAAC,IAAI;YACvB,WAAW,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;YACxC,cAAc,EAAE,KAAK,CAAC,OAAO;SAC9B,EACD,oBAAoB,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CACxC,CAAA;IACL,CAAC;CACF,CAAC,CAAA;AAOF,MAAM,CAAC,MAAM,KAAK,GAAG,cAA4E,CAAA","sourcesContent":["import { defineComponent, h, type HTMLAttributes, type PropType } from \"vue\"\nimport type { SemanticColors, Sizes, Variants } from \"@plexui/styles/types\"\nimport { wrapTextNodeSiblings } from \"../../lib/renderHelpers.js\"\nimport s from \"@plexui/styles/components/Badge/Badge.module.css\"\n\n// Vue port of packages/ui/src/components/Badge/index.tsx. React spreads the\n// remaining props after its own attributes, so caller attributes win; Vue's\n// attribute fallthrough merges them onto the root the same way.\n\nexport type BadgeColor = SemanticColors<\n  \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"discovery\" | \"caution\"\n>\n\nconst BadgeComponent = defineComponent({\n  name: \"Badge\",\n  props: {\n    /** Visual style of the badge. @default \"soft\" */\n    variant: { type: String as PropType<Variants<\"solid\" | \"soft\" | \"outline\">>, default: \"soft\" },\n    /** Size scale of the badge: `sm` 20px, `md` 22px, `lg` 24px. @default \"sm\" */\n    size: { type: String as PropType<Sizes<\"sm\" | \"md\" | \"lg\">>, default: \"sm\" },\n    /** Determines if the badge should be a fully rounded pill shape. @default false */\n    pill: { type: Boolean, default: false },\n    /** Color of the badge, related to its meaning or intent. @default \"secondary\" */\n    color: { type: String as PropType<BadgeColor>, default: \"secondary\" },\n  },\n  setup(props, { slots }) {\n    return () =>\n      h(\n        \"div\",\n        {\n          \"class\": s.Badge,\n          \"data-color\": props.color,\n          \"data-size\": props.size,\n          \"data-pill\": props.pill ? \"\" : undefined,\n          \"data-variant\": props.variant,\n        },\n        wrapTextNodeSiblings(slots.default?.()),\n      )\n  },\n})\n\ntype BadgeOwnProps = InstanceType<typeof BadgeComponent>[\"$props\"]\n\n/** Badge props plus the native <div> attributes that fall through to it, as in React. */\nexport type BadgeProps = BadgeOwnProps & Omit<HTMLAttributes, keyof BadgeOwnProps>\n\nexport const Badge = BadgeComponent as typeof BadgeComponent & { new (): { $props: BadgeProps } }\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAoC,MAAM,YAAY,CAAA","sourcesContent":["export { Badge, type BadgeColor, type BadgeProps } from \"./Badge.js\"\n"]}

package/dist/es/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,64 @@
+import { defineComponent, h, inject, provide } from "vue";
+import ChevronRightSm from "../Icon/svg/ChevronRightSm.js";
+import { TextLink } from "../TextLink/index.js";
+import s from "@plexui/styles/components/Breadcrumb/Breadcrumb.module.css";
+// Vue port of packages/ui/src/components/Breadcrumb/Breadcrumb.tsx.
+// `separator` is a slot on Breadcrumb; other attributes fall through to the
+// <nav>, as React spreads them.
+const SeparatorKey = Symbol("BreadcrumbSeparator");
+const BreadcrumbComponent = defineComponent({
+    name: "Breadcrumb",
+    props: {
+        /** Text size: `sm` for a trail above a compact header, `md` above a page title. @default "md" */
+        size: { type: String, default: "md" },
+        /** Accessible name of the navigation landmark. @default "Breadcrumb" */
+        ariaLabel: { type: String, default: "Breadcrumb" },
+    },
+    setup(props, { slots }) {
+        provide(SeparatorKey, () => (slots.separator ? slots.separator() : h(ChevronRightSm)));
+        return () => h("nav", { "aria-label": props.ariaLabel, "class": s.Breadcrumb, "data-size": props.size }, [
+            h("ol", { class: s.List }, slots.default?.()),
+        ]);
+    },
+});
+/**
+ * The trail of pages that leads to the current one. Each `BreadcrumbItem` is
+ * a link, a button (`@click`) or the current page (`current`). The
+ * `separator` slot replaces the chevron between items.
+ */
+export const Breadcrumb = BreadcrumbComponent;
+/** One step of the trail (React `Breadcrumb.Item`). */
+export const BreadcrumbItem = defineComponent({
+    name: "BreadcrumbItem",
+    inheritAttrs: false,
+    props: {
+        /** Link destination. Internal paths use the `linkComponent` of `PlexUIProvider` */
+        href: String,
+        /** Router link destination, for link components that take `to` */
+        to: [String, Object],
+        /** The current page: not a link, marked `aria-current="page"`. @default false */
+        current: { type: Boolean, default: false },
+        /** Makes an item without a destination act as a button (`@click`) */
+        onClick: Function,
+    },
+    setup(props, { slots, attrs }) {
+        const separator = inject(SeparatorKey, () => h(ChevronRightSm));
+        return () => {
+            let content;
+            if (props.current) {
+                content = h("span", { "class": s.Current, "aria-current": "page" }, slots.default?.());
+            }
+            else if (props.href || props.to || props.onClick) {
+                content = h(TextLink, { class: s.Link, href: props.href, to: props.to, onClick: props.onClick, underline: false }, { default: () => slots.default?.() });
+            }
+            else {
+                content = h("span", null, slots.default?.());
+            }
+            return h("li", { class: [s.Item, attrs.class] }, [
+                h("span", { "class": s.Separator, "aria-hidden": "true" }, [separator()]),
+                content,
+            ]);
+        };
+    },
+});
+//# sourceMappingURL=Breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.js","sourceRoot":"","sources":["../../../../src/components/Breadcrumb/Breadcrumb.ts"],"names":[],"mappings":"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","sourcesContent":["import { defineComponent, h, inject, provide, type HTMLAttributes, type InjectionKey, type PropType, type VNodeChild } from \"vue\"\nimport ChevronRightSm from \"../Icon/svg/ChevronRightSm.js\"\nimport { TextLink } from \"../TextLink/index.js\"\nimport s from \"@plexui/styles/components/Breadcrumb/Breadcrumb.module.css\"\n\n// Vue port of packages/ui/src/components/Breadcrumb/Breadcrumb.tsx.\n// `separator` is a slot on Breadcrumb; other attributes fall through to the\n// <nav>, as React spreads them.\n\nconst SeparatorKey: InjectionKey<() => VNodeChild> = Symbol(\"BreadcrumbSeparator\")\n\nconst BreadcrumbComponent = defineComponent({\n  name: \"Breadcrumb\",\n  props: {\n    /** Text size: `sm` for a trail above a compact header, `md` above a page title. @default \"md\" */\n    size: { type: String as PropType<\"sm\" | \"md\">, default: \"md\" },\n    /** Accessible name of the navigation landmark. @default \"Breadcrumb\" */\n    ariaLabel: { type: String, default: \"Breadcrumb\" },\n  },\n  setup(props, { slots }) {\n    provide(SeparatorKey, () => (slots.separator ? slots.separator() : h(ChevronRightSm)))\n    return () =>\n      h(\"nav\", { \"aria-label\": props.ariaLabel, \"class\": s.Breadcrumb, \"data-size\": props.size }, [\n        h(\"ol\", { class: s.List }, slots.default?.()),\n      ])\n  },\n})\n\ntype BreadcrumbOwnProps = InstanceType<typeof BreadcrumbComponent>[\"$props\"]\n\n/** Breadcrumb props plus the attributes that fall through to the <nav>. */\nexport type BreadcrumbProps = BreadcrumbOwnProps & Omit<HTMLAttributes, keyof BreadcrumbOwnProps>\n\n/**\n * The trail of pages that leads to the current one. Each `BreadcrumbItem` is\n * a link, a button (`@click`) or the current page (`current`). The\n * `separator` slot replaces the chevron between items.\n */\nexport const Breadcrumb = BreadcrumbComponent as typeof BreadcrumbComponent & { new (): { $props: BreadcrumbProps } }\n\n/** One step of the trail (React `Breadcrumb.Item`). */\nexport const BreadcrumbItem = defineComponent({\n  name: \"BreadcrumbItem\",\n  inheritAttrs: false,\n  props: {\n    /** Link destination. Internal paths use the `linkComponent` of `PlexUIProvider` */\n    href: String,\n    /** Router link destination, for link components that take `to` */\n    to: [String, Object] as PropType<string | Record<string, unknown>>,\n    /** The current page: not a link, marked `aria-current=\"page\"`. @default false */\n    current: { type: Boolean, default: false },\n    /** Makes an item without a destination act as a button (`@click`) */\n    onClick: Function as PropType<(event: MouseEvent) => void>,\n  },\n  setup(props, { slots, attrs }) {\n    const separator = inject(SeparatorKey, () => h(ChevronRightSm))\n    return () => {\n      let content: VNodeChild\n      if (props.current) {\n        content = h(\"span\", { \"class\": s.Current, \"aria-current\": \"page\" }, slots.default?.())\n      } else if (props.href || props.to || props.onClick) {\n        content = h(\n          TextLink,\n          { class: s.Link, href: props.href, to: props.to, onClick: props.onClick, underline: false },\n          { default: () => slots.default?.() },\n        )\n      } else {\n        content = h(\"span\", null, slots.default?.())\n      }\n      return h(\"li\", { class: [s.Item, attrs.class] }, [\n        h(\"span\", { \"class\": s.Separator, \"aria-hidden\": \"true\" }, [separator()]),\n        content,\n      ])\n    }\n  },\n})\n\nexport type BreadcrumbItemProps = InstanceType<typeof BreadcrumbItem>[\"$props\"] & { class?: HTMLAttributes[\"class\"] }\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Breadcrumb/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAkD,MAAM,iBAAiB,CAAA","sourcesContent":["export { Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, type BreadcrumbProps } from \"./Breadcrumb.js\"\n"]}

package/dist/es/components/Button/Button.js

@@ -0,0 +1,94 @@
+import { createCommentVNode, defineComponent, h } from "vue";
+import { handlePressableMouseEnter } from "../../lib/helpers.js";
+import { wrapTextNodeSiblings } from "../../lib/renderHelpers.js";
+import { LoadingIndicator } from "../Indicator/index.js";
+import { TransitionGroup } from "../Transition/index.js";
+import s from "@plexui/styles/components/Button/Button.module.css";
+const ButtonComponent = defineComponent({
+    name: "Button",
+    props: {
+        /** @default "button" */
+        type: { type: String, default: "button" },
+        /** Color for the button. @default "primary" */
+        color: { type: String, default: "primary" },
+        /** Style variant for the Button. @default "solid" */
+        variant: { type: String, default: "solid" },
+        /** Determines if the button should be a fully rounded pill shape. @default false */
+        pill: { type: Boolean, default: false },
+        /** Determines if the button should have matching width and height, based on the `size`. @default false */
+        uniform: { type: Boolean, default: false },
+        /** Controls size of the button: height, plus defaults for `gutterSize`, `iconSize` and font size. @default "md" */
+        size: { type: String, default: "md" },
+        /** Controls the size of icons within the button, defaults to value from `size`. */
+        iconSize: String,
+        /** Controls gutter on the edges of the button, defaults to value from `size`. */
+        gutterSize: String,
+        /** Displays loading indicator on top of button contents. @default false */
+        loading: { type: Boolean, default: undefined },
+        /** Displays selected styles on the button, varying by `variant`. @default false */
+        selected: { type: Boolean, default: undefined },
+        /** Determines if the button should take up 100% of available width. @default false */
+        block: { type: Boolean, default: undefined },
+        /** Applies a negative margin using the current gutter to optically align the button with surrounding content. */
+        opticallyAlign: String,
+        /** Disables the button visually and from interactions. @default false */
+        disabled: { type: Boolean, default: undefined },
+        /** Controls the visual tone when the button is disabled. "relaxed" will use a default cursor instead of not-allowed. */
+        disabledTone: String,
+        /** Determines whether the button should be made inert, without introducing visual change. Defaults to `loading`. */
+        inert: { type: Boolean, default: undefined },
+    },
+    emits: {
+        click: (_event) => true,
+    },
+    setup(props, { slots, emit }) {
+        const handleClick = (event) => {
+            if (props.disabled) {
+                return;
+            }
+            emit("click", event);
+        };
+        return () => {
+            // Defaults to `loading` state
+            const inert = props.inert === undefined ? props.loading : props.inert;
+            const isInert = props.disabled || inert;
+            const { loading } = props;
+            return h("button", {
+                "type": props.type,
+                "class": s.Button,
+                "data-color": props.color,
+                "data-variant": props.variant,
+                "data-pill": props.pill ? "" : undefined,
+                "data-uniform": props.uniform ? "" : undefined,
+                "data-size": props.size,
+                "data-gutter-size": props.gutterSize,
+                "data-icon-size": props.iconSize,
+                "data-loading": loading ? "" : undefined,
+                "data-selected": props.selected ? "" : undefined,
+                "data-block": props.block ? "" : undefined,
+                "data-optically-align": props.opticallyAlign,
+                "onPointerenter": handlePressableMouseEnter,
+                // Non-visual, accessible disablement
+                // NOTE: Do not use literal `inert` because that is incorrect semantically
+                "disabled": isInert,
+                "aria-disabled": isInert,
+                "tabindex": isInert ? -1 : undefined,
+                // Visual disablement
+                "data-disabled": props.disabled ? "" : undefined,
+                "data-disabled-tone": props.disabled ? props.disabledTone : undefined,
+                "onClick": handleClick,
+            }, [
+                // React renders `{loading && <LoadingIndicator />}`: nothing when
+                // `loading` is unset, an empty slot when it is `false`.
+                h(TransitionGroup, { class: s.ButtonLoader, enterDuration: 250, exitDuration: 150 }, loading === undefined
+                    ? undefined
+                    : {
+                        default: () => loading ? [h(LoadingIndicator, { key: "loader" })] : [createCommentVNode()],
+                    }),
+                h("span", { class: s.ButtonInner }, wrapTextNodeSiblings(slots.default?.())),
+            ]);
+        };
+    },
+});
+export const Button = ButtonComponent;
+//# sourceMappingURL=Button.js.map