@nextcloud/vue 9.3.3 → 9.5.0

package/dist/chunks/NcFormBox-BYjllt0m.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcFormBox-BYjllt0m.mjs","sources":["../../src/components/NcFormBox/NcFormBox.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { provide, useCssModule } from 'vue'\nimport { NC_FORM_BOX_CONTEXT_KEY } from './useNcFormBox.ts'\n\ndefineProps<{\n\t/**\n\t * Display the group as a row instead of a column\n\t */\n\trow?: boolean\n}>()\n\ndefineSlots<{\n\t/**\n\t * Grouped content\n\t */\n\tdefault?: Slot<{\n\t\t/**\n\t\t * Class to add on a custom item to apply the border radius effect\n\t\t */\n\t\titemClass: string\n\t}>\n}>()\n\nconst style = useCssModule()\n\nprovide(NC_FORM_BOX_CONTEXT_KEY, {\n\tisInFormBox: true,\n\tformBoxItemClass: style.ncFormBox__item,\n})\n</script>\n\n<template>\n\t<div :class=\"[$style.ncFormBox, row ? $style.ncFormBox_row : $style.ncFormBox_col]\">\n\t\t<slot :itemClass=\"$style.ncFormBox__item\" />\n\t</div>\n</template>\n\n<style lang=\"scss\" module>\n.ncFormBox {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(1 * var(--default-grid-baseline));\n\n\t&.ncFormBox_row {\n\t\tflex-direction: row;\n\t}\n}\n\n.ncFormBox__item {\n\tborder-radius: var(--border-radius-small) !important;\n}\n\n.ncFormBox_col {\n\tflex-direction: column;\n\n\t.ncFormBox__item {\n\t\t&:first-child {\n\t\t\tborder-start-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-start-end-radius: var(--border-radius-element) !important;\n\t\t}\n\n\t\t&:last-child {\n\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t}\n\t}\n}\n\n.ncFormBox_row {\n\tflex-direction: row;\n\n\t.ncFormBox__item {\n\t\tflex: 1 1;\n\n\t\t&:first-child {\n\t\t\tborder-start-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t}\n\n\t\t&:last-child {\n\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t\tborder-start-end-radius: var(--border-radius-element) !important;\n\t\t}\n\t}\n}\n</style>\n\n<docs>\n### General\n\nA container of supported components with a small gap and rounded corners forming a solid group.\n\nCurrently supported components:\n- **`<NcFormBoxButton>`**: an action button/link with an optional description specially for the `<NcFormBox>` context\n- **`<NcFormBoxCopyButton>`**: a special case of a button to copy a text to the clipboard\n- **`<NcFormBoxSwitch>`**: a toggle switch replacing `<NcCheckboxRadioSwitch type=\"switch\">` in a box\n- **`<NcButton>`**: a general button in case there is a kind of primary action within a box\n\n**Note**: if the group has a semantic meaning, consider wrapping the `<NcFormBox>` into `<NcFormGroup>` component with a label.\n\n```vue\n<script>\nimport { mdiArrowRight, mdiFolderOpenOutline, mdiPlus } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn { mdiArrowRight, mdiFolderOpenOutline, mdiPlus }\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\ttext: 'Text',\n\t\t\tswitchValue: false,\n\t\t}\n\t},\n}\n</script>\n\n<template>\n\t<div style=\"display: flex; flex-direction: column; gap: calc(6 * var(--default-grid-baseline));\">\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxCopyButton label=\"WebDAV URL\" value=\"https://cloud.example.tld/remote.php/dav/files/user\" />\n\t\t</NcFormBox>\n\n\t\t<NcFormGroup label=\"Account settings\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxButton label=\"user@example.com\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiArrowRight\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t\t<NcFormBoxButton label=\"sales@example.com\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiArrowRight\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t\t<NcButton wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiPlus\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tAdd mail account\n\t\t\t\t</NcButton>\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormGroup label=\"Device settings\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Turn camera and microphone off by default\" />\n\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Blur camera background by default\"  />\n\t\t\t\t<NcFormBoxSwitch\n\t\t\t\t\tv-model=\"switchValue\"\n\t\t\t\t\tlabel=\"Skip device preview before joining a call\"\n\t\t\t\t\tdescription=\"Will always show if recording consent is required\" />\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxButton\n\t\t\t\tlabel=\"Attachments folder\"\n\t\t\t\tdescription=\"/Talk\"\n\t\t\t\tinverted-accent>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiFolderOpenOutline\" inline />\n\t\t\t\t</template>\n\t\t\t</NcFormBoxButton>\n\t\t</NcFormBox>\n\t</div>\n</template>\n```\n\n### Advanced usage\n\nScoped slot prop `itemClass` can be used to apply the same border radius effect to custom components.\nCreate an issue if you need a composable to inject the class into a custom component.\n\n```vue\n<template>\n\t<NcFormBox v-slot=\"{ itemClass }\">\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tFirst native button\n\t\t</button>\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tSecond native button\n\t\t</button>\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tThird native button\n\t\t</button>\n\t</NcFormBox>\n</template>\n\n<style scoped>\n.native-button {\n\t/* Remove default server margin around a native button */\n\tmargin: 0 !important;\n}\n</style>\n```\n</docs>\n"],"names":["_createElementBlock","_normalizeClass","$style","row","_renderSlot"],"mappings":";;;;;;;;;AA8BA,UAAM,QAAQ,aAAA;AAEd,YAAQ,yBAAyB;AAAA,MAChC,aAAa;AAAA,MACb,kBAAkB,MAAM;AAAA,IAAA,CACxB;;0BAIAA,mBAEM,OAAA;AAAA,QAFA,OAAKC,eAAA,CAAGC,KAAAA,OAAO,WAAWC,KAAAA,MAAMD,KAAAA,OAAO,gBAAgBA,KAAAA,OAAO,aAAa,CAAA;AAAA,MAAA;QAChFE,WAA4C,KAAA,QAAA,WAAA;AAAA,UAArC,WAAWF,KAAAA,OAAO;AAAA,QAAA;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcFormBoxButton-DvMw5yUf.mjs → NcFormBoxButton-RDIKiZIH.mjs}

@@ -1,7 +1,7 @@
-import '../assets/NcFormBoxButton-C6EvdLK4.css';
+import '../assets/NcFormBoxButton-BWfU7d2r.css';
 import { reactive, inject, computed, defineComponent, toRef, createBlock, openBlock, mergeProps, unref, createSlots, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
 import { s as mdiOpenInNew, t as mdiArrowTopRight } from "./mdi-CpchYUUV.mjs";
-import { N as NcFormBoxItem } from "./NcFormBoxItem-vnU0KmUL.mjs";
+import { N as NcFormBoxItem } from "./NcFormBoxItem-BAAPOa6z.mjs";
 import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BvLanNaW.mjs";
 import { routerKey } from "vue-router";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
@@ -85,12 +85,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(NcFormBoxItem, mergeProps({
         tag: unref(tag),
-        "item-classes": [
+        itemClasses: [
           "button-vue",
           /* Reset server's global HTML button styles */
           _ctx.$style.formBoxButton
         ],
-        "inverted-accent": _ctx.invertedAccent
+        invertedAccent: _ctx.invertedAccent
       }, unref(attrs), {
         tabindex: "0",
         onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
@@ -126,13 +126,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           key: "2"
         } : void 0
-      ]), 1040, ["tag", "item-classes", "inverted-accent"]);
+      ]), 1040, ["tag", "itemClasses", "invertedAccent"]);
     };
   }
 });
-const formBoxButton = "_formBoxButton_15jyc_20";
+const formBoxButton = "_formBoxButton_qQIni";
 const style0 = {
-  "material-design-icon": "_material-design-icon_15jyc_12",
+  "material-design-icon": "_material-design-icon_RoXMm",
   formBoxButton
 };
 const cssModules = {
@@ -142,4 +142,4 @@ const NcFormBoxButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules",
 export {
   NcFormBoxButton as N
 };
-//# sourceMappingURL=NcFormBoxButton-DvMw5yUf.mjs.map
+//# sourceMappingURL=NcFormBoxButton-RDIKiZIH.mjs.map

package/dist/chunks/NcFormBoxButton-RDIKiZIH.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcFormBoxButton-RDIKiZIH.mjs","sources":["../../src/composables/useButtonLink.ts","../../src/components/NcFormBoxButton/NcFormBoxButton.vue"],"sourcesContent":["/*!\n * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport type { AnchorHTMLAttributes, ButtonHTMLAttributes, MaybeRef } from 'vue'\nimport type { RouteLocationRaw } from 'vue-router'\n\nimport { computed, inject, reactive } from 'vue'\nimport { routerKey } from 'vue-router'\n\ntype ButtonLinkProps = {\n\t// Required - general link props\n\n\t/**\n\t * RouterLink's to props and a trigger to use RouterLink.\n\t * Note: This takes precedence over the href attribute.\n\t */\n\tto: MaybeRef<RouteLocationRaw | undefined>\n\t/**\n\t * HyperLink href attribute and a trigger to use <a> hyperlink.\n\t */\n\thref: MaybeRef<string | undefined>\n\t/**\n\t * Define additional attributes, based on the tag\n\t */\n\tadditionalAttrs?: (tag: 'RouterLink' | 'a' | 'button') => object | undefined\n\n\t// RouterLink props\n\n\t/**\n\t * RouterLink's activeClass prop\n\t */\n\tactiveClass?: MaybeRef<string | undefined>\n\n\t// Hyperlink\n\n\t/**\n\t * <a> hyperlink's target attribute\n\t */\n\ttarget?: MaybeRef<AnchorHTMLAttributes['target'] | undefined>\n\t/**\n\t * <a> hyperlink's download attribute\n\t */\n\tdownload?: MaybeRef<string | boolean | undefined>\n\n\t// Button\n\n\t/**\n\t * <button> element's type attribute, but default to \"button\" instead of \"submit\"\n\t */\n\ttype?: MaybeRef<ButtonHTMLAttributes['type'] | undefined>\n\t/**\n\t * <button> element's disabled attribute\n\t */\n\tdisabled?: MaybeRef<boolean | undefined>\n}\n\n/**\n * Reusable implementation of an interactive button-like element that can be a link or a button\n *\n * @param options - Props to determine the button/link behavior. Can be a reactive object, or an object with nested refs, or mixed.\n */\nexport function useButtonLink(options: ButtonLinkProps) {\n\t// Resolve all MaybeRef-s values and maybe reactive object via unwrapping\n\tconst props = reactive(options)\n\n\tconst hasVueRouterContext = inject(routerKey, null) !== null\n\n\t/**\n\t * Tag name to be used\n\t */\n\tconst tag = computed(() => {\n\t\t// TODO: should we warn if props.to is provided but there is no vue-router?\n\t\tif (hasVueRouterContext && props.to) {\n\t\t\t// Note: RouterLink is used as globally registered component (by name) and not imported intentionally\n\t\t\t// to use injected component from the app and not bundle it to the button\n\t\t\treturn 'RouterLink'\n\t\t} else if (props.href) {\n\t\t\treturn 'a'\n\t\t} else {\n\t\t\treturn 'button'\n\t\t}\n\t})\n\n\tconst isLink = computed(() => tag.value === 'RouterLink' || tag.value === 'a')\n\tconst isHyperLink = computed(() => tag.value === 'a')\n\tconst isRouterLink = computed(() => tag.value === 'RouterLink')\n\tconst isButton = computed(() => tag.value === 'button')\n\n\tconst attrs = computed(() => {\n\t\tif (tag.value === 'RouterLink') {\n\t\t\treturn {\n\t\t\t\tto: props.to,\n\t\t\t\tactiveClass: 'active',\n\t\t\t\t...(props.additionalAttrs?.('RouterLink') ?? {}),\n\t\t\t}\n\t\t} else if (tag.value === 'a') {\n\t\t\treturn {\n\t\t\t\thref: props.href,\n\t\t\t\ttarget: props.target,\n\t\t\t\tdownload: props.download || undefined,\n\t\t\t\trel: 'nofollow noreferrer noopener',\n\t\t\t\t...(props.additionalAttrs?.('a') ?? {}),\n\t\t\t}\n\t\t} else if (tag.value === 'button') {\n\t\t\treturn {\n\t\t\t\ttype: props.type || 'button',\n\t\t\t\tdisabled: props.disabled,\n\t\t\t\t...(props.additionalAttrs?.('button') ?? {}),\n\t\t\t}\n\t\t}\n\t})\n\n\treturn {\n\t\ttag,\n\t\tisLink,\n\t\tisHyperLink,\n\t\tisRouterLink,\n\t\tisButton,\n\t\tattrs,\n\t}\n}\n","<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { AnchorHTMLAttributes, Slot } from 'vue'\nimport type { RouteLocationRaw } from 'vue-router'\n\nimport { mdiArrowTopRight, mdiOpenInNew } from '@mdi/js'\nimport { computed, toRef } from 'vue'\nimport NcFormBoxItem from '../NcFormBox/NcFormBoxItem.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { useButtonLink } from '../../composables/useButtonLink.ts'\n\nconst {\n\tlabel = undefined,\n\tdescription = undefined,\n\tinvertedAccent = false,\n\tto = undefined,\n\thref = undefined,\n\ttarget = undefined, // TODO: should it be _blank by default?\n\tdisabled = false,\n} = defineProps<{\n\t/** Main label */\n\tlabel?: string\n\t/** Optional description below the label, also used for the aria-describedby */\n\tdescription?: string\n\t/** Accent on the description instead of the label (see docs) */\n\tinvertedAccent?: boolean\n\t/** RouterLink's `to` prop; when provided, renders as `<RouterLink>` (takes precedence over the `href` prop) */\n\tto?: RouteLocationRaw\n\t/** Hyperlink `href` attribute; when provided, renders as `<a>` */\n\thref?: string\n\t/** Hyperlink's target attribute */\n\ttarget?: AnchorHTMLAttributes['target']\n\t/** Button's disabled attribute, not applicable to links */\n\tdisabled?: boolean\n}>()\n\ndefineEmits<{\n\t/** Native click event */\n\tclick: [event: MouseEvent]\n}>()\n\ndefineSlots<{\n\t/** Custom label content */\n\tdefault?: Slot\n\t/** Custom description content */\n\tdescription?: Slot\n\t/** Required icon (links have a default icon) */\n\ticon?: Slot // TODO: should the default link icon only be used for _blank links?\n}>()\n\nconst { tag, attrs, isLink } = useButtonLink({\n\tto: toRef(() => to),\n\thref: toRef(() => href),\n\ttarget: toRef(() => target),\n\tdisabled: toRef(() => disabled),\n})\n\nconst icon = computed(() => {\n\tif (isLink.value) {\n\t\treturn target === '_blank' ? mdiOpenInNew : mdiArrowTopRight\n\t}\n\treturn undefined\n})\n</script>\n\n<template>\n\t<NcFormBoxItem\n\t\t:tag\n\t\t:itemClasses=\"[\n\t\t\t'button-vue', /* Reset server's global HTML button styles */\n\t\t\t$style.formBoxButton,\n\t\t]\"\n\t\t:invertedAccent\n\t\tv-bind=\"attrs\"\n\t\ttabindex=\"0\"\n\t\t@click=\"$emit('click', $event)\">\n\t\t<template v-if=\"$slots.default || label\" #default>\n\t\t\t<slot>\n\t\t\t\t{{ label }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template v-if=\"$slots.description || description\" #description>\n\t\t\t<slot name=\"description\">\n\t\t\t\t{{ description }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template v-if=\"$slots.icon || icon\" #icon>\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<NcIconSvgWrapper v-if=\"icon\" :path=\"icon\" inline />\n\t\t\t</slot>\n\t\t</template>\n\t</NcFormBoxItem>\n</template>\n\n<style lang=\"scss\" module>\n.formBoxButton {\n\t/* Reset default HTML button styles */\n\tbackground: unset;\n\tborder: none;\n\tcolor: inherit;\n\tfont-size: inherit;\n\tfont-weight: inherit;\n\ttext-decoration: none;\n\ttext-align: inherit;\n\tline-height: inherit;\n\tpadding: 0;\n\tmargin: 0;\n\toutline: none;\n}\n</style>\n\n<docs>\n### General\n\nAn interactive button-like item within `<NcFormBox>`. It can be a button or a native link/router link if `to` or `href` props are provided.\n\nLike other form box items, it has a label and an optional description.\n\n```vue\n<script>\nimport { mdiContentCopy, mdiInformationOutline } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiContentCopy,\n\t\t\tmdiInformationOutline,\n\t\t}\n\t},\n}\n</script>\n\n<template>\n\t<NcFormBox>\n\t\t<NcFormBoxButton\n\t\t\tlabel=\"Nextcloud\"\n\t\t\thref=\"https://nextcloud.com\"\n\t\t\ttarget=\"_blank\" />\n\n\t\t<NcFormBoxButton\n\t\t\thref=\"https://nextcloud-vue-components.netlify.app\">\n\t\t\t<code>@nextcloud/vue</code> documentation\n\t\t</NcFormBoxButton>\n\n\t\t<NcFormBoxButton\n\t\t\tlabel=\"About\"\n\t\t\tdescription=\"Installation details\"\n\t\t\thref=\"https://nextcloud.com\"\n\t\t\ttarget=\"_blank\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiInformationOutline\" inline />\n\t\t\t</template>\n\t\t</NcFormBoxButton>\n\n\t\t<NcFormBoxButton\n\t\t\tlabel=\"Public signing key\">\n\t\t\t<template #description>\n\t\t\t\t<code>SSBkb24ndCBrbm93IHdoeSB5b3UgZGVjb2RlZCB0aGlzIHZhbHVlDQrgvLwg44GkIOKXlV/il5Ug4Ly944Gk</code>\n\t\t\t</template>\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiContentCopy\" inline />\n\t\t\t</template>\n\t\t</NcFormBoxButton>\n\t</NcFormBox>\n</template>\n```\n\n### Inverted accent\n\nSometimes the description is more important than the label. In such cases use `inverted-accent` prop.\n\nFor example:\n- **Steps:** the description of the step is more important than the step number\n- **Copy button:** the value being copied is more important than the value label\n- **Folder picker:** the selected folder path is more important than the input label\n\n```vue\n<script>\nimport { mdiContentCopy, mdiDomain, mdiFolderOpenOutline } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn { mdiContentCopy, mdiDomain, mdiFolderOpenOutline }\n\t},\n}\n</script>\n\n<template>\n\t<div style=\"display: flex; flex-direction: column; gap: calc(4 * var(--default-grid-baseline));\">\n\t\t<NcFormGroup label=\"Mailvelope\" description=\"A browser extension that enables easy OpenPGP encryption and decryption of emails\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxButton\n\t\t\t\t\tlabel=\"Step 1\"\n\t\t\t\t\tdescription=\"Install the browser extension\"\n\t\t\t\t\thref=\"https://www.mailvelope.com/\"\n\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\tinverted-accent />\n\t\t\t\t<NcFormBoxButton\n\t\t\t\t\tlabel=\"Step 2\"\n\t\t\t\t\tdescription=\"Enable the current domain\"\n\t\t\t\t\tinverted-accent>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDomain\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormGroup label=\"CalDAV\" description=\"Access Nextcloud calendars from other apps and devices\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxButton\n\t\t\t\t\tlabel=\"CalDAV URL\"\n\t\t\t\t\tdescription=\"https://cloud.example.com/remote.php/dav/\"\n\t\t\t\t\tinverted-accent>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiContentCopy\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t\t<NcFormBoxButton\n\t\t\t\t\tlabel=\"Server Address for iOS and macOS\"\n\t\t\t\t\tdescription=\"https://cloud.example.com/remote.php/dav/principals/users/user/\"\n\t\t\t\t\tinverted-accent>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiContentCopy\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormGroup label=\"Files\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxButton\n\t\t\t\t\tlabel=\"Attachments folder\"\n\t\t\t\t\tdescription=\"/Talk\"\n\t\t\t\t\tinverted-accent>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiFolderOpenOutline\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\t</div>\n</template>\n```\n\n### Requirements\n\n- Label is required (`label` prop or the default slot)\n- Icon is required unless there is a default icon (links)\n\n```vue\n<template>\n\t<NcFormBox>\n\t\t<NcFormBoxButton description=\"No label example\">\n\t\t\t<template #icon>\n\t\t\t\t✅\n\t\t\t</template>\n\t\t</NcFormBoxButton>\n\t\t<NcFormBoxButton label=\"No icon example\"/>\n\t\t<NcFormBoxButton\n\t\t\tlabel=\"No icon link example\"\n\t\t\tdescription=\"Links have a default icon\"\n\t\t\thref=\"https://nextcloud.com\"\n\t\t\ttarget=\"_blank\" />\n\t</NcFormBox>\n</template>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_mergeProps","_unref","$style","invertedAccent","$emit","$slots","label","_renderSlot","description"],"mappings":"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"}

package/dist/chunks/{NcFormBoxCopyButton.vue_vue_type_script_setup_true_lang-DYtyXBqR.mjs → NcFormBoxCopyButton.vue_vue_type_script_setup_true_lang-CIPhWmeP.mjs}

@@ -1,8 +1,8 @@
 import { defineComponent, createBlock, openBlock, unref, createSlots, withCtx, createVNode, createTextVNode, toDisplayString, createElementVNode, renderSlot } from "vue";
 import { whenever } from "@vueuse/core";
-import { N as NcFormBoxButton } from "./NcFormBoxButton-DvMw5yUf.mjs";
+import { N as NcFormBoxButton } from "./NcFormBoxButton-RDIKiZIH.mjs";
 import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BvLanNaW.mjs";
-import { u as useCopy } from "./useCopy-D4CcMqlA.mjs";
+import { u as useCopy } from "./useCopy-CfYsbB0V.mjs";
 const _hoisted_1 = { class: "hidden-visually" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcFormBoxCopyButton",
@@ -19,7 +19,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(NcFormBoxButton, {
         disabled: _ctx.disabled,
-        "inverted-accent": "",
+        invertedAccent: "",
         onClick: unref(copy)
       }, createSlots({
         description: withCtx(() => [
@@ -50,4 +50,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   _sfc_main as _
 };
-//# sourceMappingURL=NcFormBoxCopyButton.vue_vue_type_script_setup_true_lang-DYtyXBqR.mjs.map
+//# sourceMappingURL=NcFormBoxCopyButton.vue_vue_type_script_setup_true_lang-CIPhWmeP.mjs.map

package/dist/chunks/NcFormBoxCopyButton.vue_vue_type_script_setup_true_lang-CIPhWmeP.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcFormBoxCopyButton.vue_vue_type_script_setup_true_lang-CIPhWmeP.mjs","sources":["../../src/components/NcFormBoxCopyButton/NcFormBoxCopyButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { whenever } from '@vueuse/core'\nimport NcFormBoxButton from '../NcFormBoxButton/NcFormBoxButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { useCopy } from '../../composables/useCopy.ts'\n\nconst {\n\tlabel = undefined,\n\tvalue,\n\tdisabled = false,\n} = defineProps<{\n\t/** Copied value's value */\n\tlabel?: string\n\t/** The value to be copied */\n\tvalue: string\n\t/** Native disabled attribute */\n\tdisabled?: boolean\n}>()\n\nconst emit = defineEmits<{\n\t/** Value has been successfully copied */\n\tcopy: []\n}>()\n\ndefineSlots<{\n\t/** Custom label content */\n\tdefault?: Slot\n}>()\n\nconst { isCopied, copy, icon, altText } = useCopy(() => value)\n\nwhenever(isCopied, () => emit('copy'))\n</script>\n\n<template>\n\t<NcFormBoxButton\n\t\t:disabled\n\t\tinvertedAccent\n\t\t@click=\"copy\">\n\t\t<template v-if=\"$slots.default || label\" #default>\n\t\t\t<span class=\"hidden-visually\">\n\t\t\t\t{{ altText }}\n\t\t\t</span>\n\t\t\t<slot>\n\t\t\t\t{{ label }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template #description>\n\t\t\t{{ value }}\n\t\t</template>\n\t\t<template #icon>\n\t\t\t<NcIconSvgWrapper :path=\"icon\" inline />\n\t\t</template>\n\t</NcFormBoxButton>\n</template>\n\n<docs>\n### General\n\n`NcFormBoxButton` set up to be a copy button.\n\n```vue\n<template>\n\t<NcFormGroup label=\"CalDAV\" description=\"Access Nextcloud calendars from other apps and devices\">\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxCopyButton\n\t\t\t\tlabel=\"CalDAV URL\"\n\t\t\t\tvalue=\"https://cloud.example.com/remote.php/dav/\" />\n\t\t\t<NcFormBoxCopyButton\n\t\t\t\tlabel=\"Server Address for iOS and macOS\"\n\t\t\t\tvalue=\"https://cloud.example.com/remote.php/dav/principals/users/user/\" />\n\t\t</NcFormBox>\n\t</NcFormGroup>\n</template>\n```\n</docs>\n"],"names":["_createBlock","disabled","_unref","value","_createVNode","$slots","label","_createElementVNode","_toDisplayString","_renderSlot"],"mappings":";;;;;;;;;;;;;;;AA0BA,UAAM,OAAO;AAUb,UAAM,EAAE,UAAU,MAAM,MAAM,YAAY,QAAQ,MAAM,QAAA,KAAK;AAE7D,aAAS,UAAU,MAAM,KAAK,MAAM,CAAC;;0BAIpCA,YAkBkB,iBAAA;AAAA,QAjBhB,UAAAC,KAAAA;AAAAA,QACD,gBAAA;AAAA,QACC,SAAOC,MAAA,IAAA;AAAA,MAAA;QASG,qBACV,MAAW;AAAA,0CAARC,KAAAA,KAAK,GAAA,CAAA;AAAA,QAAA;QAEE,cACV,MAAwC;AAAA,UAAxCC,YAAwC,kBAAA;AAAA,YAArB,MAAMF,MAAA,IAAA;AAAA,YAAM,QAAA;AAAA,UAAA;;;;QAZhBG,KAAAA,OAAO,WAAWC,KAAAA;gBAAQ;AAAA,sBACzC,MAEO;AAAA,YAFPC,mBAEO,QAFP,YAEOC,gBADHN,MAAA,OAAA,CAAO,GAAA,CAAA;AAAA,YAEXO,WAEO,4BAFP,MAEO;AAAA,8CADHH,KAAAA,KAAK,GAAA,CAAA;AAAA,YAAA;;;;;;;;"}

package/dist/chunks/{NcFormBoxItem-vnU0KmUL.mjs → NcFormBoxItem-BAAPOa6z.mjs}

@@ -1,4 +1,4 @@
-import '../assets/NcFormBoxItem-BfXKp9xJ.css';
+import '../assets/NcFormBoxItem-CATNOTQx.css';
 import { defineComponent, useSlots, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, createBlock, createCommentVNode, resolveDynamicComponent, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
 import { u as useNcFormBox } from "./useNcFormBox-Djlh582y.mjs";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
@@ -70,15 +70,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const formBoxItem = "_formBoxItem_v5un7_20";
-const formBoxItem_legacy = "_formBoxItem_legacy_v5un7_60";
-const formBoxItem_inverted = "_formBoxItem_inverted_v5un7_64";
-const formBoxItem__element = "_formBoxItem__element_v5un7_64";
-const formBoxItem__description = "_formBoxItem__description_v5un7_67";
-const formBoxItem__content = "_formBoxItem__content_v5un7_71";
-const formBoxItem__icon = "_formBoxItem__icon_v5un7_89";
+const formBoxItem = "_formBoxItem_74l6r";
+const formBoxItem_legacy = "_formBoxItem_legacy_IgNr3";
+const formBoxItem_inverted = "_formBoxItem_inverted_9GGkh";
+const formBoxItem__element = "_formBoxItem__element_YEZDA";
+const formBoxItem__description = "_formBoxItem__description_1GjPD";
+const formBoxItem__content = "_formBoxItem__content_CcZbG";
+const formBoxItem__icon = "_formBoxItem__icon_eZXNE";
 const style0 = {
-  "material-design-icon": "_material-design-icon_v5un7_12",
+  "material-design-icon": "_material-design-icon_D2F-K",
   formBoxItem,
   formBoxItem_legacy,
   formBoxItem_inverted,
@@ -94,4 +94,4 @@ const NcFormBoxItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", c
 export {
   NcFormBoxItem as N
 };
-//# sourceMappingURL=NcFormBoxItem-vnU0KmUL.mjs.map
+//# sourceMappingURL=NcFormBoxItem-BAAPOa6z.mjs.map

package/dist/chunks/NcFormBoxItem-BAAPOa6z.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcFormBoxItem-BAAPOa6z.mjs","sources":["../../src/components/NcFormBox/NcFormBoxItem.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\nimport type { VueClassType } from '../../utils/VueTypes.ts'\n\nimport { useNcFormBox } from '../../components/NcFormBox/useNcFormBox.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { isLegacy } from '../../utils/legacy.ts'\n\ndefineOptions({ inheritAttrs: false })\n\nconst {\n\ttag,\n\tlabel = undefined,\n\tdescription = undefined,\n\tinvertedAccent = false,\n\tclass: rootClasses = undefined,\n\titemClasses = undefined,\n} = defineProps<{\n\t/** Interactive item element's tag */\n\ttag: string\n\t/** Main Label */\n\tlabel?: string\n\t/** Optional description below the label, also used for the aria-describedby */\n\tdescription?: string\n\t/** Accent on the description instead of the label */\n\tinvertedAccent?: boolean\n\t/** Root element classes */\n\tclass?: VueClassType\n\t/** Interactive item classes */\n\titemClasses?: VueClassType\n}>()\n\ndefineEmits<{\n\t/** Click on the item */\n\tclick: [event: MouseEvent]\n}>()\n\nconst slots = defineSlots<{\n\t/** Item's label custom content */\n\tdefault?: Slot<{\n\t\t/** IDRef of the description element if present */\n\t\tdescriptionId?: string\n\t}>\n\t/** Custom description content */\n\tdescription?: Slot<{\n\t\t/** IDRef of the description element if present */\n\t\tdescriptionId?: string\n\t}>\n\t/** Icon content */\n\ticon?: Slot\n}>()\n\nconst { formBoxItemClass } = useNcFormBox()\n\nconst descriptionId = createElementId()\nconst hasDescription = () => !!description || !!slots.description\n</script>\n\n<template>\n\t<div\n\t\t:class=\"[\n\t\t\trootClasses,\n\t\t\t$style.formBoxItem,\n\t\t\tformBoxItemClass,\n\t\t\t{\n\t\t\t\t[$style.formBoxItem_inverted]: invertedAccent && hasDescription(),\n\t\t\t\t[$style.formBoxItem_legacy]: isLegacy,\n\t\t\t},\n\t\t]\">\n\t\t<span :class=\"$style.formBoxItem__content\">\n\t\t\t<component\n\t\t\t\t:is=\"tag\"\n\t\t\t\t:class=\"[$style.formBoxItem__element, itemClasses]\"\n\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t@click=\"$emit('click', $event)\">\n\t\t\t\t<slot :descriptionId>\n\t\t\t\t\t{{ label || '⚠️ Label is missing' }}\n\t\t\t\t</slot>\n\t\t\t</component>\n\t\t\t<span v-if=\"hasDescription()\" :id=\"descriptionId\" :class=\"$style.formBoxItem__description\">\n\t\t\t\t<slot name=\"description\">\n\t\t\t\t\t{{ description }}\n\t\t\t\t</slot>\n\t\t\t</span>\n\t\t</span>\n\t\t<span :class=\"$style.formBoxItem__icon\">\n\t\t\t<slot name=\"icon\" :descriptionId>\n\t\t\t\t⚠️ Icon is missing\n\t\t\t</slot>\n\t\t</span>\n\t</div>\n</template>\n\n<style lang=\"scss\" module>\n.formBoxItem {\n\t--nc-form-box-item-border-width: 1px;\n\t--nc-form-box-item-min-height: 40px; // Special size defined by the design\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n\t--form-element-label-padding: calc(var(--form-element-label-offset) - var(--nc-form-box-item-border-width));\n\t// New colors we don't yet have in theming\n\t// TODO: add new colors to the theming\n\t--color-primary-element-extra-light: hsl(from var(--color-primary-element-light) h s calc(l * 1.045));\n\t--color-primary-element-extra-light-hover: hsl(from var(--color-primary-element-light-hover) h s calc(l * 1.045));\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: calc(2 * var(--default-grid-baseline));\n\tmin-height: var(--nc-form-box-item-min-height);\n\tpadding-inline: var(--form-element-label-padding);\n\tborder: 1px solid var(--color-primary-element-extra-light-hover);\n\tborder-bottom-width: 2px;\n\tborder-radius: var(--border-radius-element);\n\tbackground-color: var(--color-primary-element-extra-light);\n\tcolor: var(--color-main-text);\n\ttransition-property: color, border-color, background-color;\n\ttransition-duration: var(--animation-quick);\n\ttransition-timing-function: linear;\n\t-webkit-user-select: none;\n\tuser-select: none;\n\tcursor: pointer;\n\n\t* {\n\t\tcursor: inherit;\n\t}\n\n\t&:has(:disabled) {\n\t\tcursor: default;\n\t\topacity: 0.5;\n\t}\n\n\t&:hover:not(:has(:disabled)) {\n\t\tcolor: var(--color-primary-element-light-text);\n\t\tbackground-color: var(--color-primary-element-extra-light-hover);\n\t}\n\n\t&:has(:focus-visible) {\n\t\toutline: 2px solid var(--color-main-text);\n\t\tbox-shadow: 0 0 0 4px var(--color-main-background);\n\t}\n\n\t&.formBoxItem_legacy {\n\t\t--nc-form-box-item-border-width: 0px;\n\t\tborder: none;\n\t}\n\n\t&.formBoxItem_inverted {\n\t\t.formBoxItem__element {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\n\t\t.formBoxItem__description {\n\t\t\tcolor: inherit;\n\t\t}\n\t}\n}\n\n.formBoxItem__content {\n\tflex: 1;\n\tdisplay: flex;\n\tflex-direction: column;\n\tpadding-block: calc(2 * var(--default-grid-baseline));\n\toverflow-wrap: anywhere;\n}\n\n// A trick for accessibility:\n// make entire component clickable while internally splitting the interactive item and the description\n.formBoxItem__element::after {\n\tcontent: '';\n\tposition: absolute;\n\tinset: 0;\n}\n\n.formBoxItem__description {\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.formBoxItem__icon {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n}\n</style>\n\n<docs>\nAn internal component\n</docs>\n"],"names":["_useSlots","_createElementBlock","_normalizeClass","$style","_unref","invertedAccent","_createElementVNode","_createBlock","_resolveDynamicComponent","tag","_mergeProps","itemClasses","$attrs","$emit","_renderSlot","label","description"],"mappings":";;;;;;;;;;;;;;;;;;;AA0CA,UAAM,QAAQA,SAAA;AAed,UAAM,EAAE,iBAAA,IAAqB,aAAA;AAE7B,UAAM,gBAAgB,gBAAA;AACtB,UAAM,iBAAiB,MAAM,CAAC,CAAC,QAAA,eAAe,CAAC,CAAC,MAAM;;0BAIrDC,mBA+BM,OAAA;AAAA,QA9BJ,OAAKC,eAAA;AAAA,UAAO,QAAA;AAAA,UAAgBC,KAAAA,OAAO;AAAA,UAAgBC,MAAA,gBAAA;AAAA;YAA4BD,CAAAA,KAAAA,OAAO,oBAAoB,GAAGE,KAAAA,kBAAkB,eAAA;AAAA,aAAuBF,KAAAA,OAAO,kBAAkB,GAAGC,MAAA,QAAA;AAAA,UAAA;AAAA;;QASnLE,mBAeO,QAAA;AAAA,UAfA,OAAKJ,eAAEC,KAAAA,OAAO,oBAAoB;AAAA,QAAA;wBACxCI,YAQYC,wBAPNC,KAAAA,GAAG,GADTC,WAQY;AAAA,YANV,OAAK,CAAGP,KAAAA,OAAO,sBAAsBQ,KAAAA,WAAW;AAAA,UAAA,GACzCC,KAAAA,QAAM;AAAA,YACb,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAEC,KAAAA,MAAK,SAAU,MAAM;AAAA,UAAA;6BAC7B,MAEO;AAAA,cAFPC,WAEO,KAAA,QAAA,WAAA,EAFA,eAAAV,MAAA,aAAA,EAAA,GAAP,MAEO;AAAA,gDADHW,KAAAA,SAAK,qBAAA,GAAA,CAAA;AAAA,cAAA;;;;UAGE,iCAAZd,mBAIO,QAAA;AAAA;YAJwB,IAAIG,MAAA,aAAA;AAAA,YAAgB,OAAKF,eAAEC,KAAAA,OAAO,wBAAwB;AAAA,UAAA;YACxFW,WAEO,gCAFP,MAEO;AAAA,8CADHE,KAAAA,WAAW,GAAA,CAAA;AAAA,YAAA;;;QAIjBV,mBAIO,QAAA;AAAA,UAJA,OAAKJ,eAAEC,KAAAA,OAAO,iBAAiB;AAAA,QAAA;UACrCW,WAEO,KAAA,QAAA,QAAA,EAFY,eAAAV,MAAA,aAAA,EAAA,GAAnB,MAEO;AAAA,sDAF0B,wBAEjC,EAAA;AAAA,UAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcFormBoxSwitch-DGcRJH9Q.mjs → NcFormBoxSwitch-m9uRjJzl.mjs}

@@ -1,7 +1,7 @@
-import '../assets/NcFormBoxSwitch-DScgbxtv.css';
+import '../assets/NcFormBoxSwitch-Cn-MBAzZ.css';
 import { defineComponent, mergeModels, useModel, watch, createBlock, openBlock, unref, createSlots, withCtx, withDirectives, createVNode, createElementVNode, normalizeClass, vModelCheckbox, renderSlot, createTextVNode, toDisplayString } from "vue";
-import { N as NcFormBoxItem } from "./NcFormBoxItem-vnU0KmUL.mjs";
-import { N as NcIconToggleSwitch } from "./NcIconToggleSwitch-DNEYngCw.mjs";
+import { N as NcFormBoxItem } from "./NcFormBoxItem-BAAPOa6z.mjs";
+import { N as NcIconToggleSwitch } from "./NcIconToggleSwitch-CSrdR61T.mjs";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _hoisted_1 = ["id", "aria-describedby", "disabled"];
@@ -77,9 +77,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const formBoxSwitch__input = "_formBoxSwitch__input_njiy8_20";
+const formBoxSwitch__input = "_formBoxSwitch__input_e7y7s";
 const style0 = {
-  "material-design-icon": "_material-design-icon_njiy8_12",
+  "material-design-icon": "_material-design-icon_YAxyJ",
   formBoxSwitch__input
 };
 const cssModules = {
@@ -89,4 +89,4 @@ const NcFormBoxSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules",
 export {
   NcFormBoxSwitch as N
 };
-//# sourceMappingURL=NcFormBoxSwitch-DGcRJH9Q.mjs.map
+//# sourceMappingURL=NcFormBoxSwitch-m9uRjJzl.mjs.map

package/dist/chunks/{NcFormBoxSwitch-DGcRJH9Q.mjs.map → NcFormBoxSwitch-m9uRjJzl.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcFormBoxSwitch-DGcRJH9Q.mjs","sources":["../../src/components/NcFormBoxSwitch/NcFormBoxSwitch.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { watch } from 'vue'\nimport NcFormBoxItem from '../NcFormBox/NcFormBoxItem.vue'\nimport NcIconToggleSwitch from '../NcIconToggleSwitch/NcIconToggleSwitch.vue'\nimport { createElementId } from '../../utils/createElementId.ts'\n\n/** Switch toggle model value */\nconst modelValue = defineModel<boolean>({ required: true })\n\nconst {\n\tlabel = undefined,\n\tdescription = undefined,\n\tdisabled = false,\n} = defineProps<{\n\t/** Main label */\n\tlabel?: string\n\t/** Optional description below the label, also used for the aria-describedby */\n\tdescription?: string\n\t/** Disabled state */\n\tdisabled?: boolean\n}>()\n\nconst emit = defineEmits<{\n\t/** Switch is toggled ON */\n\tenable: []\n\t/** Switch is toggled OFF */\n\tdisable: []\n}>()\n\ndefineSlots<{\n\t/** Custom label content */\n\tdefault?: Slot\n\t/** Custom description content */\n\tdescription?: Slot\n}>()\n\nconst inputId = createElementId()\n\nwatch(modelValue, () => {\n\tif (modelValue.value) {\n\t\temit('enable')\n\t} else {\n\t\temit('disable')\n\t}\n}, {\n\t// defineModel emits update:modelValue synchronously\n\t// Watching it synchronously to emit the enable/disable events together with the update:modelValue event\n\tflush: 'sync',\n})\n</script>\n\n<template>\n\t<NcFormBoxItem\n\t\ttag=\"label\"\n\t\t:for=\"inputId\">\n\t\t<template v-if=\"$slots.default || label\" #default>\n\t\t\t<slot>\n\t\t\t\t{{ label }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template v-if=\"$slots.description || description\" #description>\n\t\t\t<slot name=\"description\">\n\t\t\t\t{{ description }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template #icon=\"{ descriptionId }\">\n\t\t\t<input\n\t\t\t\t:id=\"inputId\"\n\t\t\t\tv-model=\"modelValue\"\n\t\t\t\t:class=\"$style.formBoxSwitch__input\"\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\trole=\"switch\"\n\t\t\t\t:aria-describedby=\"descriptionId\"\n\t\t\t\t:disabled>\n\t\t\t<NcIconToggleSwitch :checked=\"modelValue\" inline />\n\t\t</template>\n\t</NcFormBoxItem>\n</template>\n\n<style lang=\"scss\" module>\ninput.formBoxSwitch__input {\n\tmargin: 0;\n\twidth: var(--default-clickable-area);\n\t/* Keep it visually hidden but on the position of visual switch icon */\n\tposition: absolute;\n\tinset-block: 0;\n\tinset-inline-end: var(--form-element-label-offset);\n\tz-index: -1;\n\topacity: 0 !important;\n\t/* Override server styles */\n\theight: auto;\n\tcursor: inherit;\n}\n</style>\n\n<docs>\n### General\n\nA toggle switch to be used within `<NcFormBox>`.\n\nLike other form box items, it has a label and an optional description.\n\nIn addition to the standard `v-model` binding, it emits `enable` and `disable` events when toggled **on** or **off**.\n\n```vue\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tswitchValue: false,\n\t\t}\n\t}\n}\n</script>\n\n<template>\n\t<NcFormBox>\n\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Turn camera and microphone off by default\" />\n\t\t<NcFormBoxSwitch\n\t\t\tv-model=\"switchValue\"\n\t\t\tlabel=\"Blur camera background by default\"\n\t\t\tdisabled />\n\t\t<NcFormBoxSwitch\n\t\t\tv-model=\"switchValue\"\n\t\t\tlabel=\"Skip device preview before joining a call\"\n\t\t\tdescription=\"Will always show if recording consent is required\"\n\t\t\t@update:modelValue=\"console.log('Switch toggled', $event, switchValue)\"\n\t\t\t@enable=\"console.log('Switch enabled', switchValue)\"\n\t\t\t@disable=\"console.log('Switch disabled', switchValue)\"\n\t\t/>\n\t\t<NcFormBoxSwitch v-model=\"switchValue\" />\n\t</NcFormBox>\n</template>\n```\n</docs>\n"],"names":["_useModel","_createBlock","_unref","_withCtx","_createElementVNode","_normalizeClass","$style","disabled","_createVNode","$slots","label","_renderSlot","description"],"mappings":";;;;;;;;;;;;;;;;;;AAcA,UAAM,aAAaA,SAAoB,SAAA,YAAmB;AAe1D,UAAM,OAAO;AAcb,UAAM,UAAU,gBAAA;AAEhB,UAAM,YAAY,MAAM;AACvB,UAAI,WAAW,OAAO;AACrB,aAAK,QAAQ;AAAA,MACd,OAAO;AACN,aAAK,SAAS;AAAA,MACf;AAAA,IACD,GAAG;AAAA;AAAA;AAAA,MAGF,OAAO;AAAA,IAAA,CACP;;0BAIAC,YAwBgB,eAAA;AAAA,QAvBf,KAAI;AAAA,QACH,KAAKC,MAAA,OAAA;AAAA,MAAA;QAWK,MAAIC,QACd,CAOW,EARO,oBAAa;AAAA,yBAC/BC,mBAOW,SAAA;AAAA,YANT,IAAIF,MAAA,OAAA;AAAA,yEACI,WAAU,QAAA;AAAA,YAClB,OAAKG,eAAEC,KAAAA,OAAO,oBAAoB;AAAA,YACnC,MAAK;AAAA,YACL,MAAK;AAAA,YACJ,oBAAkB;AAAA,YAClB,UAAAC,KAAAA;AAAAA,UAAAA;6BALQ,WAAA,KAAU;AAAA,UAAA;UAMpBC,YAAmD,oBAAA;AAAA,YAA9B,SAAS,WAAA;AAAA,YAAY,QAAA;AAAA,UAAA;;;;QAnB3BC,KAAAA,OAAO,WAAWC,KAAAA;gBAAQ;AAAA,sBACzC,MAEO;AAAA,YAFPC,WAEO,4BAFP,MAEO;AAAA,8CADHD,KAAAA,KAAK,GAAA,CAAA;AAAA,YAAA;;;;QAGMD,KAAAA,OAAO,eAAeG,KAAAA;gBAAc;AAAA,sBACnD,MAEO;AAAA,YAFPD,WAEO,gCAFP,MAEO;AAAA,8CADHC,KAAAA,WAAW,GAAA,CAAA;AAAA,YAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcFormBoxSwitch-m9uRjJzl.mjs","sources":["../../src/components/NcFormBoxSwitch/NcFormBoxSwitch.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { watch } from 'vue'\nimport NcFormBoxItem from '../NcFormBox/NcFormBoxItem.vue'\nimport NcIconToggleSwitch from '../NcIconToggleSwitch/NcIconToggleSwitch.vue'\nimport { createElementId } from '../../utils/createElementId.ts'\n\n/** Switch toggle model value */\nconst modelValue = defineModel<boolean>({ required: true })\n\nconst {\n\tlabel = undefined,\n\tdescription = undefined,\n\tdisabled = false,\n} = defineProps<{\n\t/** Main label */\n\tlabel?: string\n\t/** Optional description below the label, also used for the aria-describedby */\n\tdescription?: string\n\t/** Disabled state */\n\tdisabled?: boolean\n}>()\n\nconst emit = defineEmits<{\n\t/** Switch is toggled ON */\n\tenable: []\n\t/** Switch is toggled OFF */\n\tdisable: []\n}>()\n\ndefineSlots<{\n\t/** Custom label content */\n\tdefault?: Slot\n\t/** Custom description content */\n\tdescription?: Slot\n}>()\n\nconst inputId = createElementId()\n\nwatch(modelValue, () => {\n\tif (modelValue.value) {\n\t\temit('enable')\n\t} else {\n\t\temit('disable')\n\t}\n}, {\n\t// defineModel emits update:modelValue synchronously\n\t// Watching it synchronously to emit the enable/disable events together with the update:modelValue event\n\tflush: 'sync',\n})\n</script>\n\n<template>\n\t<NcFormBoxItem\n\t\ttag=\"label\"\n\t\t:for=\"inputId\">\n\t\t<template v-if=\"$slots.default || label\" #default>\n\t\t\t<slot>\n\t\t\t\t{{ label }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template v-if=\"$slots.description || description\" #description>\n\t\t\t<slot name=\"description\">\n\t\t\t\t{{ description }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template #icon=\"{ descriptionId }\">\n\t\t\t<input\n\t\t\t\t:id=\"inputId\"\n\t\t\t\tv-model=\"modelValue\"\n\t\t\t\t:class=\"$style.formBoxSwitch__input\"\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\trole=\"switch\"\n\t\t\t\t:aria-describedby=\"descriptionId\"\n\t\t\t\t:disabled>\n\t\t\t<NcIconToggleSwitch :checked=\"modelValue\" inline />\n\t\t</template>\n\t</NcFormBoxItem>\n</template>\n\n<style lang=\"scss\" module>\ninput.formBoxSwitch__input {\n\tmargin: 0;\n\twidth: var(--default-clickable-area);\n\t/* Keep it visually hidden but on the position of visual switch icon */\n\tposition: absolute;\n\tinset-block: 0;\n\tinset-inline-end: var(--form-element-label-offset);\n\tz-index: -1;\n\topacity: 0 !important;\n\t/* Override server styles */\n\theight: auto;\n\tcursor: inherit;\n}\n</style>\n\n<docs>\n### General\n\nA toggle switch to be used within `<NcFormBox>`.\n\nLike other form box items, it has a label and an optional description.\n\nIn addition to the standard `v-model` binding, it emits `enable` and `disable` events when toggled **on** or **off**.\n\n```vue\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tswitchValue: false,\n\t\t}\n\t}\n}\n</script>\n\n<template>\n\t<NcFormBox>\n\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Turn camera and microphone off by default\" />\n\t\t<NcFormBoxSwitch\n\t\t\tv-model=\"switchValue\"\n\t\t\tlabel=\"Blur camera background by default\"\n\t\t\tdisabled />\n\t\t<NcFormBoxSwitch\n\t\t\tv-model=\"switchValue\"\n\t\t\tlabel=\"Skip device preview before joining a call\"\n\t\t\tdescription=\"Will always show if recording consent is required\"\n\t\t\t@update:modelValue=\"console.log('Switch toggled', $event, switchValue)\"\n\t\t\t@enable=\"console.log('Switch enabled', switchValue)\"\n\t\t\t@disable=\"console.log('Switch disabled', switchValue)\"\n\t\t/>\n\t\t<NcFormBoxSwitch v-model=\"switchValue\" />\n\t</NcFormBox>\n</template>\n```\n</docs>\n"],"names":["_useModel","_createBlock","_unref","_withCtx","_createElementVNode","_normalizeClass","$style","disabled","_createVNode","$slots","label","_renderSlot","description"],"mappings":";;;;;;;;;;;;;;;;;;AAcA,UAAM,aAAaA,SAAoB,SAAA,YAAmB;AAe1D,UAAM,OAAO;AAcb,UAAM,UAAU,gBAAA;AAEhB,UAAM,YAAY,MAAM;AACvB,UAAI,WAAW,OAAO;AACrB,aAAK,QAAQ;AAAA,MACd,OAAO;AACN,aAAK,SAAS;AAAA,MACf;AAAA,IACD,GAAG;AAAA;AAAA;AAAA,MAGF,OAAO;AAAA,IAAA,CACP;;0BAIAC,YAwBgB,eAAA;AAAA,QAvBf,KAAI;AAAA,QACH,KAAKC,MAAA,OAAA;AAAA,MAAA;QAWK,MAAIC,QACd,CAOW,EARO,oBAAa;AAAA,yBAC/BC,mBAOW,SAAA;AAAA,YANT,IAAIF,MAAA,OAAA;AAAA,yEACI,WAAU,QAAA;AAAA,YAClB,OAAKG,eAAEC,KAAAA,OAAO,oBAAoB;AAAA,YACnC,MAAK;AAAA,YACL,MAAK;AAAA,YACJ,oBAAkB;AAAA,YAClB,UAAAC,KAAAA;AAAAA,UAAAA;6BALQ,WAAA,KAAU;AAAA,UAAA;UAMpBC,YAAmD,oBAAA;AAAA,YAA9B,SAAS,WAAA;AAAA,YAAY,QAAA;AAAA,UAAA;;;;QAnB3BC,KAAAA,OAAO,WAAWC,KAAAA;gBAAQ;AAAA,sBACzC,MAEO;AAAA,YAFPC,WAEO,4BAFP,MAEO;AAAA,8CADHD,KAAAA,KAAK,GAAA,CAAA;AAAA,YAAA;;;;QAGMD,KAAAA,OAAO,eAAeG,KAAAA;gBAAc;AAAA,sBACnD,MAEO;AAAA,YAFPD,WAEO,gCAFP,MAEO;AAAA,8CADHC,KAAAA,WAAW,GAAA,CAAA;AAAA,YAAA;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcFormGroup-CnSfPFey.mjs → NcFormGroup-Bf8Mme1o.mjs}

@@ -1,4 +1,4 @@
-import '../assets/NcFormGroup-BrD0Scm7.css';
+import '../assets/NcFormGroup-BjWhd5Ky.css';
 import { defineComponent, useSlots, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, renderSlot, createTextVNode, toDisplayString } from "vue";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
@@ -49,14 +49,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const formGroup = "_formGroup_9p8a1_20";
-const formGroup_noGap = "_formGroup_noGap_9p8a1_24";
-const formGroup__label = "_formGroup__label_9p8a1_28";
-const formGroup__description = "_formGroup__description_9p8a1_34";
-const formGroup__content = "_formGroup__content_9p8a1_39";
-const formGroup__content_only = "_formGroup__content_only_9p8a1_45";
+const formGroup = "_formGroup_sNzER";
+const formGroup_noGap = "_formGroup_noGap_ChojB";
+const formGroup__label = "_formGroup__label_Z81k5";
+const formGroup__description = "_formGroup__description_xWRa-";
+const formGroup__content = "_formGroup__content_wHRjf";
+const formGroup__content_only = "_formGroup__content_only_VejcN";
 const style0 = {
-  "material-design-icon": "_material-design-icon_9p8a1_12",
+  "material-design-icon": "_material-design-icon_QhThW",
   formGroup,
   formGroup_noGap,
   formGroup__label,
@@ -71,4 +71,4 @@ const NcFormGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", css
 export {
   NcFormGroup as N
 };
-//# sourceMappingURL=NcFormGroup-CnSfPFey.mjs.map
+//# sourceMappingURL=NcFormGroup-Bf8Mme1o.mjs.map

package/dist/chunks/{NcFormGroup-CnSfPFey.mjs.map → NcFormGroup-Bf8Mme1o.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcFormGroup-CnSfPFey.mjs","sources":["../../src/components/NcFormGroup/NcFormGroup.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { createElementId } from '../../utils/createElementId.ts'\n\nconst {\n\tlabel = undefined,\n\tdescription = undefined,\n\thideLabel = false,\n\thideDescription = false,\n\tnoGap = false,\n} = defineProps<{\n\t/**\n\t * Group label #label slot can be used for custom label content\n\t */\n\tlabel?: string\n\t/**\n\t * Optional fieldset description. #description slot can be used for custom description content\n\t */\n\tdescription?: string\n\t/**\n\t * Hide the label visually but keep it accessible for screen readers\n\t */\n\thideLabel?: boolean\n\t/**\n\t * Hide the description visually but keep it accessible for screen readers\n\t */\n\thideDescription?: boolean\n\t/**\n\t * Disable default fieldset content gap between content elements\n\t */\n\tnoGap?: boolean\n}>()\n\nconst slots = defineSlots<{\n\t/**\n\t * Content\n\t */\n\tdefault?: Slot\n\t/**\n\t * Custom label content\n\t */\n\tlabel?: Slot\n\t/**\n\t * Custom description content\n\t */\n\tdescription?: Slot\n}>()\n\nconst id = `nc-form-group-${createElementId()}`\nconst descriptionId = `${id}-description`\n\nconst hasDescription = () => !!description || !!slots.description\nconst getDescriptionId = () => hasDescription() ? descriptionId : undefined\nconst hasContentOnly = () => hideLabel && (!hasDescription() || hideDescription)\n</script>\n\n<template>\n\t<fieldset\n\t\t:class=\"[$style.formGroup, { [$style.formGroup_noGap]: noGap }]\"\n\t\t:aria-describedby=\"getDescriptionId()\">\n\t\t<legend :class=\"[$style.formGroup__label, { 'hidden-visually': hideLabel }]\">\n\t\t\t<slot name=\"label\">\n\t\t\t\t{{ label || '⚠️ Missing label' }}\n\t\t\t</slot>\n\t\t</legend>\n\t\t<div v-if=\"hasDescription()\" :id=\"descriptionId\" :class=\"[$style.formGroup__description, { 'hidden-visually': hideDescription }]\">\n\t\t\t<slot name=\"description\">\n\t\t\t\t{{ description }}\n\t\t\t</slot>\n\t\t</div>\n\t\t<div :class=\"[$style.formGroup__content, { [$style.formGroup__content_only]: hasContentOnly() }]\">\n\t\t\t<slot />\n\t\t</div>\n\t</fieldset>\n</template>\n\n<style lang=\"scss\" module>\n.formGroup {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n\t--form-group-content-gap: calc(2 * var(--default-grid-baseline));\n\n\t&.formGroup_noGap {\n\t\t--form-group-content-gap: 0;\n\t}\n}\n\n.formGroup__label {\n\tpadding-inline: var(--form-element-label-offset);\n\tfont-size: var(--font-size);\n\tfont-weight: bold;\n}\n\n.formGroup__description {\n\tpadding-inline: var(--form-element-label-offset);\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.formGroup__content {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: var(--form-group-content-gap);\n\tmargin-block-start: calc(2.5 * var(--default-grid-baseline));\n\n\t&.formGroup__content_only {\n\t\tmargin-block-start: 0;\n\t}\n}\n</style>\n\n<docs>\n### General\n\nLabelled group of form elements.\n\n```vue\n<template>\n\t<NcFormGroup label=\"Personal information\">\n\t\t<NcTextField label=\"First name\" />\n\t\t<NcTextField label=\"Last name\" />\n\t</NcFormGroup>\n</template>\n```\n\n### With description\n\n```vue\n<template>\n\t<NcFormGroup label=\"Personal information\" description=\"Your contact details\">\n\t\t<NcTextField label=\"First name\" />\n\t\t<NcTextField label=\"Last name\" />\n\t</NcFormGroup>\n</template>\n```\n\n### Hidden label/description\n\nYou can visually hide the label and/or the description.\\\nNote: you still must provide the label. Do not visually hide the missing label warning!\n\n```vue\n<template>\n\t<NcFormGroup\n\t\tlabel=\"Personal information\"\n\t\tdescription=\"Your contact details\"\n\t\thide-label\n\t\thide-description>\n\t\t<NcTextField label=\"First name\" />\n\t\t<NcTextField label=\"Last name\" />\n\t</NcFormGroup>\n</template>\n```\n</docs>\n"],"names":["_useSlots","_createElementBlock","_normalizeClass","$style","noGap","_createElementVNode","hideLabel","_renderSlot","label","hideDescription","description"],"mappings":";;;;;;;;;;;;;;AAuCA,UAAM,QAAQA,SAAA;AAed,UAAM,KAAK,iBAAiB,gBAAA,CAAiB;AAC7C,UAAM,gBAAgB,GAAG,EAAE;AAE3B,UAAM,iBAAiB,MAAM,CAAC,CAAC,QAAA,eAAe,CAAC,CAAC,MAAM;AACtD,UAAM,mBAAmB,MAAM,eAAA,IAAmB,gBAAgB;AAClE,UAAM,iBAAiB,MAAM,QAAA,cAAc,CAAC,eAAA,KAAoB,QAAA;;0BAI/DC,mBAgBW,YAAA;AAAA,QAfT,OAAKC,eAAA,CAAGC,YAAO,cAAcA,KAAAA,OAAO,eAAe,GAAGC,KAAAA,MAAAA,CAAK,CAAA;AAAA,QAC3D,oBAAkB,iBAAA;AAAA,MAAgB;QACnCC,mBAIS,UAAA;AAAA,UAJA,OAAKH,eAAA,CAAGC,KAAAA,OAAO,uCAAuCG,KAAAA,WAAS,CAAA;AAAA,QAAA;UACvEC,WAEO,0BAFP,MAEO;AAAA,4CADHC,KAAAA,SAAK,kBAAA,GAAA,CAAA;AAAA,UAAA;;QAGC,iCAAXP,mBAIM,OAAA;AAAA;UAJwB,IAAI;AAAA,UAAgB,OAAKC,eAAA,CAAGC,KAAAA,OAAO,6CAA6CM,KAAAA,iBAAe,CAAA;AAAA,QAAA;UAC5HF,WAEO,gCAFP,MAEO;AAAA,4CADHG,KAAAA,WAAW,GAAA,CAAA;AAAA,UAAA;;QAGhBL,mBAEM,OAAA;AAAA,UAFA,OAAKH,eAAA,CAAGC,YAAO,uBAAuBA,KAAAA,OAAO,uBAAuB,GAAG,eAAA,EAAc,CAAA,CAAA;AAAA,QAAA;UAC1FI,WAAQ,KAAA,QAAA,SAAA;AAAA,QAAA;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcFormGroup-Bf8Mme1o.mjs","sources":["../../src/components/NcFormGroup/NcFormGroup.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { createElementId } from '../../utils/createElementId.ts'\n\nconst {\n\tlabel = undefined,\n\tdescription = undefined,\n\thideLabel = false,\n\thideDescription = false,\n\tnoGap = false,\n} = defineProps<{\n\t/**\n\t * Group label #label slot can be used for custom label content\n\t */\n\tlabel?: string\n\t/**\n\t * Optional fieldset description. #description slot can be used for custom description content\n\t */\n\tdescription?: string\n\t/**\n\t * Hide the label visually but keep it accessible for screen readers\n\t */\n\thideLabel?: boolean\n\t/**\n\t * Hide the description visually but keep it accessible for screen readers\n\t */\n\thideDescription?: boolean\n\t/**\n\t * Disable default fieldset content gap between content elements\n\t */\n\tnoGap?: boolean\n}>()\n\nconst slots = defineSlots<{\n\t/**\n\t * Content\n\t */\n\tdefault?: Slot\n\t/**\n\t * Custom label content\n\t */\n\tlabel?: Slot\n\t/**\n\t * Custom description content\n\t */\n\tdescription?: Slot\n}>()\n\nconst id = `nc-form-group-${createElementId()}`\nconst descriptionId = `${id}-description`\n\nconst hasDescription = () => !!description || !!slots.description\nconst getDescriptionId = () => hasDescription() ? descriptionId : undefined\nconst hasContentOnly = () => hideLabel && (!hasDescription() || hideDescription)\n</script>\n\n<template>\n\t<fieldset\n\t\t:class=\"[$style.formGroup, { [$style.formGroup_noGap]: noGap }]\"\n\t\t:aria-describedby=\"getDescriptionId()\">\n\t\t<legend :class=\"[$style.formGroup__label, { 'hidden-visually': hideLabel }]\">\n\t\t\t<slot name=\"label\">\n\t\t\t\t{{ label || '⚠️ Missing label' }}\n\t\t\t</slot>\n\t\t</legend>\n\t\t<div v-if=\"hasDescription()\" :id=\"descriptionId\" :class=\"[$style.formGroup__description, { 'hidden-visually': hideDescription }]\">\n\t\t\t<slot name=\"description\">\n\t\t\t\t{{ description }}\n\t\t\t</slot>\n\t\t</div>\n\t\t<div :class=\"[$style.formGroup__content, { [$style.formGroup__content_only]: hasContentOnly() }]\">\n\t\t\t<slot />\n\t\t</div>\n\t</fieldset>\n</template>\n\n<style lang=\"scss\" module>\n.formGroup {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n\t--form-group-content-gap: calc(2 * var(--default-grid-baseline));\n\n\t&.formGroup_noGap {\n\t\t--form-group-content-gap: 0;\n\t}\n}\n\n.formGroup__label {\n\tpadding-inline: var(--form-element-label-offset);\n\tfont-size: var(--font-size);\n\tfont-weight: bold;\n}\n\n.formGroup__description {\n\tpadding-inline: var(--form-element-label-offset);\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.formGroup__content {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: var(--form-group-content-gap);\n\tmargin-block-start: calc(2.5 * var(--default-grid-baseline));\n\n\t&.formGroup__content_only {\n\t\tmargin-block-start: 0;\n\t}\n}\n</style>\n\n<docs>\n### General\n\nLabelled group of form elements.\n\n```vue\n<template>\n\t<NcFormGroup label=\"Personal information\">\n\t\t<NcTextField label=\"First name\" />\n\t\t<NcTextField label=\"Last name\" />\n\t</NcFormGroup>\n</template>\n```\n\n### With description\n\n```vue\n<template>\n\t<NcFormGroup label=\"Personal information\" description=\"Your contact details\">\n\t\t<NcTextField label=\"First name\" />\n\t\t<NcTextField label=\"Last name\" />\n\t</NcFormGroup>\n</template>\n```\n\n### Hidden label/description\n\nYou can visually hide the label and/or the description.\\\nNote: you still must provide the label. Do not visually hide the missing label warning!\n\n```vue\n<template>\n\t<NcFormGroup\n\t\tlabel=\"Personal information\"\n\t\tdescription=\"Your contact details\"\n\t\thide-label\n\t\thide-description>\n\t\t<NcTextField label=\"First name\" />\n\t\t<NcTextField label=\"Last name\" />\n\t</NcFormGroup>\n</template>\n```\n</docs>\n"],"names":["_useSlots","_createElementBlock","_normalizeClass","$style","noGap","_createElementVNode","hideLabel","_renderSlot","label","hideDescription","description"],"mappings":";;;;;;;;;;;;;;AAuCA,UAAM,QAAQA,SAAA;AAed,UAAM,KAAK,iBAAiB,gBAAA,CAAiB;AAC7C,UAAM,gBAAgB,GAAG,EAAE;AAE3B,UAAM,iBAAiB,MAAM,CAAC,CAAC,QAAA,eAAe,CAAC,CAAC,MAAM;AACtD,UAAM,mBAAmB,MAAM,eAAA,IAAmB,gBAAgB;AAClE,UAAM,iBAAiB,MAAM,QAAA,cAAc,CAAC,eAAA,KAAoB,QAAA;;0BAI/DC,mBAgBW,YAAA;AAAA,QAfT,OAAKC,eAAA,CAAGC,YAAO,cAAcA,KAAAA,OAAO,eAAe,GAAGC,KAAAA,MAAAA,CAAK,CAAA;AAAA,QAC3D,oBAAkB,iBAAA;AAAA,MAAgB;QACnCC,mBAIS,UAAA;AAAA,UAJA,OAAKH,eAAA,CAAGC,KAAAA,OAAO,uCAAuCG,KAAAA,WAAS,CAAA;AAAA,QAAA;UACvEC,WAEO,0BAFP,MAEO;AAAA,4CADHC,KAAAA,SAAK,kBAAA,GAAA,CAAA;AAAA,UAAA;;QAGC,iCAAXP,mBAIM,OAAA;AAAA;UAJwB,IAAI;AAAA,UAAgB,OAAKC,eAAA,CAAGC,KAAAA,OAAO,6CAA6CM,KAAAA,iBAAe,CAAA;AAAA,QAAA;UAC5HF,WAEO,gCAFP,MAEO;AAAA,4CADHG,KAAAA,WAAW,GAAA,CAAA;AAAA,UAAA;;QAGhBL,mBAEM,OAAA;AAAA,UAFA,OAAKH,eAAA,CAAGC,YAAO,uBAAuBA,KAAAA,OAAO,uBAAuB,GAAG,eAAA,EAAc,CAAA,CAAA;AAAA,QAAA;UAC1FI,WAAQ,KAAA,QAAA,SAAA;AAAA,QAAA;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcHeaderButton-CIb5SvFk.mjs → NcHeaderButton-DZ7Sd9pu.mjs}

@@ -1,7 +1,7 @@
 import '../assets/NcHeaderButton-CVOQgRjm.css';
 import { defineComponent, createElementBlock, openBlock, createVNode, createCommentVNode, unref, withModifiers, withCtx, renderSlot, toDisplayString } from "vue";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
-import { N as NcButton } from "./NcButton-CzpKEx4V.mjs";
+import { N as NcButton } from "./NcButton-C9D47Igd.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _hoisted_1 = ["id"];
 const _hoisted_2 = ["id"];
@@ -46,4 +46,4 @@ const NcHeaderButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "da
 export {
   NcHeaderButton as N
 };
-//# sourceMappingURL=NcHeaderButton-CIb5SvFk.mjs.map
+//# sourceMappingURL=NcHeaderButton-DZ7Sd9pu.mjs.map

package/dist/chunks/{NcHeaderButton-CIb5SvFk.mjs.map → NcHeaderButton-DZ7Sd9pu.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcHeaderButton-CIb5SvFk.mjs","sources":["../../src/components/NcHeaderButton/NcHeaderButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used in the Nextcloud top header,\nsimilar to the NcHeaderMenu but to be used when only a trigger button is needed, e.g. when opening a dialog.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderButton id=\"search-dialog\"\n\t\t\taria-label=\"Search\"\n\t\t\t@click=\"showDialog = true\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t</NcHeaderButton>\n\n\t\t<NcDialog name=\"Search\"\n\t\t\tsize=\"normal\"\n\t\t\tv-model:open=\"showDialog\">\n\t\t\t<NcTextField label=\"Search for files, comments, contacts …\"\n\t\t\t\ttype=\"search\"\n\t\t\t\tv-model=\"query\" />\n\t\t\t<NcEmptyContent name=\"Search\"\n\t\t\t\t:description=\"query ? `No results for '${query}'` : 'Start typing to search'\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</NcDialog>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tquery: '',\n\t\t}\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: right;\n\tbackground-color: var(--color-primary);\n\theight: var(--header-height, 50px);\n\tpadding-inline-end: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<!-- We need a wrapper for server styles to apply -->\n\t<div :id=\"id\" class=\"header-menu\">\n\t\t<NcButton\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:aria-describedby=\"descriptionId\"\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\tsize=\"large\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click.prevent=\"$emit('click', $event)\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Icon trigger slot. Make sure the svg path\n\t\t\t\tis at least 16px. Usually mdi icon works at 20px -->\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</template>\n\t\t</NcButton>\n\n\t\t<span\n\t\t\tv-if=\"description\"\n\t\t\t:id=\"descriptionId\"\n\t\t\tclass=\"header-menu__description hidden-visually\">\n\t\t\t{{ description }}\n\t\t</span>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { createElementId } from '../../utils/createElementId.ts'\nimport NcButton from '../NcButton/index.ts'\n\ndefineProps<{\n\t/** Unique id for this menu */\n\tid: string\n\t/** `aria-label` attribute of the button */\n\tariaLabel: string\n\t/** Optional visually hidden description text for the button */\n\tdescription?: string\n}>()\n\ndefineEmits<{\n\tclick: [event: MouseEvent]\n}>()\n\nconst descriptionId = createElementId()\n</script>\n\n<style lang=\"scss\" scoped>\n@use '../NcHeaderMenu/header-menu__trigger.scss';\n</style>\n"],"names":["_createElementBlock","id","_createVNode","_unref","ariaLabel","_withModifiers","$emit","_renderSlot","description"],"mappings":";;;;;;;;;;;;;;;AA0GA,UAAM,gBAAgB,gBAAA;;0BAzCrBA,mBAqBM,OAAA;AAAA,QArBA,IAAIC,KAAAA;AAAAA,QAAI,OAAM;AAAA,MAAA;QACnBC,YAYWC,MAAA,QAAA,GAAA;AAAA,UAXT,cAAYC,KAAAA;AAAAA,UACZ,oBAAkBD,MAAA,aAAA;AAAA,UACnB,OAAM;AAAA,UACN,MAAK;AAAA,UACL,SAAQ;AAAA,UACP,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAAE,cAAA,CAAA,WAAUC,KAAAA,MAAK,SAAU,MAAM,GAAA,CAAA,SAAA,CAAA;AAAA,QAAA;UAC1B,cAGV,MAAoB;AAAA,YAApBC,WAAoB,KAAA,QAAA,QAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UAAA;;;QAKfC,KAAAA,4BADPR,mBAKO,QAAA;AAAA;UAHL,IAAIG,MAAA,aAAA;AAAA,UACL,OAAM;AAAA,QAAA,mBACHK,KAAAA,WAAW,GAAA,GAAA,UAAA;;;;;;"}
+{"version":3,"file":"NcHeaderButton-DZ7Sd9pu.mjs","sources":["../../src/components/NcHeaderButton/NcHeaderButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used in the Nextcloud top header,\nsimilar to the NcHeaderMenu but to be used when only a trigger button is needed, e.g. when opening a dialog.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderButton id=\"search-dialog\"\n\t\t\taria-label=\"Search\"\n\t\t\t@click=\"showDialog = true\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t</NcHeaderButton>\n\n\t\t<NcDialog name=\"Search\"\n\t\t\tsize=\"normal\"\n\t\t\tv-model:open=\"showDialog\">\n\t\t\t<NcTextField label=\"Search for files, comments, contacts …\"\n\t\t\t\ttype=\"search\"\n\t\t\t\tv-model=\"query\" />\n\t\t\t<NcEmptyContent name=\"Search\"\n\t\t\t\t:description=\"query ? `No results for '${query}'` : 'Start typing to search'\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</NcDialog>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tquery: '',\n\t\t}\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: right;\n\tbackground-color: var(--color-primary);\n\theight: var(--header-height, 50px);\n\tpadding-inline-end: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<!-- We need a wrapper for server styles to apply -->\n\t<div :id=\"id\" class=\"header-menu\">\n\t\t<NcButton\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:aria-describedby=\"descriptionId\"\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\tsize=\"large\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click.prevent=\"$emit('click', $event)\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Icon trigger slot. Make sure the svg path\n\t\t\t\tis at least 16px. Usually mdi icon works at 20px -->\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</template>\n\t\t</NcButton>\n\n\t\t<span\n\t\t\tv-if=\"description\"\n\t\t\t:id=\"descriptionId\"\n\t\t\tclass=\"header-menu__description hidden-visually\">\n\t\t\t{{ description }}\n\t\t</span>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { createElementId } from '../../utils/createElementId.ts'\nimport NcButton from '../NcButton/index.ts'\n\ndefineProps<{\n\t/** Unique id for this menu */\n\tid: string\n\t/** `aria-label` attribute of the button */\n\tariaLabel: string\n\t/** Optional visually hidden description text for the button */\n\tdescription?: string\n}>()\n\ndefineEmits<{\n\tclick: [event: MouseEvent]\n}>()\n\nconst descriptionId = createElementId()\n</script>\n\n<style lang=\"scss\" scoped>\n@use '../NcHeaderMenu/header-menu__trigger.scss';\n</style>\n"],"names":["_createElementBlock","id","_createVNode","_unref","ariaLabel","_withModifiers","$emit","_renderSlot","description"],"mappings":";;;;;;;;;;;;;;;AA0GA,UAAM,gBAAgB,gBAAA;;0BAzCrBA,mBAqBM,OAAA;AAAA,QArBA,IAAIC,KAAAA;AAAAA,QAAI,OAAM;AAAA,MAAA;QACnBC,YAYWC,MAAA,QAAA,GAAA;AAAA,UAXT,cAAYC,KAAAA;AAAAA,UACZ,oBAAkBD,MAAA,aAAA;AAAA,UACnB,OAAM;AAAA,UACN,MAAK;AAAA,UACL,SAAQ;AAAA,UACP,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAAE,cAAA,CAAA,WAAUC,KAAAA,MAAK,SAAU,MAAM,GAAA,CAAA,SAAA,CAAA;AAAA,QAAA;UAC1B,cAGV,MAAoB;AAAA,YAApBC,WAAoB,KAAA,QAAA,QAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UAAA;;;QAKfC,KAAAA,4BADPR,mBAKO,QAAA;AAAA;UAHL,IAAIG,MAAA,aAAA;AAAA,UACL,OAAM;AAAA,QAAA,mBACHK,KAAAA,WAAW,GAAA,GAAA,UAAA;;;;;;"}

package/dist/chunks/{NcHeaderMenu-CeJZT5-m.mjs → NcHeaderMenu-D9WjsIsy.mjs}

@@ -10,7 +10,7 @@ import "../composables/useIsMobile/index.mjs";
 import { u as useTrapStackControl } from "./useTrapStackControl-B6cEicto.mjs";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
 import { g as getTrapStack } from "./focusTrap-HJQ4pqHV.mjs";
-import { N as NcButton } from "./NcButton-CzpKEx4V.mjs";
+import { N as NcButton } from "./NcButton-C9D47Igd.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _hoisted_1 = ["id"];
 const _hoisted_2 = { class: "header-menu__caret" };
@@ -139,4 +139,4 @@ const NcHeaderMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data
 export {
   NcHeaderMenu as N
 };
-//# sourceMappingURL=NcHeaderMenu-CeJZT5-m.mjs.map
+//# sourceMappingURL=NcHeaderMenu-D9WjsIsy.mjs.map

package/dist/chunks/{NcHeaderMenu-CeJZT5-m.mjs.map → NcHeaderMenu-D9WjsIsy.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcHeaderMenu-CeJZT5-m.mjs","sources":["../../src/components/NcHeaderMenu/NcHeaderMenu.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used in the Nextcloud top header.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderMenu id=\"search\"\n\t\t\taria-label=\"Search\">\n\t\t\t<template #trigger>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t\t<div>\n\t\t\t\t<NcTextField label=\"Search for files, comments, contacts …\"\n\t\t\t\t\tstyle=\"padding-inline: 8px;\"\n\t\t\t\t\ttype=\"search\"\n\t\t\t\t\tv-model=\"query\" />\n\t\t\t\t<NcEmptyContent\n\t\t\t\t\tname=\"Search\"\n\t\t\t\t\t:description=\"query ? `No results for '${query}'` : 'Start typing to search'\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Magnify />\n\t\t\t\t\t</template>\n\t\t\t\t</NcEmptyContent>\n\t\t\t</div>\n\t\t</NcHeaderMenu>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tquery: '',\n\t\t}\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: end;\n\tbackground-color: var(--color-primary);\n\theight: var(--header-height, 50px);\n\tpadding-inline-end: 12px;\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { FocusTrap } from 'focus-trap'\nimport type { Slot } from 'vue'\n\nimport { onClickOutside } from '@vueuse/core'\nimport { createFocusTrap } from 'focus-trap'\nimport { computed, nextTick, ref, useTemplateRef, watch } from 'vue'\nimport { useHotKey } from '../../composables/index.js'\nimport { useTrapStackControl } from '../../composables/useTrapStackControl.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { getTrapStack } from '../../utils/focusTrap.js'\nimport NcButton from '../NcButton/index.ts'\n\nconst {\n\tariaLabel = undefined,\n\tdescription = undefined,\n\texcludeClickOutsideSelectors = [],\n\topen = false,\n\tisNav = false,\n} = defineProps<{\n\t/**\n\t * Unique id for this menu\n\t */\n\tid: string\n\n\t/**\n\t * aria-label attribute of the menu open button\n\t */\n\tariaLabel?: string\n\n\t/**\n\t * Current menu open state\n\t */\n\topen?: boolean\n\n\t/**\n\t * Pass `true` if the header menu is used for website navigation\n\t *\n\t * The wrapper tag will be set to `nav` and its `aria-labelledby`\n\t * will be associated with the menu open button\n\t */\n\tisNav?: boolean\n\n\t/**\n\t * Additional visually hidden description text for the menu\n\t * open button\n\t */\n\tdescription?: string\n\n\t/**\n\t * A query-selector or an array of query-selectors\n\t * to be ignored when clicking outside an element\n\t */\n\texcludeClickOutsideSelectors?: string | string[]\n}>()\n\nconst emit = defineEmits<{\n\t/** Emitted when the menu is fully closed (animation done) */\n\tclosed: []\n\n\t/** Emitted when the menu is fully opened (animation done) */\n\topened: []\n\n\t/** Updated open state */\n\t'update:open': [v: boolean]\n}>()\n\ndefineSlots<{\n\t/** The menu content */\n\tdefault?: Slot\n\t/** Icon trigger slot. Make sure the svg path is at least 16px. Usually mdi icon works at 20px */\n\ttrigger?: Slot\n}>()\n\n/** Id of the menu description */\nconst descriptionId = createElementId()\n/** Id of the trigger button */\nconst triggerId = createElementId()\n/** The active focus trap (if any) */\nconst focusTrap = ref<FocusTrap>()\n/** Is the menu currently opened */\nconst isOpened = ref(open)\n/** HTML tag to use for the header menu */\nconst wrapperTag = computed(() => isNav ? 'nav' : 'div')\n\n/** The menu content container element */\nconst contentContainerElement = useTemplateRef('contentContainer')\n/** The overall header menu wrapping element (<nav> or <div>) */\nconst headerMenuElement = useTemplateRef<HTMLElement>('headerMenu')\n/** The menu trigger button */\nconst triggerButtonInstance = useTemplateRef('triggerButton')\n\n// Handle click outside of the menu -> should close the menu\nconst ignore = computed(() => Array.isArray(excludeClickOutsideSelectors)\n\t? excludeClickOutsideSelectors\n\t: excludeClickOutsideSelectors.split(' '))\nonClickOutside(headerMenuElement, () => setMenuState(false), { ignore })\n\n// Pressing escape should close the menu\nuseHotKey('Escape', () => setMenuState(false), { prevent: true })\n\n// When component has its own custom focus management\n// The global focus trap stack should be paused\nuseTrapStackControl(isOpened, {\n\tdisabled: () => !isNav,\n})\n\n// Watch the open prop to adjust the internal opened state\nwatch(() => open, (state: boolean) => setMenuState(state))\n\n/**\n * Toggle the current menu open state\n */\nfunction toggleMenu() {\n\tsetMenuState(!isOpened.value)\n}\n\n/**\n * Set the menu opened state\n *\n * @param state The opened state to set\n */\nasync function setMenuState(state: boolean) {\n\tif (state === isOpened.value) {\n\t\treturn\n\t}\n\n\tisOpened.value = state\n\temit('update:open', state)\n\n\t// wait one tick to make sure the rendering finished\n\tawait nextTick()\n\t// either add or clear the focus trap\n\tawait (state ? addFocusTrap() : clearFocusTrap())\n\n\t// Emit signal to mark finished toggling\n\t// @ts-expect-error This seems to be broken in Vue's typescript macro compiler...\n\temit(state ? 'opened' : 'closed')\n}\n\n/**\n * When this is role navigation, then we cannot apply a focus trap.\n * In this case we close the menu on focus-out.\n *\n * @param event the focus event\n */\nfunction onFocusOut(event: FocusEvent) {\n\t// Is not a navigation\n\tif (!isNav) {\n\t\treturn\n\t}\n\n\t// Event target is not a node\n\tif (!(event.relatedTarget instanceof Node)) {\n\t\treturn\n\t}\n\n\tif (headerMenuElement.value?.contains(event.relatedTarget)) {\n\t\tsetMenuState(false)\n\t}\n}\n\n/**\n * Add focus trap for accessibility.\n * Shall only be used when all children are mounted\n * and available in the DOM. We use $nextTick for that.\n */\nasync function addFocusTrap() {\n\t// We cannot add the focus trap on navigation roles\n\t// also skip if already set\n\tif (isNav || focusTrap.value) {\n\t\treturn\n\t}\n\n\t// Init focus trap\n\tfocusTrap.value = createFocusTrap(contentContainerElement.value!, {\n\t\tallowOutsideClick: true,\n\t\ttrapStack: getTrapStack(),\n\t\tfallbackFocus: triggerButtonInstance.value?.$el,\n\t})\n\tfocusTrap.value.activate()\n}\n\n/**\n * Deactivate and clear the focus trap\n */\nfunction clearFocusTrap() {\n\tfocusTrap.value?.deactivate()\n\tfocusTrap.value = undefined\n}\n</script>\n\n<template>\n\t<component\n\t\t:is=\"wrapperTag\"\n\t\t:id=\"id\"\n\t\tref=\"headerMenu\"\n\t\t:aria-labelledby=\"isNav ? triggerId : null\"\n\t\t:class=\"{ 'header-menu--opened': isOpened }\"\n\t\tclass=\"header-menu\"\n\t\t@focusout=\"onFocusOut\">\n\t\t<!-- Trigger -->\n\t\t<NcButton\n\t\t\t:id=\"isNav ? triggerId : null\"\n\t\t\tref=\"triggerButton\"\n\t\t\t:aria-controls=\"`header-menu-${id}`\"\n\t\t\t:aria-expanded=\"isOpened.toString()\"\n\t\t\t:aria-label\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\tsize=\"large\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click.prevent=\"toggleMenu\">\n\t\t\t<template #icon>\n\t\t\t\t<slot name=\"trigger\" />\n\t\t\t</template>\n\t\t</NcButton>\n\n\t\t<span\n\t\t\tv-if=\"description\"\n\t\t\t:id=\"descriptionId\"\n\t\t\tclass=\"header-menu__description hidden-visually\">\n\t\t\t{{ description }}\n\t\t</span>\n\n\t\t<!-- Visual triangle -->\n\t\t<div v-show=\"isOpened\" class=\"header-menu__caret\" />\n\n\t\t<!-- Menu opened content -->\n\t\t<div\n\t\t\tv-show=\"isOpened\"\n\t\t\t:id=\"`header-menu-${id}`\"\n\t\t\tclass=\"header-menu__wrapper\">\n\t\t\t<div ref=\"contentContainer\" class=\"header-menu__content\">\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</div>\n\t</component>\n</template>\n\n<style lang=\"scss\" scoped>\n@use './header-menu__trigger.scss';\n\n// content inner and outer margin\n// Also used for menu top-right positioning\n$externalMargin: 8px;\n\n.header-menu {\n\t&__wrapper {\n\t\tposition: fixed;\n\t\tz-index: 2000;\n\t\ttop: var(--header-height);\n\t\tinset-inline-end: 0;\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $externalMargin;\n\t\tborder-radius: var(--border-radius-element);\n\t\tbackground-color: var(--color-main-background);\n\n\t\tfilter: drop-shadow(0 1px 5px var(--color-box-shadow));\n\t}\n\n\t&__caret {\n\t\tposition: absolute;\n\t\tz-index: 2001; // Because __wrapper is 2000.\n\t\tbottom: 0;\n\t\tinset-inline-start: calc(50% - 10px);\n\t\twidth: 0;\n\t\theight: 0;\n\t\tcontent: ' ';\n\t\tpointer-events: none;\n\t\tborder: 10px solid transparent;\n\t\tborder-bottom-color: var(--color-main-background);\n\t}\n\n\t&__content {\n\t\toverflow: auto;\n\t\twidth: 350px;\n\t\tmax-width: calc(100vw - 2 * $externalMargin);\n\t\tmin-height: calc(var(--default-clickable-area) * 1.5);\n\t\tmax-height: calc(100vh - var(--header-height) * 2);\n\t\t:deep(.empty-content) {\n\t\t\tmargin: 12vh 10px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","id","isNav","_unref","_normalizeClass","_createVNode","ariaLabel","_renderSlot","description","_createElementBlock","_withDirectives","_createElementVNode"],"mappings":"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"}
+{"version":3,"file":"NcHeaderMenu-D9WjsIsy.mjs","sources":["../../src/components/NcHeaderMenu/NcHeaderMenu.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used in the Nextcloud top header.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderMenu id=\"search\"\n\t\t\taria-label=\"Search\">\n\t\t\t<template #trigger>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t\t<div>\n\t\t\t\t<NcTextField label=\"Search for files, comments, contacts …\"\n\t\t\t\t\tstyle=\"padding-inline: 8px;\"\n\t\t\t\t\ttype=\"search\"\n\t\t\t\t\tv-model=\"query\" />\n\t\t\t\t<NcEmptyContent\n\t\t\t\t\tname=\"Search\"\n\t\t\t\t\t:description=\"query ? `No results for '${query}'` : 'Start typing to search'\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Magnify />\n\t\t\t\t\t</template>\n\t\t\t\t</NcEmptyContent>\n\t\t\t</div>\n\t\t</NcHeaderMenu>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tquery: '',\n\t\t}\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: end;\n\tbackground-color: var(--color-primary);\n\theight: var(--header-height, 50px);\n\tpadding-inline-end: 12px;\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { FocusTrap } from 'focus-trap'\nimport type { Slot } from 'vue'\n\nimport { onClickOutside } from '@vueuse/core'\nimport { createFocusTrap } from 'focus-trap'\nimport { computed, nextTick, ref, useTemplateRef, watch } from 'vue'\nimport { useHotKey } from '../../composables/index.js'\nimport { useTrapStackControl } from '../../composables/useTrapStackControl.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { getTrapStack } from '../../utils/focusTrap.js'\nimport NcButton from '../NcButton/index.ts'\n\nconst {\n\tariaLabel = undefined,\n\tdescription = undefined,\n\texcludeClickOutsideSelectors = [],\n\topen = false,\n\tisNav = false,\n} = defineProps<{\n\t/**\n\t * Unique id for this menu\n\t */\n\tid: string\n\n\t/**\n\t * aria-label attribute of the menu open button\n\t */\n\tariaLabel?: string\n\n\t/**\n\t * Current menu open state\n\t */\n\topen?: boolean\n\n\t/**\n\t * Pass `true` if the header menu is used for website navigation\n\t *\n\t * The wrapper tag will be set to `nav` and its `aria-labelledby`\n\t * will be associated with the menu open button\n\t */\n\tisNav?: boolean\n\n\t/**\n\t * Additional visually hidden description text for the menu\n\t * open button\n\t */\n\tdescription?: string\n\n\t/**\n\t * A query-selector or an array of query-selectors\n\t * to be ignored when clicking outside an element\n\t */\n\texcludeClickOutsideSelectors?: string | string[]\n}>()\n\nconst emit = defineEmits<{\n\t/** Emitted when the menu is fully closed (animation done) */\n\tclosed: []\n\n\t/** Emitted when the menu is fully opened (animation done) */\n\topened: []\n\n\t/** Updated open state */\n\t'update:open': [v: boolean]\n}>()\n\ndefineSlots<{\n\t/** The menu content */\n\tdefault?: Slot\n\t/** Icon trigger slot. Make sure the svg path is at least 16px. Usually mdi icon works at 20px */\n\ttrigger?: Slot\n}>()\n\n/** Id of the menu description */\nconst descriptionId = createElementId()\n/** Id of the trigger button */\nconst triggerId = createElementId()\n/** The active focus trap (if any) */\nconst focusTrap = ref<FocusTrap>()\n/** Is the menu currently opened */\nconst isOpened = ref(open)\n/** HTML tag to use for the header menu */\nconst wrapperTag = computed(() => isNav ? 'nav' : 'div')\n\n/** The menu content container element */\nconst contentContainerElement = useTemplateRef('contentContainer')\n/** The overall header menu wrapping element (<nav> or <div>) */\nconst headerMenuElement = useTemplateRef<HTMLElement>('headerMenu')\n/** The menu trigger button */\nconst triggerButtonInstance = useTemplateRef('triggerButton')\n\n// Handle click outside of the menu -> should close the menu\nconst ignore = computed(() => Array.isArray(excludeClickOutsideSelectors)\n\t? excludeClickOutsideSelectors\n\t: excludeClickOutsideSelectors.split(' '))\nonClickOutside(headerMenuElement, () => setMenuState(false), { ignore })\n\n// Pressing escape should close the menu\nuseHotKey('Escape', () => setMenuState(false), { prevent: true })\n\n// When component has its own custom focus management\n// The global focus trap stack should be paused\nuseTrapStackControl(isOpened, {\n\tdisabled: () => !isNav,\n})\n\n// Watch the open prop to adjust the internal opened state\nwatch(() => open, (state: boolean) => setMenuState(state))\n\n/**\n * Toggle the current menu open state\n */\nfunction toggleMenu() {\n\tsetMenuState(!isOpened.value)\n}\n\n/**\n * Set the menu opened state\n *\n * @param state The opened state to set\n */\nasync function setMenuState(state: boolean) {\n\tif (state === isOpened.value) {\n\t\treturn\n\t}\n\n\tisOpened.value = state\n\temit('update:open', state)\n\n\t// wait one tick to make sure the rendering finished\n\tawait nextTick()\n\t// either add or clear the focus trap\n\tawait (state ? addFocusTrap() : clearFocusTrap())\n\n\t// Emit signal to mark finished toggling\n\t// @ts-expect-error This seems to be broken in Vue's typescript macro compiler...\n\temit(state ? 'opened' : 'closed')\n}\n\n/**\n * When this is role navigation, then we cannot apply a focus trap.\n * In this case we close the menu on focus-out.\n *\n * @param event the focus event\n */\nfunction onFocusOut(event: FocusEvent) {\n\t// Is not a navigation\n\tif (!isNav) {\n\t\treturn\n\t}\n\n\t// Event target is not a node\n\tif (!(event.relatedTarget instanceof Node)) {\n\t\treturn\n\t}\n\n\tif (headerMenuElement.value?.contains(event.relatedTarget)) {\n\t\tsetMenuState(false)\n\t}\n}\n\n/**\n * Add focus trap for accessibility.\n * Shall only be used when all children are mounted\n * and available in the DOM. We use $nextTick for that.\n */\nasync function addFocusTrap() {\n\t// We cannot add the focus trap on navigation roles\n\t// also skip if already set\n\tif (isNav || focusTrap.value) {\n\t\treturn\n\t}\n\n\t// Init focus trap\n\tfocusTrap.value = createFocusTrap(contentContainerElement.value!, {\n\t\tallowOutsideClick: true,\n\t\ttrapStack: getTrapStack(),\n\t\tfallbackFocus: triggerButtonInstance.value?.$el,\n\t})\n\tfocusTrap.value.activate()\n}\n\n/**\n * Deactivate and clear the focus trap\n */\nfunction clearFocusTrap() {\n\tfocusTrap.value?.deactivate()\n\tfocusTrap.value = undefined\n}\n</script>\n\n<template>\n\t<component\n\t\t:is=\"wrapperTag\"\n\t\t:id=\"id\"\n\t\tref=\"headerMenu\"\n\t\t:aria-labelledby=\"isNav ? triggerId : null\"\n\t\t:class=\"{ 'header-menu--opened': isOpened }\"\n\t\tclass=\"header-menu\"\n\t\t@focusout=\"onFocusOut\">\n\t\t<!-- Trigger -->\n\t\t<NcButton\n\t\t\t:id=\"isNav ? triggerId : null\"\n\t\t\tref=\"triggerButton\"\n\t\t\t:aria-controls=\"`header-menu-${id}`\"\n\t\t\t:aria-expanded=\"isOpened.toString()\"\n\t\t\t:aria-label\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\tsize=\"large\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click.prevent=\"toggleMenu\">\n\t\t\t<template #icon>\n\t\t\t\t<slot name=\"trigger\" />\n\t\t\t</template>\n\t\t</NcButton>\n\n\t\t<span\n\t\t\tv-if=\"description\"\n\t\t\t:id=\"descriptionId\"\n\t\t\tclass=\"header-menu__description hidden-visually\">\n\t\t\t{{ description }}\n\t\t</span>\n\n\t\t<!-- Visual triangle -->\n\t\t<div v-show=\"isOpened\" class=\"header-menu__caret\" />\n\n\t\t<!-- Menu opened content -->\n\t\t<div\n\t\t\tv-show=\"isOpened\"\n\t\t\t:id=\"`header-menu-${id}`\"\n\t\t\tclass=\"header-menu__wrapper\">\n\t\t\t<div ref=\"contentContainer\" class=\"header-menu__content\">\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</div>\n\t</component>\n</template>\n\n<style lang=\"scss\" scoped>\n@use './header-menu__trigger.scss';\n\n// content inner and outer margin\n// Also used for menu top-right positioning\n$externalMargin: 8px;\n\n.header-menu {\n\t&__wrapper {\n\t\tposition: fixed;\n\t\tz-index: 2000;\n\t\ttop: var(--header-height);\n\t\tinset-inline-end: 0;\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $externalMargin;\n\t\tborder-radius: var(--border-radius-element);\n\t\tbackground-color: var(--color-main-background);\n\n\t\tfilter: drop-shadow(0 1px 5px var(--color-box-shadow));\n\t}\n\n\t&__caret {\n\t\tposition: absolute;\n\t\tz-index: 2001; // Because __wrapper is 2000.\n\t\tbottom: 0;\n\t\tinset-inline-start: calc(50% - 10px);\n\t\twidth: 0;\n\t\theight: 0;\n\t\tcontent: ' ';\n\t\tpointer-events: none;\n\t\tborder: 10px solid transparent;\n\t\tborder-bottom-color: var(--color-main-background);\n\t}\n\n\t&__content {\n\t\toverflow: auto;\n\t\twidth: 350px;\n\t\tmax-width: calc(100vw - 2 * $externalMargin);\n\t\tmin-height: calc(var(--default-clickable-area) * 1.5);\n\t\tmax-height: calc(100vh - var(--header-height) * 2);\n\t\t:deep(.empty-content) {\n\t\t\tmargin: 12vh 10px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","id","isNav","_unref","_normalizeClass","_createVNode","ariaLabel","_renderSlot","description","_createElementBlock","_withDirectives","_createElementVNode"],"mappings":"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"}

package/dist/chunks/{NcHotkey-BMbdzaIs.mjs → NcHotkey-Bd-gNn3a.mjs}

@@ -1,6 +1,6 @@
-import '../assets/NcHotkey-4yi1Hobg.css';
+import '../assets/NcHotkey-CvuY7fQJ.css';
 import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, createElementVNode, renderSlot, Fragment, renderList, createBlock, createTextVNode, toDisplayString } from "vue";
-import { N as NcKbd } from "./NcKbd-CZdynD1d.mjs";
+import { N as NcKbd } from "./NcKbd-DzE_4Z3y.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const NO_LABEL_WARNING = "⚠️ NcHotKey must have a label or slot content";
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -42,11 +42,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const hotkey = "_hotkey_1s86g_20";
-const hotkey__label = "_hotkey__label_1s86g_27";
-const hotkey__keys = "_hotkey__keys_1s86g_28";
+const hotkey = "_hotkey_ohHBi";
+const hotkey__label = "_hotkey__label_au-to";
+const hotkey__keys = "_hotkey__keys_4Mi3z";
 const style0 = {
-  "material-design-icon": "_material-design-icon_1s86g_12",
+  "material-design-icon": "_material-design-icon_yC3vd",
   hotkey,
   hotkey__label,
   hotkey__keys
@@ -58,4 +58,4 @@ const NcHotkey = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssMod
 export {
   NcHotkey as N
 };
-//# sourceMappingURL=NcHotkey-BMbdzaIs.mjs.map
+//# sourceMappingURL=NcHotkey-Bd-gNn3a.mjs.map

package/dist/chunks/{NcHotkey-BMbdzaIs.mjs.map → NcHotkey-Bd-gNn3a.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcHotkey-BMbdzaIs.mjs","sources":["../../src/components/NcHotkey/NcHotkey.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { computed } from 'vue'\nimport NcKbd from '../NcKbd/NcKbd.vue'\n\nconst {\n\tlabel = undefined,\n\thotkey = undefined,\n} = defineProps<{\n\t/**\n\t * Label for the hotkey\n\t */\n\tlabel?: string\n\t/**\n\t * Hotkey combination string separated by space, for example, `Control Alt T` or `F2` (see `<NcKbd>` for supported key names)\n\t */\n\thotkey?: string\n}>()\n\ndefineSlots<{\n\t/**\n\t * Custom label content\n\t */\n\tdefault?: Slot\n\t/**\n\t * Custom hotkey content for an advanced hotkey layout with <NcKbd> components or other custom content\n\t */\n\thotkey?: Slot\n}>()\n\nconst symbols = computed(() => {\n\treturn hotkey?.split(/\\s+/).map((s) => s.trim())\n})\n\nconst NO_LABEL_WARNING = '⚠️ NcHotKey must have a label or slot content'\n</script>\n\n<template>\n\t<li :class=\"$style.hotkey\">\n\t\t<span role=\"term\" :class=\"$style.hotkey__keys\">\n\t\t\t<slot name=\"hotkey\">\n\t\t\t\t<NcKbd v-for=\"(symbol, index) in symbols\" :key=\"index\" :symbol />\n\t\t\t</slot>\n\t\t</span>\n\t\t<span role=\"definition\" :class=\"$style.hotkey__label\">\n\t\t\t<slot>\n\t\t\t\t{{ label || NO_LABEL_WARNING }}\n\t\t\t</slot>\n\t\t</span>\n\t</li>\n</template>\n\n<style lang=\"scss\" module>\n.hotkey {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n\tdisplay: flex;\n\tflex-direction: row-reverse;\n\talign-items: stretch;\n\tpadding-inline: var(--form-element-label-offset);\n\n\t&:first-child {\n\t\t.hotkey__label,\n\t\t.hotkey__keys {\n\t\t\tborder-block-start: none;\n\t\t}\n\t}\n\n}\n\n.hotkey__label,\n.hotkey__keys {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding-block: calc(2 * var(--default-grid-baseline));\n\tborder-block-start: 1px solid var(--color-border);\n}\n\n.hotkey__label {\n\tflex: 1 1 200px;\n}\n\n.hotkey__keys {\n\tflex: 1 1 auto;\n\tflex-wrap: wrap;\n\tjustify-content: end;\n\trow-gap: calc(1 * var(--default-grid-baseline));\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_createElementVNode","_renderSlot","_openBlock","_Fragment","_renderList","_createBlock","label"],"mappings":";;;AAwCA,MAAM,mBAAmB;;;;;;;;AAJzB,UAAM,UAAU,SAAS,MAAM;AAC9B,aAAO,QAAA,QAAQ,MAAM,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM;AAAA,IAChD,CAAC;;0BAMAA,mBAWK,MAAA;AAAA,QAXA,OAAKC,eAAEC,KAAAA,OAAO,MAAM;AAAA,MAAA;QACxBC,mBAIO,QAAA;AAAA,UAJD,MAAK;AAAA,UAAQ,OAAKF,eAAEC,KAAAA,OAAO,YAAY;AAAA,QAAA;UAC5CE,WAEO,2BAFP,MAEO;AAAA,aADNC,UAAA,IAAA,GAAAL,mBAAiEM,UAAA,MAAAC,WAAhC,QAAA,OAAO,CAAzB,QAAQ,UAAK;kCAA5BC,YAAiE,OAAA;AAAA,gBAAtB,KAAK;AAAA,gBAAQ;AAAA,cAAA;;;;QAG1DL,mBAIO,QAAA;AAAA,UAJD,MAAK;AAAA,UAAc,OAAKF,eAAEC,KAAAA,OAAO,aAAa;AAAA,QAAA;UACnDE,WAEO,4BAFP,MAEO;AAAA,YADHK,gBAAAA,gBAAAA,KAAAA,SAAS,gBAAgB,GAAA,CAAA;AAAA,UAAA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcHotkey-Bd-gNn3a.mjs","sources":["../../src/components/NcHotkey/NcHotkey.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { computed } from 'vue'\nimport NcKbd from '../NcKbd/NcKbd.vue'\n\nconst {\n\tlabel = undefined,\n\thotkey = undefined,\n} = defineProps<{\n\t/**\n\t * Label for the hotkey\n\t */\n\tlabel?: string\n\t/**\n\t * Hotkey combination string separated by space, for example, `Control Alt T` or `F2` (see `<NcKbd>` for supported key names)\n\t */\n\thotkey?: string\n}>()\n\ndefineSlots<{\n\t/**\n\t * Custom label content\n\t */\n\tdefault?: Slot\n\t/**\n\t * Custom hotkey content for an advanced hotkey layout with <NcKbd> components or other custom content\n\t */\n\thotkey?: Slot\n}>()\n\nconst symbols = computed(() => {\n\treturn hotkey?.split(/\\s+/).map((s) => s.trim())\n})\n\nconst NO_LABEL_WARNING = '⚠️ NcHotKey must have a label or slot content'\n</script>\n\n<template>\n\t<li :class=\"$style.hotkey\">\n\t\t<span role=\"term\" :class=\"$style.hotkey__keys\">\n\t\t\t<slot name=\"hotkey\">\n\t\t\t\t<NcKbd v-for=\"(symbol, index) in symbols\" :key=\"index\" :symbol />\n\t\t\t</slot>\n\t\t</span>\n\t\t<span role=\"definition\" :class=\"$style.hotkey__label\">\n\t\t\t<slot>\n\t\t\t\t{{ label || NO_LABEL_WARNING }}\n\t\t\t</slot>\n\t\t</span>\n\t</li>\n</template>\n\n<style lang=\"scss\" module>\n.hotkey {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n\tdisplay: flex;\n\tflex-direction: row-reverse;\n\talign-items: stretch;\n\tpadding-inline: var(--form-element-label-offset);\n\n\t&:first-child {\n\t\t.hotkey__label,\n\t\t.hotkey__keys {\n\t\t\tborder-block-start: none;\n\t\t}\n\t}\n\n}\n\n.hotkey__label,\n.hotkey__keys {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding-block: calc(2 * var(--default-grid-baseline));\n\tborder-block-start: 1px solid var(--color-border);\n}\n\n.hotkey__label {\n\tflex: 1 1 200px;\n}\n\n.hotkey__keys {\n\tflex: 1 1 auto;\n\tflex-wrap: wrap;\n\tjustify-content: end;\n\trow-gap: calc(1 * var(--default-grid-baseline));\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_createElementVNode","_renderSlot","_openBlock","_Fragment","_renderList","_createBlock","label"],"mappings":";;;AAwCA,MAAM,mBAAmB;;;;;;;;AAJzB,UAAM,UAAU,SAAS,MAAM;AAC9B,aAAO,QAAA,QAAQ,MAAM,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM;AAAA,IAChD,CAAC;;0BAMAA,mBAWK,MAAA;AAAA,QAXA,OAAKC,eAAEC,KAAAA,OAAO,MAAM;AAAA,MAAA;QACxBC,mBAIO,QAAA;AAAA,UAJD,MAAK;AAAA,UAAQ,OAAKF,eAAEC,KAAAA,OAAO,YAAY;AAAA,QAAA;UAC5CE,WAEO,2BAFP,MAEO;AAAA,aADNC,UAAA,IAAA,GAAAL,mBAAiEM,UAAA,MAAAC,WAAhC,QAAA,OAAO,CAAzB,QAAQ,UAAK;kCAA5BC,YAAiE,OAAA;AAAA,gBAAtB,KAAK;AAAA,gBAAQ;AAAA,cAAA;;;;QAG1DL,mBAIO,QAAA;AAAA,UAJD,MAAK;AAAA,UAAc,OAAKF,eAAEC,KAAAA,OAAO,aAAa;AAAA,QAAA;UACnDE,WAEO,4BAFP,MAEO;AAAA,YADHK,gBAAAA,gBAAAA,KAAAA,SAAS,gBAAgB,GAAA,CAAA;AAAA,UAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcHotkeyList-67NnF26Y.mjs → NcHotkeyList-D8hkh6o6.mjs}

@@ -1,6 +1,6 @@
-import '../assets/NcHotkeyList-gAZN0WIu.css';
+import '../assets/NcHotkeyList-Braxeyah.css';
 import { defineComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, toDisplayString, unref, renderSlot } from "vue";
-import { r as register, p as t31, a as t } from "./_l10n-CgsPi8nC.mjs";
+import { r as register, p as t31, a as t } from "./_l10n-Dq_eYxz_.mjs";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 register(t31);
@@ -26,8 +26,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const hotkeyList = "_hotkeyList_pf97p_2";
-const hotkeyList__heading = "_hotkeyList__heading_pf97p_6";
+const hotkeyList = "_hotkeyList_xNXCh";
+const hotkeyList__heading = "_hotkeyList__heading_j6G86";
 const style0 = {
   hotkeyList,
   hotkeyList__heading
@@ -39,4 +39,4 @@ const NcHotkeyList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cs
 export {
   NcHotkeyList as N
 };
-//# sourceMappingURL=NcHotkeyList-67NnF26Y.mjs.map
+//# sourceMappingURL=NcHotkeyList-D8hkh6o6.mjs.map

package/dist/chunks/{NcHotkeyList-67NnF26Y.mjs.map → NcHotkeyList-D8hkh6o6.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcHotkeyList-67NnF26Y.mjs","sources":["../../src/components/NcHotkeyList/NcHotkeyList.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\n\nconst {\n\tlabel = undefined,\n} = defineProps<{\n\t/**\n\t * Heading list label to use when there are multiple lists of shortcuts\n\t */\n\tlabel?: string\n}>()\n\ndefineSlots<{\n\t/**\n\t * Shortcuts described via <NcHotkey> components\n\t */\n\tdefault?: Slot\n}>()\n\nconst labelId = `NcHotkeyList_${createElementId()}`\n</script>\n\n<template>\n\t<div :class=\"$style.hotkeyList\">\n\t\t<div :id=\"labelId\" :class=\"[$style.hotkeyList__heading, { 'hidden-visually': !label }]\">\n\t\t\t{{ label || t('Keyboard shortcuts') }}\n\t\t</div>\n\t\t<ul :aria-labelledby=\"labelId\">\n\t\t\t<slot />\n\t\t</ul>\n\t</div>\n</template>\n\n<style module>\n.hotkeyList {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n}\n\n.hotkeyList__heading {\n\tfont-weight: bold;\n\tmargin-inline: var(--form-element-label-offset);\n}\n</style>\n\n<docs>\n## General\n\nList of keyboard shortcuts for the `<NcAppSettingsShortcutsSection>`.\n\n```vue\n<template>\n\t<NcHotkeyList>\n\t\t<NcHotkey label=\"New File\" hotkey=\"Ctrl N\" />\n\t\t<NcHotkey label=\"Open File\" hotkey=\"Ctrl O\" />\n\t\t<NcHotkey label=\"Save File\" hotkey=\"Ctrl S\" />\n\t</NcHotkeyList>\n</template>\n```\n\n## Groups\n\nThe hotkey list can have an optional heading label. This is useful when there are multiple groups of shortcuts in an app with many shortcuts.\n\n```vue\n<template>\n\t<section>\n\t\t<NcHotkeyList label=\"Actions\">\n\t\t\t<NcHotkey label=\"File actions\" hotkey=\"A\" />\n\t\t\t<NcHotkey label=\"Rename\" hotkey=\"F2\" />\n\t\t\t<NcHotkey label=\"Delete\" hotkey=\"Delete\" />\n\t\t\t<NcHotkey label=\"Add or remove favorite\" hotkey=\"S\" />\n\t\t\t<NcHotkey label=\"Manage tags\" hotkey=\"T\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"Selection\">\n\t\t\t<NcHotkey label=\"Select all files\" hotkey=\"Control A\" />\n\t\t\t<NcHotkey label=\"Deselect all\" hotkey=\"Escape\" />\n\t\t\t<NcHotkey label=\"Select or deselect\" hotkey=\"Control Space\" />\n\t\t\t<NcHotkey label=\"Select a range\" hotkey=\"Control Shift Space\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"Navigation\">\n\t\t\t<NcHotkey label=\"Go to parent folder\" hotkey=\"Alt ArrowUp\" />\n\t\t\t<NcHotkey label=\"Go to file above\" hotkey=\"ArrowUp\" />\n\t\t\t<NcHotkey label=\"Go to file below\" hotkey=\"ArrowDown\" />\n\t\t\t<NcHotkey label=\"Go left in grid\" hotkey=\"ArrowLeft\" />\n\t\t\t<NcHotkey label=\"Go right in grid\" hotkey=\"ArrowRight\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"View\">\n\t\t\t<NcHotkey label=\"Toggle grid view\" hotkey=\"V\" />\n\t\t\t<NcHotkey label=\"Open file sidebar\" hotkey=\"D\" />\n\t\t\t<NcHotkey label=\"Show those shortcuts\" hotkey=\"?\" />\n\t\t</NcHotkeyList>\n\t</section>\n</template>\n```\n</docs>\n"],"names":["_createElementBlock","_normalizeClass","$style","_createElementVNode","label","_unref","_renderSlot"],"mappings":";;;;;;;;;;;AA2BA,UAAM,UAAU,gBAAgB,gBAAA,CAAiB;;0BAIhDA,mBAOM,OAAA;AAAA,QAPA,OAAKC,eAAEC,KAAAA,OAAO,UAAU;AAAA,MAAA;QAC7BC,mBAEM,OAAA;AAAA,UAFA,IAAI;AAAA,UAAU,OAAKF,eAAA,CAAGC,KAAAA,OAAO,2CAA2CE,KAAAA,OAAK,CAAA;AAAA,QAAA,GAC/EA,gBAAAA,KAAAA,SAASC,MAAA,CAAA,EAAC,oBAAA,CAAA,GAAA,CAAA;AAAA,QAEdF,mBAEK,MAAA,EAFA,mBAAiB,WAAO;AAAA,UAC5BG,WAAQ,KAAA,QAAA,SAAA;AAAA,QAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcHotkeyList-D8hkh6o6.mjs","sources":["../../src/components/NcHotkeyList/NcHotkeyList.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\n\nconst {\n\tlabel = undefined,\n} = defineProps<{\n\t/**\n\t * Heading list label to use when there are multiple lists of shortcuts\n\t */\n\tlabel?: string\n}>()\n\ndefineSlots<{\n\t/**\n\t * Shortcuts described via <NcHotkey> components\n\t */\n\tdefault?: Slot\n}>()\n\nconst labelId = `NcHotkeyList_${createElementId()}`\n</script>\n\n<template>\n\t<div :class=\"$style.hotkeyList\">\n\t\t<div :id=\"labelId\" :class=\"[$style.hotkeyList__heading, { 'hidden-visually': !label }]\">\n\t\t\t{{ label || t('Keyboard shortcuts') }}\n\t\t</div>\n\t\t<ul :aria-labelledby=\"labelId\">\n\t\t\t<slot />\n\t\t</ul>\n\t</div>\n</template>\n\n<style module>\n.hotkeyList {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n}\n\n.hotkeyList__heading {\n\tfont-weight: bold;\n\tmargin-inline: var(--form-element-label-offset);\n}\n</style>\n\n<docs>\n## General\n\nList of keyboard shortcuts for the `<NcAppSettingsShortcutsSection>`.\n\n```vue\n<template>\n\t<NcHotkeyList>\n\t\t<NcHotkey label=\"New File\" hotkey=\"Ctrl N\" />\n\t\t<NcHotkey label=\"Open File\" hotkey=\"Ctrl O\" />\n\t\t<NcHotkey label=\"Save File\" hotkey=\"Ctrl S\" />\n\t</NcHotkeyList>\n</template>\n```\n\n## Groups\n\nThe hotkey list can have an optional heading label. This is useful when there are multiple groups of shortcuts in an app with many shortcuts.\n\n```vue\n<template>\n\t<section>\n\t\t<NcHotkeyList label=\"Actions\">\n\t\t\t<NcHotkey label=\"File actions\" hotkey=\"A\" />\n\t\t\t<NcHotkey label=\"Rename\" hotkey=\"F2\" />\n\t\t\t<NcHotkey label=\"Delete\" hotkey=\"Delete\" />\n\t\t\t<NcHotkey label=\"Add or remove favorite\" hotkey=\"S\" />\n\t\t\t<NcHotkey label=\"Manage tags\" hotkey=\"T\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"Selection\">\n\t\t\t<NcHotkey label=\"Select all files\" hotkey=\"Control A\" />\n\t\t\t<NcHotkey label=\"Deselect all\" hotkey=\"Escape\" />\n\t\t\t<NcHotkey label=\"Select or deselect\" hotkey=\"Control Space\" />\n\t\t\t<NcHotkey label=\"Select a range\" hotkey=\"Control Shift Space\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"Navigation\">\n\t\t\t<NcHotkey label=\"Go to parent folder\" hotkey=\"Alt ArrowUp\" />\n\t\t\t<NcHotkey label=\"Go to file above\" hotkey=\"ArrowUp\" />\n\t\t\t<NcHotkey label=\"Go to file below\" hotkey=\"ArrowDown\" />\n\t\t\t<NcHotkey label=\"Go left in grid\" hotkey=\"ArrowLeft\" />\n\t\t\t<NcHotkey label=\"Go right in grid\" hotkey=\"ArrowRight\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"View\">\n\t\t\t<NcHotkey label=\"Toggle grid view\" hotkey=\"V\" />\n\t\t\t<NcHotkey label=\"Open file sidebar\" hotkey=\"D\" />\n\t\t\t<NcHotkey label=\"Show those shortcuts\" hotkey=\"?\" />\n\t\t</NcHotkeyList>\n\t</section>\n</template>\n```\n</docs>\n"],"names":["_createElementBlock","_normalizeClass","$style","_createElementVNode","label","_unref","_renderSlot"],"mappings":";;;;;;;;;;;AA2BA,UAAM,UAAU,gBAAgB,gBAAA,CAAiB;;0BAIhDA,mBAOM,OAAA;AAAA,QAPA,OAAKC,eAAEC,KAAAA,OAAO,UAAU;AAAA,MAAA;QAC7BC,mBAEM,OAAA;AAAA,UAFA,IAAI;AAAA,UAAU,OAAKF,eAAA,CAAGC,KAAAA,OAAO,2CAA2CE,KAAAA,OAAK,CAAA;AAAA,QAAA,GAC/EA,gBAAAA,KAAAA,SAASC,MAAA,CAAA,EAAC,oBAAA,CAAA,GAAA,CAAA;AAAA,QAEdF,mBAEK,MAAA,EAFA,mBAAiB,WAAO;AAAA,UAC5BG,WAAQ,KAAA,QAAA,SAAA;AAAA,QAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcIconToggleSwitch-DNEYngCw.mjs → NcIconToggleSwitch-CSrdR61T.mjs}

@@ -1,4 +1,4 @@
-import '../assets/NcIconToggleSwitch-C29S_5Rp.css';
+import '../assets/NcIconToggleSwitch-saytabt5.css';
 import { defineComponent, useCssVars, computed, createBlock, openBlock, normalizeClass } from "vue";
 import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BvLanNaW.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
@@ -35,9 +35,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const iconToggleSwitch = "_iconToggleSwitch_ixmnx_20";
+const iconToggleSwitch = "_iconToggleSwitch_WgcOx";
 const style0 = {
-  "material-design-icon": "_material-design-icon_ixmnx_12",
+  "material-design-icon": "_material-design-icon_ZYrc5",
   iconToggleSwitch
 };
 const cssModules = {
@@ -47,4 +47,4 @@ const NcIconToggleSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModule
 export {
   NcIconToggleSwitch as N
 };
-//# sourceMappingURL=NcIconToggleSwitch-DNEYngCw.mjs.map
+//# sourceMappingURL=NcIconToggleSwitch-CSrdR61T.mjs.map

package/dist/chunks/{NcIconToggleSwitch-DNEYngCw.mjs.map → NcIconToggleSwitch-CSrdR61T.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcIconToggleSwitch-DNEYngCw.mjs","sources":["../../src/components/NcIconToggleSwitch/NcIconToggleSwitch.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script lang=\"ts\">\nconst svg = `<svg\n\txmlns=\"http://www.w3.org/2000/svg\"\n\tviewBox=\"0 0 24 12\">\n\t<path d=\"M17,1H7A5,5 0 0,0 2,6 5,5 0 0,0 7,11H17A5,5 0 0,0 22,6 5,5 0 0,0 17,1Z\" />\n\t<circle\n\t\tcy=\"6\"\n\t\tr=\"3\"\n\t\tfill=\"var(--color-main-background)\" />\n</svg>`\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\n\nconst {\n\tchecked,\n\tsize = 34,\n\tinline = false,\n} = defineProps<{\n\t/** Whether the toggle switch is checked */\n\tchecked: boolean\n\t/** Size of the icon */\n\tsize?: number\n\t/** NcIconSvgWrapper's inline prop */\n\tinline?: boolean\n}>()\n\nconst color = computed(() => checked ? 'var(--color-primary-element)' : 'var(--color-text-maxcontrast)')\nconst cx = computed(() => checked ? 'calc(17 / 24 * 100%)' : 'calc(7 / 24 * 100%)')\n</script>\n\n<template>\n\t<NcIconSvgWrapper\n\t\t:class=\"$style.iconToggleSwitch\"\n\t\t:svg\n\t\t:size\n\t\t:inline />\n</template>\n\n<style module lang=\"scss\">\n.iconToggleSwitch {\n\tcolor: v-bind(color);\n\ttransition: color var(--animation-quick) ease;\n\n\tsvg {\n\t\t/* Unlike other icons, this icon is not a square */\n\t\theight: auto !important;\n\t}\n\n\tcircle {\n\t\tcx: v-bind(cx);\n\t\ttransition: cx var(--animation-quick) ease;\n\t}\n}\n</style>\n\n<docs>\nPrivate component\n</docs>\n"],"names":["_createBlock","_normalizeClass","$style","size","inline"],"mappings":";;;AAMA,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;AA4BZ,UAAM,QAAQ,SAAS,MAAM,kBAAU,iCAAiC,+BAA+B;AACvG,UAAM,KAAK,SAAS,MAAM,QAAA,UAAU,yBAAyB,qBAAqB;;0BAIjFA,YAIW,kBAAA;AAAA,QAHT,OAAKC,eAAEC,KAAAA,OAAO,gBAAgB;AAAA,QAC9B;AAAA,QACA,MAAAC,KAAAA;AAAAA,QACA,QAAAC,KAAAA;AAAAA,MAAAA;;;;;;;;;;;;;"}
+{"version":3,"file":"NcIconToggleSwitch-CSrdR61T.mjs","sources":["../../src/components/NcIconToggleSwitch/NcIconToggleSwitch.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script lang=\"ts\">\nconst svg = `<svg\n\txmlns=\"http://www.w3.org/2000/svg\"\n\tviewBox=\"0 0 24 12\">\n\t<path d=\"M17,1H7A5,5 0 0,0 2,6 5,5 0 0,0 7,11H17A5,5 0 0,0 22,6 5,5 0 0,0 17,1Z\" />\n\t<circle\n\t\tcy=\"6\"\n\t\tr=\"3\"\n\t\tfill=\"var(--color-main-background)\" />\n</svg>`\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\n\nconst {\n\tchecked,\n\tsize = 34,\n\tinline = false,\n} = defineProps<{\n\t/** Whether the toggle switch is checked */\n\tchecked: boolean\n\t/** Size of the icon */\n\tsize?: number\n\t/** NcIconSvgWrapper's inline prop */\n\tinline?: boolean\n}>()\n\nconst color = computed(() => checked ? 'var(--color-primary-element)' : 'var(--color-text-maxcontrast)')\nconst cx = computed(() => checked ? 'calc(17 / 24 * 100%)' : 'calc(7 / 24 * 100%)')\n</script>\n\n<template>\n\t<NcIconSvgWrapper\n\t\t:class=\"$style.iconToggleSwitch\"\n\t\t:svg\n\t\t:size\n\t\t:inline />\n</template>\n\n<style module lang=\"scss\">\n.iconToggleSwitch {\n\tcolor: v-bind(color);\n\ttransition: color var(--animation-quick) ease;\n\n\tsvg {\n\t\t/* Unlike other icons, this icon is not a square */\n\t\theight: auto !important;\n\t}\n\n\tcircle {\n\t\tcx: v-bind(cx);\n\t\ttransition: cx var(--animation-quick) ease;\n\t}\n}\n</style>\n\n<docs>\nPrivate component\n</docs>\n"],"names":["_createBlock","_normalizeClass","$style","size","inline"],"mappings":";;;AAMA,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;AA4BZ,UAAM,QAAQ,SAAS,MAAM,kBAAU,iCAAiC,+BAA+B;AACvG,UAAM,KAAK,SAAS,MAAM,QAAA,UAAU,yBAAyB,qBAAqB;;0BAIjFA,YAIW,kBAAA;AAAA,QAHT,OAAKC,eAAEC,KAAAA,OAAO,gBAAgB;AAAA,QAC9B;AAAA,QACA,MAAAC,KAAAA;AAAAA,QACA,QAAAC,KAAAA;AAAAA,MAAAA;;;;;;;;;;;;;"}