@rotki/ui-library 3.0.0 → 3.1.0

package/dist/components/accordions/accordion/RuiAccordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAccordion.js","names":["_sfc_main"],"sources":["../../../../src/components/accordions/accordion/RuiAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport Icon from '@/components/icons/RuiIcon.vue';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiAccordionClassNames {\n  root?: VueClassValue;\n  header?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface AccordionProps {\n  open?: boolean;\n  eager?: boolean;\n  headerGrow?: boolean;\n  classNames?: RuiAccordionClassNames;\n}\n\ndefineOptions({\n  name: 'RuiAccordion',\n  inheritAttrs: false,\n});\n\nconst {\n  open = false,\n  eager = false,\n  headerGrow = false,\n  classNames,\n} = defineProps<AccordionProps>();\n\nconst emit = defineEmits<{\n  click: [];\n}>();\n\ndefineSlots<{\n  header?: (props: { open: boolean }) => any;\n  default?: () => any;\n}>();\n\nconst inner = useTemplateRef<HTMLDivElement>('inner');\n\nconst triggerId = useId();\nconst contentId = useId();\nconst { height: innerHeight } = useElementSize(inner);\n\nconst contentHeight = computed<string>(() => (open ? `${get(innerHeight)}px` : '0px'));\n\nfunction toggle(): void {\n  emit('click');\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    toggle();\n  }\n}\n\nconst rootStyle = tv({ base: 'flex flex-col items-start' });\n</script>\n\n<template>\n  <div\n    :class=\"rootStyle({ class: cn(classNames?.root ?? $attrs.class) })\"\n    :data-state=\"open ? 'open' : 'closed'\"\n    data-accordion\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <!-- rounded only while focused: a permanent radius bent any border an app draws on the header -->\n    <div\n      v-if=\"$slots.header\"\n      :id=\"triggerId\"\n      class=\"group flex gap-2 items-center cursor-pointer outline-hidden focus-visible:focus-ring focus-visible:rounded-rui-control\"\n      :class=\"[classNames?.header, { 'w-full': headerGrow }]\"\n      role=\"button\"\n      tabindex=\"0\"\n      :aria-expanded=\"open\"\n      :aria-controls=\"contentId\"\n      data-accordion-trigger\n      @click=\"toggle()\"\n      @keydown=\"onKeydown($event)\"\n    >\n      <div :class=\"{ grow: headerGrow }\">\n        <slot\n          name=\"header\"\n          :open=\"open\"\n        />\n      </div>\n      <Icon\n        class=\"shrink-0 text-rui-text-secondary transition-[rotate,color] duration-200 ease-out group-hover:text-rui-text motion-reduce:transition-none\"\n        :class=\"{ '-rotate-180': open }\"\n        name=\"lu-chevron-down\"\n        :size=\"16\"\n      />\n    </div>\n    <div\n      v-if=\"open || eager\"\n      :id=\"contentId\"\n      class=\"grow transition-[height] duration-200 ease-out overflow-hidden w-full motion-reduce:transition-none\"\n      :class=\"classNames?.content\"\n      :style=\"{ height: contentHeight }\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      data-accordion-content\n    >\n      <div ref=\"inner\">\n        <slot name=\"default\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiAccordion.js","names":["_sfc_main"],"sources":["../../../../src/components/accordions/accordion/RuiAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport Icon from '@/components/icons/RuiIcon.vue';\nimport { useClipWhileResizing } from '@/composables/clip-while-resizing';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiAccordionClassNames {\n  root?: VueClassValue;\n  header?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface AccordionProps {\n  open?: boolean;\n  eager?: boolean;\n  headerGrow?: boolean;\n  classNames?: RuiAccordionClassNames;\n}\n\ndefineOptions({\n  name: 'RuiAccordion',\n  inheritAttrs: false,\n});\n\nconst {\n  open = false,\n  eager = false,\n  headerGrow = false,\n  classNames,\n} = defineProps<AccordionProps>();\n\nconst emit = defineEmits<{\n  click: [];\n}>();\n\ndefineSlots<{\n  header?: (props: { open: boolean }) => any;\n  default?: () => any;\n}>();\n\nconst inner = useTemplateRef<HTMLDivElement>('inner');\nconst content = useTemplateRef<HTMLDivElement>('content');\n\nconst triggerId = useId();\nconst contentId = useId();\nconst { height: innerHeight } = useElementSize(inner);\n\nconst contentHeight = computed<string>(() => (open ? `${get(innerHeight)}px` : '0px'));\n\nconst resizing = useClipWhileResizing(content, contentHeight);\n\n// a closed `eager` panel keeps its content at height 0, so it clips; an open one only while it resizes, so sticky content works\nconst clipped = computed<boolean>(() => !open || get(resizing));\n\nfunction toggle(): void {\n  emit('click');\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    toggle();\n  }\n}\n\nconst rootStyle = tv({ base: 'flex flex-col items-start' });\n</script>\n\n<template>\n  <div\n    :class=\"rootStyle({ class: cn(classNames?.root ?? $attrs.class) })\"\n    :data-state=\"open ? 'open' : 'closed'\"\n    data-accordion\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <!-- rounded only while focused: a permanent radius bent any border an app draws on the header -->\n    <div\n      v-if=\"$slots.header\"\n      :id=\"triggerId\"\n      class=\"group flex gap-2 items-center cursor-pointer outline-hidden focus-visible:focus-ring focus-visible:rounded-rui-control\"\n      :class=\"[classNames?.header, { 'w-full': headerGrow }]\"\n      role=\"button\"\n      tabindex=\"0\"\n      :aria-expanded=\"open\"\n      :aria-controls=\"contentId\"\n      data-accordion-trigger\n      @click=\"toggle()\"\n      @keydown=\"onKeydown($event)\"\n    >\n      <div :class=\"{ grow: headerGrow }\">\n        <slot\n          name=\"header\"\n          :open=\"open\"\n        />\n      </div>\n      <Icon\n        class=\"shrink-0 text-rui-text-secondary transition-[rotate,color] duration-200 ease-out group-hover:text-rui-text motion-reduce:transition-none\"\n        :class=\"{ '-rotate-180': open }\"\n        name=\"lu-chevron-down\"\n        :size=\"16\"\n      />\n    </div>\n    <div\n      v-if=\"open || eager\"\n      :id=\"contentId\"\n      ref=\"content\"\n      class=\"grow transition-[height] duration-200 ease-out w-full motion-reduce:transition-none\"\n      :class=\"[{ 'overflow-hidden': clipped }, classNames?.content]\"\n      :data-clipped=\"clipped || undefined\"\n      :style=\"{ height: contentHeight }\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      data-accordion-content\n    >\n      <div ref=\"inner\">\n        <slot name=\"default\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/accordions/accordion/RuiAccordion.vue_vue_type_script_setup_true_lang.js

@@ -2,6 +2,7 @@ import { get } from "../../../vendor/@vueuse/shared/dist/index.js";
 import { useElementSize } from "../../../vendor/@vueuse/core/dist/index.js";
 import { cn, tv } from "../../../utils/tv.js";
 import RuiIcon_default from "../../icons/RuiIcon.js";
+import { useClipWhileResizing } from "../../../composables/clip-while-resizing.js";
 import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, renderSlot, unref, useId, useTemplateRef } from "vue";
 //#region src/components/accordions/accordion/RuiAccordion.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-state"];
@@ -10,7 +11,11 @@ var _hoisted_2 = [
 	"aria-expanded",
 	"aria-controls"
 ];
-var _hoisted_3 = ["id", "aria-labelledby"];
+var _hoisted_3 = [
+	"id",
+	"data-clipped",
+	"aria-labelledby"
+];
 var RuiAccordion_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiAccordion",
 	inheritAttrs: false,
@@ -34,10 +39,13 @@ var RuiAccordion_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
 		const inner = useTemplateRef("inner");
+		const content = useTemplateRef("content");
 		const triggerId = useId();
 		const contentId = useId();
 		const { height: innerHeight } = useElementSize(inner);
 		const contentHeight = computed(() => __props.open ? `${get(innerHeight)}px` : "0px");
+		const resizing = useClipWhileResizing(content, contentHeight);
+		const clipped = computed(() => !__props.open || get(resizing));
 		function toggle() {
 			emit("click");
 		}
@@ -74,7 +82,10 @@ var RuiAccordion_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			}, null, 8, ["class"])], 42, _hoisted_2)) : createCommentVNode("", true), __props.open || __props.eager ? (openBlock(), createElementBlock("div", {
 				key: 1,
 				id: unref(contentId),
-				class: normalizeClass(["grow transition-[height] duration-200 ease-out overflow-hidden w-full motion-reduce:transition-none", __props.classNames?.content]),
+				ref_key: "content",
+				ref: content,
+				class: normalizeClass(["grow transition-[height] duration-200 ease-out w-full motion-reduce:transition-none", [{ "overflow-hidden": unref(clipped) }, __props.classNames?.content]]),
+				"data-clipped": unref(clipped) || void 0,
 				style: normalizeStyle({ height: unref(contentHeight) }),
 				role: "region",
 				"aria-labelledby": unref(triggerId),

package/dist/components/accordions/accordion/RuiAccordion.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAccordion.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_openBlock","_createElementBlock","_mergeProps","_unref","_normalizeClass","_createElementVNode","_renderSlot","_createVNode","Icon","_createCommentVNode","_normalizeStyle"],"sources":["../../../../src/components/accordions/accordion/RuiAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport Icon from '@/components/icons/RuiIcon.vue';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiAccordionClassNames {\n  root?: VueClassValue;\n  header?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface AccordionProps {\n  open?: boolean;\n  eager?: boolean;\n  headerGrow?: boolean;\n  classNames?: RuiAccordionClassNames;\n}\n\ndefineOptions({\n  name: 'RuiAccordion',\n  inheritAttrs: false,\n});\n\nconst {\n  open = false,\n  eager = false,\n  headerGrow = false,\n  classNames,\n} = defineProps<AccordionProps>();\n\nconst emit = defineEmits<{\n  click: [];\n}>();\n\ndefineSlots<{\n  header?: (props: { open: boolean }) => any;\n  default?: () => any;\n}>();\n\nconst inner = useTemplateRef<HTMLDivElement>('inner');\n\nconst triggerId = useId();\nconst contentId = useId();\nconst { height: innerHeight } = useElementSize(inner);\n\nconst contentHeight = computed<string>(() => (open ? `${get(innerHeight)}px` : '0px'));\n\nfunction toggle(): void {\n  emit('click');\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    toggle();\n  }\n}\n\nconst rootStyle = tv({ base: 'flex flex-col items-start' });\n</script>\n\n<template>\n  <div\n    :class=\"rootStyle({ class: cn(classNames?.root ?? $attrs.class) })\"\n    :data-state=\"open ? 'open' : 'closed'\"\n    data-accordion\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <!-- rounded only while focused: a permanent radius bent any border an app draws on the header -->\n    <div\n      v-if=\"$slots.header\"\n      :id=\"triggerId\"\n      class=\"group flex gap-2 items-center cursor-pointer outline-hidden focus-visible:focus-ring focus-visible:rounded-rui-control\"\n      :class=\"[classNames?.header, { 'w-full': headerGrow }]\"\n      role=\"button\"\n      tabindex=\"0\"\n      :aria-expanded=\"open\"\n      :aria-controls=\"contentId\"\n      data-accordion-trigger\n      @click=\"toggle()\"\n      @keydown=\"onKeydown($event)\"\n    >\n      <div :class=\"{ grow: headerGrow }\">\n        <slot\n          name=\"header\"\n          :open=\"open\"\n        />\n      </div>\n      <Icon\n        class=\"shrink-0 text-rui-text-secondary transition-[rotate,color] duration-200 ease-out group-hover:text-rui-text motion-reduce:transition-none\"\n        :class=\"{ '-rotate-180': open }\"\n        name=\"lu-chevron-down\"\n        :size=\"16\"\n      />\n    </div>\n    <div\n      v-if=\"open || eager\"\n      :id=\"contentId\"\n      class=\"grow transition-[height] duration-200 ease-out overflow-hidden w-full motion-reduce:transition-none\"\n      :class=\"classNames?.content\"\n      :style=\"{ height: contentHeight }\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      data-accordion-content\n    >\n      <div ref=\"inner\">\n        <slot name=\"default\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BA,MAAM,OAAO;EASb,MAAM,QAAQ,eAA+B,OAAO;EAEpD,MAAM,YAAY,MAAM;EACxB,MAAM,YAAY,MAAM;EACxB,MAAM,EAAE,QAAQ,gBAAgB,eAAe,KAAK;EAEpD,MAAM,gBAAgB,eAAwB,QAAA,OAAO,GAAG,IAAI,WAAW,EAAE,MAAM,KAAM;EAErF,SAAS,SAAe;GACtB,KAAK,OAAO;EACd;EAEA,SAAS,UAAU,OAA4B;GAC7C,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;IAC9C,MAAM,eAAe;IACrB,OAAO;GACT;EACF;EAEA,MAAM,YAAY,GAAG,EAAE,MAAM,4BAA4B,CAAC;;GAIxD,OAAAE,UAAA,GAAAC,mBA+CM,OA/CNC,WA+CM;IA9CH,OAAOC,MAAA,SAAA,CAAS,CAAA,EAAA,OAAUA,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,QAAQL,KAAAA,OAAO,KAAK,EAAA,CAAA;IAC7D,cAAY,QAAA,OAAI,SAAA;IACjB,kBAAA;GACaA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA,CAI7BC,KAAAA,OAAO,UADfC,UAAA,GAAAC,mBAyBM,OAAA;;IAvBH,IAAIE,MAAA,SAAA;IACL,OAAKC,eAAA,CAAC,0HAAwH,CACrH,QAAA,YAAY,QAAM,EAAA,UAAc,QAAA,WAAU,CAAA,CAAA,CAAA;IACnD,MAAK;IACL,UAAS;IACR,iBAAe,QAAA;IACf,iBAAeD,MAAA,SAAA;IAChB,0BAAA;IACC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAM;IACb,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,UAAU,MAAM;GAE1BE,GAAAA,CAAAA,mBAKM,OAAA,EALA,OAAKD,eAAA,EAAA,MAAU,QAAA,WAAU,CAAA,EAAA,GAAA,CAC7BE,WAGE,KAAA,QAAA,UAAA,EADC,MAAM,QAAA,KAAI,CAAA,CAAA,GAAA,CAAA,GAGfC,YAKEC,iBAAA;IAJA,OAAKJ,eAAA,CAAC,4IAA0I,EAAA,eACvH,QAAA,KAAI,CAAA,CAAA;IAC7B,MAAK;IACJ,MAAM;GAIH,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,GAAA,QAAA,QAAQ,QAAA,SADhBJ,UAAA,GAAAC,mBAaM,OAAA;;IAXH,IAAIE,MAAA,SAAA;IACL,OAAKC,eAAA,CAAC,uGACE,QAAA,YAAY,OAAO,CAAA;IAC1B,OAAKM,eAAA,EAAA,QAAYP,MAAA,aAAA,EAAa,CAAA;IAC/B,MAAK;IACJ,mBAAiBA,MAAA,SAAA;IAClB,0BAAA;GAEAE,GAAAA,CAAAA,mBAEM,OAAA;IAFG,SAAA;IAAJ,KAAI;GACPC,GAAAA,CAAAA,WAAuB,KAAA,QAAA,SAAA,CAAA,GAAA,GAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA"}
+{"version":3,"file":"RuiAccordion.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_openBlock","_createElementBlock","_mergeProps","_unref","_normalizeClass","_createElementVNode","_renderSlot","_createVNode","Icon","_createCommentVNode","_normalizeStyle"],"sources":["../../../../src/components/accordions/accordion/RuiAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport Icon from '@/components/icons/RuiIcon.vue';\nimport { useClipWhileResizing } from '@/composables/clip-while-resizing';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiAccordionClassNames {\n  root?: VueClassValue;\n  header?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface AccordionProps {\n  open?: boolean;\n  eager?: boolean;\n  headerGrow?: boolean;\n  classNames?: RuiAccordionClassNames;\n}\n\ndefineOptions({\n  name: 'RuiAccordion',\n  inheritAttrs: false,\n});\n\nconst {\n  open = false,\n  eager = false,\n  headerGrow = false,\n  classNames,\n} = defineProps<AccordionProps>();\n\nconst emit = defineEmits<{\n  click: [];\n}>();\n\ndefineSlots<{\n  header?: (props: { open: boolean }) => any;\n  default?: () => any;\n}>();\n\nconst inner = useTemplateRef<HTMLDivElement>('inner');\nconst content = useTemplateRef<HTMLDivElement>('content');\n\nconst triggerId = useId();\nconst contentId = useId();\nconst { height: innerHeight } = useElementSize(inner);\n\nconst contentHeight = computed<string>(() => (open ? `${get(innerHeight)}px` : '0px'));\n\nconst resizing = useClipWhileResizing(content, contentHeight);\n\n// a closed `eager` panel keeps its content at height 0, so it clips; an open one only while it resizes, so sticky content works\nconst clipped = computed<boolean>(() => !open || get(resizing));\n\nfunction toggle(): void {\n  emit('click');\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    toggle();\n  }\n}\n\nconst rootStyle = tv({ base: 'flex flex-col items-start' });\n</script>\n\n<template>\n  <div\n    :class=\"rootStyle({ class: cn(classNames?.root ?? $attrs.class) })\"\n    :data-state=\"open ? 'open' : 'closed'\"\n    data-accordion\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <!-- rounded only while focused: a permanent radius bent any border an app draws on the header -->\n    <div\n      v-if=\"$slots.header\"\n      :id=\"triggerId\"\n      class=\"group flex gap-2 items-center cursor-pointer outline-hidden focus-visible:focus-ring focus-visible:rounded-rui-control\"\n      :class=\"[classNames?.header, { 'w-full': headerGrow }]\"\n      role=\"button\"\n      tabindex=\"0\"\n      :aria-expanded=\"open\"\n      :aria-controls=\"contentId\"\n      data-accordion-trigger\n      @click=\"toggle()\"\n      @keydown=\"onKeydown($event)\"\n    >\n      <div :class=\"{ grow: headerGrow }\">\n        <slot\n          name=\"header\"\n          :open=\"open\"\n        />\n      </div>\n      <Icon\n        class=\"shrink-0 text-rui-text-secondary transition-[rotate,color] duration-200 ease-out group-hover:text-rui-text motion-reduce:transition-none\"\n        :class=\"{ '-rotate-180': open }\"\n        name=\"lu-chevron-down\"\n        :size=\"16\"\n      />\n    </div>\n    <div\n      v-if=\"open || eager\"\n      :id=\"contentId\"\n      ref=\"content\"\n      class=\"grow transition-[height] duration-200 ease-out w-full motion-reduce:transition-none\"\n      :class=\"[{ 'overflow-hidden': clipped }, classNames?.content]\"\n      :data-clipped=\"clipped || undefined\"\n      :style=\"{ height: contentHeight }\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      data-accordion-content\n    >\n      <div ref=\"inner\">\n        <slot name=\"default\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BA,MAAM,OAAO;EASb,MAAM,QAAQ,eAA+B,OAAO;EACpD,MAAM,UAAU,eAA+B,SAAS;EAExD,MAAM,YAAY,MAAM;EACxB,MAAM,YAAY,MAAM;EACxB,MAAM,EAAE,QAAQ,gBAAgB,eAAe,KAAK;EAEpD,MAAM,gBAAgB,eAAwB,QAAA,OAAO,GAAG,IAAI,WAAW,EAAE,MAAM,KAAM;EAErF,MAAM,WAAW,qBAAqB,SAAS,aAAa;EAG5D,MAAM,UAAU,eAAwB,CAAC,QAAA,QAAQ,IAAI,QAAQ,CAAC;EAE9D,SAAS,SAAe;GACtB,KAAK,OAAO;EACd;EAEA,SAAS,UAAU,OAA4B;GAC7C,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;IAC9C,MAAM,eAAe;IACrB,OAAO;GACT;EACF;EAEA,MAAM,YAAY,GAAG,EAAE,MAAM,4BAA4B,CAAC;;GAIxD,OAAAE,UAAA,GAAAC,mBAiDM,OAjDNC,WAiDM;IAhDH,OAAOC,MAAA,SAAA,CAAS,CAAA,EAAA,OAAUA,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,QAAQL,KAAAA,OAAO,KAAK,EAAA,CAAA;IAC7D,cAAY,QAAA,OAAI,SAAA;IACjB,kBAAA;GACaA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA,CAI7BC,KAAAA,OAAO,UADfC,UAAA,GAAAC,mBAyBM,OAAA;;IAvBH,IAAIE,MAAA,SAAA;IACL,OAAKC,eAAA,CAAC,0HAAwH,CACrH,QAAA,YAAY,QAAM,EAAA,UAAc,QAAA,WAAU,CAAA,CAAA,CAAA;IACnD,MAAK;IACL,UAAS;IACR,iBAAe,QAAA;IACf,iBAAeD,MAAA,SAAA;IAChB,0BAAA;IACC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAM;IACb,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,UAAU,MAAM;GAE1BE,GAAAA,CAAAA,mBAKM,OAAA,EALA,OAAKD,eAAA,EAAA,MAAU,QAAA,WAAU,CAAA,EAAA,GAAA,CAC7BE,WAGE,KAAA,QAAA,UAAA,EADC,MAAM,QAAA,KAAI,CAAA,CAAA,GAAA,CAAA,GAGfC,YAKEC,iBAAA;IAJA,OAAKJ,eAAA,CAAC,4IAA0I,EAAA,eACvH,QAAA,KAAI,CAAA,CAAA;IAC7B,MAAK;IACJ,MAAM;GAIH,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,GAAA,QAAA,QAAQ,QAAA,SADhBJ,UAAA,GAAAC,mBAeM,OAAA;;IAbH,IAAIE,MAAA,SAAA;IACD,SAAA;IAAJ,KAAI;IACJ,OAAKC,eAAA,CAAC,uFAAqF,CAAA,EAAA,mBAC7DD,MAAA,OAAA,EAAO,GAAI,QAAA,YAAY,OAAO,CAAA,CAAA;IAC3D,gBAAcA,MAAA,OAAA,KAAW,KAAA;IACzB,OAAKO,eAAA,EAAA,QAAYP,MAAA,aAAA,EAAa,CAAA;IAC/B,MAAK;IACJ,mBAAiBA,MAAA,SAAA;IAClB,0BAAA;GAEAE,GAAAA,CAAAA,mBAEM,OAAA;IAFG,SAAA;IAAJ,KAAI;GACPC,GAAAA,CAAAA,WAAuB,KAAA,QAAA,SAAA,CAAA,GAAA,GAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/components/alerts/RuiAlert.vue.d.ts

@@ -14,11 +14,11 @@ type __VLS_Slots = {
     default?: () => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    action: () => any;
     close: () => any;
+    action: () => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    onAction?: (() => any) | undefined;
     onClose?: (() => any) | undefined;
+    onAction?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/buttons/button/RuiButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiButton.js","names":["_sfc_main"],"sources":["../../../../src/components/buttons/button/RuiButton.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { ButtonGroupKey } from '@/components/buttons/button-group/button-group-context';\nimport { type ButtonSize, ButtonVariant, getButtonSpinnerSize } from '@/components/buttons/button/button-props';\nimport { buttonStyles } from '@/components/buttons/button/button-styles';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { cn } from '@/utils/tv';\n\nexport interface Props<T = undefined> {\n  disabled?: boolean;\n  loading?: boolean;\n  color?: ContextColorsType;\n  rounded?: boolean;\n  variant?: ButtonVariant;\n  icon?: boolean;\n  active?: boolean;\n  size?: ButtonSize;\n  tag?: 'button' | 'a';\n  type?: 'button' | 'submit';\n  modelValue?: T;\n  hideFocusIndicator?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButton',\n  inheritAttrs: false,\n});\n\nconst {\n  disabled = false,\n  loading = false,\n  color = undefined,\n  rounded = false,\n  variant = ButtonVariant.default,\n  icon = false,\n  active = false,\n  size = undefined,\n  tag = 'button',\n  type = 'button',\n  modelValue = undefined,\n  hideFocusIndicator = false,\n} = defineProps<Props<T>>();\n\nconst emit = defineEmits<{\n  'update:model-value': [value?: T];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n  default?: () => any;\n}>();\n\n// a RuiButtonGroup anywhere above, unless an overlay's content sits in between\nconst group = inject(ButtonGroupKey, undefined);\n\nconst btnValue = computed<T | undefined>(() => modelValue);\n\nconst resolvedVariant = computed<ButtonVariant>(() => group?.variant() ?? variant);\n\nconst resolvedSize = computed<ButtonSize | undefined>(() => size ?? group?.size());\n\nconst resolvedDisabled = computed<boolean>(() => disabled || (group?.disabled() ?? false));\n\n// a grouped button is pressed when the group's model holds its value; it needs one to take part\nconst resolvedActive = computed<boolean>(() => active || (!!group && modelValue !== undefined && group.isActive(modelValue)));\n\nconst resolvedColor = computed<ContextColorsType | undefined>(() => group?.color(get(resolvedActive)) ?? color);\n\nconst spinnerSize = computed<number>(() => getButtonSpinnerSize(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof buttonStyles>>(() => buttonStyles({\n  variant: get(resolvedVariant),\n  color: get(resolvedColor) ?? 'grey',\n  size: get(resolvedSize),\n  rounded,\n  icon,\n  active: get(resolvedActive),\n  loading,\n  hideFocusIndicator,\n}));\n\nfunction onClick(): void {\n  emit('update:model-value', get(btnValue));\n  if (group && modelValue !== undefined)\n    group.toggle(modelValue);\n}\n</script>\n\n<template>\n  <Component\n    :is=\"tag\"\n    :class=\"ui.root({ class: cn([group?.itemClass(), $attrs.class]) })\"\n    :disabled=\"resolvedDisabled || loading\"\n    :type=\"tag === 'button' ? type : undefined\"\n    :data-variant=\"resolvedVariant\"\n    :data-size=\"resolvedSize ?? 'md'\"\n    :data-color=\"resolvedColor\"\n    :data-active=\"resolvedActive || undefined\"\n    :aria-busy=\"loading || undefined\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"onClick()\"\n  >\n    <!-- the button's aria-busy announces the wait, so the spinner stays out of the accessibility tree -->\n    <RuiProgress\n      v-if=\"loading\"\n      circular\n      data-spinner\n      aria-hidden=\"true\"\n      :class=\"ui.spinner()\"\n      variant=\"indeterminate\"\n      thickness=\"2\"\n      :size=\"spinnerSize\"\n    />\n    <!-- while loading, the spinner stands in for the prepend icon; the label stays -->\n    <slot\n      v-if=\"!loading || icon\"\n      name=\"prepend\"\n    />\n    <span\n      v-if=\"slots.default\"\n      :class=\"ui.label()\"\n      data-id=\"btn-label\"\n    >\n      <slot />\n    </span>\n    <slot name=\"append\" />\n  </Component>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiButton.js","names":["_sfc_main"],"sources":["../../../../src/components/buttons/button/RuiButton.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { ButtonGroupKey } from '@/components/buttons/button-group/button-group-context';\nimport { type ButtonCollapseBreakpoint, type ButtonSize, ButtonVariant, getButtonSpinnerSize } from '@/components/buttons/button/button-props';\nimport { buttonStyles } from '@/components/buttons/button/button-styles';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { cn } from '@/utils/tv';\n\nexport interface Props<T = undefined> {\n  disabled?: boolean;\n  loading?: boolean;\n  color?: ContextColorsType;\n  rounded?: boolean;\n  variant?: ButtonVariant;\n  icon?: boolean;\n  active?: boolean;\n  size?: ButtonSize;\n  tag?: 'button' | 'a';\n  type?: 'button' | 'submit';\n  modelValue?: T;\n  hideFocusIndicator?: boolean;\n  /**\n   * Below this breakpoint the button shows only its icons: the label becomes screen-reader text,\n   * so it still names the button, and the button takes its icon-only padding. Give it a `prepend`\n   * or `append` icon. Ignored on an `icon` button.\n   */\n  collapseBelow?: ButtonCollapseBreakpoint;\n}\n\ndefineOptions({\n  name: 'RuiButton',\n  inheritAttrs: false,\n});\n\nconst {\n  disabled = false,\n  loading = false,\n  color = undefined,\n  rounded = false,\n  variant = ButtonVariant.default,\n  icon = false,\n  active = false,\n  size = undefined,\n  tag = 'button',\n  type = 'button',\n  modelValue = undefined,\n  hideFocusIndicator = false,\n  collapseBelow = undefined,\n} = defineProps<Props<T>>();\n\nconst emit = defineEmits<{\n  'update:model-value': [value?: T];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n  default?: () => any;\n}>();\n\n// a RuiButtonGroup anywhere above, unless an overlay's content sits in between\nconst group = inject(ButtonGroupKey, undefined);\n\nconst btnValue = computed<T | undefined>(() => modelValue);\n\nconst resolvedVariant = computed<ButtonVariant>(() => group?.variant() ?? variant);\n\nconst resolvedSize = computed<ButtonSize | undefined>(() => size ?? group?.size());\n\nconst resolvedDisabled = computed<boolean>(() => disabled || (group?.disabled() ?? false));\n\n// a grouped button is pressed when the group's model holds its value; it needs one to take part\nconst resolvedActive = computed<boolean>(() => active || (!!group && modelValue !== undefined && group.isActive(modelValue)));\n\nconst resolvedColor = computed<ContextColorsType | undefined>(() => group?.color(get(resolvedActive)) ?? color);\n\nconst spinnerSize = computed<number>(() => getButtonSpinnerSize(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof buttonStyles>>(() => buttonStyles({\n  variant: get(resolvedVariant),\n  color: get(resolvedColor) ?? 'grey',\n  size: get(resolvedSize),\n  rounded,\n  icon,\n  active: get(resolvedActive),\n  loading,\n  hideFocusIndicator,\n  collapseBelow: icon ? undefined : collapseBelow,\n}));\n\nfunction onClick(): void {\n  emit('update:model-value', get(btnValue));\n  if (group && modelValue !== undefined)\n    group.toggle(modelValue);\n}\n</script>\n\n<template>\n  <Component\n    :is=\"tag\"\n    :class=\"ui.root({ class: cn([group?.itemClass(), $attrs.class]) })\"\n    :disabled=\"resolvedDisabled || loading\"\n    :type=\"tag === 'button' ? type : undefined\"\n    :data-variant=\"resolvedVariant\"\n    :data-size=\"resolvedSize ?? 'md'\"\n    :data-color=\"resolvedColor\"\n    :data-active=\"resolvedActive || undefined\"\n    :aria-busy=\"loading || undefined\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"onClick()\"\n  >\n    <!-- the button's aria-busy announces the wait, so the spinner stays out of the accessibility tree -->\n    <RuiProgress\n      v-if=\"loading\"\n      circular\n      data-spinner\n      aria-hidden=\"true\"\n      :class=\"ui.spinner()\"\n      variant=\"indeterminate\"\n      thickness=\"2\"\n      :size=\"spinnerSize\"\n    />\n    <!-- while loading, the spinner stands in for the prepend icon; the label stays -->\n    <slot\n      v-if=\"!loading || icon\"\n      name=\"prepend\"\n    />\n    <span\n      v-if=\"slots.default\"\n      :class=\"ui.label()\"\n      data-id=\"btn-label\"\n    >\n      <slot />\n    </span>\n    <slot name=\"append\" />\n  </Component>\n</template>\n"],"mappings":""}

package/dist/components/buttons/button/RuiButton.vue.d.ts

@@ -1,5 +1,5 @@
 import type { ContextColorsType } from '../../../consts/colors.js';
-import { type ButtonSize, ButtonVariant } from './button-props.js';
+import { type ButtonCollapseBreakpoint, type ButtonSize, ButtonVariant } from './button-props.js';
 export interface Props<T = undefined> {
     disabled?: boolean;
     loading?: boolean;
@@ -13,6 +13,12 @@ export interface Props<T = undefined> {
     type?: 'button' | 'submit';
     modelValue?: T;
     hideFocusIndicator?: boolean;
+    /**
+     * Below this breakpoint the button shows only its icons: the label becomes screen-reader text,
+     * so it still names the button, and the button takes its icon-only padding. Give it a `prepend`
+     * or `append` icon. Ignored on an `icon` button.
+     */
+    collapseBelow?: ButtonCollapseBreakpoint;
 }
 declare const __VLS_export: <T = undefined>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<Props<T> & {

package/dist/components/buttons/button/RuiButton.vue_vue_type_script_setup_true_lang.js

@@ -40,7 +40,8 @@ var RuiButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		hideFocusIndicator: {
 			type: Boolean,
 			default: false
-		}
+		},
+		collapseBelow: { default: () => void 0 }
 	},
 	emits: ["update:model-value"],
 	setup(__props, { emit: __emit }) {
@@ -62,7 +63,8 @@ var RuiButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			icon: __props.icon,
 			active: get(resolvedActive),
 			loading: __props.loading,
-			hideFocusIndicator: __props.hideFocusIndicator
+			hideFocusIndicator: __props.hideFocusIndicator,
+			collapseBelow: __props.icon ? void 0 : __props.collapseBelow
 		}));
 		function onClick() {
 			emit("update:model-value", get(btnValue));

package/dist/components/buttons/button/RuiButton.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiButton.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useSlots","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_unref","_withCtx","RuiProgress","_normalizeClass","_createCommentVNode","_renderSlot","_createElementBlock"],"sources":["../../../../src/components/buttons/button/RuiButton.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { ButtonGroupKey } from '@/components/buttons/button-group/button-group-context';\nimport { type ButtonSize, ButtonVariant, getButtonSpinnerSize } from '@/components/buttons/button/button-props';\nimport { buttonStyles } from '@/components/buttons/button/button-styles';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { cn } from '@/utils/tv';\n\nexport interface Props<T = undefined> {\n  disabled?: boolean;\n  loading?: boolean;\n  color?: ContextColorsType;\n  rounded?: boolean;\n  variant?: ButtonVariant;\n  icon?: boolean;\n  active?: boolean;\n  size?: ButtonSize;\n  tag?: 'button' | 'a';\n  type?: 'button' | 'submit';\n  modelValue?: T;\n  hideFocusIndicator?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButton',\n  inheritAttrs: false,\n});\n\nconst {\n  disabled = false,\n  loading = false,\n  color = undefined,\n  rounded = false,\n  variant = ButtonVariant.default,\n  icon = false,\n  active = false,\n  size = undefined,\n  tag = 'button',\n  type = 'button',\n  modelValue = undefined,\n  hideFocusIndicator = false,\n} = defineProps<Props<T>>();\n\nconst emit = defineEmits<{\n  'update:model-value': [value?: T];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n  default?: () => any;\n}>();\n\n// a RuiButtonGroup anywhere above, unless an overlay's content sits in between\nconst group = inject(ButtonGroupKey, undefined);\n\nconst btnValue = computed<T | undefined>(() => modelValue);\n\nconst resolvedVariant = computed<ButtonVariant>(() => group?.variant() ?? variant);\n\nconst resolvedSize = computed<ButtonSize | undefined>(() => size ?? group?.size());\n\nconst resolvedDisabled = computed<boolean>(() => disabled || (group?.disabled() ?? false));\n\n// a grouped button is pressed when the group's model holds its value; it needs one to take part\nconst resolvedActive = computed<boolean>(() => active || (!!group && modelValue !== undefined && group.isActive(modelValue)));\n\nconst resolvedColor = computed<ContextColorsType | undefined>(() => group?.color(get(resolvedActive)) ?? color);\n\nconst spinnerSize = computed<number>(() => getButtonSpinnerSize(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof buttonStyles>>(() => buttonStyles({\n  variant: get(resolvedVariant),\n  color: get(resolvedColor) ?? 'grey',\n  size: get(resolvedSize),\n  rounded,\n  icon,\n  active: get(resolvedActive),\n  loading,\n  hideFocusIndicator,\n}));\n\nfunction onClick(): void {\n  emit('update:model-value', get(btnValue));\n  if (group && modelValue !== undefined)\n    group.toggle(modelValue);\n}\n</script>\n\n<template>\n  <Component\n    :is=\"tag\"\n    :class=\"ui.root({ class: cn([group?.itemClass(), $attrs.class]) })\"\n    :disabled=\"resolvedDisabled || loading\"\n    :type=\"tag === 'button' ? type : undefined\"\n    :data-variant=\"resolvedVariant\"\n    :data-size=\"resolvedSize ?? 'md'\"\n    :data-color=\"resolvedColor\"\n    :data-active=\"resolvedActive || undefined\"\n    :aria-busy=\"loading || undefined\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"onClick()\"\n  >\n    <!-- the button's aria-busy announces the wait, so the spinner stays out of the accessibility tree -->\n    <RuiProgress\n      v-if=\"loading\"\n      circular\n      data-spinner\n      aria-hidden=\"true\"\n      :class=\"ui.spinner()\"\n      variant=\"indeterminate\"\n      thickness=\"2\"\n      :size=\"spinnerSize\"\n    />\n    <!-- while loading, the spinner stands in for the prepend icon; the label stays -->\n    <slot\n      v-if=\"!loading || icon\"\n      name=\"prepend\"\n    />\n    <span\n      v-if=\"slots.default\"\n      :class=\"ui.label()\"\n      data-id=\"btn-label\"\n    >\n      <slot />\n    </span>\n    <slot name=\"append\" />\n  </Component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CA,MAAM,OAAO;EAIb,MAAM,QAAQC,SAAA;EAOd,MAAM,QAAQ,OAAO,gBAAgB,KAAA,CAAS;EAE9C,MAAM,WAAW,eAA8B,QAAA,UAAU;EAEzD,MAAM,kBAAkB,eAA8B,OAAO,QAAQ,KAAK,QAAA,OAAO;EAEjF,MAAM,eAAe,eAAuC,QAAA,QAAQ,OAAO,KAAK,CAAC;EAEjF,MAAM,mBAAmB,eAAwB,QAAA,aAAa,OAAO,SAAS,KAAK,MAAM;EAGzF,MAAM,iBAAiB,eAAwB,QAAA,UAAW,CAAC,CAAC,SAAS,QAAA,eAAe,KAAA,KAAa,MAAM,SAAS,QAAA,UAAU,CAAE;EAE5H,MAAM,gBAAgB,eAA8C,OAAO,MAAM,IAAI,cAAc,CAAC,KAAK,QAAA,KAAK;EAE9G,MAAM,cAAc,eAAuB,qBAAqB,IAAI,YAAY,CAAC,CAAC;EAElF,MAAM,KAAK,eAAgD,aAAa;GACtE,SAAS,IAAI,eAAe;GAC5B,OAAO,IAAI,aAAa,KAAK;GAC7B,MAAM,IAAI,YAAY;GACtB,SAAM,QAAA;GACN,MAAG,QAAA;GACH,QAAQ,IAAI,cAAc;GAC1B,SAAM,QAAA;GACN,oBAAiB,QAAA;EACnB,CAAC,CAAC;EAEF,SAAS,UAAgB;GACvB,KAAK,sBAAsB,IAAI,QAAQ,CAAC;GACxC,IAAI,SAAS,QAAA,eAAe,KAAA,GAC1B,MAAM,OAAO,QAAA,UAAU;EAC3B;;GAIE,OAAAC,UAAA,GAAAC,YAqCYC,wBApCL,QAAA,GAAG,GADVC,WAqCY;IAnCT,OAAOC,MAAA,EAAA,CAAE,CAAC,KAAI,EAAA,OAAUA,MAAA,EAAA,CAAE,CAAA,CAAEA,MAAA,KAAA,CAAK,EAAE,UAAS,GAAIN,KAAAA,OAAO,KAAK,CAAA,EAAA,CAAA;IAC5D,UAAUM,MAAA,gBAAA,KAAoB,QAAA;IAC9B,MAAM,QAAA,QAAG,WAAgB,QAAA,OAAO,KAAA;IAChC,gBAAcA,MAAA,eAAA;IACd,aAAWA,MAAA,YAAA,KAAY;IACvB,cAAYA,MAAA,aAAA;IACZ,eAAaA,MAAA,cAAA,KAAkB,KAAA;IAC/B,aAAW,QAAA,WAAW,KAAA;GACVN,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,GAAA,EACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAO,GAAA,CAAA,GAAA;IAGf,SAAAO,cASE;KARM,QAAA,WADRL,UAAA,GAAAC,YASEK,qBAAA;;MAPA,UAAA;MACA,gBAAA;MACA,eAAY;MACX,OAAKC,eAAEH,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;MAClB,SAAQ;MACR,WAAU;MACT,MAAMA,MAAA,WAAA;;KAIA,CAAA,QAAA,WAAW,QAAA,OADpBK,WAGE,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAAA,mBAAA,IAAA,IAAA;KAEM,MAAM,WADdT,UAAA,GAAAU,mBAMO,QAAA;;MAJJ,OAAKH,eAAEH,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;MAChB,WAAQ;KAERK,GAAAA,CAAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAEVA,WAAsB,KAAA,QAAA,QAAA"}
+{"version":3,"file":"RuiButton.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useSlots","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_unref","_withCtx","RuiProgress","_normalizeClass","_createCommentVNode","_renderSlot","_createElementBlock"],"sources":["../../../../src/components/buttons/button/RuiButton.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { ButtonGroupKey } from '@/components/buttons/button-group/button-group-context';\nimport { type ButtonCollapseBreakpoint, type ButtonSize, ButtonVariant, getButtonSpinnerSize } from '@/components/buttons/button/button-props';\nimport { buttonStyles } from '@/components/buttons/button/button-styles';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { cn } from '@/utils/tv';\n\nexport interface Props<T = undefined> {\n  disabled?: boolean;\n  loading?: boolean;\n  color?: ContextColorsType;\n  rounded?: boolean;\n  variant?: ButtonVariant;\n  icon?: boolean;\n  active?: boolean;\n  size?: ButtonSize;\n  tag?: 'button' | 'a';\n  type?: 'button' | 'submit';\n  modelValue?: T;\n  hideFocusIndicator?: boolean;\n  /**\n   * Below this breakpoint the button shows only its icons: the label becomes screen-reader text,\n   * so it still names the button, and the button takes its icon-only padding. Give it a `prepend`\n   * or `append` icon. Ignored on an `icon` button.\n   */\n  collapseBelow?: ButtonCollapseBreakpoint;\n}\n\ndefineOptions({\n  name: 'RuiButton',\n  inheritAttrs: false,\n});\n\nconst {\n  disabled = false,\n  loading = false,\n  color = undefined,\n  rounded = false,\n  variant = ButtonVariant.default,\n  icon = false,\n  active = false,\n  size = undefined,\n  tag = 'button',\n  type = 'button',\n  modelValue = undefined,\n  hideFocusIndicator = false,\n  collapseBelow = undefined,\n} = defineProps<Props<T>>();\n\nconst emit = defineEmits<{\n  'update:model-value': [value?: T];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n  default?: () => any;\n}>();\n\n// a RuiButtonGroup anywhere above, unless an overlay's content sits in between\nconst group = inject(ButtonGroupKey, undefined);\n\nconst btnValue = computed<T | undefined>(() => modelValue);\n\nconst resolvedVariant = computed<ButtonVariant>(() => group?.variant() ?? variant);\n\nconst resolvedSize = computed<ButtonSize | undefined>(() => size ?? group?.size());\n\nconst resolvedDisabled = computed<boolean>(() => disabled || (group?.disabled() ?? false));\n\n// a grouped button is pressed when the group's model holds its value; it needs one to take part\nconst resolvedActive = computed<boolean>(() => active || (!!group && modelValue !== undefined && group.isActive(modelValue)));\n\nconst resolvedColor = computed<ContextColorsType | undefined>(() => group?.color(get(resolvedActive)) ?? color);\n\nconst spinnerSize = computed<number>(() => getButtonSpinnerSize(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof buttonStyles>>(() => buttonStyles({\n  variant: get(resolvedVariant),\n  color: get(resolvedColor) ?? 'grey',\n  size: get(resolvedSize),\n  rounded,\n  icon,\n  active: get(resolvedActive),\n  loading,\n  hideFocusIndicator,\n  collapseBelow: icon ? undefined : collapseBelow,\n}));\n\nfunction onClick(): void {\n  emit('update:model-value', get(btnValue));\n  if (group && modelValue !== undefined)\n    group.toggle(modelValue);\n}\n</script>\n\n<template>\n  <Component\n    :is=\"tag\"\n    :class=\"ui.root({ class: cn([group?.itemClass(), $attrs.class]) })\"\n    :disabled=\"resolvedDisabled || loading\"\n    :type=\"tag === 'button' ? type : undefined\"\n    :data-variant=\"resolvedVariant\"\n    :data-size=\"resolvedSize ?? 'md'\"\n    :data-color=\"resolvedColor\"\n    :data-active=\"resolvedActive || undefined\"\n    :aria-busy=\"loading || undefined\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"onClick()\"\n  >\n    <!-- the button's aria-busy announces the wait, so the spinner stays out of the accessibility tree -->\n    <RuiProgress\n      v-if=\"loading\"\n      circular\n      data-spinner\n      aria-hidden=\"true\"\n      :class=\"ui.spinner()\"\n      variant=\"indeterminate\"\n      thickness=\"2\"\n      :size=\"spinnerSize\"\n    />\n    <!-- while loading, the spinner stands in for the prepend icon; the label stays -->\n    <slot\n      v-if=\"!loading || icon\"\n      name=\"prepend\"\n    />\n    <span\n      v-if=\"slots.default\"\n      :class=\"ui.label()\"\n      data-id=\"btn-label\"\n    >\n      <slot />\n    </span>\n    <slot name=\"append\" />\n  </Component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkDA,MAAM,OAAO;EAIb,MAAM,QAAQC,SAAA;EAOd,MAAM,QAAQ,OAAO,gBAAgB,KAAA,CAAS;EAE9C,MAAM,WAAW,eAA8B,QAAA,UAAU;EAEzD,MAAM,kBAAkB,eAA8B,OAAO,QAAQ,KAAK,QAAA,OAAO;EAEjF,MAAM,eAAe,eAAuC,QAAA,QAAQ,OAAO,KAAK,CAAC;EAEjF,MAAM,mBAAmB,eAAwB,QAAA,aAAa,OAAO,SAAS,KAAK,MAAM;EAGzF,MAAM,iBAAiB,eAAwB,QAAA,UAAW,CAAC,CAAC,SAAS,QAAA,eAAe,KAAA,KAAa,MAAM,SAAS,QAAA,UAAU,CAAE;EAE5H,MAAM,gBAAgB,eAA8C,OAAO,MAAM,IAAI,cAAc,CAAC,KAAK,QAAA,KAAK;EAE9G,MAAM,cAAc,eAAuB,qBAAqB,IAAI,YAAY,CAAC,CAAC;EAElF,MAAM,KAAK,eAAgD,aAAa;GACtE,SAAS,IAAI,eAAe;GAC5B,OAAO,IAAI,aAAa,KAAK;GAC7B,MAAM,IAAI,YAAY;GACtB,SAAM,QAAA;GACN,MAAG,QAAA;GACH,QAAQ,IAAI,cAAc;GAC1B,SAAM,QAAA;GACN,oBAAiB,QAAA;GACjB,eAAe,QAAA,OAAO,KAAA,IAAY,QAAA;EACpC,CAAC,CAAC;EAEF,SAAS,UAAgB;GACvB,KAAK,sBAAsB,IAAI,QAAQ,CAAC;GACxC,IAAI,SAAS,QAAA,eAAe,KAAA,GAC1B,MAAM,OAAO,QAAA,UAAU;EAC3B;;GAIE,OAAAC,UAAA,GAAAC,YAqCYC,wBApCL,QAAA,GAAG,GADVC,WAqCY;IAnCT,OAAOC,MAAA,EAAA,CAAE,CAAC,KAAI,EAAA,OAAUA,MAAA,EAAA,CAAE,CAAA,CAAEA,MAAA,KAAA,CAAK,EAAE,UAAS,GAAIN,KAAAA,OAAO,KAAK,CAAA,EAAA,CAAA;IAC5D,UAAUM,MAAA,gBAAA,KAAoB,QAAA;IAC9B,MAAM,QAAA,QAAG,WAAgB,QAAA,OAAO,KAAA;IAChC,gBAAcA,MAAA,eAAA;IACd,aAAWA,MAAA,YAAA,KAAY;IACvB,cAAYA,MAAA,aAAA;IACZ,eAAaA,MAAA,cAAA,KAAkB,KAAA;IAC/B,aAAW,QAAA,WAAW,KAAA;GACVN,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,GAAA,EACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAO,GAAA,CAAA,GAAA;IAGf,SAAAO,cASE;KARM,QAAA,WADRL,UAAA,GAAAC,YASEK,qBAAA;;MAPA,UAAA;MACA,gBAAA;MACA,eAAY;MACX,OAAKC,eAAEH,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;MAClB,SAAQ;MACR,WAAU;MACT,MAAMA,MAAA,WAAA;;KAIA,CAAA,QAAA,WAAW,QAAA,OADpBK,WAGE,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAAA,mBAAA,IAAA,IAAA;KAEM,MAAM,WADdT,UAAA,GAAAU,mBAMO,QAAA;;MAJJ,OAAKH,eAAEH,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;MAChB,WAAQ;KAERK,GAAAA,CAAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAEVA,WAAsB,KAAA,QAAA,QAAA"}

package/dist/components/buttons/button/button-props.d.ts

@@ -4,6 +4,7 @@ export declare const ButtonVariant: {
     readonly text: "text";
     readonly fab: "fab";
     readonly list: "list";
+    readonly link: "link";
 };
 export type ButtonVariant = (typeof ButtonVariant)[keyof typeof ButtonVariant];
 export declare const ButtonSize: {
@@ -14,4 +15,6 @@ export declare const ButtonSize: {
     readonly '2xl': "2xl";
 };
 export type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];
+/** The Tailwind breakpoint below which `collapseBelow` hides a button's label. */
+export type ButtonCollapseBreakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 export declare function getButtonSpinnerSize(size?: ButtonSize): number;

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

@@ -4,7 +4,8 @@ var ButtonVariant = {
 	outlined: "outlined",
 	text: "text",
 	fab: "fab",
-	list: "list"
+	list: "list",
+	link: "link"
 };
 var SPINNER_SIZES = {
 	"xs": 12,

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

@@ -1 +1 @@
-{"version":3,"file":"button-props.js","names":[],"sources":["../../../../src/components/buttons/button/button-props.ts"],"sourcesContent":["export const ButtonVariant = {\n  default: 'default',\n  outlined: 'outlined',\n  text: 'text',\n  fab: 'fab',\n  list: 'list',\n} as const;\n\nexport type ButtonVariant = (typeof ButtonVariant)[keyof typeof ButtonVariant];\n\nexport const ButtonSize = {\n  'xs': 'xs',\n  'sm': 'sm',\n  'lg': 'lg',\n  'xl': 'xl',\n  '2xl': '2xl',\n} as const;\n\nexport type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];\n\n// the icon size plus 2px: the spinner takes the icon's place, a thin ring reading lighter than a glyph\nconst SPINNER_SIZES: Record<string, number> = { 'xs': 12, 'sm': 16, 'lg': 22, 'xl': 24, '2xl': 24 };\nconst DEFAULT_SPINNER_SIZE = 18;\n\nexport function getButtonSpinnerSize(size?: ButtonSize): number {\n  return (size && SPINNER_SIZES[size]) || DEFAULT_SPINNER_SIZE;\n}\n"],"mappings":";AAAA,IAAa,gBAAgB;CAC3B,SAAS;CACT,UAAU;CACV,MAAM;CACN,KAAK;CACL,MAAM;AACR;AAeA,IAAM,gBAAwC;CAAE,MAAM;CAAI,MAAM;CAAI,MAAM;CAAI,MAAM;CAAI,OAAO;AAAG;AAClG,IAAM,uBAAuB;AAE7B,SAAgB,qBAAqB,MAA2B;CAC9D,OAAQ,QAAQ,cAAc,SAAU;AAC1C"}
+{"version":3,"file":"button-props.js","names":[],"sources":["../../../../src/components/buttons/button/button-props.ts"],"sourcesContent":["export const ButtonVariant = {\n  default: 'default',\n  outlined: 'outlined',\n  text: 'text',\n  fab: 'fab',\n  list: 'list',\n  link: 'link',\n} as const;\n\nexport type ButtonVariant = (typeof ButtonVariant)[keyof typeof ButtonVariant];\n\nexport const ButtonSize = {\n  'xs': 'xs',\n  'sm': 'sm',\n  'lg': 'lg',\n  'xl': 'xl',\n  '2xl': '2xl',\n} as const;\n\nexport type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];\n\n/** The Tailwind breakpoint below which `collapseBelow` hides a button's label. */\nexport type ButtonCollapseBreakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n// the icon size plus 2px: the spinner takes the icon's place, a thin ring reading lighter than a glyph\nconst SPINNER_SIZES: Record<string, number> = { 'xs': 12, 'sm': 16, 'lg': 22, 'xl': 24, '2xl': 24 };\nconst DEFAULT_SPINNER_SIZE = 18;\n\nexport function getButtonSpinnerSize(size?: ButtonSize): number {\n  return (size && SPINNER_SIZES[size]) || DEFAULT_SPINNER_SIZE;\n}\n"],"mappings":";AAAA,IAAa,gBAAgB;CAC3B,SAAS;CACT,UAAU;CACV,MAAM;CACN,KAAK;CACL,MAAM;CACN,MAAM;AACR;AAkBA,IAAM,gBAAwC;CAAE,MAAM;CAAI,MAAM;CAAI,MAAM;CAAI,MAAM;CAAI,OAAO;AAAG;AAClG,IAAM,uBAAuB;AAE7B,SAAgB,qBAAqB,MAA2B;CAC9D,OAAQ,QAAQ,cAAc,SAAU;AAC1C"}

package/dist/components/buttons/button/button-styles.d.ts

@@ -50,6 +50,9 @@ export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
             root: string;
             label: string;
         };
+        link: {
+            root: string;
+        };
     };
     size: {
         xs: {
@@ -117,6 +120,28 @@ export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
+    collapseBelow: {
+        sm: {
+            root: string;
+            label: string;
+        };
+        md: {
+            root: string;
+            label: string;
+        };
+        lg: {
+            root: string;
+            label: string;
+        };
+        xl: {
+            root: string;
+            label: string;
+        };
+        '2xl': {
+            root: string;
+            label: string;
+        };
+    };
 }, {
     root: string;
     label: string;
@@ -135,6 +160,9 @@ export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
             root: string;
             label: string;
         };
+        link: {
+            root: string;
+        };
     };
     size: {
         xs: {
@@ -202,6 +230,28 @@ export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
+    collapseBelow: {
+        sm: {
+            root: string;
+            label: string;
+        };
+        md: {
+            root: string;
+            label: string;
+        };
+        lg: {
+            root: string;
+            label: string;
+        };
+        xl: {
+            root: string;
+            label: string;
+        };
+        '2xl': {
+            root: string;
+            label: string;
+        };
+    };
 }, {
     root: string;
     label: string;
@@ -220,6 +270,9 @@ export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
             root: string;
             label: string;
         };
+        link: {
+            root: string;
+        };
     };
     size: {
         xs: {
@@ -287,6 +340,28 @@ export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
+    collapseBelow: {
+        sm: {
+            root: string;
+            label: string;
+        };
+        md: {
+            root: string;
+            label: string;
+        };
+        lg: {
+            root: string;
+            label: string;
+        };
+        xl: {
+            root: string;
+            label: string;
+        };
+        '2xl': {
+            root: string;
+            label: string;
+        };
+    };
 }, {
     root: string;
     label: string;

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

@@ -60,7 +60,8 @@ var buttonStyles = tv({
 			list: {
 				root: "p-3 px-3 rounded-rui-sm w-full justify-start text-left",
 				label: "w-full leading-4"
-			}
+			},
+			link: { root: "inline-flex align-baseline gap-x-1 underline-offset-2 not-disabled:hover:underline" }
 		},
 		size: {
 			"xs": { root: "px-2 py-[0.125rem] text-[.75rem] leading-4 ![--rui-icon-size:0.75rem]" },
@@ -91,7 +92,29 @@ var buttonStyles = tv({
 			true: { root: "relative !cursor-progress" },
 			false: {}
 		},
-		hideFocusIndicator: { true: { root: "focus-visible:!outline-hidden" } }
+		hideFocusIndicator: { true: { root: "focus-visible:!outline-hidden" } },
+		collapseBelow: {
+			"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"
+			},
+			"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"
+			},
+			"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"
+			},
+			"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"
+			},
+			"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"
+			}
+		}
 	},
 	compoundVariants: [
 		{
@@ -125,7 +148,7 @@ var buttonStyles = tv({
 		},
 		{
 			loading: false,
-			variant: "text",
+			variant: ["text", "link"],
 			class: { root: "disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent" }
 		},
 		{
@@ -165,7 +188,7 @@ var buttonStyles = tv({
 		{
 			color: "grey",
 			variant: "text",
-			class: { root: "text-rui-text-secondary" }
+			class: { root: "text-rui-text-secondary dark:text-rui-text-secondary" }
 		},
 		{
 			color: "primary",
@@ -425,6 +448,114 @@ var buttonStyles = tv({
 			icon: true,
 			size: "sm",
 			class: { root: "px-2 py-2" }
+		},
+		{
+			collapseBelow: [
+				"sm",
+				"md",
+				"lg",
+				"xl",
+				"2xl"
+			],
+			class: { root: "[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.25rem]" }
+		},
+		{
+			collapseBelow: [
+				"sm",
+				"md",
+				"lg",
+				"xl",
+				"2xl"
+			],
+			size: "xs",
+			class: { root: "[--rui-btn-collapsed-p:0.1875rem] [--rui-btn-collapsed-icon:0.875rem]" }
+		},
+		{
+			collapseBelow: [
+				"sm",
+				"md",
+				"lg",
+				"xl",
+				"2xl"
+			],
+			size: "sm",
+			class: { root: "[--rui-btn-collapsed-p:0.25rem] [--rui-btn-collapsed-icon:1.25rem]" }
+		},
+		{
+			collapseBelow: [
+				"sm",
+				"md",
+				"lg",
+				"xl",
+				"2xl"
+			],
+			size: "lg",
+			class: { root: "[--rui-btn-collapsed-p:0.375rem] [--rui-btn-collapsed-icon:1.5rem]" }
+		},
+		{
+			collapseBelow: [
+				"sm",
+				"md",
+				"lg",
+				"xl",
+				"2xl"
+			],
+			size: "xl",
+			class: { root: "[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.5rem]" }
+		},
+		{
+			collapseBelow: [
+				"sm",
+				"md",
+				"lg",
+				"xl",
+				"2xl"
+			],
+			size: "2xl",
+			class: { root: "[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.75rem]" }
+		},
+		{
+			variant: "link",
+			class: { root: [
+				"p-0 text-[length:inherit] leading-[inherit] ![--rui-icon-size:1em]",
+				"bg-transparent hover:bg-transparent active:bg-transparent",
+				"dark:bg-transparent dark:hover:bg-transparent dark:active:bg-transparent"
+			].join(" ") }
+		},
+		{
+			color: "grey",
+			variant: "link",
+			class: { root: "text-rui-text dark:text-rui-text" }
+		},
+		{
+			color: "primary",
+			variant: "link",
+			class: { root: "text-rui-primary dark:text-rui-primary-lighter" }
+		},
+		{
+			color: "secondary",
+			variant: "link",
+			class: { root: "text-rui-secondary dark:text-rui-secondary-lighter" }
+		},
+		{
+			color: "error",
+			variant: "link",
+			class: { root: "text-rui-error dark:text-rui-error-lighter" }
+		},
+		{
+			color: "warning",
+			variant: "link",
+			class: { root: "text-rui-warning dark:text-rui-warning" }
+		},
+		{
+			color: "info",
+			variant: "link",
+			class: { root: "text-rui-info dark:text-rui-info" }
+		},
+		{
+			color: "success",
+			variant: "link",
+			class: { root: "text-rui-success dark:text-rui-success" }
 		}
 	],
 	compoundSlots: [