@nextcloud/vue 9.1.0 → 9.3.0

package/dist/chunks/NcFormBoxButton-4XaQUTOS.mjs

@@ -0,0 +1,145 @@
+import '../assets/NcFormBoxButton-C6EvdLK4.css';
+import { reactive, inject, computed, defineComponent, toRef, createBlock, openBlock, mergeProps, unref, createSlots, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import { q as mdiOpenInNew, r as mdiArrowTopRight } from "./mdi-HQ-WBPmL.mjs";
+import { N as NcFormBoxItem } from "./NcFormBoxItem-BBP76Mkf.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";
+/*!
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+function useButtonLink(options) {
+  const props = reactive(options);
+  const hasVueRouterContext = inject(routerKey, null) !== null;
+  const tag = computed(() => {
+    if (hasVueRouterContext && props.to) {
+      return "RouterLink";
+    } else if (props.href) {
+      return "a";
+    } else {
+      return "button";
+    }
+  });
+  const isLink = computed(() => tag.value === "RouterLink" || tag.value === "a");
+  const isHyperLink = computed(() => tag.value === "a");
+  const isRouterLink = computed(() => tag.value === "RouterLink");
+  const isButton = computed(() => tag.value === "button");
+  const attrs = computed(() => {
+    if (tag.value === "RouterLink") {
+      return {
+        to: props.to,
+        activeClass: "active",
+        ...props.additionalAttrs?.("RouterLink") ?? {}
+      };
+    } else if (tag.value === "a") {
+      return {
+        href: props.href,
+        target: props.target,
+        download: props.download || void 0,
+        rel: "nofollow noreferrer noopener",
+        ...props.additionalAttrs?.("a") ?? {}
+      };
+    } else if (tag.value === "button") {
+      return {
+        type: props.type || "button",
+        disabled: props.disabled,
+        ...props.additionalAttrs?.("button") ?? {}
+      };
+    }
+  });
+  return {
+    tag,
+    isLink,
+    isHyperLink,
+    isRouterLink,
+    isButton,
+    attrs
+  };
+}
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcFormBoxButton",
+  props: {
+    label: { default: () => void 0 },
+    description: { default: () => void 0 },
+    invertedAccent: { type: Boolean, default: false },
+    to: { default: () => void 0 },
+    href: { default: () => void 0 },
+    target: { default: () => void 0 },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ["click"],
+  setup(__props) {
+    const { tag, attrs, isLink } = useButtonLink({
+      to: toRef(() => __props.to),
+      href: toRef(() => __props.href),
+      target: toRef(() => __props.target),
+      disabled: toRef(() => __props.disabled)
+    });
+    const icon = computed(() => {
+      if (isLink.value) {
+        return __props.target === "_blank" ? mdiOpenInNew : mdiArrowTopRight;
+      }
+      return void 0;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(NcFormBoxItem, mergeProps({
+        tag: unref(tag),
+        "item-classes": [
+          "button-vue",
+          /* Reset server's global HTML button styles */
+          _ctx.$style.formBoxButton
+        ],
+        "inverted-accent": _ctx.invertedAccent
+      }, unref(attrs), {
+        tabindex: "0",
+        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+      }), createSlots({ _: 2 }, [
+        _ctx.$slots.default || _ctx.label ? {
+          name: "default",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "default", {}, () => [
+              createTextVNode(toDisplayString(_ctx.label), 1)
+            ])
+          ]),
+          key: "0"
+        } : void 0,
+        _ctx.$slots.description || _ctx.description ? {
+          name: "description",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "description", {}, () => [
+              createTextVNode(toDisplayString(_ctx.description), 1)
+            ])
+          ]),
+          key: "1"
+        } : void 0,
+        _ctx.$slots.icon || icon.value ? {
+          name: "icon",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "icon", {}, () => [
+              icon.value ? (openBlock(), createBlock(NcIconSvgWrapper, {
+                key: 0,
+                path: icon.value,
+                inline: ""
+              }, null, 8, ["path"])) : createCommentVNode("", true)
+            ])
+          ]),
+          key: "2"
+        } : void 0
+      ]), 1040, ["tag", "item-classes", "inverted-accent"]);
+    };
+  }
+});
+const formBoxButton = "_formBoxButton_15jyc_20";
+const style0 = {
+  "material-design-icon": "_material-design-icon_15jyc_12",
+  formBoxButton
+};
+const cssModules = {
+  "$style": style0
+};
+const NcFormBoxButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  NcFormBoxButton as N
+};
+//# sourceMappingURL=NcFormBoxButton-4XaQUTOS.mjs.map

package/dist/chunks/NcFormBoxButton-4XaQUTOS.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcFormBoxButton-4XaQUTOS.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:item-classes=\"[\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:inverted-accent\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":";;;;;;AAAA;AAAA;AAAA;AAAA;AA+DO,SAAS,cAAc,SAA0B;AAEvD,QAAM,QAAQ,SAAS,OAAO;AAE9B,QAAM,sBAAsB,OAAO,WAAW,IAAI,MAAM;AAKxD,QAAM,MAAM,SAAS,MAAM;AAE1B,QAAI,uBAAuB,MAAM,IAAI;AAGpC,aAAO;AAAA,IACR,WAAW,MAAM,MAAM;AACtB,aAAO;AAAA,IACR,OAAO;AACN,aAAO;AAAA,IACR;AAAA,EACD,CAAC;AAED,QAAM,SAAS,SAAS,MAAM,IAAI,UAAU,gBAAgB,IAAI,UAAU,GAAG;AAC7E,QAAM,cAAc,SAAS,MAAM,IAAI,UAAU,GAAG;AACpD,QAAM,eAAe,SAAS,MAAM,IAAI,UAAU,YAAY;AAC9D,QAAM,WAAW,SAAS,MAAM,IAAI,UAAU,QAAQ;AAEtD,QAAM,QAAQ,SAAS,MAAM;AAC5B,QAAI,IAAI,UAAU,cAAc;AAC/B,aAAO;AAAA,QACN,IAAI,MAAM;AAAA,QACV,aAAa;AAAA,QACb,GAAI,MAAM,kBAAkB,YAAY,KAAK,CAAA;AAAA,MAAC;AAAA,IAEhD,WAAW,IAAI,UAAU,KAAK;AAC7B,aAAO;AAAA,QACN,MAAM,MAAM;AAAA,QACZ,QAAQ,MAAM;AAAA,QACd,UAAU,MAAM,YAAY;AAAA,QAC5B,KAAK;AAAA,QACL,GAAI,MAAM,kBAAkB,GAAG,KAAK,CAAA;AAAA,MAAC;AAAA,IAEvC,WAAW,IAAI,UAAU,UAAU;AAClC,aAAO;AAAA,QACN,MAAM,MAAM,QAAQ;AAAA,QACpB,UAAU,MAAM;AAAA,QAChB,GAAI,MAAM,kBAAkB,QAAQ,KAAK,CAAA;AAAA,MAAC;AAAA,IAE5C;AAAA,EACD,CAAC;AAED,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEF;;;;;;;;;;;;;;ACpEA,UAAM,EAAE,KAAK,OAAO,OAAA,IAAW,cAAc;AAAA,MAC5C,IAAI,MAAM,MAAM,UAAE;AAAA,MAClB,MAAM,MAAM,MAAM,YAAI;AAAA,MACtB,QAAQ,MAAM,MAAM,QAAA,MAAM;AAAA,MAC1B,UAAU,MAAM,MAAM,QAAA,QAAQ;AAAA,IAAA,CAC9B;AAED,UAAM,OAAO,SAAS,MAAM;AAC3B,UAAI,OAAO,OAAO;AACjB,eAAO,QAAA,WAAW,WAAW,eAAe;AAAA,MAC7C;AACA,aAAO;AAAA,IACR,CAAC;;AAIA,aAAAA,UAAA,GAAAC,YAyBgB,eAzBhBC,WAyBgB;AAAA,QAxBd,KAAAC,MAAA,GAAA;AAAA,QACA,gBAAY;AAAA;;UAAuEC,KAAAA,OAAO;AAAA,QAAA;AAAA,QAI1F,mBAAAC,KAAAA;AAAAA,MAAAA,GACOF,MAAA,KAAA,GAAK;AAAA,QACb,UAAS;AAAA,QACR,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAEG,KAAAA,MAAK,SAAU,MAAM;AAAA,MAAA;QACbC,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;;;;QAGAH,KAAAA,OAAO,QAAQ,KAAA;gBAAO;AAAA,sBACrC,MAEO;AAAA,YAFPE,WAEO,yBAFP,MAEO;AAAA,cADkB,KAAA,sBAAxBR,YAAoD,kBAAA;AAAA;gBAArB,MAAM,KAAA;AAAA,gBAAM,QAAA;AAAA,cAAA;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcFormBoxCopyButton.vue_vue_type_script_setup_true_lang-DTWd7b52.mjs

@@ -0,0 +1,53 @@
+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-4XaQUTOS.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BvLanNaW.mjs";
+import { u as useCopy } from "./useCopy-pTWmSjcP.mjs";
+const _hoisted_1 = { class: "hidden-visually" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcFormBoxCopyButton",
+  props: {
+    label: { default: () => void 0 },
+    value: {},
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ["copy"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const { isCopied, copy, icon, altText } = useCopy(() => __props.value);
+    whenever(isCopied, () => emit("copy"));
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(NcFormBoxButton, {
+        disabled: _ctx.disabled,
+        "inverted-accent": "",
+        onClick: unref(copy)
+      }, createSlots({
+        description: withCtx(() => [
+          createTextVNode(toDisplayString(_ctx.value), 1)
+        ]),
+        icon: withCtx(() => [
+          createVNode(NcIconSvgWrapper, {
+            path: unref(icon),
+            inline: ""
+          }, null, 8, ["path"])
+        ]),
+        _: 2
+      }, [
+        _ctx.$slots.default || _ctx.label ? {
+          name: "default",
+          fn: withCtx(() => [
+            createElementVNode("span", _hoisted_1, toDisplayString(unref(altText)), 1),
+            renderSlot(_ctx.$slots, "default", {}, () => [
+              createTextVNode(toDisplayString(_ctx.label), 1)
+            ])
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["disabled", "onClick"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};
+//# sourceMappingURL=NcFormBoxCopyButton.vue_vue_type_script_setup_true_lang-DTWd7b52.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcFormBoxCopyButton.vue_vue_type_script_setup_true_lang-DTWd7b52.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\tinverted-accent\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,mBAAA;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-BBP76Mkf.mjs

@@ -0,0 +1,97 @@
+import '../assets/NcFormBoxItem-BfXKp9xJ.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-DA9iwXWY.mjs";
+import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
+import { i as isLegacy } from "./legacy-DcjXBL_t.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _hoisted_1 = ["id"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ inheritAttrs: false },
+  __name: "NcFormBoxItem",
+  props: {
+    tag: {},
+    label: { default: () => void 0 },
+    description: { default: () => void 0 },
+    invertedAccent: { type: Boolean, default: false },
+    class: { default: () => void 0 },
+    itemClasses: { default: () => void 0 }
+  },
+  emits: ["click"],
+  setup(__props) {
+    const slots = useSlots();
+    const { formBoxItemClass } = useNcFormBox();
+    const descriptionId = createElementId();
+    const hasDescription = () => !!__props.description || !!slots.description;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          __props.class,
+          _ctx.$style.formBoxItem,
+          unref(formBoxItemClass),
+          {
+            [_ctx.$style.formBoxItem_inverted]: _ctx.invertedAccent && hasDescription(),
+            [_ctx.$style.formBoxItem_legacy]: unref(isLegacy)
+          }
+        ])
+      }, [
+        createElementVNode("span", {
+          class: normalizeClass(_ctx.$style.formBoxItem__content)
+        }, [
+          (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), mergeProps({
+            class: [_ctx.$style.formBoxItem__element, _ctx.itemClasses]
+          }, _ctx.$attrs, {
+            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+          }), {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", { descriptionId: unref(descriptionId) }, () => [
+                createTextVNode(toDisplayString(_ctx.label || "⚠️ Label is missing"), 1)
+              ])
+            ]),
+            _: 3
+          }, 16, ["class"])),
+          hasDescription() ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            id: unref(descriptionId),
+            class: normalizeClass(_ctx.$style.formBoxItem__description)
+          }, [
+            renderSlot(_ctx.$slots, "description", {}, () => [
+              createTextVNode(toDisplayString(_ctx.description), 1)
+            ])
+          ], 10, _hoisted_1)) : createCommentVNode("", true)
+        ], 2),
+        createElementVNode("span", {
+          class: normalizeClass(_ctx.$style.formBoxItem__icon)
+        }, [
+          renderSlot(_ctx.$slots, "icon", { descriptionId: unref(descriptionId) }, () => [
+            _cache[1] || (_cache[1] = createTextVNode(" ⚠️ Icon is missing ", -1))
+          ])
+        ], 2)
+      ], 2);
+    };
+  }
+});
+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 style0 = {
+  "material-design-icon": "_material-design-icon_v5un7_12",
+  formBoxItem,
+  formBoxItem_legacy,
+  formBoxItem_inverted,
+  formBoxItem__element,
+  formBoxItem__description,
+  formBoxItem__content,
+  formBoxItem__icon
+};
+const cssModules = {
+  "$style": style0
+};
+const NcFormBoxItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  NcFormBoxItem as N
+};
+//# sourceMappingURL=NcFormBoxItem-BBP76Mkf.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcFormBoxItem-BBP76Mkf.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 :description-id>\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\" :description-id>\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,sDAF2B,wBAElC,EAAA;AAAA,UAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcFormBoxSwitch-E6Ei7MFo.mjs

@@ -0,0 +1,97 @@
+import '../assets/NcFormBoxSwitch-BmyNQCbA.css';
+import { defineComponent, mergeModels, useModel, watch, createBlock, openBlock, unref, createSlots, withCtx, withDirectives, createVNode, createElementVNode, normalizeClass, vModelCheckbox, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { k as mdiToggleSwitch, l as mdiToggleSwitchOff } from "./mdi-HQ-WBPmL.mjs";
+import { N as NcFormBoxItem } from "./NcFormBoxItem-BBP76Mkf.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BvLanNaW.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"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcFormBoxSwitch",
+  props: /* @__PURE__ */ mergeModels({
+    label: { default: () => void 0 },
+    description: { default: () => void 0 },
+    disabled: { type: Boolean, default: false }
+  }, {
+    "modelValue": { type: Boolean, ...{ required: true } },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["enable", "disable"], ["update:modelValue"]),
+  setup(__props, { emit: __emit }) {
+    const modelValue = useModel(__props, "modelValue");
+    const emit = __emit;
+    const inputId = createElementId();
+    watch(modelValue, () => {
+      if (modelValue.value) {
+        emit("enable");
+      } else {
+        emit("disable");
+      }
+    }, {
+      // defineModel emits update:modelValue synchronously
+      // Watching it synchronously to emit the enable/disable events together with the update:modelValue event
+      flush: "sync"
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(NcFormBoxItem, {
+        tag: "label",
+        for: unref(inputId)
+      }, createSlots({
+        icon: withCtx(({ descriptionId }) => [
+          withDirectives(createElementVNode("input", {
+            id: unref(inputId),
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+            class: normalizeClass(_ctx.$style.formBoxSwitch__input),
+            type: "checkbox",
+            role: "switch",
+            "aria-describedby": descriptionId,
+            disabled: _ctx.disabled
+          }, null, 10, _hoisted_1), [
+            [vModelCheckbox, modelValue.value]
+          ]),
+          createVNode(NcIconSvgWrapper, {
+            path: modelValue.value ? unref(mdiToggleSwitch) : unref(mdiToggleSwitchOff),
+            class: normalizeClass(_ctx.$style.formBoxSwitch__icon),
+            size: 34,
+            inline: ""
+          }, null, 8, ["path", "class"])
+        ]),
+        _: 2
+      }, [
+        _ctx.$slots.default || _ctx.label ? {
+          name: "default",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "default", {}, () => [
+              createTextVNode(toDisplayString(_ctx.label), 1)
+            ])
+          ]),
+          key: "0"
+        } : void 0,
+        _ctx.$slots.description || _ctx.description ? {
+          name: "description",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "description", {}, () => [
+              createTextVNode(toDisplayString(_ctx.description), 1)
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["for"]);
+    };
+  }
+});
+const formBoxSwitch__input = "_formBoxSwitch__input_hjv1a_20";
+const formBoxSwitch__icon = "_formBoxSwitch__icon_hjv1a_34";
+const style0 = {
+  "material-design-icon": "_material-design-icon_hjv1a_12",
+  formBoxSwitch__input,
+  formBoxSwitch__icon
+};
+const cssModules = {
+  "$style": style0
+};
+const NcFormBoxSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  NcFormBoxSwitch as N
+};
+//# sourceMappingURL=NcFormBoxSwitch-E6Ei7MFo.mjs.map

package/dist/chunks/NcFormBoxSwitch-E6Ei7MFo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcFormBoxSwitch-E6Ei7MFo.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 { mdiToggleSwitch, mdiToggleSwitchOff } from '@mdi/js'\nimport { watch } from 'vue'\nimport NcFormBoxItem from '../NcFormBox/NcFormBoxItem.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.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<NcIconSvgWrapper\n\t\t\t\t:path=\"modelValue ? mdiToggleSwitch : mdiToggleSwitchOff\"\n\t\t\t\t:class=\"$style.formBoxSwitch__icon\"\n\t\t\t\t:size=\"34 /* --default-clickable-area */\"\n\t\t\t\tinline />\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\n.formBoxSwitch__icon {\n\tcolor: var(--color-text-maxcontrast);\n}\n\ninput:checked + .formBoxSwitch__icon {\n\tcolor: var(--color-primary-element);\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":";;;;;;;;;;;;;;;;;;;AAeA,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,YA4BgB,eAAA;AAAA,QA3Bf,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,YAIU,kBAAA;AAAA,YAHR,MAAM,WAAA,QAAaN,MAAA,eAAA,IAAkBA,MAAA,kBAAA;AAAA,YACrC,OAAKG,eAAEC,KAAAA,OAAO,mBAAmB;AAAA,YACjC,MAAM;AAAA,YACP,QAAA;AAAA,UAAA;;;;QAvBcG,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

@@ -0,0 +1,74 @@
+import '../assets/NcFormGroup-BrD0Scm7.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";
+const _hoisted_1 = ["aria-describedby"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcFormGroup",
+  props: {
+    label: { default: () => void 0 },
+    description: { default: () => void 0 },
+    hideLabel: { type: Boolean, default: false },
+    hideDescription: { type: Boolean, default: false },
+    noGap: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const slots = useSlots();
+    const id = `nc-form-group-${createElementId()}`;
+    const descriptionId = `${id}-description`;
+    const hasDescription = () => !!__props.description || !!slots.description;
+    const getDescriptionId = () => hasDescription() ? descriptionId : void 0;
+    const hasContentOnly = () => __props.hideLabel && (!hasDescription() || __props.hideDescription);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("fieldset", {
+        class: normalizeClass([_ctx.$style.formGroup, { [_ctx.$style.formGroup_noGap]: _ctx.noGap }]),
+        "aria-describedby": getDescriptionId()
+      }, [
+        createElementVNode("legend", {
+          class: normalizeClass([_ctx.$style.formGroup__label, { "hidden-visually": _ctx.hideLabel }])
+        }, [
+          renderSlot(_ctx.$slots, "label", {}, () => [
+            createTextVNode(toDisplayString(_ctx.label || "⚠️ Missing label"), 1)
+          ])
+        ], 2),
+        hasDescription() ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          id: descriptionId,
+          class: normalizeClass([_ctx.$style.formGroup__description, { "hidden-visually": _ctx.hideDescription }])
+        }, [
+          renderSlot(_ctx.$slots, "description", {}, () => [
+            createTextVNode(toDisplayString(_ctx.description), 1)
+          ])
+        ], 2)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass([_ctx.$style.formGroup__content, { [_ctx.$style.formGroup__content_only]: hasContentOnly() }])
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 2)
+      ], 10, _hoisted_1);
+    };
+  }
+});
+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 style0 = {
+  "material-design-icon": "_material-design-icon_9p8a1_12",
+  formGroup,
+  formGroup_noGap,
+  formGroup__label,
+  formGroup__description,
+  formGroup__content,
+  formGroup__content_only
+};
+const cssModules = {
+  "$style": style0
+};
+const NcFormGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  NcFormGroup as N
+};
+//# sourceMappingURL=NcFormGroup-CnSfPFey.mjs.map

package/dist/chunks/NcFormGroup-CnSfPFey.mjs.map

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcHeaderButton-DafXYbXB.mjs → NcHeaderButton-tLfDELGu.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-DkC5k3Lb.mjs";
+import { N as NcButton } from "./NcButton-ZNHdqKQl.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-DafXYbXB.mjs.map
+//# sourceMappingURL=NcHeaderButton-tLfDELGu.mjs.map

package/dist/chunks/{NcHeaderButton-DafXYbXB.mjs.map → NcHeaderButton-tLfDELGu.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcHeaderButton-DafXYbXB.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-tLfDELGu.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-DfO7ghiM.mjs → NcHeaderMenu-ClRw0Xc5.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-DkC5k3Lb.mjs";
+import { N as NcButton } from "./NcButton-ZNHdqKQl.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-DfO7ghiM.mjs.map
+//# sourceMappingURL=NcHeaderMenu-ClRw0Xc5.mjs.map