@rotki/ui-library 3.1.4 → 3.1.6

package/dist/components/buttons/button/button-styles.js

@@ -49,7 +49,7 @@ var buttonStyles = tv({
 			"focus-visible:focus-ring"
 		].join(" "),
 		label: "inline-block text-nowrap",
-		spinner: "shrink-0"
+		spinner: "shrink-0 h-lh items-center"
 	},
 	variants: {
 		variant: {

package/dist/components/buttons/button/button-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-styles.js","names":[],"sources":["../../../../src/components/buttons/button/button-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/**\n * The button's classes.\n *\n * Three decisions the class lists cannot state themselves:\n *\n * `position: relative` is not in the base root: it is only a positioning\n * context for the loading spinner, so the `loading` variant applies it.\n * Basing it here would collide with consumers pinning the button with\n * `fixed`/`absolute`, since cascade order picks the later utility, usually\n * `relative`, and turns their `right-*`/`bottom-*` into relative offsets,\n * which misplaces FABs.\n *\n * Icon sizing flows through the `--rui-icon-size` custom property, seeded at\n * the md value in the base root and redefined per size variant with `!` so a\n * variant beats the baseline on the same element regardless of source order.\n * RuiIcon's own `size` prop stamps an inline style on the svg, which beats the\n * inherited value, so a consumer always wins. See rotki/ui-library#512.\n *\n * `disabled` on the element covers two states: actually disabled, and loading,\n * since RuiButton sets `disabled = disabled || loading`. Only the cursor is\n * shared between them; the grey disabled palette lives in the `loading: false`\n * compounds, so a loading button keeps its variant color behind the spinner.\n *\n * An icon-only button matches the height of the text button of the same size,\n * with a 60-70% glyph ratio, which is a larger glyph than the same size gives\n * a prepend/append icon so it does not look lost in the square. xs pads by an\n * arbitrary 0.1875rem because no Tailwind token holds the ratio at a 14px\n * glyph:\n *\n * ```\n * xs            p-[0.1875rem] + 0.875rem icon = 1.25rem (20px)   70%\n * sm            p-1           + 1.25rem  icon = 1.75rem (28px)   71%\n * md (default)  p-2           + 1.25rem  icon = 2.25rem (36px)   56%\n * lg            p-1.5         + 1.5rem   icon = 2.25rem (36px)   67%\n * xl            p-2           + 1.5rem   icon = 2.5rem  (40px)   60%\n * 2xl           p-2           + 1.75rem  icon = 2.75rem (44px)   64%\n * ```\n */\nexport const buttonStyles = tv({\n  slots: {\n    root: [\n      'text-sm leading-5 font-medium inset-ring inset-ring-transparent',\n      'flex items-center justify-center gap-x-2',\n      // md is 36px, the height of a text field or select, so a button lines up with them in a row\n      'px-4 py-2 rounded-rui-control transition-colors duration-150',\n      '[--rui-icon-size:1rem]',\n      'disabled:cursor-not-allowed',\n      'focus-visible:focus-ring',\n    ].join(' '),\n    label: 'inline-block text-nowrap',\n    // inline in the prepend icon's place; an icon-only button centers it over its hidden glyph instead\n    spinner: 'shrink-0',\n  },\n  variants: {\n    variant: {\n      default: {},\n      outlined: {},\n      text: { root: 'px-2' },\n      fab: { root: 'rounded-full py-2 shadow-rui-control disabled:shadow-none' },\n      // The label's 16px line-box matches the md icon box, so the two share an optical center (rotki/ui-library#515)\n      list: { root: 'p-3 px-3 rounded-rui-sm w-full justify-start text-left', label: 'w-full leading-4' },\n      // An action inside running text: no box, so its size, padding and fills are reset in the link compounds at the end\n      link: { root: 'inline-flex align-baseline gap-x-1 underline-offset-2 not-disabled:hover:underline' },\n    },\n    size: {\n      'xs': { root: 'px-2 py-[0.125rem] text-[.75rem] leading-4 ![--rui-icon-size:0.75rem]' },\n      'sm': { root: 'px-2.5 py-1 text-[.8125rem] leading-5 ![--rui-icon-size:0.875rem]' },\n      'lg': { root: 'px-6 py-2 text-[1rem] leading-5 ![--rui-icon-size:1.25rem]' },\n      // 40px, to line up with RuiTextField / RuiMenuSelect in a toolbar; a 44px jumbo CTA is `2xl`\n      'xl': { root: 'px-6 py-2 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n      '2xl': { root: 'px-6 py-2.5 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n    },\n    color: {\n      grey: { root: 'bg-rui-neutral-100 hover:bg-rui-neutral-200 active:bg-rui-neutral-300 text-rui-text dark:bg-rui-neutral-800 dark:hover:bg-rui-neutral-700 dark:active:bg-rui-neutral-600' },\n      // hover is a tint laid over the fill (see the filled compound below); pressed sinks to `darker`\n      primary: { root: 'bg-rui-primary active:bg-rui-primary-darker text-rui-dark-text dark:text-rui-text' },\n      secondary: { root: 'bg-rui-secondary active:bg-rui-secondary-darker text-rui-dark-text dark:text-rui-text' },\n      error: { root: 'bg-rui-error active:bg-rui-error-darker text-rui-dark-text dark:text-rui-text' },\n      warning: { root: 'bg-rui-warning active:bg-rui-warning-darker text-rui-dark-text dark:text-rui-text' },\n      info: { root: 'bg-rui-info active:bg-rui-info-darker text-rui-dark-text dark:text-rui-text' },\n      success: { root: 'bg-rui-success active:bg-rui-success-darker text-rui-dark-text dark:text-rui-text' },\n    },\n    rounded: {\n      true: { root: 'rounded-full' },\n    },\n    icon: {\n      /*\n       * Only the round shape; the `icon + size` compounds below carry padding and icon sizing. The\n       * label holds no text, so it lays out as a flex box: a line box would put a wrapped icon (a\n       * badge) on the text baseline and grow the button by the descender gap.\n       */\n      true: { root: 'rounded-full', label: 'inline-flex' },\n    },\n    active: {\n      true: {},\n      false: {},\n    },\n    loading: {\n      true: { root: 'relative !cursor-progress' },\n      false: {},\n    },\n    hideFocusIndicator: {\n      true: { root: 'focus-visible:!outline-hidden' },\n    },\n    /*\n     * Below the breakpoint the label turns `sr-only`, so it still names the button, and the button\n     * takes its icon-only padding and glyph from the two properties the `collapsed` compounds seed\n     * per size. One static list per breakpoint, since Tailwind cannot see a generated class.\n     */\n    collapseBelow: {\n      'sm': { root: 'max-sm:gap-x-0 max-sm:p-(--rui-btn-collapsed-p) max-sm:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-sm:sr-only' },\n      'md': { root: 'max-md:gap-x-0 max-md:p-(--rui-btn-collapsed-p) max-md:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-md:sr-only' },\n      'lg': { root: 'max-lg:gap-x-0 max-lg:p-(--rui-btn-collapsed-p) max-lg:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-lg:sr-only' },\n      'xl': { root: 'max-xl:gap-x-0 max-xl:p-(--rui-btn-collapsed-p) max-xl:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-xl:sr-only' },\n      '2xl': { root: 'max-2xl:gap-x-0 max-2xl:p-(--rui-btn-collapsed-p) max-2xl:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-2xl:sr-only' },\n    },\n  },\n  compoundVariants: [\n    /*\n     * Filled hover: the pressed state layer (10% black in light, 12% white in dark) over the fill, a\n     * step of about a tenth rather than the jump to `darker`, which stays for the pressed state.\n     * `not-disabled:` keeps a disabled or loading button flat; an `<a>` is never `:disabled`.\n     */\n    { variant: ['default', 'fab'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], class: { root: 'not-disabled:hover:state-layer-pressed' } },\n    // An icon-only button has no label to keep, so its glyph goes transparent (still in the accessibility tree) under a centered spinner\n    { loading: true, icon: true, class: { root: '[&>*:not([data-spinner])]:opacity-0', spinner: 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2' } },\n    // Disabled appearance: a flat neutral fill, skipped while loading so the variant color shows behind the spinner\n    { loading: false, class: { root: 'disabled:!bg-rui-neutral-100 dark:disabled:!bg-rui-neutral-800 disabled:!text-rui-text-disabled disabled:active:!text-rui-text-disabled' } },\n    { loading: false, variant: 'outlined', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent disabled:inset-ring-rui-text-disabled dark:disabled:inset-ring-rui-text-disabled' } },\n    { loading: false, variant: ['text', 'link'], class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n    { loading: false, variant: 'list', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n\n    // === Grey color variants ===\n    { color: 'grey', active: true, class: { root: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' } },\n    // the same hover and pressed tints as a highlighted menu option\n    { color: 'grey', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-hover active:bg-rui-pressed dark:bg-transparent dark:text-rui-text' } },\n    { color: 'grey', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-pressed dark:bg-rui-pressed' } },\n    // the shared control edge, 3:1 against the page like the 50% context colours beside it\n    { color: 'grey', variant: 'outlined', class: { root: 'inset-ring-rui-outline' } },\n    // the dark variant overrides the shared compound's `dark:text-rui-text`, so a grey text button stays secondary in both themes\n    { color: 'grey', variant: 'text', class: { root: 'text-rui-text-secondary dark:text-rui-text-secondary' } },\n\n    // `dark:text-rui-<color>` beats the filled buttons' `dark:text-rui-text`; primary, secondary and error use their lighter tone in dark for 4.5:1\n    { color: 'primary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-primary/6 active:bg-rui-primary/10 text-rui-primary dark:text-rui-primary-lighter' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-secondary/6 active:bg-rui-secondary/10 text-rui-secondary dark:text-rui-secondary-lighter' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-error/6 active:bg-rui-error/10 text-rui-error dark:text-rui-error-lighter' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-warning/6 active:bg-rui-warning/10 text-rui-warning dark:text-rui-warning' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-info/6 active:bg-rui-info/10 text-rui-info dark:text-rui-info' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-success/6 active:bg-rui-success/10 text-rui-success dark:text-rui-success' } },\n\n    // === Context colors: active default ===\n    { color: 'primary', active: true, class: { root: 'bg-rui-primary-darker' } },\n    { color: 'secondary', active: true, class: { root: 'bg-rui-secondary-darker' } },\n    { color: 'error', active: true, class: { root: 'bg-rui-error-darker' } },\n    { color: 'warning', active: true, class: { root: 'bg-rui-warning-darker' } },\n    { color: 'info', active: true, class: { root: 'bg-rui-info-darker' } },\n    { color: 'success', active: true, class: { root: 'bg-rui-success-darker' } },\n\n    // Active outlined/text: a quiet tint with the deeper tone as the label, which keeps 4.5:1 for every color\n    { color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-primary/[0.08] text-rui-primary-darker' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-secondary/[0.08] text-rui-secondary-darker' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-error/[0.08] text-rui-error-darker' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-warning/[0.08] text-rui-warning-darker' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-info/[0.08] text-rui-info-darker' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-success/[0.08] text-rui-success-darker' } },\n\n    // === Context colors: outlined border (dark draws primary and secondary solid; at 50% their deep fills sink into the page and look alike) ===\n    { color: 'primary', variant: 'outlined', class: { root: 'inset-ring-rui-primary/50 dark:inset-ring-rui-primary' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'inset-ring-rui-secondary/50 dark:inset-ring-rui-secondary' } },\n    { color: 'error', variant: 'outlined', class: { root: 'inset-ring-rui-error/50' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'inset-ring-rui-warning/50' } },\n    { color: 'info', variant: 'outlined', class: { root: 'inset-ring-rui-info/50' } },\n    { color: 'success', variant: 'outlined', class: { root: 'inset-ring-rui-success/50' } },\n\n    // === Size overrides per variant ===\n    { variant: 'text', size: 'xs', class: { root: 'px-1' } },\n    { variant: 'text', size: 'sm', class: { root: 'px-1.5' } },\n    { variant: 'text', size: 'lg', class: { root: 'px-2.5' } },\n    { variant: 'text', size: 'xl', class: { root: 'px-2.5' } },\n    { variant: 'text', size: '2xl', class: { root: 'px-2.5' } },\n    { variant: 'fab', size: 'xs', class: { root: 'py-1 px-1' } },\n    { variant: 'fab', size: 'sm', class: { root: 'py-1.5 px-2' } },\n    { variant: 'fab', size: 'lg', class: { root: 'py-3' } },\n    { variant: 'list', size: 'xs', class: { root: 'px-3 py-0.5' } },\n    // 32px: a dense select's option row, which `getOptionHeight` reserves in the virtual list\n    { variant: 'list', size: 'sm', class: { root: 'px-3 py-2' } },\n    // Icon-only sizing, per the padding and glyph table on buttonStyles above\n    { icon: true, class: { root: 'p-2 ![--rui-icon-size:1.25rem]' } },\n    { icon: true, size: 'xs', class: { root: 'p-[0.1875rem] ![--rui-icon-size:0.875rem]' } },\n    { icon: true, size: 'sm', class: { root: 'p-1 ![--rui-icon-size:1.25rem]' } },\n    { icon: true, size: 'lg', class: { root: 'p-1.5 ![--rui-icon-size:1.5rem]' } },\n    { icon: true, size: 'xl', class: { root: 'p-2 ![--rui-icon-size:1.5rem]' } },\n    { icon: true, size: '2xl', class: { root: 'p-2 ![--rui-icon-size:1.75rem]' } },\n    { variant: 'fab', icon: true, size: 'sm', class: { root: 'px-2 py-2' } },\n    // A collapsed button's icon-only padding and glyph, the same table as `icon` above\n    { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], class: { root: '[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.25rem]' } },\n    { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'xs', class: { root: '[--rui-btn-collapsed-p:0.1875rem] [--rui-btn-collapsed-icon:0.875rem]' } },\n    { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'sm', class: { root: '[--rui-btn-collapsed-p:0.25rem] [--rui-btn-collapsed-icon:1.25rem]' } },\n    { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'lg', class: { root: '[--rui-btn-collapsed-p:0.375rem] [--rui-btn-collapsed-icon:1.5rem]' } },\n    { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'xl', class: { root: '[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.5rem]' } },\n    { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: '2xl', class: { root: '[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.75rem]' } },\n\n    /*\n     * === Link ===\n     * Last, so they win over the size, colour and active entries above. Font size and line height\n     * come from the surrounding text; a size only changes the spinner. The colour matches the\n     * outlined/text compounds, with no fill or tint.\n     */\n    {\n      variant: 'link',\n      class: {\n        root: [\n          'p-0 text-[length:inherit] leading-[inherit] ![--rui-icon-size:1em]',\n          'bg-transparent hover:bg-transparent active:bg-transparent',\n          'dark:bg-transparent dark:hover:bg-transparent dark:active:bg-transparent',\n        ].join(' '),\n      },\n    },\n    { color: 'grey', variant: 'link', class: { root: 'text-rui-text dark:text-rui-text' } },\n    { color: 'primary', variant: 'link', class: { root: 'text-rui-primary dark:text-rui-primary-lighter' } },\n    { color: 'secondary', variant: 'link', class: { root: 'text-rui-secondary dark:text-rui-secondary-lighter' } },\n    { color: 'error', variant: 'link', class: { root: 'text-rui-error dark:text-rui-error-lighter' } },\n    { color: 'warning', variant: 'link', class: { root: 'text-rui-warning dark:text-rui-warning' } },\n    { color: 'info', variant: 'link', class: { root: 'text-rui-info dark:text-rui-info' } },\n    { color: 'success', variant: 'link', class: { root: 'text-rui-success dark:text-rui-success' } },\n  ],\n  compoundSlots: [\n    // In dark a status color's `main` is a text tone, so a filled status button takes the deep `darker` fill\n    { slots: ['root'], color: 'error', variant: ['default', 'fab'], class: 'dark:bg-rui-error-darker dark:active:bg-rui-error-darker/75' },\n    { slots: ['root'], color: 'warning', variant: ['default', 'fab'], class: 'dark:bg-rui-warning-darker dark:active:bg-rui-warning-darker/75' },\n    { slots: ['root'], color: 'info', variant: ['default', 'fab'], class: 'dark:bg-rui-info-darker dark:active:bg-rui-info-darker/75' },\n    { slots: ['root'], color: 'success', variant: ['default', 'fab'], class: 'dark:bg-rui-success-darker dark:active:bg-rui-success-darker/75' },\n    // Dark mode active outlined/text: the same quiet tint, with the lighter tone as the label\n    { slots: ['root'], color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-primary/[0.16] dark:text-rui-primary-lighter' },\n    { slots: ['root'], color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-secondary/[0.16] dark:text-rui-secondary-lighter' },\n    { slots: ['root'], color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-error/[0.16] dark:text-rui-error-lighter' },\n    { slots: ['root'], color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-warning/[0.16] dark:text-rui-warning-lighter' },\n    { slots: ['root'], color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-info/[0.16] dark:text-rui-info-lighter' },\n    { slots: ['root'], color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-success/[0.16] dark:text-rui-success-lighter' },\n  ],\n  defaultVariants: {\n    variant: 'default',\n    color: 'grey',\n    active: false,\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"button-styles.js","names":[],"sources":["../../../../src/components/buttons/button/button-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/**\n * The button's classes.\n *\n * Three decisions the class lists cannot state themselves:\n *\n * `position: relative` is not in the base root: it is only a positioning\n * context for the loading spinner, so the `loading` variant applies it.\n * Basing it here would collide with consumers pinning the button with\n * `fixed`/`absolute`, since cascade order picks the later utility, usually\n * `relative`, and turns their `right-*`/`bottom-*` into relative offsets,\n * which misplaces FABs.\n *\n * Icon sizing flows through the `--rui-icon-size` custom property, seeded at\n * the md value in the base root and redefined per size variant with `!` so a\n * variant beats the baseline on the same element regardless of source order.\n * RuiIcon's own `size` prop stamps an inline style on the svg, which beats the\n * inherited value, so a consumer always wins. See rotki/ui-library#512.\n *\n * `disabled` on the element covers two states: actually disabled, and loading,\n * since RuiButton sets `disabled = disabled || loading`. Only the cursor is\n * shared between them; the grey disabled palette lives in the `loading: false`\n * compounds, so a loading button keeps its variant color behind the spinner.\n *\n * An icon-only button matches the height of the text button of the same size,\n * with a 60-70% glyph ratio, which is a larger glyph than the same size gives\n * a prepend/append icon so it does not look lost in the square. xs pads by an\n * arbitrary 0.1875rem because no Tailwind token holds the ratio at a 14px\n * glyph:\n *\n * ```\n * xs            p-[0.1875rem] + 0.875rem icon = 1.25rem (20px)   70%\n * sm            p-1           + 1.25rem  icon = 1.75rem (28px)   71%\n * md (default)  p-2           + 1.25rem  icon = 2.25rem (36px)   56%\n * lg            p-1.5         + 1.5rem   icon = 2.25rem (36px)   67%\n * xl            p-2           + 1.5rem   icon = 2.5rem  (40px)   60%\n * 2xl           p-2           + 1.75rem  icon = 2.75rem (44px)   64%\n * ```\n */\nexport const buttonStyles = tv({\n  slots: {\n    root: [\n      'text-sm leading-5 font-medium inset-ring inset-ring-transparent',\n      'flex items-center justify-center gap-x-2',\n      // md is 36px, the height of a text field or select, so a button lines up with them in a row\n      'px-4 py-2 rounded-rui-control transition-colors duration-150',\n      '[--rui-icon-size:1rem]',\n      'disabled:cursor-not-allowed',\n      'focus-visible:focus-ring',\n    ].join(' '),\n    label: 'inline-block text-nowrap',\n    /*\n     * Inline in the prepend icon's place; an icon-only button centers it over its hidden glyph instead.\n     * At lg the ring outgrows the label's line box, so its box is held to one line and the ring\n     * overflows it evenly: loading never changes the button's height.\n     */\n    spinner: 'shrink-0 h-lh items-center',\n  },\n  variants: {\n    variant: {\n      default: {},\n      outlined: {},\n      text: { root: 'px-2' },\n      fab: { root: 'rounded-full py-2 shadow-rui-control disabled:shadow-none' },\n      // The label's 16px line-box matches the md icon box, so the two share an optical center (rotki/ui-library#515)\n      list: { root: 'p-3 px-3 rounded-rui-sm w-full justify-start text-left', label: 'w-full leading-4' },\n      // An action inside running text: no box, so its size, padding and fills are reset in the link compounds at the end\n      link: { root: 'inline-flex align-baseline gap-x-1 underline-offset-2 not-disabled:hover:underline' },\n    },\n    size: {\n      'xs': { root: 'px-2 py-[0.125rem] text-[.75rem] leading-4 ![--rui-icon-size:0.75rem]' },\n      'sm': { root: 'px-2.5 py-1 text-[.8125rem] leading-5 ![--rui-icon-size:0.875rem]' },\n      'lg': { root: 'px-6 py-2 text-[1rem] leading-5 ![--rui-icon-size:1.25rem]' },\n      // 40px, to line up with RuiTextField / RuiMenuSelect in a toolbar; a 44px jumbo CTA is `2xl`\n      'xl': { root: 'px-6 py-2 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n      '2xl': { root: 'px-6 py-2.5 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n    },\n    color: {\n      grey: { root: 'bg-rui-neutral-100 hover:bg-rui-neutral-200 active:bg-rui-neutral-300 text-rui-text dark:bg-rui-neutral-800 dark:hover:bg-rui-neutral-700 dark:active:bg-rui-neutral-600' },\n      // hover is a tint laid over the fill (see the filled compound below); pressed sinks to `darker`\n      primary: { root: 'bg-rui-primary active:bg-rui-primary-darker text-rui-dark-text dark:text-rui-text' },\n      secondary: { root: 'bg-rui-secondary active:bg-rui-secondary-darker text-rui-dark-text dark:text-rui-text' },\n      error: { root: 'bg-rui-error active:bg-rui-error-darker text-rui-dark-text dark:text-rui-text' },\n      warning: { root: 'bg-rui-warning active:bg-rui-warning-darker text-rui-dark-text dark:text-rui-text' },\n      info: { root: 'bg-rui-info active:bg-rui-info-darker text-rui-dark-text dark:text-rui-text' },\n      success: { root: 'bg-rui-success active:bg-rui-success-darker text-rui-dark-text dark:text-rui-text' },\n    },\n    rounded: {\n      true: { root: 'rounded-full' },\n    },\n    icon: {\n      /*\n       * Only the round shape; the `icon + size` compounds below carry padding and icon sizing. The\n       * label holds no text, so it lays out as a flex box: a line box would put a wrapped icon (a\n       * badge) on the text baseline and grow the button by the descender gap.\n       */\n      true: { root: 'rounded-full', label: 'inline-flex' },\n    },\n    active: {\n      true: {},\n      false: {},\n    },\n    loading: {\n      true: { root: 'relative !cursor-progress' },\n      false: {},\n    },\n    hideFocusIndicator: {\n      true: { root: 'focus-visible:!outline-hidden' },\n    },\n    /*\n     * Below the breakpoint the label turns `sr-only`, so it still names the button, and the button\n     * takes its icon-only padding and glyph from the two properties the `collapsed` compounds seed\n     * per size. One static list per breakpoint, since Tailwind cannot see a generated class.\n     */\n    collapseBelow: {\n      'sm': { root: 'max-sm:gap-x-0 max-sm:p-(--rui-btn-collapsed-p) max-sm:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-sm:sr-only' },\n      'md': { root: 'max-md:gap-x-0 max-md:p-(--rui-btn-collapsed-p) max-md:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-md:sr-only' },\n      'lg': { root: 'max-lg:gap-x-0 max-lg:p-(--rui-btn-collapsed-p) max-lg:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-lg:sr-only' },\n      'xl': { root: 'max-xl:gap-x-0 max-xl:p-(--rui-btn-collapsed-p) max-xl:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-xl:sr-only' },\n      '2xl': { root: 'max-2xl:gap-x-0 max-2xl:p-(--rui-btn-collapsed-p) max-2xl:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-2xl:sr-only' },\n    },\n  },\n  compoundVariants: [\n    /*\n     * Filled hover: the pressed state layer (10% black in light, 12% white in dark) over the fill, a\n     * step of about a tenth rather than the jump to `darker`, which stays for the pressed state.\n     * `not-disabled:` keeps a disabled or loading button flat; an `<a>` is never `:disabled`.\n     */\n    { variant: ['default', 'fab'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], class: { root: 'not-disabled:hover:state-layer-pressed' } },\n    // An icon-only button has no label to keep, so its glyph goes transparent (still in the accessibility tree) under a centered spinner\n    { loading: true, icon: true, class: { root: '[&>*:not([data-spinner])]:opacity-0', spinner: 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2' } },\n    // Disabled appearance: a flat neutral fill, skipped while loading so the variant color shows behind the spinner\n    { loading: false, class: { root: 'disabled:!bg-rui-neutral-100 dark:disabled:!bg-rui-neutral-800 disabled:!text-rui-text-disabled disabled:active:!text-rui-text-disabled' } },\n    { loading: false, variant: 'outlined', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent disabled:inset-ring-rui-text-disabled dark:disabled:inset-ring-rui-text-disabled' } },\n    { loading: false, variant: ['text', 'link'], class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n    { loading: false, variant: 'list', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n\n    // === Grey color variants ===\n    { color: 'grey', active: true, class: { root: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' } },\n    // the same hover and pressed tints as a highlighted menu option\n    { color: 'grey', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-hover active:bg-rui-pressed dark:bg-transparent dark:text-rui-text' } },\n    { color: 'grey', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-pressed dark:bg-rui-pressed' } },\n    // the shared control edge, 3:1 against the page like the 50% context colours beside it\n    { color: 'grey', variant: 'outlined', class: { root: 'inset-ring-rui-outline' } },\n    // the dark variant overrides the shared compound's `dark:text-rui-text`, so a grey text button stays secondary in both themes\n    { color: 'grey', variant: 'text', class: { root: 'text-rui-text-secondary dark:text-rui-text-secondary' } },\n\n    // `dark:text-rui-<color>` beats the filled buttons' `dark:text-rui-text`; primary, secondary and error use their lighter tone in dark for 4.5:1\n    { color: 'primary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-primary/6 active:bg-rui-primary/10 text-rui-primary dark:text-rui-primary-lighter' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-secondary/6 active:bg-rui-secondary/10 text-rui-secondary dark:text-rui-secondary-lighter' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-error/6 active:bg-rui-error/10 text-rui-error dark:text-rui-error-lighter' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-warning/6 active:bg-rui-warning/10 text-rui-warning dark:text-rui-warning' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-info/6 active:bg-rui-info/10 text-rui-info dark:text-rui-info' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-success/6 active:bg-rui-success/10 text-rui-success dark:text-rui-success' } },\n\n    // === Context colors: active default ===\n    { color: 'primary', active: true, class: { root: 'bg-rui-primary-darker' } },\n    { color: 'secondary', active: true, class: { root: 'bg-rui-secondary-darker' } },\n    { color: 'error', active: true, class: { root: 'bg-rui-error-darker' } },\n    { color: 'warning', active: true, class: { root: 'bg-rui-warning-darker' } },\n    { color: 'info', active: true, class: { root: 'bg-rui-info-darker' } },\n    { color: 'success', active: true, class: { root: 'bg-rui-success-darker' } },\n\n    // Active outlined/text: a quiet tint with the deeper tone as the label, which keeps 4.5:1 for every color\n    { color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-primary/[0.08] text-rui-primary-darker' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-secondary/[0.08] text-rui-secondary-darker' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-error/[0.08] text-rui-error-darker' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-warning/[0.08] text-rui-warning-darker' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-info/[0.08] text-rui-info-darker' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-success/[0.08] text-rui-success-darker' } },\n\n    // === Context colors: outlined border (dark draws primary and secondary solid; at 50% their deep fills sink into the page and look alike) ===\n    { color: 'primary', variant: 'outlined', class: { root: 'inset-ring-rui-primary/50 dark:inset-ring-rui-primary' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'inset-ring-rui-secondary/50 dark:inset-ring-rui-secondary' } },\n    { color: 'error', variant: 'outlined', class: { root: 'inset-ring-rui-error/50' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'inset-ring-rui-warning/50' } },\n    { color: 'info', variant: 'outlined', class: { root: 'inset-ring-rui-info/50' } },\n    { color: 'success', variant: 'outlined', class: { root: 'inset-ring-rui-success/50' } },\n\n    // === Size overrides per variant ===\n    { variant: 'text', size: 'xs', class: { root: 'px-1' } },\n    { variant: 'text', size: 'sm', class: { root: 'px-1.5' } },\n    { variant: 'text', size: 'lg', class: { root: 'px-2.5' } },\n    { variant: 'text', size: 'xl', class: { root: 'px-2.5' } },\n    { variant: 'text', size: '2xl', class: { root: 'px-2.5' } },\n    { variant: 'fab', size: 'xs', class: { root: 'py-1 px-1' } },\n    { variant: 'fab', size: 'sm', class: { root: 'py-1.5 px-2' } },\n    { variant: 'fab', size: 'lg', class: { root: 'py-3' } },\n    { variant: 'list', size: 'xs', class: { root: 'px-3 py-0.5' } },\n    // 32px: a dense select's option row, which `getOptionHeight` reserves in the virtual list\n    { variant: 'list', size: 'sm', class: { root: 'px-3 py-2' } },\n    // Icon-only sizing, per the padding and glyph table on buttonStyles above\n    { icon: true, class: { root: 'p-2 ![--rui-icon-size:1.25rem]' } },\n    { icon: true, size: 'xs', class: { root: 'p-[0.1875rem] ![--rui-icon-size:0.875rem]' } },\n    { icon: true, size: 'sm', class: { root: 'p-1 ![--rui-icon-size:1.25rem]' } },\n    { icon: true, size: 'lg', class: { root: 'p-1.5 ![--rui-icon-size:1.5rem]' } },\n    { icon: true, size: 'xl', class: { root: 'p-2 ![--rui-icon-size:1.5rem]' } },\n    { icon: true, size: '2xl', class: { root: 'p-2 ![--rui-icon-size:1.75rem]' } },\n    { variant: 'fab', icon: true, size: 'sm', class: { root: 'px-2 py-2' } },\n    // A collapsed button's icon-only padding and glyph, the same table as `icon` above\n    { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], class: { root: '[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.25rem]' } },\n    { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'xs', class: { root: '[--rui-btn-collapsed-p:0.1875rem] [--rui-btn-collapsed-icon:0.875rem]' } },\n    { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'sm', class: { root: '[--rui-btn-collapsed-p:0.25rem] [--rui-btn-collapsed-icon:1.25rem]' } },\n    { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'lg', class: { root: '[--rui-btn-collapsed-p:0.375rem] [--rui-btn-collapsed-icon:1.5rem]' } },\n    { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'xl', class: { root: '[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.5rem]' } },\n    { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: '2xl', class: { root: '[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.75rem]' } },\n\n    /*\n     * === Link ===\n     * Last, so they win over the size, colour and active entries above. Font size and line height\n     * come from the surrounding text; a size only changes the spinner. The colour matches the\n     * outlined/text compounds, with no fill or tint.\n     */\n    {\n      variant: 'link',\n      class: {\n        root: [\n          'p-0 text-[length:inherit] leading-[inherit] ![--rui-icon-size:1em]',\n          'bg-transparent hover:bg-transparent active:bg-transparent',\n          'dark:bg-transparent dark:hover:bg-transparent dark:active:bg-transparent',\n        ].join(' '),\n      },\n    },\n    { color: 'grey', variant: 'link', class: { root: 'text-rui-text dark:text-rui-text' } },\n    { color: 'primary', variant: 'link', class: { root: 'text-rui-primary dark:text-rui-primary-lighter' } },\n    { color: 'secondary', variant: 'link', class: { root: 'text-rui-secondary dark:text-rui-secondary-lighter' } },\n    { color: 'error', variant: 'link', class: { root: 'text-rui-error dark:text-rui-error-lighter' } },\n    { color: 'warning', variant: 'link', class: { root: 'text-rui-warning dark:text-rui-warning' } },\n    { color: 'info', variant: 'link', class: { root: 'text-rui-info dark:text-rui-info' } },\n    { color: 'success', variant: 'link', class: { root: 'text-rui-success dark:text-rui-success' } },\n  ],\n  compoundSlots: [\n    // In dark a status color's `main` is a text tone, so a filled status button takes the deep `darker` fill\n    { slots: ['root'], color: 'error', variant: ['default', 'fab'], class: 'dark:bg-rui-error-darker dark:active:bg-rui-error-darker/75' },\n    { slots: ['root'], color: 'warning', variant: ['default', 'fab'], class: 'dark:bg-rui-warning-darker dark:active:bg-rui-warning-darker/75' },\n    { slots: ['root'], color: 'info', variant: ['default', 'fab'], class: 'dark:bg-rui-info-darker dark:active:bg-rui-info-darker/75' },\n    { slots: ['root'], color: 'success', variant: ['default', 'fab'], class: 'dark:bg-rui-success-darker dark:active:bg-rui-success-darker/75' },\n    // Dark mode active outlined/text: the same quiet tint, with the lighter tone as the label\n    { slots: ['root'], color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-primary/[0.16] dark:text-rui-primary-lighter' },\n    { slots: ['root'], color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-secondary/[0.16] dark:text-rui-secondary-lighter' },\n    { slots: ['root'], color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-error/[0.16] dark:text-rui-error-lighter' },\n    { slots: ['root'], color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-warning/[0.16] dark:text-rui-warning-lighter' },\n    { slots: ['root'], color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-info/[0.16] dark:text-rui-info-lighter' },\n    { slots: ['root'], color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-success/[0.16] dark:text-rui-success-lighter' },\n  ],\n  defaultVariants: {\n    variant: 'default',\n    color: 'grey',\n    active: false,\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,IAAa,eAAe,GAAG;CAC7B,OAAO;EACL,MAAM;GACJ;GACA;GAEA;GACA;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;EACV,OAAO;EAMP,SAAS;CACX;CACA,UAAU;EACR,SAAS;GACP,SAAS,CAAC;GACV,UAAU,CAAC;GACX,MAAM,EAAE,MAAM,OAAO;GACrB,KAAK,EAAE,MAAM,4DAA4D;GAEzE,MAAM;IAAE,MAAM;IAA0D,OAAO;GAAmB;GAElG,MAAM,EAAE,MAAM,qFAAqF;EACrG;EACA,MAAM;GACJ,MAAM,EAAE,MAAM,wEAAwE;GACtF,MAAM,EAAE,MAAM,oEAAoE;GAClF,MAAM,EAAE,MAAM,6DAA6D;GAE3E,MAAM,EAAE,MAAM,8DAA8D;GAC5E,OAAO,EAAE,MAAM,gEAAgE;EACjF;EACA,OAAO;GACL,MAAM,EAAE,MAAM,2KAA2K;GAEzL,SAAS,EAAE,MAAM,oFAAoF;GACrG,WAAW,EAAE,MAAM,wFAAwF;GAC3G,OAAO,EAAE,MAAM,gFAAgF;GAC/F,SAAS,EAAE,MAAM,oFAAoF;GACrG,MAAM,EAAE,MAAM,8EAA8E;GAC5F,SAAS,EAAE,MAAM,oFAAoF;EACvG;EACA,SAAS,EACP,MAAM,EAAE,MAAM,eAAe,EAC/B;EACA,MAAM,EAMJ,MAAM;GAAE,MAAM;GAAgB,OAAO;EAAc,EACrD;EACA,QAAQ;GACN,MAAM,CAAC;GACP,OAAO,CAAC;EACV;EACA,SAAS;GACP,MAAM,EAAE,MAAM,4BAA4B;GAC1C,OAAO,CAAC;EACV;EACA,oBAAoB,EAClB,MAAM,EAAE,MAAM,gCAAgC,EAChD;EAMA,eAAe;GACb,MAAM;IAAE,MAAM;IAA2G,OAAO;GAAiB;GACjJ,MAAM;IAAE,MAAM;IAA2G,OAAO;GAAiB;GACjJ,MAAM;IAAE,MAAM;IAA2G,OAAO;GAAiB;GACjJ,MAAM;IAAE,MAAM;IAA2G,OAAO;GAAiB;GACjJ,OAAO;IAAE,MAAM;IAA8G,OAAO;GAAkB;EACxJ;CACF;CACA,kBAAkB;EAMhB;GAAE,SAAS,CAAC,WAAW,KAAK;GAAG,OAAO;IAAC;IAAW;IAAa;IAAS;IAAW;IAAQ;GAAS;GAAG,OAAO,EAAE,MAAM,yCAAyC;EAAE;EAEjK;GAAE,SAAS;GAAM,MAAM;GAAM,OAAO;IAAE,MAAM;IAAuC,SAAS;GAA8D;EAAE;EAE5J;GAAE,SAAS;GAAO,OAAO,EAAE,MAAM,0IAA0I;EAAE;EAC7K;GAAE,SAAS;GAAO,SAAS;GAAY,OAAO,EAAE,MAAM,0KAA0K;EAAE;EAClO;GAAE,SAAS;GAAO,SAAS,CAAC,QAAQ,MAAM;GAAG,OAAO,EAAE,MAAM,yFAAyF;EAAE;EACvJ;GAAE,SAAS;GAAO,SAAS;GAAQ,OAAO,EAAE,MAAM,yFAAyF;EAAE;EAG7I;GAAE,OAAO;GAAQ,QAAQ;GAAM,OAAO,EAAE,MAAM,6CAA6C;EAAE;EAE7F;GAAE,OAAO;GAAQ,SAAS;IAAC;IAAY;IAAQ;GAAM;GAAG,OAAO,EAAE,MAAM,iGAAiG;EAAE;EAC1K;GAAE,OAAO;GAAQ,SAAS;IAAC;IAAY;IAAQ;GAAM;GAAG,QAAQ;GAAM,OAAO,EAAE,MAAM,qCAAqC;EAAE;EAE5H;GAAE,OAAO;GAAQ,SAAS;GAAY,OAAO,EAAE,MAAM,yBAAyB;EAAE;EAEhF;GAAE,OAAO;GAAQ,SAAS;GAAQ,OAAO,EAAE,MAAM,uDAAuD;EAAE;EAG1G;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;GAAM;GAAG,OAAO,EAAE,MAAM,gHAAgH;EAAE;EAC5L;GAAE,OAAO;GAAa,SAAS;IAAC;IAAY;IAAQ;GAAM;GAAG,OAAO,EAAE,MAAM,wHAAwH;EAAE;EACtM;GAAE,OAAO;GAAS,SAAS;IAAC;IAAY;IAAQ;GAAM;GAAG,OAAO,EAAE,MAAM,wGAAwG;EAAE;EAClL;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;GAAM;GAAG,OAAO,EAAE,MAAM,wGAAwG;EAAE;EACpL;GAAE,OAAO;GAAQ,SAAS;IAAC;IAAY;IAAQ;GAAM;GAAG,OAAO,EAAE,MAAM,4FAA4F;EAAE;EACrK;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;GAAM;GAAG,OAAO,EAAE,MAAM,wGAAwG;EAAE;EAGpL;GAAE,OAAO;GAAW,QAAQ;GAAM,OAAO,EAAE,MAAM,wBAAwB;EAAE;EAC3E;GAAE,OAAO;GAAa,QAAQ;GAAM,OAAO,EAAE,MAAM,0BAA0B;EAAE;EAC/E;GAAE,OAAO;GAAS,QAAQ;GAAM,OAAO,EAAE,MAAM,sBAAsB;EAAE;EACvE;GAAE,OAAO;GAAW,QAAQ;GAAM,OAAO,EAAE,MAAM,wBAAwB;EAAE;EAC3E;GAAE,OAAO;GAAQ,QAAQ;GAAM,OAAO,EAAE,MAAM,qBAAqB;EAAE;EACrE;GAAE,OAAO;GAAW,QAAQ;GAAM,OAAO,EAAE,MAAM,wBAAwB;EAAE;EAG3E;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;GAAM;GAAG,QAAQ;GAAM,OAAO,EAAE,MAAM,gDAAgD;EAAE;EAC1I;GAAE,OAAO;GAAa,SAAS;IAAC;IAAY;IAAQ;GAAM;GAAG,QAAQ;GAAM,OAAO,EAAE,MAAM,oDAAoD;EAAE;EAChJ;GAAE,OAAO;GAAS,SAAS;IAAC;IAAY;IAAQ;GAAM;GAAG,QAAQ;GAAM,OAAO,EAAE,MAAM,4CAA4C;EAAE;EACpI;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;GAAM;GAAG,QAAQ;GAAM,OAAO,EAAE,MAAM,gDAAgD;EAAE;EAC1I;GAAE,OAAO;GAAQ,SAAS;IAAC;IAAY;IAAQ;GAAM;GAAG,QAAQ;GAAM,OAAO,EAAE,MAAM,0CAA0C;EAAE;EACjI;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;GAAM;GAAG,QAAQ;GAAM,OAAO,EAAE,MAAM,gDAAgD;EAAE;EAG1I;GAAE,OAAO;GAAW,SAAS;GAAY,OAAO,EAAE,MAAM,wDAAwD;EAAE;EAClH;GAAE,OAAO;GAAa,SAAS;GAAY,OAAO,EAAE,MAAM,4DAA4D;EAAE;EACxH;GAAE,OAAO;GAAS,SAAS;GAAY,OAAO,EAAE,MAAM,0BAA0B;EAAE;EAClF;GAAE,OAAO;GAAW,SAAS;GAAY,OAAO,EAAE,MAAM,4BAA4B;EAAE;EACtF;GAAE,OAAO;GAAQ,SAAS;GAAY,OAAO,EAAE,MAAM,yBAAyB;EAAE;EAChF;GAAE,OAAO;GAAW,SAAS;GAAY,OAAO,EAAE,MAAM,4BAA4B;EAAE;EAGtF;GAAE,SAAS;GAAQ,MAAM;GAAM,OAAO,EAAE,MAAM,OAAO;EAAE;EACvD;GAAE,SAAS;GAAQ,MAAM;GAAM,OAAO,EAAE,MAAM,SAAS;EAAE;EACzD;GAAE,SAAS;GAAQ,MAAM;GAAM,OAAO,EAAE,MAAM,SAAS;EAAE;EACzD;GAAE,SAAS;GAAQ,MAAM;GAAM,OAAO,EAAE,MAAM,SAAS;EAAE;EACzD;GAAE,SAAS;GAAQ,MAAM;GAAO,OAAO,EAAE,MAAM,SAAS;EAAE;EAC1D;GAAE,SAAS;GAAO,MAAM;GAAM,OAAO,EAAE,MAAM,YAAY;EAAE;EAC3D;GAAE,SAAS;GAAO,MAAM;GAAM,OAAO,EAAE,MAAM,cAAc;EAAE;EAC7D;GAAE,SAAS;GAAO,MAAM;GAAM,OAAO,EAAE,MAAM,OAAO;EAAE;EACtD;GAAE,SAAS;GAAQ,MAAM;GAAM,OAAO,EAAE,MAAM,cAAc;EAAE;EAE9D;GAAE,SAAS;GAAQ,MAAM;GAAM,OAAO,EAAE,MAAM,YAAY;EAAE;EAE5D;GAAE,MAAM;GAAM,OAAO,EAAE,MAAM,iCAAiC;EAAE;EAChE;GAAE,MAAM;GAAM,MAAM;GAAM,OAAO,EAAE,MAAM,4CAA4C;EAAE;EACvF;GAAE,MAAM;GAAM,MAAM;GAAM,OAAO,EAAE,MAAM,iCAAiC;EAAE;EAC5E;GAAE,MAAM;GAAM,MAAM;GAAM,OAAO,EAAE,MAAM,kCAAkC;EAAE;EAC7E;GAAE,MAAM;GAAM,MAAM;GAAM,OAAO,EAAE,MAAM,gCAAgC;EAAE;EAC3E;GAAE,MAAM;GAAM,MAAM;GAAO,OAAO,EAAE,MAAM,iCAAiC;EAAE;EAC7E;GAAE,SAAS;GAAO,MAAM;GAAM,MAAM;GAAM,OAAO,EAAE,MAAM,YAAY;EAAE;EAEvE;GAAE,eAAe;IAAC;IAAM;IAAM;IAAM;IAAM;GAAK;GAAG,OAAO,EAAE,MAAM,oEAAoE;EAAE;EACvI;GAAE,eAAe;IAAC;IAAM;IAAM;IAAM;IAAM;GAAK;GAAG,MAAM;GAAM,OAAO,EAAE,MAAM,wEAAwE;EAAE;EACvJ;GAAE,eAAe;IAAC;IAAM;IAAM;IAAM;IAAM;GAAK;GAAG,MAAM;GAAM,OAAO,EAAE,MAAM,qEAAqE;EAAE;EACpJ;GAAE,eAAe;IAAC;IAAM;IAAM;IAAM;IAAM;GAAK;GAAG,MAAM;GAAM,OAAO,EAAE,MAAM,qEAAqE;EAAE;EACpJ;GAAE,eAAe;IAAC;IAAM;IAAM;IAAM;IAAM;GAAK;GAAG,MAAM;GAAM,OAAO,EAAE,MAAM,mEAAmE;EAAE;EAClJ;GAAE,eAAe;IAAC;IAAM;IAAM;IAAM;IAAM;GAAK;GAAG,MAAM;GAAO,OAAO,EAAE,MAAM,oEAAoE;EAAE;EAQpJ;GACE,SAAS;GACT,OAAO,EACL,MAAM;IACJ;IACA;IACA;GACF,CAAC,CAAC,KAAK,GAAG,EACZ;EACF;EACA;GAAE,OAAO;GAAQ,SAAS;GAAQ,OAAO,EAAE,MAAM,mCAAmC;EAAE;EACtF;GAAE,OAAO;GAAW,SAAS;GAAQ,OAAO,EAAE,MAAM,iDAAiD;EAAE;EACvG;GAAE,OAAO;GAAa,SAAS;GAAQ,OAAO,EAAE,MAAM,qDAAqD;EAAE;EAC7G;GAAE,OAAO;GAAS,SAAS;GAAQ,OAAO,EAAE,MAAM,6CAA6C;EAAE;EACjG;GAAE,OAAO;GAAW,SAAS;GAAQ,OAAO,EAAE,MAAM,yCAAyC;EAAE;EAC/F;GAAE,OAAO;GAAQ,SAAS;GAAQ,OAAO,EAAE,MAAM,mCAAmC;EAAE;EACtF;GAAE,OAAO;GAAW,SAAS;GAAQ,OAAO,EAAE,MAAM,yCAAyC;EAAE;CACjG;CACA,eAAe;EAEb;GAAE,OAAO,CAAC,MAAM;GAAG,OAAO;GAAS,SAAS,CAAC,WAAW,KAAK;GAAG,OAAO;EAA8D;EACrI;GAAE,OAAO,CAAC,MAAM;GAAG,OAAO;GAAW,SAAS,CAAC,WAAW,KAAK;GAAG,OAAO;EAAkE;EAC3I;GAAE,OAAO,CAAC,MAAM;GAAG,OAAO;GAAQ,SAAS,CAAC,WAAW,KAAK;GAAG,OAAO;EAA4D;EAClI;GAAE,OAAO,CAAC,MAAM;GAAG,OAAO;GAAW,SAAS,CAAC,WAAW,KAAK;GAAG,OAAO;EAAkE;EAE3I;GAAE,OAAO,CAAC,MAAM;GAAG,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;GAAM;GAAG,QAAQ;GAAM,OAAO;EAA2D;EAC5J;GAAE,OAAO,CAAC,MAAM;GAAG,OAAO;GAAa,SAAS;IAAC;IAAY;IAAQ;GAAM;GAAG,QAAQ;GAAM,OAAO;EAA+D;EAClK;GAAE,OAAO,CAAC,MAAM;GAAG,OAAO;GAAS,SAAS;IAAC;IAAY;IAAQ;GAAM;GAAG,QAAQ;GAAM,OAAO;EAAuD;EACtJ;GAAE,OAAO,CAAC,MAAM;GAAG,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;GAAM;GAAG,QAAQ;GAAM,OAAO;EAA2D;EAC5J;GAAE,OAAO,CAAC,MAAM;GAAG,OAAO;GAAQ,SAAS;IAAC;IAAY;IAAQ;GAAM;GAAG,QAAQ;GAAM,OAAO;EAAqD;EACnJ;GAAE,OAAO,CAAC,MAAM;GAAG,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;GAAM;GAAG,QAAQ;GAAM,OAAO;EAA2D;CAC9J;CACA,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,QAAQ;CACV;AACF,CAAC"}

package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiNavigationDrawer.js","names":["_sfc_main"],"sources":["../../../../src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ClassValue } from 'vue';\nimport type { VueClassValue } from '@/types/class-value';\nimport type { MaybeElement } from '@/types/dom';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiNavigationDrawerClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface NavigationDrawerProps {\n  temporary?: boolean;\n  stateless?: boolean;\n  width?: string | number;\n  miniVariant?: boolean;\n  overlay?: boolean;\n  position?: 'left' | 'right';\n  classNames?: RuiNavigationDrawerClassNames;\n  ariaLabel?: string;\n  /**\n   * Starts the drawer, and its overlay, below the app bar (`--rui-app-bar-height`), so the app bar\n   * stays uncovered and usable while the drawer is open. Without it the drawer runs the full height and\n   * a modal one covers the app bar.\n   */\n  belowAppBar?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiNavigationDrawer',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  temporary = false,\n  stateless = false,\n  width = 360,\n  miniVariant = false,\n  overlay = false,\n  position = 'left',\n  classNames,\n  ariaLabel,\n  belowAppBar = false,\n} = defineProps<NavigationDrawerProps>();\n\nconst emit = defineEmits<{\n  closed: [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; attrs: { onClick: () => void } }) => any;\n  default?: (props: { attrs: { onClick: () => void }; close: () => void }) => any;\n}>();\n\nconst transitioning = ref<boolean>(false);\nconst content = useTemplateRef<MaybeElement>('content');\nconst leaveTimeout = useTimeoutManager();\nconst clickOutsideTimeout = useTimeoutManager();\n\nconst alive = computed<boolean>(() => get(modelValue) || get(transitioning) || miniVariant);\n\nconst style = computed<{ width: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n}));\n\nconst activatorAttrs: { onClick: () => void } = {\n  onClick: toggle,\n};\n\nconst drawer = tv({\n  base: 'transition-[transform,width] duration-200 ease-in-out bottom-0 fixed text-rui-text',\n  variants: {\n    belowAppBar: {\n      true: 'top-rui-app-bar',\n      false: 'top-0',\n    },\n    // a temporary drawer floats on the overlay surface; a docked one is part of the page, edged by a hairline\n    temporary: {\n      true: 'bg-rui-overlay',\n      false: 'bg-rui-surface',\n    },\n    position: {\n      left: 'left-0',\n      right: 'right-0',\n    },\n    visible: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    mini: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    // a modal drawer covers the app bar; a docked one sits level with it\n    withOverlay: {\n      true: 'z-rui-drawer',\n      false: 'z-rui-app-bar',\n    },\n  },\n  compoundVariants: [\n    { position: 'left', visible: false, mini: false, class: '-translate-x-full' },\n    { position: 'right', visible: false, mini: false, class: 'translate-x-full' },\n    { mini: true, visible: false, class: 'w-14!' },\n    { temporary: false, position: 'left', class: 'border-r border-rui-divider' },\n    { temporary: false, position: 'right', class: 'border-l border-rui-divider' },\n  ],\n  defaultVariants: { position: 'left', visible: false, mini: false, withOverlay: false, temporary: false, belowAppBar: false },\n});\n\n// the overlay dims what the drawer covers: the whole view, or only the part below the app bar\nconst overlayClass = computed<string>(() => cn([\n  'fixed inset-x-0 bottom-0 backdrop-blur-sm bg-rui-neutral-950/40 dark:bg-black/60 z-rui-drawer',\n  belowAppBar ? 'top-rui-app-bar' : 'top-0',\n]) ?? '');\n\n/**\n * Consumer classes go through `drawer()` rather than alongside it, so\n * tailwind-variants' twMerge resolves conflicts in the consumer's favour.\n * Passed as an argument instead of read off `$attrs` here, so the template\n * keeps using `$attrs` directly.\n */\nfunction rootClass(attrsClass: ClassValue): string {\n  return drawer({\n    position,\n    visible: modelValue.value,\n    mini: miniVariant,\n    withOverlay: overlay,\n    temporary,\n    belowAppBar,\n    class: cn([\n      temporary && modelValue.value && 'shadow-rui-drawer',\n      classNames?.content,\n      classNames?.root,\n      attrsClass,\n    ]),\n  });\n}\n\nfunction toggle(): void {\n  set(modelValue, !get(modelValue));\n}\n\nfunction close(): void {\n  set(modelValue, false);\n}\n\nfunction onLeaveComplete(): void {\n  leaveTimeout.clear();\n  if (get(transitioning)) {\n    set(transitioning, false);\n    emit('closed');\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (!value) {\n    set(transitioning, true);\n    // Match CSS transition duration (200ms) + buffer\n    leaveTimeout.create(onLeaveComplete, 250);\n  }\n});\n\n// Debounced, so the activator's own click, which bubbles to the body, does not close it again\nonClickOutside(content, () => {\n  if (get(modelValue) && temporary && !stateless) {\n    clickOutsideTimeout.create(close, 50);\n  }\n});\n</script>\n\n<template>\n  <div>\n    <slot\n      name=\"activator\"\n      v-bind=\"{ open: modelValue, attrs: activatorAttrs }\"\n    />\n    <Teleport to=\"body\">\n      <Transition\n        v-if=\"overlay\"\n        enter-from-class=\"opacity-0\"\n        enter-active-class=\"transition-opacity ease-out duration-200\"\n        enter-to-class=\"opacity-100\"\n        leave-from-class=\"opacity-100\"\n        leave-active-class=\"transition-opacity ease-in duration-200\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"modelValue\"\n          data-id=\"overlay\"\n          :class=\"overlayClass\"\n          @click.stop=\"close()\"\n        />\n      </Transition>\n      <aside\n        v-if=\"alive\"\n        ref=\"content\"\n        data-id=\"drawer-content\"\n        :style=\"style\"\n        :data-visible=\"modelValue || undefined\"\n        :data-position=\"position\"\n        :data-mini=\"miniVariant || undefined\"\n        :class=\"rootClass($attrs.class)\"\n        :aria-label=\"ariaLabel\"\n        v-bind=\"getRootAttrs($attrs, [])\"\n      >\n        <slot v-bind=\"{ attrs: activatorAttrs, close }\" />\n      </aside>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiNavigationDrawer.js","names":["_sfc_main"],"sources":["../../../../src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ClassValue } from 'vue';\nimport type { VueClassValue } from '@/types/class-value';\nimport type { MaybeElement } from '@/types/dom';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiNavigationDrawerClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface NavigationDrawerProps {\n  temporary?: boolean;\n  stateless?: boolean;\n  width?: string | number;\n  miniVariant?: boolean;\n  overlay?: boolean;\n  position?: 'left' | 'right';\n  classNames?: RuiNavigationDrawerClassNames;\n  ariaLabel?: string;\n  /**\n   * Starts the drawer, and its overlay, below the app bar (`--rui-app-bar-height`), so the app bar\n   * stays uncovered and usable while the drawer is open. Without it the drawer runs the full height and\n   * a modal one covers the app bar.\n   */\n  belowAppBar?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiNavigationDrawer',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  temporary = false,\n  stateless = false,\n  width = 360,\n  miniVariant = false,\n  overlay = false,\n  position = 'left',\n  classNames,\n  ariaLabel,\n  belowAppBar = false,\n} = defineProps<NavigationDrawerProps>();\n\nconst emit = defineEmits<{\n  closed: [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; attrs: { onClick: () => void } }) => any;\n  default?: (props: { attrs: { onClick: () => void }; close: () => void }) => any;\n}>();\n\nconst transitioning = ref<boolean>(false);\nconst content = useTemplateRef<MaybeElement>('content');\nconst leaveTimeout = useTimeoutManager();\nconst clickOutsideTimeout = useTimeoutManager();\n\nconst alive = computed<boolean>(() => get(modelValue) || get(transitioning) || miniVariant);\n\nconst style = computed<{ width: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n}));\n\nconst activatorAttrs: { onClick: () => void } = {\n  onClick: toggle,\n};\n\nconst drawer = tv({\n  base: 'transition-[transform,translate,width] duration-200 ease-in-out bottom-0 fixed text-rui-text',\n  variants: {\n    belowAppBar: {\n      true: 'top-rui-app-bar',\n      false: 'top-0',\n    },\n    // a temporary drawer floats on the overlay surface; a docked one is part of the page, edged by a hairline\n    temporary: {\n      true: 'bg-rui-overlay',\n      false: 'bg-rui-surface',\n    },\n    position: {\n      left: 'left-0',\n      right: 'right-0',\n    },\n    visible: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    mini: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    // a modal drawer covers the app bar; a docked one sits level with it\n    withOverlay: {\n      true: 'z-rui-drawer',\n      false: 'z-rui-app-bar',\n    },\n  },\n  compoundVariants: [\n    { position: 'left', visible: false, mini: false, class: '-translate-x-full' },\n    { position: 'right', visible: false, mini: false, class: 'translate-x-full' },\n    { mini: true, visible: false, class: 'w-14!' },\n    { temporary: false, position: 'left', class: 'border-r border-rui-divider' },\n    { temporary: false, position: 'right', class: 'border-l border-rui-divider' },\n  ],\n  defaultVariants: { position: 'left', visible: false, mini: false, withOverlay: false, temporary: false, belowAppBar: false },\n});\n\n/**\n * Where the drawer starts its slide in: it mounts open, so the closed position has to be put on it for\n * its first frame. Important, because the open position is already on the element.\n */\nconst enterFromClass = computed<string>(() => (position === 'left' ? '-translate-x-full!' : 'translate-x-full!'));\n\n// the overlay dims what the drawer covers: the whole view, or only the part below the app bar\nconst overlayClass = computed<string>(() => cn([\n  'fixed inset-x-0 bottom-0 backdrop-blur-sm bg-rui-neutral-950/40 dark:bg-black/60 z-rui-drawer',\n  belowAppBar ? 'top-rui-app-bar' : 'top-0',\n]) ?? '');\n\n/**\n * Consumer classes go through `drawer()` rather than alongside it, so\n * tailwind-variants' twMerge resolves conflicts in the consumer's favour.\n * Passed as an argument instead of read off `$attrs` here, so the template\n * keeps using `$attrs` directly.\n */\nfunction rootClass(attrsClass: ClassValue): string {\n  return drawer({\n    position,\n    visible: modelValue.value,\n    mini: miniVariant,\n    withOverlay: overlay,\n    temporary,\n    belowAppBar,\n    class: cn([\n      temporary && modelValue.value && 'shadow-rui-drawer',\n      classNames?.content,\n      classNames?.root,\n      attrsClass,\n    ]),\n  });\n}\n\nfunction toggle(): void {\n  set(modelValue, !get(modelValue));\n}\n\nfunction close(): void {\n  set(modelValue, false);\n}\n\nfunction onLeaveComplete(): void {\n  leaveTimeout.clear();\n  if (get(transitioning)) {\n    set(transitioning, false);\n    emit('closed');\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (!value) {\n    set(transitioning, true);\n    // Match CSS transition duration (200ms) + buffer\n    leaveTimeout.create(onLeaveComplete, 250);\n  }\n});\n\n// Debounced, so the activator's own click, which bubbles to the body, does not close it again\nonClickOutside(content, () => {\n  if (get(modelValue) && temporary && !stateless) {\n    clickOutsideTimeout.create(close, 50);\n  }\n});\n</script>\n\n<template>\n  <div>\n    <slot\n      name=\"activator\"\n      v-bind=\"{ open: modelValue, attrs: activatorAttrs }\"\n    />\n    <Teleport to=\"body\">\n      <Transition\n        v-if=\"overlay\"\n        enter-from-class=\"opacity-0\"\n        enter-active-class=\"transition-opacity ease-out duration-200\"\n        enter-to-class=\"opacity-100\"\n        leave-from-class=\"opacity-100\"\n        leave-active-class=\"transition-opacity ease-in duration-200\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"modelValue\"\n          data-id=\"overlay\"\n          :class=\"overlayClass\"\n          @click.stop=\"close()\"\n        />\n      </Transition>\n      <!-- leaves with no transition: it has already slid out, and its own would hold the removal for a transitionend that never comes -->\n      <Transition\n        :enter-from-class=\"enterFromClass\"\n        leave-active-class=\"duration-0!\"\n      >\n        <aside\n          v-if=\"alive\"\n          ref=\"content\"\n          data-id=\"drawer-content\"\n          :style=\"style\"\n          :data-visible=\"modelValue || undefined\"\n          :data-position=\"position\"\n          :data-mini=\"miniVariant || undefined\"\n          :class=\"rootClass($attrs.class)\"\n          :aria-label=\"ariaLabel\"\n          v-bind=\"getRootAttrs($attrs, [])\"\n        >\n          <slot v-bind=\"{ attrs: activatorAttrs, close }\" />\n        </aside>\n      </Transition>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import { onClickOutside } from "../../../vendor/@vueuse/core/dist/index.js";
 import { cn, tv } from "../../../utils/tv.js";
 import { useTimeoutManager } from "../../../composables/timeout-manager.js";
 import { getRootAttrs, transformPropsUnit } from "../../../utils/helpers.js";
-import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeClass, normalizeProps, openBlock, ref, renderSlot, unref, useModel, useTemplateRef, watch, withCtx, withModifiers } from "vue";
+import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeClass, normalizeProps, openBlock, ref, renderSlot, unref, useModel, useTemplateRef, watch, withCtx, withModifiers } from "vue";
 //#region src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-visible",
@@ -59,7 +59,7 @@ var RuiNavigationDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 		const style = computed(() => ({ width: transformPropsUnit(__props.width) }));
 		const activatorAttrs = { onClick: toggle };
 		const drawer = tv({
-			base: "transition-[transform,width] duration-200 ease-in-out bottom-0 fixed text-rui-text",
+			base: "transition-[transform,translate,width] duration-200 ease-in-out bottom-0 fixed text-rui-text",
 			variants: {
 				belowAppBar: {
 					true: "top-rui-app-bar",
@@ -124,6 +124,11 @@ var RuiNavigationDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 				belowAppBar: false
 			}
 		});
+		/**
+		* Where the drawer starts its slide in: it mounts open, so the closed position has to be put on it for
+		* its first frame. Important, because the open position is already on the element.
+		*/
+		const enterFromClass = computed(() => __props.position === "left" ? "-translate-x-full!" : "translate-x-full!");
 		const overlayClass = computed(() => cn(["fixed inset-x-0 bottom-0 backdrop-blur-sm bg-rui-neutral-950/40 dark:bg-black/60 z-rui-drawer", __props.belowAppBar ? "top-rui-app-bar" : "top-0"]) ?? "");
 		/**
 		* Consumer classes go through `drawer()` rather than alongside it, so
@@ -189,21 +194,27 @@ var RuiNavigationDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 					onClick: _cache[0] || (_cache[0] = withModifiers(($event) => close(), ["stop"]))
 				}, null, 2)) : createCommentVNode("", true)]),
 				_: 1
-			})) : createCommentVNode("", true), unref(alive) ? (openBlock(), createElementBlock("aside", mergeProps({
-				key: 1,
-				ref_key: "content",
-				ref: content,
-				"data-id": "drawer-content",
-				style: unref(style),
-				"data-visible": modelValue.value || void 0,
-				"data-position": __props.position,
-				"data-mini": __props.miniVariant || void 0,
-				class: rootClass(_ctx.$attrs.class),
-				"aria-label": __props.ariaLabel
-			}, unref(getRootAttrs)(_ctx.$attrs, [])), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
-				attrs: activatorAttrs,
-				close
-			})))], 16, _hoisted_1)) : createCommentVNode("", true)]))]);
+			})) : createCommentVNode("", true), createVNode(Transition, {
+				"enter-from-class": unref(enterFromClass),
+				"leave-active-class": "duration-0!"
+			}, {
+				default: withCtx(() => [unref(alive) ? (openBlock(), createElementBlock("aside", mergeProps({
+					key: 0,
+					ref_key: "content",
+					ref: content,
+					"data-id": "drawer-content",
+					style: unref(style),
+					"data-visible": modelValue.value || void 0,
+					"data-position": __props.position,
+					"data-mini": __props.miniVariant || void 0,
+					class: rootClass(_ctx.$attrs.class),
+					"aria-label": __props.ariaLabel
+				}, unref(getRootAttrs)(_ctx.$attrs, [])), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
+					attrs: activatorAttrs,
+					close
+				})))], 16, _hoisted_1)) : createCommentVNode("", true)]),
+				_: 3
+			}, 8, ["enter-from-class"])]))]);
 		};
 	}
 });

package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiNavigationDrawer.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_createBlock","_Teleport","_Transition","_withCtx","_normalizeClass","_unref","_withModifiers","_createCommentVNode","_mergeProps"],"sources":["../../../../src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ClassValue } from 'vue';\nimport type { VueClassValue } from '@/types/class-value';\nimport type { MaybeElement } from '@/types/dom';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiNavigationDrawerClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface NavigationDrawerProps {\n  temporary?: boolean;\n  stateless?: boolean;\n  width?: string | number;\n  miniVariant?: boolean;\n  overlay?: boolean;\n  position?: 'left' | 'right';\n  classNames?: RuiNavigationDrawerClassNames;\n  ariaLabel?: string;\n  /**\n   * Starts the drawer, and its overlay, below the app bar (`--rui-app-bar-height`), so the app bar\n   * stays uncovered and usable while the drawer is open. Without it the drawer runs the full height and\n   * a modal one covers the app bar.\n   */\n  belowAppBar?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiNavigationDrawer',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  temporary = false,\n  stateless = false,\n  width = 360,\n  miniVariant = false,\n  overlay = false,\n  position = 'left',\n  classNames,\n  ariaLabel,\n  belowAppBar = false,\n} = defineProps<NavigationDrawerProps>();\n\nconst emit = defineEmits<{\n  closed: [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; attrs: { onClick: () => void } }) => any;\n  default?: (props: { attrs: { onClick: () => void }; close: () => void }) => any;\n}>();\n\nconst transitioning = ref<boolean>(false);\nconst content = useTemplateRef<MaybeElement>('content');\nconst leaveTimeout = useTimeoutManager();\nconst clickOutsideTimeout = useTimeoutManager();\n\nconst alive = computed<boolean>(() => get(modelValue) || get(transitioning) || miniVariant);\n\nconst style = computed<{ width: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n}));\n\nconst activatorAttrs: { onClick: () => void } = {\n  onClick: toggle,\n};\n\nconst drawer = tv({\n  base: 'transition-[transform,width] duration-200 ease-in-out bottom-0 fixed text-rui-text',\n  variants: {\n    belowAppBar: {\n      true: 'top-rui-app-bar',\n      false: 'top-0',\n    },\n    // a temporary drawer floats on the overlay surface; a docked one is part of the page, edged by a hairline\n    temporary: {\n      true: 'bg-rui-overlay',\n      false: 'bg-rui-surface',\n    },\n    position: {\n      left: 'left-0',\n      right: 'right-0',\n    },\n    visible: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    mini: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    // a modal drawer covers the app bar; a docked one sits level with it\n    withOverlay: {\n      true: 'z-rui-drawer',\n      false: 'z-rui-app-bar',\n    },\n  },\n  compoundVariants: [\n    { position: 'left', visible: false, mini: false, class: '-translate-x-full' },\n    { position: 'right', visible: false, mini: false, class: 'translate-x-full' },\n    { mini: true, visible: false, class: 'w-14!' },\n    { temporary: false, position: 'left', class: 'border-r border-rui-divider' },\n    { temporary: false, position: 'right', class: 'border-l border-rui-divider' },\n  ],\n  defaultVariants: { position: 'left', visible: false, mini: false, withOverlay: false, temporary: false, belowAppBar: false },\n});\n\n// the overlay dims what the drawer covers: the whole view, or only the part below the app bar\nconst overlayClass = computed<string>(() => cn([\n  'fixed inset-x-0 bottom-0 backdrop-blur-sm bg-rui-neutral-950/40 dark:bg-black/60 z-rui-drawer',\n  belowAppBar ? 'top-rui-app-bar' : 'top-0',\n]) ?? '');\n\n/**\n * Consumer classes go through `drawer()` rather than alongside it, so\n * tailwind-variants' twMerge resolves conflicts in the consumer's favour.\n * Passed as an argument instead of read off `$attrs` here, so the template\n * keeps using `$attrs` directly.\n */\nfunction rootClass(attrsClass: ClassValue): string {\n  return drawer({\n    position,\n    visible: modelValue.value,\n    mini: miniVariant,\n    withOverlay: overlay,\n    temporary,\n    belowAppBar,\n    class: cn([\n      temporary && modelValue.value && 'shadow-rui-drawer',\n      classNames?.content,\n      classNames?.root,\n      attrsClass,\n    ]),\n  });\n}\n\nfunction toggle(): void {\n  set(modelValue, !get(modelValue));\n}\n\nfunction close(): void {\n  set(modelValue, false);\n}\n\nfunction onLeaveComplete(): void {\n  leaveTimeout.clear();\n  if (get(transitioning)) {\n    set(transitioning, false);\n    emit('closed');\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (!value) {\n    set(transitioning, true);\n    // Match CSS transition duration (200ms) + buffer\n    leaveTimeout.create(onLeaveComplete, 250);\n  }\n});\n\n// Debounced, so the activator's own click, which bubbles to the body, does not close it again\nonClickOutside(content, () => {\n  if (get(modelValue) && temporary && !stateless) {\n    clickOutsideTimeout.create(close, 50);\n  }\n});\n</script>\n\n<template>\n  <div>\n    <slot\n      name=\"activator\"\n      v-bind=\"{ open: modelValue, attrs: activatorAttrs }\"\n    />\n    <Teleport to=\"body\">\n      <Transition\n        v-if=\"overlay\"\n        enter-from-class=\"opacity-0\"\n        enter-active-class=\"transition-opacity ease-out duration-200\"\n        enter-to-class=\"opacity-100\"\n        leave-from-class=\"opacity-100\"\n        leave-active-class=\"transition-opacity ease-in duration-200\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"modelValue\"\n          data-id=\"overlay\"\n          :class=\"overlayClass\"\n          @click.stop=\"close()\"\n        />\n      </Transition>\n      <aside\n        v-if=\"alive\"\n        ref=\"content\"\n        data-id=\"drawer-content\"\n        :style=\"style\"\n        :data-visible=\"modelValue || undefined\"\n        :data-position=\"position\"\n        :data-mini=\"miniVariant || undefined\"\n        :class=\"rootClass($attrs.class)\"\n        :aria-label=\"ariaLabel\"\n        v-bind=\"getRootAttrs($attrs, [])\"\n      >\n        <slot v-bind=\"{ attrs: activatorAttrs, close }\" />\n      </aside>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiNavigationDrawer.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_createBlock","_Teleport","_Transition","_withCtx","_normalizeClass","_unref","_withModifiers","_createCommentVNode","_createVNode","_mergeProps"],"sources":["../../../../src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ClassValue } from 'vue';\nimport type { VueClassValue } from '@/types/class-value';\nimport type { MaybeElement } from '@/types/dom';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiNavigationDrawerClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface NavigationDrawerProps {\n  temporary?: boolean;\n  stateless?: boolean;\n  width?: string | number;\n  miniVariant?: boolean;\n  overlay?: boolean;\n  position?: 'left' | 'right';\n  classNames?: RuiNavigationDrawerClassNames;\n  ariaLabel?: string;\n  /**\n   * Starts the drawer, and its overlay, below the app bar (`--rui-app-bar-height`), so the app bar\n   * stays uncovered and usable while the drawer is open. Without it the drawer runs the full height and\n   * a modal one covers the app bar.\n   */\n  belowAppBar?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiNavigationDrawer',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  temporary = false,\n  stateless = false,\n  width = 360,\n  miniVariant = false,\n  overlay = false,\n  position = 'left',\n  classNames,\n  ariaLabel,\n  belowAppBar = false,\n} = defineProps<NavigationDrawerProps>();\n\nconst emit = defineEmits<{\n  closed: [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; attrs: { onClick: () => void } }) => any;\n  default?: (props: { attrs: { onClick: () => void }; close: () => void }) => any;\n}>();\n\nconst transitioning = ref<boolean>(false);\nconst content = useTemplateRef<MaybeElement>('content');\nconst leaveTimeout = useTimeoutManager();\nconst clickOutsideTimeout = useTimeoutManager();\n\nconst alive = computed<boolean>(() => get(modelValue) || get(transitioning) || miniVariant);\n\nconst style = computed<{ width: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n}));\n\nconst activatorAttrs: { onClick: () => void } = {\n  onClick: toggle,\n};\n\nconst drawer = tv({\n  base: 'transition-[transform,translate,width] duration-200 ease-in-out bottom-0 fixed text-rui-text',\n  variants: {\n    belowAppBar: {\n      true: 'top-rui-app-bar',\n      false: 'top-0',\n    },\n    // a temporary drawer floats on the overlay surface; a docked one is part of the page, edged by a hairline\n    temporary: {\n      true: 'bg-rui-overlay',\n      false: 'bg-rui-surface',\n    },\n    position: {\n      left: 'left-0',\n      right: 'right-0',\n    },\n    visible: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    mini: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    // a modal drawer covers the app bar; a docked one sits level with it\n    withOverlay: {\n      true: 'z-rui-drawer',\n      false: 'z-rui-app-bar',\n    },\n  },\n  compoundVariants: [\n    { position: 'left', visible: false, mini: false, class: '-translate-x-full' },\n    { position: 'right', visible: false, mini: false, class: 'translate-x-full' },\n    { mini: true, visible: false, class: 'w-14!' },\n    { temporary: false, position: 'left', class: 'border-r border-rui-divider' },\n    { temporary: false, position: 'right', class: 'border-l border-rui-divider' },\n  ],\n  defaultVariants: { position: 'left', visible: false, mini: false, withOverlay: false, temporary: false, belowAppBar: false },\n});\n\n/**\n * Where the drawer starts its slide in: it mounts open, so the closed position has to be put on it for\n * its first frame. Important, because the open position is already on the element.\n */\nconst enterFromClass = computed<string>(() => (position === 'left' ? '-translate-x-full!' : 'translate-x-full!'));\n\n// the overlay dims what the drawer covers: the whole view, or only the part below the app bar\nconst overlayClass = computed<string>(() => cn([\n  'fixed inset-x-0 bottom-0 backdrop-blur-sm bg-rui-neutral-950/40 dark:bg-black/60 z-rui-drawer',\n  belowAppBar ? 'top-rui-app-bar' : 'top-0',\n]) ?? '');\n\n/**\n * Consumer classes go through `drawer()` rather than alongside it, so\n * tailwind-variants' twMerge resolves conflicts in the consumer's favour.\n * Passed as an argument instead of read off `$attrs` here, so the template\n * keeps using `$attrs` directly.\n */\nfunction rootClass(attrsClass: ClassValue): string {\n  return drawer({\n    position,\n    visible: modelValue.value,\n    mini: miniVariant,\n    withOverlay: overlay,\n    temporary,\n    belowAppBar,\n    class: cn([\n      temporary && modelValue.value && 'shadow-rui-drawer',\n      classNames?.content,\n      classNames?.root,\n      attrsClass,\n    ]),\n  });\n}\n\nfunction toggle(): void {\n  set(modelValue, !get(modelValue));\n}\n\nfunction close(): void {\n  set(modelValue, false);\n}\n\nfunction onLeaveComplete(): void {\n  leaveTimeout.clear();\n  if (get(transitioning)) {\n    set(transitioning, false);\n    emit('closed');\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (!value) {\n    set(transitioning, true);\n    // Match CSS transition duration (200ms) + buffer\n    leaveTimeout.create(onLeaveComplete, 250);\n  }\n});\n\n// Debounced, so the activator's own click, which bubbles to the body, does not close it again\nonClickOutside(content, () => {\n  if (get(modelValue) && temporary && !stateless) {\n    clickOutsideTimeout.create(close, 50);\n  }\n});\n</script>\n\n<template>\n  <div>\n    <slot\n      name=\"activator\"\n      v-bind=\"{ open: modelValue, attrs: activatorAttrs }\"\n    />\n    <Teleport to=\"body\">\n      <Transition\n        v-if=\"overlay\"\n        enter-from-class=\"opacity-0\"\n        enter-active-class=\"transition-opacity ease-out duration-200\"\n        enter-to-class=\"opacity-100\"\n        leave-from-class=\"opacity-100\"\n        leave-active-class=\"transition-opacity ease-in duration-200\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"modelValue\"\n          data-id=\"overlay\"\n          :class=\"overlayClass\"\n          @click.stop=\"close()\"\n        />\n      </Transition>\n      <!-- leaves with no transition: it has already slid out, and its own would hold the removal for a transitionend that never comes -->\n      <Transition\n        :enter-from-class=\"enterFromClass\"\n        leave-active-class=\"duration-0!\"\n      >\n        <aside\n          v-if=\"alive\"\n          ref=\"content\"\n          data-id=\"drawer-content\"\n          :style=\"style\"\n          :data-visible=\"modelValue || undefined\"\n          :data-position=\"position\"\n          :data-mini=\"miniVariant || undefined\"\n          :class=\"rootClass($attrs.class)\"\n          :aria-label=\"ariaLabel\"\n          v-bind=\"getRootAttrs($attrs, [])\"\n        >\n          <slot v-bind=\"{ attrs: activatorAttrs, close }\" />\n        </aside>\n      </Transition>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmCA,MAAM,aAAaC,SAAoB,SAAA,YAAmB;EAc1D,MAAM,OAAO;EASb,MAAM,gBAAgB,IAAa,KAAK;EACxC,MAAM,UAAU,eAA6B,SAAS;EACtD,MAAM,eAAe,kBAAkB;EACvC,MAAM,sBAAsB,kBAAkB;EAE9C,MAAM,QAAQ,eAAwB,IAAI,UAAU,KAAK,IAAI,aAAa,KAAK,QAAA,WAAW;EAE1F,MAAM,QAAQ,gBAA+C,EAC3D,OAAO,mBAAmB,QAAA,KAAK,EACjC,EAAE;EAEF,MAAM,iBAA0C,EAC9C,SAAS,OACX;EAEA,MAAM,SAAS,GAAG;GAChB,MAAM;GACN,UAAU;IACR,aAAa;KACX,MAAM;KACN,OAAO;IACT;IAEA,WAAW;KACT,MAAM;KACN,OAAO;IACT;IACA,UAAU;KACR,MAAM;KACN,OAAO;IACT;IACA,SAAS;KACP,MAAM;KACN,OAAO;IACT;IACA,MAAM;KACJ,MAAM;KACN,OAAO;IACT;IAEA,aAAa;KACX,MAAM;KACN,OAAO;IACT;GACF;GACA,kBAAkB;IAChB;KAAE,UAAU;KAAQ,SAAS;KAAO,MAAM;KAAO,OAAO;IAAoB;IAC5E;KAAE,UAAU;KAAS,SAAS;KAAO,MAAM;KAAO,OAAO;IAAmB;IAC5E;KAAE,MAAM;KAAM,SAAS;KAAO,OAAO;IAAQ;IAC7C;KAAE,WAAW;KAAO,UAAU;KAAQ,OAAO;IAA8B;IAC3E;KAAE,WAAW;KAAO,UAAU;KAAS,OAAO;IAA8B;GAC9E;GACA,iBAAiB;IAAE,UAAU;IAAQ,SAAS;IAAO,MAAM;IAAO,aAAa;IAAO,WAAW;IAAO,aAAa;GAAM;EAC7H,CAAC;;;;;EAMD,MAAM,iBAAiB,eAAwB,QAAA,aAAa,SAAS,uBAAuB,mBAAoB;EAGhH,MAAM,eAAe,eAAuB,GAAG,CAC7C,iGACA,QAAA,cAAc,oBAAoB,OACpC,CAAC,KAAK,EAAE;;;;;;;EAQR,SAAS,UAAU,YAAgC;GACjD,OAAO,OAAO;IACZ,UAAO,QAAA;IACP,SAAS,WAAW;IACpB,MAAM,QAAA;IACN,aAAa,QAAA;IACb,WAAQ,QAAA;IACR,aAAU,QAAA;IACV,OAAO,GAAG;KACR,QAAA,aAAa,WAAW,SAAS;KACjC,QAAA,YAAY;KACZ,QAAA,YAAY;KACZ;IACF,CAAC;GACH,CAAC;EACH;EAEA,SAAS,SAAe;GACtB,IAAI,YAAY,CAAC,IAAI,UAAU,CAAC;EAClC;EAEA,SAAS,QAAc;GACrB,IAAI,YAAY,KAAK;EACvB;EAEA,SAAS,kBAAwB;GAC/B,aAAa,MAAM;GACnB,IAAI,IAAI,aAAa,GAAG;IACtB,IAAI,eAAe,KAAK;IACxB,KAAK,QAAQ;GACf;EACF;EAEA,MAAM,aAAa,UAAU;GAC3B,IAAI,CAAC,OAAO;IACV,IAAI,eAAe,IAAI;IAEvB,aAAa,OAAO,iBAAiB,GAAG;GAC1C;EACF,CAAC;EAGD,eAAe,eAAe;GAC5B,IAAI,IAAI,UAAU,KAAK,QAAA,aAAa,CAAC,QAAA,WACnC,oBAAoB,OAAO,OAAO,EAAE;EAExC,CAAC;;GAIC,OAAAC,UAAA,GAAAC,mBA2CM,OAAA,MAAA,CA1CJC,WAGE,KAAA,QAAA,aAAAC,eAAAC,mBAAA;IAAA,MADgB,WAAA;IAAU,OAAS;GAAc,CAAA,CAAA,CAAA,IAEnDJ,UAAA,GAAAK,YAqCWC,UAAA,EArCD,IAAG,OAAM,GAAA,CAET,QAAA,WADRN,UAAA,GAAAK,YAeaE,YAAA;;IAbX,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;;IAEf,SAAAC,cAKE,CAJM,WAAA,SADRR,UAAA,GAAAC,mBAKE,OAAA;;KAHA,WAAQ;KACP,OAAKQ,eAAEC,MAAA,YAAA,CAAY;KACnB,SAAK,OAAA,OAAA,OAAA,KAAAC,eAAA,WAAO,MAAK,GAAA,CAAA,MAAA,CAAA;;;GAItBE,CAAAA,KAAAA,mBAAAA,IAAAA,IAAAA,GAAAA,YAkBaN,YAAA;IAjBV,oBAAkBG,MAAA,cAAA;IACnB,sBAAmB;;IAEnB,SAAAF,cAaQ,CAZAE,MAAA,KAAA,KADRV,UAAA,GAAAC,mBAaQ,SAbRa,WAaQ;;KAXF,SAAA;KAAJ,KAAI;KACJ,WAAQ;KACP,OAAOJ,MAAA,KAAA;KACP,gBAAc,WAAA,SAAc,KAAA;KAC5B,iBAAe,QAAA;KACf,aAAW,QAAA,eAAe,KAAA;KAC1B,OAAO,UAAUZ,KAAAA,OAAO,KAAK;KAC7B,cAAY,QAAA;IACL,GAAAY,MAAA,YAAA,CAAY,CAACZ,KAAAA,QAAM,CAAA,CAAA,CAAA,GAAA,CAE3BI,WAAkD,KAAA,QAAA,WAAAC,eAAAC,mBAAA;KAAA,OAA3B;KAAgB;IAAK,CAAA,CAAA,CAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

package/dist/style.css

@@ -1380,6 +1380,10 @@
     height: 100%;
   }
 
+  .h-lh {
+    height: 1lh;
+  }
+
   .h-px {
     height: 1px;
   }
@@ -1726,6 +1730,11 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .-translate-x-full\! {
+    --tw-translate-x: -100% !important;
+    translate: var(--tw-translate-x) var(--tw-translate-y) !important;
+  }
+
   .translate-x-0 {
     --tw-translate-x: 0px;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1736,6 +1745,11 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .translate-x-full\! {
+    --tw-translate-x: 100% !important;
+    translate: var(--tw-translate-x) var(--tw-translate-y) !important;
+  }
+
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -4039,8 +4053,8 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
-  .transition-\[transform\,width\] {
-    transition-property: transform, width;
+  .transition-\[transform\,translate\,width\] {
+    transition-property: transform, translate, width;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -4079,6 +4093,11 @@
     transition-delay: .2s;
   }
 
+  .duration-0\! {
+    --tw-duration: 0s !important;
+    transition-duration: 0s !important;
+  }
+
   .duration-75 {
     --tw-duration: 75ms;
     transition-duration: 75ms;

package/dist/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "http://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "@rotki/ui-library",
-  "version": "3.1.4",
+  "version": "3.1.6",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
   "contributions": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rotki/ui-library",
-  "version": "3.1.4",
+  "version": "3.1.6",
   "description": "A vue design system and component library for rotki",
   "type": "module",
   "keywords": [