@sparklingopinions/sparkling-ui 0.5.0 → 0.7.0

package/README.md

@@ -67,7 +67,7 @@ The package is published to npm as `@sparklingopinions/sparkling-ui`. Apps insta
    import { Button } from 'sparkling-ui'
    ```
 
-5. `Icon` draws the library's set of 114 icons by name: `<Icon name="users" color="ink-muted" />`. Older names (`people`, `companies`, `dot-vertical`...) resolve as aliases, and `iconNames` lists the set. To add icons or replace some of the set, register a resolver once, before mounting; names it returns a component for win. With SVG files imported as components (e.g. `vite-svg-loader`):
+5. `Icon` draws the library's set of 134 icons by name: `<Icon name="users" color="ink-muted" />`. Older names (`people`, `companies`, `dot-vertical`...) resolve as aliases, and `iconNames` lists the set. To add icons or replace some of the set, register a resolver once, before mounting; names it returns a component for win. With SVG files imported as components (e.g. `vite-svg-loader`):
 
    ```ts
    import { type Component, defineAsyncComponent } from 'vue'

package/dist/aliases.d.ts

@@ -182,6 +182,11 @@ export declare const List: <T extends Record<string, any>>(__VLS_props: NonNulla
         'group-leading'?: (props: {
             group: DataListGroup<T>;
         }) => unknown;
+        'group-header'?: (props: {
+            group: DataListGroup<T>;
+            count: number;
+            collapsed: boolean;
+        }) => unknown;
         leading?: (props: {
             item: T;
         }) => unknown;
@@ -200,6 +205,7 @@ export declare const List: <T extends Record<string, any>>(__VLS_props: NonNulla
         rowKey?: (keyof T & string) | undefined;
         selectable?: boolean | undefined;
         loading?: boolean | undefined;
+        variant?: "joined" | "cards" | undefined;
         headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
         onRowClick?: ((item: T) => void) | undefined;
         onNew?: ((group: DataListGroup<T>) => void) | undefined;
@@ -220,6 +226,11 @@ export declare const List: <T extends Record<string, any>>(__VLS_props: NonNulla
         'group-leading'?: (props: {
             group: DataListGroup<T>;
         }) => unknown;
+        'group-header'?: (props: {
+            group: DataListGroup<T>;
+            count: number;
+            collapsed: boolean;
+        }) => unknown;
         leading?: (props: {
             item: T;
         }) => unknown;
@@ -262,6 +273,8 @@ export declare const Modal: {
         confirmIcon: string;
         band: string | boolean;
         hint: string;
+        presentation: "dialog" | "auto" | "sheet";
+        sheetBelow: number;
     }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
         B: {};
@@ -286,6 +299,8 @@ export declare const Modal: {
         confirmIcon: string;
         band: string | boolean;
         hint: string;
+        presentation: "dialog" | "auto" | "sheet";
+        sheetBelow: number;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -311,8 +326,18 @@ export declare const Modal: {
     confirmIcon: string;
     band: string | boolean;
     hint: string;
+    presentation: "dialog" | "auto" | "sheet";
+    sheetBelow: number;
 }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
+        title?: (props: {}) => any;
+    } & {
+        default?: (props: {}) => any;
+    } & {
+        footer?: (props: {}) => any;
+    } & {
+        'footer-start'?: (props: {}) => any;
+    } & {
         hero?: (props: {}) => any;
     } & {
         title?: (props: {}) => any;
@@ -345,13 +370,13 @@ export declare const OptionsMenu: {
         confirmLabel: string;
         cancelLabel: string;
         id: string;
+        confirmTitle: string;
+        confirmMessage: string;
+        deleteLabel: string;
         items: DropdownMenuEntry[];
         buttonIcon: string;
         buttonLabel: string;
         tooltip: string | null;
-        confirmTitle: string;
-        confirmMessage: string;
-        deleteLabel: string;
     }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
         B: {};
@@ -370,13 +395,13 @@ export declare const OptionsMenu: {
         confirmLabel: string;
         cancelLabel: string;
         id: string;
+        confirmTitle: string;
+        confirmMessage: string;
+        deleteLabel: string;
         items: DropdownMenuEntry[];
         buttonIcon: string;
         buttonLabel: string;
         tooltip: string | null;
-        confirmTitle: string;
-        confirmMessage: string;
-        deleteLabel: string;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -398,13 +423,13 @@ export declare const OptionsMenu: {
     confirmLabel: string;
     cancelLabel: string;
     id: string;
+    confirmTitle: string;
+    confirmMessage: string;
+    deleteLabel: string;
     items: DropdownMenuEntry[];
     buttonIcon: string;
     buttonLabel: string;
     tooltip: string | null;
-    confirmTitle: string;
-    confirmMessage: string;
-    deleteLabel: string;
 }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         trigger?: (props: {
@@ -425,17 +450,67 @@ export declare const FormErrors: import("vue").DefineComponent<ErrorSummaryProps
 /** @deprecated Renamed to ErrorSummaryProps. */
 export type FormErrorsProps = ErrorSummaryProps;
 /** @deprecated Renamed to FilterMenu. */
-export declare const FilterFieldPicker: import("vue").DefineComponent<FilterMenuProps & {
-    open?: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    pick: (name: string) => any;
-    "update:open": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<FilterMenuProps & {
+export declare const FilterFieldPicker: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<FilterMenuProps & {
+        open?: boolean;
+    }> & Readonly<{
+        onPick?: ((name: string) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        pick: (name: string) => any;
+        "update:open": (value: boolean) => any;
+    }, import("vue").PublicProps, {
+        variant: "secondary" | "tinted" | "ghost";
+        as: "button" | "chip";
+        label: string;
+        closeLabel: string;
+        buttonLabel: string;
+        status: string;
+        inUse: string[];
+        searchPlaceholder: string;
+        inUseLabel: string;
+        addLabel: string;
+        fieldsLabel: string;
+        noMatchLabel: string;
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<FilterMenuProps & {
+        open?: boolean;
+    }> & Readonly<{
+        onPick?: ((name: string) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        variant: "secondary" | "tinted" | "ghost";
+        as: "button" | "chip";
+        label: string;
+        closeLabel: string;
+        buttonLabel: string;
+        status: string;
+        inUse: string[];
+        searchPlaceholder: string;
+        inUseLabel: string;
+        addLabel: string;
+        fieldsLabel: string;
+        noMatchLabel: string;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<FilterMenuProps & {
     open?: boolean;
 }> & Readonly<{
     onPick?: ((name: string) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
-}>, {
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    pick: (name: string) => any;
+    "update:open": (value: boolean) => any;
+}, string, {
+    variant: "secondary" | "tinted" | "ghost";
     as: "button" | "chip";
     label: string;
     closeLabel: string;
@@ -447,23 +522,79 @@ export declare const FilterFieldPicker: import("vue").DefineComponent<FilterMenu
     addLabel: string;
     fieldsLabel: string;
     noMatchLabel: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        trigger?: (props: {
+            open: boolean;
+            toggle: () => void;
+            count: number;
+            props: import("./index.ts").FilterTriggerProps;
+        }) => unknown;
+    };
+});
 /** @deprecated Renamed to FilterMenuProps. */
 export type FilterFieldPickerProps = FilterMenuProps;
 /** @deprecated Renamed to SortMenu. */
-export declare const SortControl: import("vue").DefineComponent<SortMenuProps & {
-    modelValue?: import("./index.ts").ViewSort | null;
-    open?: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: import("./index.ts").ViewSort | null) => any;
-    "update:open": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<SortMenuProps & {
+export declare const SortControl: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<SortMenuProps & {
+        modelValue?: import("./index.ts").ViewSort | null;
+        open?: boolean;
+    }> & Readonly<{
+        "onUpdate:modelValue"?: ((value: import("./index.ts").ViewSort | null) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        "update:modelValue": (value: import("./index.ts").ViewSort | null) => any;
+        "update:open": (value: boolean) => any;
+    }, import("vue").PublicProps, {
+        variant: "secondary" | "tinted" | "ghost";
+        as: "button" | "chip";
+        title: string;
+        clearLabel: string;
+        closeLabel: string;
+        buttonLabel: string;
+        status: string;
+        directionLabels: Partial<Record<import("./index.ts").FilterFieldType, [string, string]>>;
+        directionLabel: string;
+        doneLabel: string;
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<SortMenuProps & {
+        modelValue?: import("./index.ts").ViewSort | null;
+        open?: boolean;
+    }> & Readonly<{
+        "onUpdate:modelValue"?: ((value: import("./index.ts").ViewSort | null) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        variant: "secondary" | "tinted" | "ghost";
+        as: "button" | "chip";
+        title: string;
+        clearLabel: string;
+        closeLabel: string;
+        buttonLabel: string;
+        status: string;
+        directionLabels: Partial<Record<import("./index.ts").FilterFieldType, [string, string]>>;
+        directionLabel: string;
+        doneLabel: string;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<SortMenuProps & {
     modelValue?: import("./index.ts").ViewSort | null;
     open?: boolean;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: import("./index.ts").ViewSort | null) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
-}>, {
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: import("./index.ts").ViewSort | null) => any;
+    "update:open": (value: boolean) => any;
+}, string, {
+    variant: "secondary" | "tinted" | "ghost";
     as: "button" | "chip";
     title: string;
     clearLabel: string;
@@ -473,7 +604,17 @@ export declare const SortControl: import("vue").DefineComponent<SortMenuProps &
     directionLabels: Partial<Record<import("./index.ts").FilterFieldType, [string, string]>>;
     directionLabel: string;
     doneLabel: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        trigger?: (props: {
+            open: boolean;
+            toggle: () => void;
+            active: boolean;
+            label: string;
+            props: import("./index.ts").FilterTriggerProps;
+        }) => unknown;
+    };
+});
 /** @deprecated Renamed to SortMenuProps. */
 export type SortControlProps = SortMenuProps;
 /** @deprecated Renamed to FormField. */
@@ -484,10 +625,13 @@ export declare const Field: {
         id: string;
         hint: string;
         maxLength: number;
+        softLimit: number;
         layout: "stacked" | "inline";
         optionalLabel: string;
         requiredLabel: string;
         counterLabel: string;
+        softCounterLabel: string;
+        overSoftLabel: string;
     }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
         B: {};
@@ -501,10 +645,13 @@ export declare const Field: {
         id: string;
         hint: string;
         maxLength: number;
+        softLimit: number;
         layout: "stacked" | "inline";
         optionalLabel: string;
         requiredLabel: string;
         counterLabel: string;
+        softCounterLabel: string;
+        overSoftLabel: string;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -515,10 +662,13 @@ export declare const Field: {
     id: string;
     hint: string;
     maxLength: number;
+    softLimit: number;
     layout: "stacked" | "inline";
     optionalLabel: string;
     requiredLabel: string;
     counterLabel: string;
+    softCounterLabel: string;
+    overSoftLabel: string;
 }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         default?: (props: {

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":["_sfc_main","Avatar_vue_vue_type_script_setup_true_lang_default","Avatar_default"],"sources":["../../../src/components/Avatar/Avatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { type Hue, hueFor } from '../../utils/hues'\n\nexport interface AvatarProps {\n  name?: string | null\n  image?: string | null\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  shape?: 'circle' | 'square'\n  /** An attention dot, e.g. unread. */\n  badge?: boolean\n  /** Pins the colour when it means something; otherwise it comes from the name, stable per person. */\n  hue?: Hue\n}\n\nconst props = withDefaults(defineProps<AvatarProps>(), {\n  name: undefined,\n  image: undefined,\n  size: 'sm',\n  shape: 'circle',\n  hue: undefined\n})\n\n// One uppercased initial reads cleaner than two letters.\nconst initial = computed(() => (props.name || '?').trim().charAt(0).toUpperCase() || '?')\n\nconst sizes = {\n  xs: 'h-4 w-4 text-10',\n  sm: 'h-6 w-6 text-11',\n  md: 'h-8 w-8 text-xs',\n  lg: 'h-10 w-10 text-sm',\n  xl: 'h-16 w-16 text-2xl'\n}\n\n// A soft coin of one hue: tinted fill, saturated text, a hairline of the hue.\nconst hues: Record<Hue, string> = {\n  blue: 'border-sui-hue-blue-line bg-sui-hue-blue-soft text-sui-hue-blue-ink',\n  green: 'border-sui-hue-green-line bg-sui-hue-green-soft text-sui-hue-green-ink',\n  orange: 'border-sui-hue-orange-line bg-sui-hue-orange-soft text-sui-hue-orange-ink',\n  pink: 'border-sui-hue-pink-line bg-sui-hue-pink-soft text-sui-hue-pink-ink',\n  purple: 'border-sui-hue-purple-line bg-sui-hue-purple-soft text-sui-hue-purple-ink',\n  slate: 'border-sui-hue-slate-line bg-sui-hue-slate-soft text-sui-hue-slate-ink',\n  red: 'border-sui-hue-red-line bg-sui-hue-red-soft text-sui-hue-red-ink',\n  amber: 'border-sui-hue-amber-line bg-sui-hue-amber-soft text-sui-hue-amber-ink',\n  gray: 'border-sui-line bg-sui-sunken text-sui-ink-body'\n}\n\nconst shapeClass = computed(() => (props.shape === 'square' ? 'rounded-lg' : 'rounded-full'))\n\n// A photo gets a neutral hairline, so it reads as a crisp coin too.\nconst colorClass = computed(() => (props.image ? 'border-sui-line-subtle' : hues[props.hue ?? hueFor(props.name)]))\n</script>\n\n<template>\n  <div\n    class=\"relative inline-flex shrink-0 items-center justify-center border font-semibold\"\n    :class=\"[sizes[size], shapeClass, colorClass]\"\n  >\n    <img v-if=\"image\" alt=\"\" class=\"h-full w-full object-cover\" :class=\"shapeClass\" :src=\"image\" />\n    <template v-else>{{ initial }}</template>\n    <span\n      v-if=\"badge\"\n      class=\"absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-sui-accent-solid ring-2 ring-sui-surface\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Avatar.js","names":["_sfc_main","Avatar_vue_vue_type_script_setup_true_lang_default","Avatar_default"],"sources":["../../../src/components/Avatar/Avatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { type Hue, hueFor } from '../../utils/hues'\n\nexport interface AvatarProps {\n  name?: string | null\n  image?: string | null\n  /** xs 16, sm 24, md 32, lg 40, xl 64; or a number of px, 20 for list rows and activity feeds. */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number\n  shape?: 'circle' | 'square'\n  /** An attention dot, e.g. unread. */\n  badge?: boolean\n  /** Pins the colour when it means something; otherwise it comes from the name, stable per person. */\n  hue?: Hue\n}\n\nconst props = withDefaults(defineProps<AvatarProps>(), {\n  name: undefined,\n  image: undefined,\n  size: 'sm',\n  shape: 'circle',\n  hue: undefined\n})\n\n// One uppercased initial reads cleaner than two letters.\nconst initial = computed(() => (props.name || '?').trim().charAt(0).toUpperCase() || '?')\n\nconst sizes = {\n  xs: 'h-4 w-4 text-10',\n  sm: 'h-6 w-6 text-11',\n  md: 'h-8 w-8 text-xs',\n  lg: 'h-10 w-10 text-sm',\n  xl: 'h-16 w-16 text-2xl'\n}\n\n// A soft coin of one hue: tinted fill, saturated text, a hairline of the hue.\nconst hues: Record<Hue, string> = {\n  blue: 'border-sui-hue-blue-line bg-sui-hue-blue-soft text-sui-hue-blue-ink',\n  green: 'border-sui-hue-green-line bg-sui-hue-green-soft text-sui-hue-green-ink',\n  orange: 'border-sui-hue-orange-line bg-sui-hue-orange-soft text-sui-hue-orange-ink',\n  pink: 'border-sui-hue-pink-line bg-sui-hue-pink-soft text-sui-hue-pink-ink',\n  purple: 'border-sui-hue-purple-line bg-sui-hue-purple-soft text-sui-hue-purple-ink',\n  slate: 'border-sui-hue-slate-line bg-sui-hue-slate-soft text-sui-hue-slate-ink',\n  red: 'border-sui-hue-red-line bg-sui-hue-red-soft text-sui-hue-red-ink',\n  amber: 'border-sui-hue-amber-line bg-sui-hue-amber-soft text-sui-hue-amber-ink',\n  gray: 'border-sui-line bg-sui-sunken text-sui-ink-body'\n}\n\n// A number of px: the initial steps down with the coin.\nconst sizeClass = computed(() => {\n  if (typeof props.size !== 'number') return sizes[props.size]\n  if (props.size <= 20) return 'text-10'\n  if (props.size <= 28) return 'text-11'\n  return props.size <= 36 ? 'text-xs' : 'text-sm'\n})\nconst sizeStyle = computed(() =>\n  typeof props.size === 'number' ? { width: `${props.size}px`, height: `${props.size}px` } : undefined\n)\n\nconst shapeClass = computed(() => (props.shape === 'square' ? 'rounded-lg' : 'rounded-full'))\n\n// A photo gets a neutral hairline, so it reads as a crisp coin too.\nconst colorClass = computed(() => (props.image ? 'border-sui-line-subtle' : hues[props.hue ?? hueFor(props.name)]))\n</script>\n\n<template>\n  <div\n    class=\"relative inline-flex shrink-0 items-center justify-center border font-semibold\"\n    :class=\"[sizeClass, shapeClass, colorClass]\"\n    :style=\"sizeStyle\"\n  >\n    <img v-if=\"image\" alt=\"\" class=\"h-full w-full object-cover\" :class=\"shapeClass\" :src=\"image\" />\n    <template v-else>{{ initial }}</template>\n    <span\n      v-if=\"badge\"\n      class=\"absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-sui-accent-solid ring-2 ring-sui-surface\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/Avatar/Avatar.vue.d.ts

@@ -2,7 +2,8 @@ import { type Hue } from '../../utils/hues';
 export interface AvatarProps {
     name?: string | null;
     image?: string | null;
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** xs 16, sm 24, md 32, lg 40, xl 64; or a number of px, 20 for list rows and activity feeds. */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
     shape?: 'circle' | 'square';
     /** An attention dot, e.g. unread. */
     badge?: boolean;
@@ -10,7 +11,7 @@ export interface AvatarProps {
     hue?: Hue;
 }
 declare const __VLS_export: import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {
-    size: "xs" | "sm" | "md" | "lg" | "xl";
+    size: number | "xs" | "sm" | "md" | "lg" | "xl";
     image: string | null;
     name: string | null;
     shape: "circle" | "square";

package/dist/components/Avatar/Avatar.vue_vue_type_script_setup_true_lang.js

@@ -1,10 +1,10 @@
 import { hueFor as e } from "../../utils/hues.js";
-import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createTextVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, toDisplayString as l } from "vue";
+import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createTextVNode as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, openBlock as l, toDisplayString as u } from "vue";
 //#region src/components/Avatar/Avatar.vue?vue&type=script&setup=true&lang.ts
-var u = ["src"], d = {
+var d = ["src"], f = {
 	key: 2,
 	class: "absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-sui-accent-solid ring-2 ring-sui-surface"
-}, f = /*@__PURE__*/ o({
+}, p = /*@__PURE__*/ o({
 	__name: "Avatar",
 	props: {
 		name: { default: void 0 },
@@ -15,13 +15,13 @@ var u = ["src"], d = {
 		hue: { default: void 0 }
 	},
 	setup(o) {
-		let f = o, p = n(() => (f.name || "?").trim().charAt(0).toUpperCase() || "?"), m = {
+		let p = o, m = n(() => (p.name || "?").trim().charAt(0).toUpperCase() || "?"), h = {
 			xs: "h-4 w-4 text-10",
 			sm: "h-6 w-6 text-11",
 			md: "h-8 w-8 text-xs",
 			lg: "h-10 w-10 text-sm",
 			xl: "h-16 w-16 text-2xl"
-		}, h = {
+		}, g = {
 			blue: "border-sui-hue-blue-line bg-sui-hue-blue-soft text-sui-hue-blue-ink",
 			green: "border-sui-hue-green-line bg-sui-hue-green-soft text-sui-hue-green-ink",
 			orange: "border-sui-hue-orange-line bg-sui-hue-orange-soft text-sui-hue-orange-ink",
@@ -31,20 +31,26 @@ var u = ["src"], d = {
 			red: "border-sui-hue-red-line bg-sui-hue-red-soft text-sui-hue-red-ink",
 			amber: "border-sui-hue-amber-line bg-sui-hue-amber-soft text-sui-hue-amber-ink",
 			gray: "border-sui-line bg-sui-sunken text-sui-ink-body"
-		}, g = n(() => f.shape === "square" ? "rounded-lg" : "rounded-full"), _ = n(() => f.image ? "border-sui-line-subtle" : h[f.hue ?? e(f.name)]);
-		return (e, n) => (c(), i("div", { class: s(["relative inline-flex shrink-0 items-center justify-center border font-semibold", [
-			m[o.size],
-			g.value,
-			_.value
-		]]) }, [o.image ? (c(), i("img", {
+		}, _ = n(() => typeof p.size == "number" ? p.size <= 20 ? "text-10" : p.size <= 28 ? "text-11" : p.size <= 36 ? "text-xs" : "text-sm" : h[p.size]), v = n(() => typeof p.size == "number" ? {
+			width: `${p.size}px`,
+			height: `${p.size}px`
+		} : void 0), y = n(() => p.shape === "square" ? "rounded-lg" : "rounded-full"), b = n(() => p.image ? "border-sui-line-subtle" : g[p.hue ?? e(p.name)]);
+		return (e, n) => (l(), i("div", {
+			class: s(["relative inline-flex shrink-0 items-center justify-center border font-semibold", [
+				_.value,
+				y.value,
+				b.value
+			]]),
+			style: c(v.value)
+		}, [o.image ? (l(), i("img", {
 			key: 0,
 			alt: "",
-			class: s(["h-full w-full object-cover", g.value]),
+			class: s(["h-full w-full object-cover", y.value]),
 			src: o.image
-		}, null, 10, u)) : (c(), i(t, { key: 1 }, [a(l(p.value), 1)], 64)), o.badge ? (c(), i("span", d)) : r("", !0)], 2));
+		}, null, 10, d)) : (l(), i(t, { key: 1 }, [a(u(m.value), 1)], 64)), o.badge ? (l(), i("span", f)) : r("", !0)], 6));
 	}
 });
 //#endregion
-export { f as default };
+export { p as default };
 
 //# sourceMappingURL=Avatar.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_Fragment","_createTextVNode","_toDisplayString","_createCommentVNode","_hoisted_1","_hoisted_2","Avatar_vue_vue_type_script_setup_true_lang_default","props","__props","initial","computed","sizes","hues","shapeClass","colorClass","hueFor","openBlock","createElementBlock","normalizeClass","Fragment","createTextVNode","toDisplayString","createCommentVNode"],"sources":["../../../src/components/Avatar/Avatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { type Hue, hueFor } from '../../utils/hues'\n\nexport interface AvatarProps {\n  name?: string | null\n  image?: string | null\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  shape?: 'circle' | 'square'\n  /** An attention dot, e.g. unread. */\n  badge?: boolean\n  /** Pins the colour when it means something; otherwise it comes from the name, stable per person. */\n  hue?: Hue\n}\n\nconst props = withDefaults(defineProps<AvatarProps>(), {\n  name: undefined,\n  image: undefined,\n  size: 'sm',\n  shape: 'circle',\n  hue: undefined\n})\n\n// One uppercased initial reads cleaner than two letters.\nconst initial = computed(() => (props.name || '?').trim().charAt(0).toUpperCase() || '?')\n\nconst sizes = {\n  xs: 'h-4 w-4 text-10',\n  sm: 'h-6 w-6 text-11',\n  md: 'h-8 w-8 text-xs',\n  lg: 'h-10 w-10 text-sm',\n  xl: 'h-16 w-16 text-2xl'\n}\n\n// A soft coin of one hue: tinted fill, saturated text, a hairline of the hue.\nconst hues: Record<Hue, string> = {\n  blue: 'border-sui-hue-blue-line bg-sui-hue-blue-soft text-sui-hue-blue-ink',\n  green: 'border-sui-hue-green-line bg-sui-hue-green-soft text-sui-hue-green-ink',\n  orange: 'border-sui-hue-orange-line bg-sui-hue-orange-soft text-sui-hue-orange-ink',\n  pink: 'border-sui-hue-pink-line bg-sui-hue-pink-soft text-sui-hue-pink-ink',\n  purple: 'border-sui-hue-purple-line bg-sui-hue-purple-soft text-sui-hue-purple-ink',\n  slate: 'border-sui-hue-slate-line bg-sui-hue-slate-soft text-sui-hue-slate-ink',\n  red: 'border-sui-hue-red-line bg-sui-hue-red-soft text-sui-hue-red-ink',\n  amber: 'border-sui-hue-amber-line bg-sui-hue-amber-soft text-sui-hue-amber-ink',\n  gray: 'border-sui-line bg-sui-sunken text-sui-ink-body'\n}\n\nconst shapeClass = computed(() => (props.shape === 'square' ? 'rounded-lg' : 'rounded-full'))\n\n// A photo gets a neutral hairline, so it reads as a crisp coin too.\nconst colorClass = computed(() => (props.image ? 'border-sui-line-subtle' : hues[props.hue ?? hueFor(props.name)]))\n</script>\n\n<template>\n  <div\n    class=\"relative inline-flex shrink-0 items-center justify-center border font-semibold\"\n    :class=\"[sizes[size], shapeClass, colorClass]\"\n  >\n    <img v-if=\"image\" alt=\"\" class=\"h-full w-full object-cover\" :class=\"shapeClass\" :src=\"image\" />\n    <template v-else>{{ initial }}</template>\n    <span\n      v-if=\"badge\"\n      class=\"absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-sui-accent-solid ring-2 ring-sui-surface\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAgBA,IAAMU,IAAQC,GASRC,IAAUC,SAAgBH,EAAM,QAAQ,IAAA,CAAK,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,KAAK,GAAG,GAElFI,IAAQ;GACZ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,GAGMC,IAA4B;GAChC,MAAM;GACN,OAAO;GACP,QAAQ;GACR,MAAM;GACN,QAAQ;GACR,OAAO;GACP,KAAK;GACL,OAAO;GACP,MAAM;EACR,GAEMC,IAAaH,QAAgBH,EAAM,UAAU,WAAW,eAAe,cAAe,GAGtFO,IAAaJ,QAAgBH,EAAM,QAAQ,2BAA2BK,EAAKL,EAAM,OAAOQ,EAAOR,EAAM,IAAI,EAAG;E,kBAIhHV,EAAA,GAAAC,EAUM,OAAA,EATJ,OAAKC,EAAA,CAAC,kFAAgF;GAC7EY,EAAMH,EAAA;GAAOK,EAAA;GAAYC,EAAA;EAAU,CAAA,CAAA,E,IAEjCN,EAAA,SAAXX,EAAA,GAAAC,EAA+F,OAAA;;GAA7E,KAAI;GAAG,OAAKC,EAAA,CAAC,8BAAqCc,EAAA,KAAU,CAAA;GAAG,KAAKL,EAAA;E,oBACtFX,EAAA,GAAAC,EAAyCE,GAAA,EAAA,KAAA,EAAA,GAAA,CAArBC,EAAAC,EAAAO,EAAA,KAAO,GAAA,CAAA,C,SAEnBD,EAAA,SADRX,EAAA,GAAAC,EAGE,QAHFO,CAGE,K"}
+{"version":3,"file":"Avatar.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_Fragment","_createTextVNode","_toDisplayString","_createCommentVNode","_hoisted_1","_hoisted_2","Avatar_vue_vue_type_script_setup_true_lang_default","props","__props","initial","computed","sizes","hues","sizeClass","sizeStyle","shapeClass","colorClass","hueFor","openBlock","createElementBlock","normalizeClass","normalizeStyle","Fragment","createTextVNode","toDisplayString","createCommentVNode"],"sources":["../../../src/components/Avatar/Avatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { type Hue, hueFor } from '../../utils/hues'\n\nexport interface AvatarProps {\n  name?: string | null\n  image?: string | null\n  /** xs 16, sm 24, md 32, lg 40, xl 64; or a number of px, 20 for list rows and activity feeds. */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number\n  shape?: 'circle' | 'square'\n  /** An attention dot, e.g. unread. */\n  badge?: boolean\n  /** Pins the colour when it means something; otherwise it comes from the name, stable per person. */\n  hue?: Hue\n}\n\nconst props = withDefaults(defineProps<AvatarProps>(), {\n  name: undefined,\n  image: undefined,\n  size: 'sm',\n  shape: 'circle',\n  hue: undefined\n})\n\n// One uppercased initial reads cleaner than two letters.\nconst initial = computed(() => (props.name || '?').trim().charAt(0).toUpperCase() || '?')\n\nconst sizes = {\n  xs: 'h-4 w-4 text-10',\n  sm: 'h-6 w-6 text-11',\n  md: 'h-8 w-8 text-xs',\n  lg: 'h-10 w-10 text-sm',\n  xl: 'h-16 w-16 text-2xl'\n}\n\n// A soft coin of one hue: tinted fill, saturated text, a hairline of the hue.\nconst hues: Record<Hue, string> = {\n  blue: 'border-sui-hue-blue-line bg-sui-hue-blue-soft text-sui-hue-blue-ink',\n  green: 'border-sui-hue-green-line bg-sui-hue-green-soft text-sui-hue-green-ink',\n  orange: 'border-sui-hue-orange-line bg-sui-hue-orange-soft text-sui-hue-orange-ink',\n  pink: 'border-sui-hue-pink-line bg-sui-hue-pink-soft text-sui-hue-pink-ink',\n  purple: 'border-sui-hue-purple-line bg-sui-hue-purple-soft text-sui-hue-purple-ink',\n  slate: 'border-sui-hue-slate-line bg-sui-hue-slate-soft text-sui-hue-slate-ink',\n  red: 'border-sui-hue-red-line bg-sui-hue-red-soft text-sui-hue-red-ink',\n  amber: 'border-sui-hue-amber-line bg-sui-hue-amber-soft text-sui-hue-amber-ink',\n  gray: 'border-sui-line bg-sui-sunken text-sui-ink-body'\n}\n\n// A number of px: the initial steps down with the coin.\nconst sizeClass = computed(() => {\n  if (typeof props.size !== 'number') return sizes[props.size]\n  if (props.size <= 20) return 'text-10'\n  if (props.size <= 28) return 'text-11'\n  return props.size <= 36 ? 'text-xs' : 'text-sm'\n})\nconst sizeStyle = computed(() =>\n  typeof props.size === 'number' ? { width: `${props.size}px`, height: `${props.size}px` } : undefined\n)\n\nconst shapeClass = computed(() => (props.shape === 'square' ? 'rounded-lg' : 'rounded-full'))\n\n// A photo gets a neutral hairline, so it reads as a crisp coin too.\nconst colorClass = computed(() => (props.image ? 'border-sui-line-subtle' : hues[props.hue ?? hueFor(props.name)]))\n</script>\n\n<template>\n  <div\n    class=\"relative inline-flex shrink-0 items-center justify-center border font-semibold\"\n    :class=\"[sizeClass, shapeClass, colorClass]\"\n    :style=\"sizeStyle\"\n  >\n    <img v-if=\"image\" alt=\"\" class=\"h-full w-full object-cover\" :class=\"shapeClass\" :src=\"image\" />\n    <template v-else>{{ initial }}</template>\n    <span\n      v-if=\"badge\"\n      class=\"absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-sui-accent-solid ring-2 ring-sui-surface\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAiBA,IAAMW,IAAQC,GASRC,IAAUC,SAAgBH,EAAM,QAAQ,IAAA,CAAK,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,KAAK,GAAG,GAElFI,IAAQ;GACZ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,GAGMC,IAA4B;GAChC,MAAM;GACN,OAAO;GACP,QAAQ;GACR,MAAM;GACN,QAAQ;GACR,OAAO;GACP,KAAK;GACL,OAAO;GACP,MAAM;EACR,GAGMC,IAAYH,QACZ,OAAOH,EAAM,QAAS,WACtBA,EAAM,QAAQ,KAAW,YACzBA,EAAM,QAAQ,KAAW,YACtBA,EAAM,QAAQ,KAAK,YAAY,YAHKI,EAAMJ,EAAM,KAIxD,GACKO,IAAYJ,QAChB,OAAOH,EAAM,QAAS,WAAW;GAAE,OAAO,GAAGA,EAAM,KAAK;GAAK,QAAQ,GAAGA,EAAM,KAAK;EAAI,IAAI,KAAA,CAC7F,GAEMQ,IAAaL,QAAgBH,EAAM,UAAU,WAAW,eAAe,cAAe,GAGtFS,IAAaN,QAAgBH,EAAM,QAAQ,2BAA2BK,EAAKL,EAAM,OAAOU,EAAOV,EAAM,IAAI,EAAG;E,kBAIhHX,EAAA,GAAAC,EAWM,OAAA;GAVJ,OAAKC,EAAA,CAAC,kFAAgF;IAC7Ee,EAAA;IAAWE,EAAA;IAAYC,EAAA;GAAU,CAAA,CAAA;GACzC,OAAKjB,EAAEe,EAAA,KAAS;E,IAENN,EAAA,SAAXZ,EAAA,GAAAC,EAA+F,OAAA;;GAA7E,KAAI;GAAG,OAAKC,EAAA,CAAC,8BAAqCiB,EAAA,KAAU,CAAA;GAAG,KAAKP,EAAA;E,oBACtFZ,EAAA,GAAAC,EAAyCG,GAAA,EAAA,KAAA,EAAA,GAAA,CAArBC,EAAAC,EAAAO,EAAA,KAAO,GAAA,CAAA,C,SAEnBD,EAAA,SADRZ,EAAA,GAAAC,EAGE,QAHFQ,CAGE,K"}

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["_sfc_main","Button_vue_vue_type_script_setup_true_lang_default","Button_default"],"sources":["../../../src/components/Button/Button.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'tinted' | 'ghost' | 'contrast' | 'danger' | 'danger-outline'\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg'\n\nexport interface ButtonProps extends PrimitiveProps {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  /** Fully rounded ends. */\n  pill?: boolean\n  /** Square, for a single icon; give it an `aria-label`. */\n  iconOnly?: boolean\n  /** Where the icon sits next to the label; it's spaced from the text on the other side. */\n  iconPosition?: 'start' | 'end'\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  as: 'button',\n  variant: 'secondary',\n  size: 'md',\n  iconPosition: 'start'\n})\n\nconst variants: Record<ButtonVariant, string> = {\n  primary:\n    'border border-sui-accent-solid bg-sui-accent-solid text-sui-on-accent not-data-disabled:hover:border-sui-accent-hover not-data-disabled:hover:bg-sui-accent-hover [&_svg]:stroke-sui-on-accent',\n  secondary:\n    'border border-sui-line bg-sui-surface text-sui-ink-emphasis shadow-(--sui-shadow-raised) not-data-disabled:hover:border-sui-line-strong not-data-disabled:hover:bg-sui-canvas [&_svg]:stroke-sui-ink-emphasis',\n  tinted:\n    'border border-sui-accent-line bg-sui-accent-wash text-sui-accent not-data-disabled:hover:bg-sui-accent-soft [&_svg]:stroke-sui-accent',\n  ghost:\n    'border border-transparent bg-transparent text-sui-ink-subtle not-data-disabled:hover:bg-sui-sunken not-data-disabled:hover:text-sui-ink-emphasis',\n  contrast:\n    'border border-sui-contrast bg-sui-contrast text-sui-on-contrast not-data-disabled:hover:border-sui-contrast-hover not-data-disabled:hover:bg-sui-contrast-hover',\n  // No border: it's 2px narrower than the other variants.\n  danger: 'bg-sui-danger-solid text-sui-on-danger not-data-disabled:hover:bg-sui-danger-hover',\n  'danger-outline':\n    'border border-sui-danger-line bg-sui-surface text-sui-danger not-data-disabled:hover:bg-sui-danger-soft [&_svg]:stroke-sui-danger'\n}\n\nconst heights: Record<ButtonSize, string> = {\n  xs: 'h-6',\n  sm: 'h-7',\n  md: 'h-(--sui-button-height)',\n  lg: 'h-12'\n}\n\nconst paddings: Record<ButtonSize, string> = {\n  xs: 'px-2',\n  sm: 'px-2.5',\n  md: 'px-(--sui-button-padding-x)',\n  lg: 'px-(--sui-button-padding-x)'\n}\n\nconst texts: Record<ButtonSize, string> = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  md: 'text-(length:--sui-button-text) leading-5',\n  lg: 'text-(length:--sui-button-text) leading-5'\n}\n\nconst classes = computed(() => [\n  // no-underline: as a link, it shouldn't pick up the app's link styles.\n  'flex items-center justify-center font-medium text-nowrap no-underline transition-all duration-200 ease-in-out focus-visible:sui-ring data-disabled:opacity-50',\n  variants[props.variant],\n  heights[props.size],\n  texts[props.size],\n  props.iconOnly ? 'aspect-square px-0' : paddings[props.size],\n  // xs uses rounded-md: rounded-lg reads as a pill at that height.\n  props.pill ? 'rounded-full' : props.size === 'xs' ? 'rounded-md' : 'rounded-(--sui-radius-button)',\n  props.iconOnly ? '' : props.iconPosition === 'end' ? '[&_svg]:ml-2' : '[&_svg:first-child]:mr-2'\n])\n\n// A link or custom element can't be natively disabled: it says so to assistive tech instead.\nconst isNativeButton = computed(() => props.as === 'button' && !props.asChild)\n</script>\n\n<template>\n  <Primitive\n    :aria-disabled=\"disabled && !isNativeButton ? 'true' : undefined\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"classes\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :disabled=\"isNativeButton ? disabled : undefined\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Button.js","names":["_sfc_main","Button_vue_vue_type_script_setup_true_lang_default","Button_default"],"sources":["../../../src/components/Button/Button.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nexport type ButtonVariant =\n  'primary' | 'secondary' | 'tinted' | 'ghost' | 'contrast' | 'danger' | 'danger-outline' | 'ghost-inverse'\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg'\n\nexport interface ButtonProps extends PrimitiveProps {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  /** Fully rounded ends. */\n  pill?: boolean\n  /** Square, for a single icon; give it an `aria-label`. */\n  iconOnly?: boolean\n  /** Where the icon sits next to the label; it's spaced from the text on the other side. */\n  iconPosition?: 'start' | 'end'\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  as: 'button',\n  variant: 'secondary',\n  size: 'md',\n  iconPosition: 'start'\n})\n\nconst variants: Record<ButtonVariant, string> = {\n  primary:\n    'border border-sui-accent-solid bg-sui-accent-solid text-sui-on-accent not-data-disabled:hover:border-sui-accent-hover not-data-disabled:hover:bg-sui-accent-hover [&_svg]:stroke-sui-on-accent',\n  secondary:\n    'border border-sui-line bg-sui-surface text-sui-ink-emphasis shadow-(--sui-shadow-raised) not-data-disabled:hover:border-sui-line-strong not-data-disabled:hover:bg-sui-canvas [&_svg]:stroke-sui-ink-emphasis',\n  tinted:\n    'border border-sui-accent-line bg-sui-accent-wash text-sui-accent not-data-disabled:hover:bg-sui-accent-soft [&_svg]:stroke-sui-accent',\n  ghost:\n    'border border-transparent bg-transparent text-sui-ink-subtle not-data-disabled:hover:bg-sui-sunken not-data-disabled:hover:text-sui-ink-emphasis',\n  contrast:\n    'border border-sui-contrast bg-sui-contrast text-sui-on-contrast not-data-disabled:hover:border-sui-contrast-hover not-data-disabled:hover:bg-sui-contrast-hover',\n  // No border: it's 2px narrower than the other variants.\n  danger: 'bg-sui-danger-solid text-sui-on-danger not-data-disabled:hover:bg-sui-danger-hover',\n  'danger-outline':\n    'border border-sui-danger-line bg-sui-surface text-sui-danger not-data-disabled:hover:bg-sui-danger-soft [&_svg]:stroke-sui-danger',\n  // For inverse grounds: toasts, dark bands.\n  'ghost-inverse':\n    'border border-transparent bg-transparent text-sui-on-inverse not-data-disabled:hover:bg-sui-on-inverse/[0.12] not-data-disabled:active:bg-sui-on-inverse/[0.2] [&_svg]:stroke-sui-on-inverse'\n}\n\nconst heights: Record<ButtonSize, string> = {\n  xs: 'h-6',\n  sm: 'h-7',\n  md: 'h-(--sui-button-height)',\n  lg: 'h-12'\n}\n\nconst paddings: Record<ButtonSize, string> = {\n  xs: 'px-2',\n  sm: 'px-2.5',\n  md: 'px-(--sui-button-padding-x)',\n  lg: 'px-(--sui-button-padding-x)'\n}\n\nconst texts: Record<ButtonSize, string> = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  md: 'text-(length:--sui-button-text) leading-5',\n  lg: 'text-(length:--sui-button-text) leading-5'\n}\n\nconst classes = computed(() => [\n  // no-underline: as a link, it shouldn't pick up the app's link styles.\n  'flex items-center justify-center font-medium text-nowrap no-underline transition-all duration-200 ease-in-out data-disabled:opacity-50',\n  props.variant === 'ghost-inverse' ? 'focus-visible:sui-ring-inverse' : 'focus-visible:sui-ring',\n  variants[props.variant],\n  heights[props.size],\n  texts[props.size],\n  props.iconOnly ? 'aspect-square px-0' : paddings[props.size],\n  // xs uses rounded-md: rounded-lg reads as a pill at that height.\n  props.pill ? 'rounded-full' : props.size === 'xs' ? 'rounded-md' : 'rounded-(--sui-radius-button)',\n  props.iconOnly ? '' : props.iconPosition === 'end' ? '[&_svg]:ml-2' : '[&_svg:first-child]:mr-2'\n])\n\n// A link or custom element can't be natively disabled: it says so to assistive tech instead.\nconst isNativeButton = computed(() => props.as === 'button' && !props.asChild)\n</script>\n\n<template>\n  <Primitive\n    :aria-disabled=\"disabled && !isNativeButton ? 'true' : undefined\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"classes\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :disabled=\"isNativeButton ? disabled : undefined\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"mappings":""}

package/dist/components/Button/Button.vue.d.ts

@@ -1,5 +1,5 @@
 import { type PrimitiveProps } from 'reka-ui';
-export type ButtonVariant = 'primary' | 'secondary' | 'tinted' | 'ghost' | 'contrast' | 'danger' | 'danger-outline';
+export type ButtonVariant = 'primary' | 'secondary' | 'tinted' | 'ghost' | 'contrast' | 'danger' | 'danger-outline' | 'ghost-inverse';
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
 export interface ButtonProps extends PrimitiveProps {
     variant?: ButtonVariant;

package/dist/components/Button/Button.vue_vue_type_script_setup_true_lang.js

@@ -21,7 +21,8 @@ var l = /*@__PURE__*/ n({
 			ghost: "border border-transparent bg-transparent text-sui-ink-subtle not-data-disabled:hover:bg-sui-sunken not-data-disabled:hover:text-sui-ink-emphasis",
 			contrast: "border border-sui-contrast bg-sui-contrast text-sui-on-contrast not-data-disabled:hover:border-sui-contrast-hover not-data-disabled:hover:bg-sui-contrast-hover",
 			danger: "bg-sui-danger-solid text-sui-on-danger not-data-disabled:hover:bg-sui-danger-hover",
-			"danger-outline": "border border-sui-danger-line bg-sui-surface text-sui-danger not-data-disabled:hover:bg-sui-danger-soft [&_svg]:stroke-sui-danger"
+			"danger-outline": "border border-sui-danger-line bg-sui-surface text-sui-danger not-data-disabled:hover:bg-sui-danger-soft [&_svg]:stroke-sui-danger",
+			"ghost-inverse": "border border-transparent bg-transparent text-sui-on-inverse not-data-disabled:hover:bg-sui-on-inverse/[0.12] not-data-disabled:active:bg-sui-on-inverse/[0.2] [&_svg]:stroke-sui-on-inverse"
 		}, d = {
 			xs: "h-6",
 			sm: "h-7",
@@ -38,7 +39,8 @@ var l = /*@__PURE__*/ n({
 			md: "text-(length:--sui-button-text) leading-5",
 			lg: "text-(length:--sui-button-text) leading-5"
 		}, m = e(() => [
-			"flex items-center justify-center font-medium text-nowrap no-underline transition-all duration-200 ease-in-out focus-visible:sui-ring data-disabled:opacity-50",
+			"flex items-center justify-center font-medium text-nowrap no-underline transition-all duration-200 ease-in-out data-disabled:opacity-50",
+			l.variant === "ghost-inverse" ? "focus-visible:sui-ring-inverse" : "focus-visible:sui-ring",
 			u[l.variant],
 			d[l.size],
 			p[l.size],

package/dist/components/Button/Button.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_normalizeClass","_withCtx","_renderSlot","Button_vue_vue_type_script_setup_true_lang_default","props","__props","variants","heights","paddings","texts","classes","computed","isNativeButton","openBlock","createBlock","unref","Primitive","normalizeClass","withCtx","renderSlot","_ctx"],"sources":["../../../src/components/Button/Button.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'tinted' | 'ghost' | 'contrast' | 'danger' | 'danger-outline'\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg'\n\nexport interface ButtonProps extends PrimitiveProps {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  /** Fully rounded ends. */\n  pill?: boolean\n  /** Square, for a single icon; give it an `aria-label`. */\n  iconOnly?: boolean\n  /** Where the icon sits next to the label; it's spaced from the text on the other side. */\n  iconPosition?: 'start' | 'end'\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  as: 'button',\n  variant: 'secondary',\n  size: 'md',\n  iconPosition: 'start'\n})\n\nconst variants: Record<ButtonVariant, string> = {\n  primary:\n    'border border-sui-accent-solid bg-sui-accent-solid text-sui-on-accent not-data-disabled:hover:border-sui-accent-hover not-data-disabled:hover:bg-sui-accent-hover [&_svg]:stroke-sui-on-accent',\n  secondary:\n    'border border-sui-line bg-sui-surface text-sui-ink-emphasis shadow-(--sui-shadow-raised) not-data-disabled:hover:border-sui-line-strong not-data-disabled:hover:bg-sui-canvas [&_svg]:stroke-sui-ink-emphasis',\n  tinted:\n    'border border-sui-accent-line bg-sui-accent-wash text-sui-accent not-data-disabled:hover:bg-sui-accent-soft [&_svg]:stroke-sui-accent',\n  ghost:\n    'border border-transparent bg-transparent text-sui-ink-subtle not-data-disabled:hover:bg-sui-sunken not-data-disabled:hover:text-sui-ink-emphasis',\n  contrast:\n    'border border-sui-contrast bg-sui-contrast text-sui-on-contrast not-data-disabled:hover:border-sui-contrast-hover not-data-disabled:hover:bg-sui-contrast-hover',\n  // No border: it's 2px narrower than the other variants.\n  danger: 'bg-sui-danger-solid text-sui-on-danger not-data-disabled:hover:bg-sui-danger-hover',\n  'danger-outline':\n    'border border-sui-danger-line bg-sui-surface text-sui-danger not-data-disabled:hover:bg-sui-danger-soft [&_svg]:stroke-sui-danger'\n}\n\nconst heights: Record<ButtonSize, string> = {\n  xs: 'h-6',\n  sm: 'h-7',\n  md: 'h-(--sui-button-height)',\n  lg: 'h-12'\n}\n\nconst paddings: Record<ButtonSize, string> = {\n  xs: 'px-2',\n  sm: 'px-2.5',\n  md: 'px-(--sui-button-padding-x)',\n  lg: 'px-(--sui-button-padding-x)'\n}\n\nconst texts: Record<ButtonSize, string> = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  md: 'text-(length:--sui-button-text) leading-5',\n  lg: 'text-(length:--sui-button-text) leading-5'\n}\n\nconst classes = computed(() => [\n  // no-underline: as a link, it shouldn't pick up the app's link styles.\n  'flex items-center justify-center font-medium text-nowrap no-underline transition-all duration-200 ease-in-out focus-visible:sui-ring data-disabled:opacity-50',\n  variants[props.variant],\n  heights[props.size],\n  texts[props.size],\n  props.iconOnly ? 'aspect-square px-0' : paddings[props.size],\n  // xs uses rounded-md: rounded-lg reads as a pill at that height.\n  props.pill ? 'rounded-full' : props.size === 'xs' ? 'rounded-md' : 'rounded-(--sui-radius-button)',\n  props.iconOnly ? '' : props.iconPosition === 'end' ? '[&_svg]:ml-2' : '[&_svg:first-child]:mr-2'\n])\n\n// A link or custom element can't be natively disabled: it says so to assistive tech instead.\nconst isNativeButton = computed(() => props.as === 'button' && !props.asChild)\n</script>\n\n<template>\n  <Primitive\n    :aria-disabled=\"disabled && !isNativeButton ? 'true' : undefined\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"classes\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :disabled=\"isNativeButton ? disabled : undefined\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAoBA,IAAMO,IAAQC,GAORC,IAA0C;GAC9C,SACE;GACF,WACE;GACF,QACE;GACF,OACE;GACF,UACE;GAEF,QAAQ;GACR,kBACE;EACJ,GAEMC,IAAsC;GAC1C,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,GAEMC,IAAuC;GAC3C,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,GAEMC,IAAoC;GACxC,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,GAEMC,IAAUC,QAAe;GAE7B;GACAL,EAASF,EAAM;GACfG,EAAQH,EAAM;GACdK,EAAML,EAAM;GACZA,EAAM,WAAW,uBAAuBI,EAASJ,EAAM;GAEvDA,EAAM,OAAO,iBAAiBA,EAAM,SAAS,OAAO,eAAe;GACnEA,EAAM,WAAW,KAAKA,EAAM,iBAAiB,QAAQ,iBAAiB;EACxE,CAAC,GAGKQ,IAAiBD,QAAeP,EAAM,OAAO,YAAY,CAACA,EAAM,OAAO;E,kBAI3EP,EAAA,GAAAC,EASYC,EAAAiB,CAAA,GAAA;GART,iBAAeX,EAAA,YAAQ,CAAKO,EAAA,QAAc,SAAY,KAAA;GACtD,IAAIP,EAAA;GACJ,YAAUA,EAAA;GACV,OAAKL,EAAEU,EAAA,KAAO;GACd,iBAAeL,EAAA,WAAQ,KAAQ,KAAA;GAC/B,UAAUO,EAAA,QAAiBP,EAAA,WAAW,KAAA;;GAEvC,SAAAJ,QAAQ,CAARC,EAAQkB,EAAA,QAAA,SAAA,C"}
+{"version":3,"file":"Button.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_normalizeClass","_withCtx","_renderSlot","Button_vue_vue_type_script_setup_true_lang_default","props","__props","variants","heights","paddings","texts","classes","computed","isNativeButton","openBlock","createBlock","unref","Primitive","normalizeClass","withCtx","renderSlot","_ctx"],"sources":["../../../src/components/Button/Button.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nexport type ButtonVariant =\n  'primary' | 'secondary' | 'tinted' | 'ghost' | 'contrast' | 'danger' | 'danger-outline' | 'ghost-inverse'\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg'\n\nexport interface ButtonProps extends PrimitiveProps {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  /** Fully rounded ends. */\n  pill?: boolean\n  /** Square, for a single icon; give it an `aria-label`. */\n  iconOnly?: boolean\n  /** Where the icon sits next to the label; it's spaced from the text on the other side. */\n  iconPosition?: 'start' | 'end'\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  as: 'button',\n  variant: 'secondary',\n  size: 'md',\n  iconPosition: 'start'\n})\n\nconst variants: Record<ButtonVariant, string> = {\n  primary:\n    'border border-sui-accent-solid bg-sui-accent-solid text-sui-on-accent not-data-disabled:hover:border-sui-accent-hover not-data-disabled:hover:bg-sui-accent-hover [&_svg]:stroke-sui-on-accent',\n  secondary:\n    'border border-sui-line bg-sui-surface text-sui-ink-emphasis shadow-(--sui-shadow-raised) not-data-disabled:hover:border-sui-line-strong not-data-disabled:hover:bg-sui-canvas [&_svg]:stroke-sui-ink-emphasis',\n  tinted:\n    'border border-sui-accent-line bg-sui-accent-wash text-sui-accent not-data-disabled:hover:bg-sui-accent-soft [&_svg]:stroke-sui-accent',\n  ghost:\n    'border border-transparent bg-transparent text-sui-ink-subtle not-data-disabled:hover:bg-sui-sunken not-data-disabled:hover:text-sui-ink-emphasis',\n  contrast:\n    'border border-sui-contrast bg-sui-contrast text-sui-on-contrast not-data-disabled:hover:border-sui-contrast-hover not-data-disabled:hover:bg-sui-contrast-hover',\n  // No border: it's 2px narrower than the other variants.\n  danger: 'bg-sui-danger-solid text-sui-on-danger not-data-disabled:hover:bg-sui-danger-hover',\n  'danger-outline':\n    'border border-sui-danger-line bg-sui-surface text-sui-danger not-data-disabled:hover:bg-sui-danger-soft [&_svg]:stroke-sui-danger',\n  // For inverse grounds: toasts, dark bands.\n  'ghost-inverse':\n    'border border-transparent bg-transparent text-sui-on-inverse not-data-disabled:hover:bg-sui-on-inverse/[0.12] not-data-disabled:active:bg-sui-on-inverse/[0.2] [&_svg]:stroke-sui-on-inverse'\n}\n\nconst heights: Record<ButtonSize, string> = {\n  xs: 'h-6',\n  sm: 'h-7',\n  md: 'h-(--sui-button-height)',\n  lg: 'h-12'\n}\n\nconst paddings: Record<ButtonSize, string> = {\n  xs: 'px-2',\n  sm: 'px-2.5',\n  md: 'px-(--sui-button-padding-x)',\n  lg: 'px-(--sui-button-padding-x)'\n}\n\nconst texts: Record<ButtonSize, string> = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  md: 'text-(length:--sui-button-text) leading-5',\n  lg: 'text-(length:--sui-button-text) leading-5'\n}\n\nconst classes = computed(() => [\n  // no-underline: as a link, it shouldn't pick up the app's link styles.\n  'flex items-center justify-center font-medium text-nowrap no-underline transition-all duration-200 ease-in-out data-disabled:opacity-50',\n  props.variant === 'ghost-inverse' ? 'focus-visible:sui-ring-inverse' : 'focus-visible:sui-ring',\n  variants[props.variant],\n  heights[props.size],\n  texts[props.size],\n  props.iconOnly ? 'aspect-square px-0' : paddings[props.size],\n  // xs uses rounded-md: rounded-lg reads as a pill at that height.\n  props.pill ? 'rounded-full' : props.size === 'xs' ? 'rounded-md' : 'rounded-(--sui-radius-button)',\n  props.iconOnly ? '' : props.iconPosition === 'end' ? '[&_svg]:ml-2' : '[&_svg:first-child]:mr-2'\n])\n\n// A link or custom element can't be natively disabled: it says so to assistive tech instead.\nconst isNativeButton = computed(() => props.as === 'button' && !props.asChild)\n</script>\n\n<template>\n  <Primitive\n    :aria-disabled=\"disabled && !isNativeButton ? 'true' : undefined\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"classes\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :disabled=\"isNativeButton ? disabled : undefined\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAqBA,IAAMO,IAAQC,GAORC,IAA0C;GAC9C,SACE;GACF,WACE;GACF,QACE;GACF,OACE;GACF,UACE;GAEF,QAAQ;GACR,kBACE;GAEF,iBACE;EACJ,GAEMC,IAAsC;GAC1C,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,GAEMC,IAAuC;GAC3C,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,GAEMC,IAAoC;GACxC,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,GAEMC,IAAUC,QAAe;GAE7B;GACAP,EAAM,YAAY,kBAAkB,mCAAmC;GACvEE,EAASF,EAAM;GACfG,EAAQH,EAAM;GACdK,EAAML,EAAM;GACZA,EAAM,WAAW,uBAAuBI,EAASJ,EAAM;GAEvDA,EAAM,OAAO,iBAAiBA,EAAM,SAAS,OAAO,eAAe;GACnEA,EAAM,WAAW,KAAKA,EAAM,iBAAiB,QAAQ,iBAAiB;EACxE,CAAC,GAGKQ,IAAiBD,QAAeP,EAAM,OAAO,YAAY,CAACA,EAAM,OAAO;E,kBAI3EP,EAAA,GAAAC,EASYC,EAAAiB,CAAA,GAAA;GART,iBAAeX,EAAA,YAAQ,CAAKO,EAAA,QAAc,SAAY,KAAA;GACtD,IAAIP,EAAA;GACJ,YAAUA,EAAA;GACV,OAAKL,EAAEU,EAAA,KAAO;GACd,iBAAeL,EAAA,WAAQ,KAAQ,KAAA;GAC/B,UAAUO,EAAA,QAAiBP,EAAA,WAAW,KAAA;;GAEvC,SAAAJ,QAAQ,CAARC,EAAQkB,EAAA,QAAA,SAAA,C"}

package/dist/components/ContextMenu/ContextMenu.js

@@ -0,0 +1,7 @@
+import e from "./ContextMenu.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/ContextMenu/ContextMenu.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=ContextMenu.js.map

package/dist/components/ContextMenu/ContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.js","names":["_sfc_main","ContextMenu_vue_vue_type_script_setup_true_lang_default","ContextMenu_default"],"sources":["../../../src/components/ContextMenu/ContextMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuPortal,\n  ContextMenuRoot,\n  ContextMenuSeparator,\n  ContextMenuTrigger\n} from 'reka-ui'\n\nimport MenuItemContent from '../internal/MenuItemContent.vue'\nimport {\n  type DropdownMenuAction,\n  type DropdownMenuEntry,\n  type MenuConfirmLabels,\n  menuConfirmDefaults,\n  menuContentClass,\n  menuItemClass,\n  menuSeparatorClass,\n  useMenuSelect\n} from '../internal/menu'\n\nexport interface ContextMenuProps extends MenuConfirmLabels {\n  items?: DropdownMenuEntry[]\n  /** The menu's accessible name, e.g. \"Post actions\". */\n  label?: string\n  /** Lets the browser's own menu through. */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<ContextMenuProps>(), {\n  ...menuConfirmDefaults,\n  items: () => [],\n  label: undefined\n})\n\nconst emit = defineEmits<{\n  'click-item': [item: DropdownMenuAction & { id?: string }]\n  'update:open': [open: boolean]\n  show: []\n  hide: []\n}>()\n\nconst select = useMenuSelect(props, (item) => emit('click-item', item))\n\nfunction onOpenChange(open: boolean) {\n  emit('update:open', open)\n  if (open) emit('show')\n  else emit('hide')\n}\n\n// Shift+F10 and the Menu key open it at the focused element. Browsers fire `contextmenu` for these only on some\n// platforms, so the keys open it themselves, the way a right-click would, near the element's top left.\nfunction onKeydown(event: KeyboardEvent) {\n  if (props.disabled || !((event.key === 'F10' && event.shiftKey) || event.key === 'ContextMenu')) return\n  event.preventDefault()\n  const target = event.currentTarget as HTMLElement\n  const rect = (event.target as HTMLElement).getBoundingClientRect()\n  target.dispatchEvent(\n    new MouseEvent('contextmenu', {\n      bubbles: true,\n      cancelable: true,\n      clientX: rect.left + 8,\n      clientY: rect.top + Math.min(rect.height, 32)\n    })\n  )\n}\n</script>\n\n<!-- DropdownMenu's items at the pointer: right-click the default slot, or Shift+F10 or the Menu key while it has focus. -->\n<template>\n  <ContextMenuRoot :modal=\"false\" @update:open=\"onOpenChange\">\n    <ContextMenuTrigger as-child :disabled=\"disabled\" @keydown=\"onKeydown\">\n      <slot />\n    </ContextMenuTrigger>\n    <ContextMenuPortal>\n      <ContextMenuContent :aria-label=\"label\" :class=\"[menuContentClass, 'min-w-48']\" :collision-padding=\"8\">\n        <template v-for=\"(item, index) in items\" :key=\"index\">\n          <ContextMenuSeparator v-if=\"item.type === 'separator'\" :class=\"menuSeparatorClass\" />\n          <ContextMenuItem v-else :class=\"menuItemClass\" @select=\"select(item)\">\n            <MenuItemContent :item=\"item\" />\n          </ContextMenuItem>\n        </template>\n      </ContextMenuContent>\n    </ContextMenuPortal>\n  </ContextMenuRoot>\n</template>\n"],"mappings":""}