@nextcloud/vue 8.33.0 → 8.35.0

package/dist/chunks/NcFormBoxButton-DR_OMvmB.mjs

@@ -0,0 +1,138 @@
+import '../assets/NcFormBoxButton-C6EvdLK4.css';
+import { reactive, getCurrentInstance, computed, defineComponent } from "vue";
+import { k as mdiOpenInNew, l as mdiArrowTopRight } from "./mdi-CgetWrFc.mjs";
+import { toRef } from "@vueuse/core";
+import { N as NcFormBoxItem } from "./NcFormBoxItem-BcNIAmpc.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-Bui9PhAS.mjs";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.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 instance = getCurrentInstance();
+  const hasVueRouterContext = "$router" in instance.proxy.$root;
+  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 props = __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 { __sfc: true, props, tag, attrs, isLink, icon, NcFormBoxItem, NcIconSvgWrapper };
+  }
+});
+const formBoxButton = "_formBoxButton_15jyc_20";
+const style0 = {
+  "material-design-icon": "_material-design-icon_15jyc_12",
+  formBoxButton
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c(_setup.NcFormBoxItem, _vm._b({ attrs: { "tag": _setup.tag, "item-classes": [
+    "button-vue",
+    /* Reset server's global HTML button styles */
+    _vm.$style.formBoxButton
+  ], "inverted-accent": _vm.invertedAccent, "tabindex": "0" }, on: { "click": function($event) {
+    return _vm.$emit("click", $event);
+  } }, scopedSlots: _vm._u([_vm.$scopedSlots.default || _vm.label ? { key: "default", fn: function() {
+    return [_vm._t("default", function() {
+      return [_vm._v(" " + _vm._s(_vm.label) + " ")];
+    })];
+  }, proxy: true } : null, _vm.$scopedSlots.description || _vm.description ? { key: "description", fn: function() {
+    return [_vm._t("description", function() {
+      return [_vm._v(" " + _vm._s(_vm.description) + " ")];
+    })];
+  }, proxy: true } : null, _vm.$scopedSlots.icon || _setup.icon ? { key: "icon", fn: function() {
+    return [_vm._t("icon", function() {
+      return [_setup.icon ? _c(_setup.NcIconSvgWrapper, { attrs: { "path": _setup.icon, "inline": "" } }) : _vm._e()];
+    })];
+  }, proxy: true } : null], null, true) }, "NcFormBoxItem", _setup.attrs, false));
+};
+var _sfc_staticRenderFns = [];
+const __cssModules = {
+  "$style": style0
+};
+function _sfc_injectStyles(ctx) {
+  for (var key in __cssModules) {
+    this[key] = __cssModules[key];
+  }
+}
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  _sfc_injectStyles,
+  null
+);
+const NcFormBoxButton = __component__.exports;
+export {
+  NcFormBoxButton as N
+};
+//# sourceMappingURL=NcFormBoxButton-DR_OMvmB.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcFormBoxButton-DR_OMvmB.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 { MaybeRef } from '@vueuse/core'\nimport type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'vue'\nimport type { RawLocation } from 'vue-router'\n\nimport { computed, getCurrentInstance, reactive } from 'vue'\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<RawLocation | 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 instance = getCurrentInstance()!\n\tconst hasVueRouterContext = '$router' in instance.proxy.$root\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 } from 'vue'\nimport type { RawLocation } from 'vue-router'\n\nimport { mdiArrowTopRight, mdiOpenInNew } from '@mdi/js'\nimport { toRef } from '@vueuse/core'\nimport { computed } from 'vue'\nimport NcFormBoxItem from '../NcFormBox/NcFormBoxItem.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { useButtonLink } from '../../composables/useButtonLink.ts'\n\nconst props = withDefaults(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?: RawLocation\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\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})\n\ndefineEmits<{\n\t/** Native click event */\n\t(e: 'click', event: MouseEvent): void\n}>()\n\nconst { tag, attrs, isLink } = useButtonLink({\n\tto: toRef(() => props.to),\n\thref: toRef(() => props.href),\n\ttarget: toRef(() => props.target),\n\tdisabled: toRef(() => props.disabled),\n})\n\nconst icon = computed(() => {\n\tif (isLink.value) {\n\t\treturn props.target === '_blank' ? mdiOpenInNew : mdiArrowTopRight\n\t}\n\treturn undefined\n})\n</script>\n\n<template>\n\t<NcFormBoxItem\n\t\t:tag=\"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=\"invertedAccent\"\n\t\tv-bind=\"attrs\"\n\t\ttabindex=\"0\"\n\t\t@click=\"$emit('click', $event)\">\n\t\t<template v-if=\"$scopedSlots.default || label\" #default>\n\t\t\t<!-- @slot Custom label content -->\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=\"$scopedSlots.description || description\" #description>\n\t\t\t<!-- @slot Custom description content -->\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=\"$scopedSlots.icon || icon\" #icon>\n\t\t\t<!-- @slot Required icon (links have a default 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":[],"mappings":";;;;;;AAAA;AAAA;AAAA;AAAA;AA+DO,SAAS,cAAc,SAA0B;AAEvD,QAAM,QAAQ,SAAS,OAAO;AAE9B,QAAM,WAAW,mBAAA;AACjB,QAAM,sBAAsB,aAAa,SAAS,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;;;;;;;;;;;;;;;AC7EA,UAAM,EAAE,KAAK,OAAO,OAAA,IAAW,cAAc;AAAA,MAC5C,IAAI,MAAM,MAAM,MAAM,EAAE;AAAA,MACxB,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,MAC5B,QAAQ,MAAM,MAAM,MAAM,MAAM;AAAA,MAChC,UAAU,MAAM,MAAM,MAAM,QAAQ;AAAA,IAAA,CACpC;AAED,UAAM,OAAO,SAAS,MAAM;AAC3B,UAAI,OAAO,OAAO;AACjB,eAAO,MAAM,WAAW,WAAW,eAAe;AAAA,MACnD;AACA,aAAO;AAAA,IACR,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcFormBoxCopyButton-BQt4cqDo.mjs

@@ -0,0 +1,47 @@
+import { defineComponent } from "vue";
+import { whenever } from "@vueuse/core";
+import { N as NcFormBoxButton } from "./NcFormBoxButton-DR_OMvmB.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-Bui9PhAS.mjs";
+import { u as useCopy } from "./useCopy-J3zJ3s94.mjs";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcFormBoxCopyButton",
+  props: {
+    label: { default: void 0 },
+    value: null,
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ["copy"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const { isCopied, copy, icon, altText } = useCopy(() => props.value);
+    whenever(isCopied, () => emit("copy"));
+    return { __sfc: true, props, emit, isCopied, copy, icon, altText, NcFormBoxButton, NcIconSvgWrapper };
+  }
+});
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c(_setup.NcFormBoxButton, { attrs: { "disabled": _vm.disabled, "inverted-accent": "" }, on: { "click": _setup.copy }, scopedSlots: _vm._u([_vm.$slots.default || _vm.label ? { key: "default", fn: function() {
+    return [_c("span", { staticClass: "hidden-visually" }, [_vm._v(" " + _vm._s(_setup.altText) + " ")]), _vm._t("default", function() {
+      return [_vm._v(" " + _vm._s(_vm.label) + " ")];
+    })];
+  }, proxy: true } : null, { key: "description", fn: function() {
+    return [_vm._v(" " + _vm._s(_vm.value) + " ")];
+  }, proxy: true }, { key: "icon", fn: function() {
+    return [_c(_setup.NcIconSvgWrapper, { attrs: { "path": _setup.icon, "inline": "" } })];
+  }, proxy: true }], null, true) });
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null
+);
+const NcFormBoxCopyButton = __component__.exports;
+export {
+  NcFormBoxCopyButton as N
+};
+//# sourceMappingURL=NcFormBoxCopyButton-BQt4cqDo.mjs.map

package/dist/chunks/NcFormBoxCopyButton-BQt4cqDo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcFormBoxCopyButton-BQt4cqDo.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 { whenever } from '@vueuse/core'\nimport NcFormBoxButton from '../NcFormBoxButton/NcFormBoxButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { useCopy } from '../../composables/useCopy.ts'\n\nconst props = withDefaults(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\tlabel: undefined,\n\tdisabled: false,\n})\n\nconst emit = defineEmits<{\n\t/** Value has been successfully copied */\n\t(event: 'copy'): void\n}>()\n\nconst { isCopied, copy, icon, altText } = useCopy(() => props.value)\n\nwhenever(isCopied, () => emit('copy'))\n</script>\n\n<template>\n\t<NcFormBoxButton\n\t\t:disabled=\"disabled\"\n\t\tinverted-accent\n\t\t@click=\"copy\">\n\t\t<template v-if=\"$slots.default || label\" #default>\n\t\t\t<!-- @slot Custom label content -->\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":[],"mappings":";;;;;;;;;;;;;;;;AA4BA,UAAM,EAAE,UAAU,MAAM,MAAM,YAAY,QAAQ,MAAM,MAAM,KAAK;AAEnE,aAAS,UAAU,MAAM,KAAK,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcFormBoxCopyButton-CthOiHuc.cjs

@@ -0,0 +1,46 @@
+"use strict";
+const Vue = require("vue");
+const core = require("@vueuse/core");
+const NcFormBoxButton = require("./NcFormBoxButton-B4STyrn7.cjs");
+const NcIconSvgWrapper = require("./NcIconSvgWrapper-Bbl4kXZI.cjs");
+const useCopy = require("./useCopy-BrkuO6SD.cjs");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  __name: "NcFormBoxCopyButton",
+  props: {
+    label: { default: void 0 },
+    value: null,
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ["copy"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const { isCopied, copy, icon, altText } = useCopy.useCopy(() => props.value);
+    core.whenever(isCopied, () => emit("copy"));
+    return { __sfc: true, props, emit, isCopied, copy, icon, altText, NcFormBoxButton: NcFormBoxButton.NcFormBoxButton, NcIconSvgWrapper: NcIconSvgWrapper.NcIconSvgWrapper };
+  }
+});
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c(_setup.NcFormBoxButton, { attrs: { "disabled": _vm.disabled, "inverted-accent": "" }, on: { "click": _setup.copy }, scopedSlots: _vm._u([_vm.$slots.default || _vm.label ? { key: "default", fn: function() {
+    return [_c("span", { staticClass: "hidden-visually" }, [_vm._v(" " + _vm._s(_setup.altText) + " ")]), _vm._t("default", function() {
+      return [_vm._v(" " + _vm._s(_vm.label) + " ")];
+    })];
+  }, proxy: true } : null, { key: "description", fn: function() {
+    return [_vm._v(" " + _vm._s(_vm.value) + " ")];
+  }, proxy: true }, { key: "icon", fn: function() {
+    return [_c(_setup.NcIconSvgWrapper, { attrs: { "path": _setup.icon, "inline": "" } })];
+  }, proxy: true }], null, true) });
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null
+);
+const NcFormBoxCopyButton = __component__.exports;
+exports.NcFormBoxCopyButton = NcFormBoxCopyButton;
+//# sourceMappingURL=NcFormBoxCopyButton-CthOiHuc.cjs.map

package/dist/chunks/NcFormBoxCopyButton-CthOiHuc.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcFormBoxCopyButton-CthOiHuc.cjs","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 { whenever } from '@vueuse/core'\nimport NcFormBoxButton from '../NcFormBoxButton/NcFormBoxButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { useCopy } from '../../composables/useCopy.ts'\n\nconst props = withDefaults(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\tlabel: undefined,\n\tdisabled: false,\n})\n\nconst emit = defineEmits<{\n\t/** Value has been successfully copied */\n\t(event: 'copy'): void\n}>()\n\nconst { isCopied, copy, icon, altText } = useCopy(() => props.value)\n\nwhenever(isCopied, () => emit('copy'))\n</script>\n\n<template>\n\t<NcFormBoxButton\n\t\t:disabled=\"disabled\"\n\t\tinverted-accent\n\t\t@click=\"copy\">\n\t\t<template v-if=\"$slots.default || label\" #default>\n\t\t\t<!-- @slot Custom label content -->\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":["useCopy","whenever"],"mappings":";;;;;;;;;;;;;;;;;AA4BA,UAAM,EAAE,UAAU,MAAM,MAAM,YAAYA,QAAAA,QAAQ,MAAM,MAAM,KAAK;AAEnEC,SAAAA,SAAS,UAAU,MAAM,KAAK,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcFormBoxItem-BcNIAmpc.mjs

@@ -0,0 +1,87 @@
+import '../assets/NcFormBoxItem-BfXKp9xJ.css';
+import { defineComponent, useSlots } from "vue";
+import { u as useNcFormBox } from "./useNcFormBox-DA9iwXWY.mjs";
+import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
+import { i as isLegacy32 } from "./legacy-MK4GvP26.mjs";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+const __default__ = {
+  inheritAttrs: false
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "NcFormBoxItem",
+  props: {
+    tag: null,
+    label: { default: void 0 },
+    description: { default: void 0 },
+    invertedAccent: { type: Boolean, default: false },
+    itemClasses: { default: void 0 }
+  },
+  emits: ["click"],
+  setup(__props) {
+    const props = __props;
+    const slots = useSlots();
+    const { formBoxItemClass } = useNcFormBox();
+    const descriptionId = createElementId();
+    const hasDescription = () => !!props.description || !!slots.description;
+    return { __sfc: true, props, slots, formBoxItemClass, descriptionId, hasDescription, isLegacy32 };
+  }
+});
+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
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c("div", { class: [
+    _vm.$style.formBoxItem,
+    _setup.formBoxItemClass,
+    {
+      [_vm.$style.formBoxItem_inverted]: _vm.invertedAccent && _setup.hasDescription(),
+      [_vm.$style.formBoxItem_legacy]: _setup.isLegacy32
+    }
+  ] }, [_c("span", { class: _vm.$style.formBoxItem__content }, [_c(_vm.tag, _vm._b({ tag: "component", class: [_vm.$style.formBoxItem__element, _vm.itemClasses], on: { "click": function($event) {
+    return _vm.$emit("click", $event);
+  } } }, "component", _vm.$attrs, false), [_vm._t("default", function() {
+    return [_vm._v(" " + _vm._s(_vm.label || "⚠️ Label is missing") + " ")];
+  }, { "descriptionId": _setup.descriptionId })], 2), _setup.hasDescription() ? _c("span", { class: _vm.$style.formBoxItem__description, attrs: { "id": _setup.descriptionId } }, [_vm._t("description", function() {
+    return [_vm._v(" " + _vm._s(_vm.description) + " ")];
+  })], 2) : _vm._e()], 1), _c("span", { class: _vm.$style.formBoxItem__icon }, [_vm._t("icon", function() {
+    return [_vm._v(" ⚠️ Icon is missing ")];
+  }, { "descriptionId": _setup.descriptionId })], 2)]);
+};
+var _sfc_staticRenderFns = [];
+const __cssModules = {
+  "$style": style0
+};
+function _sfc_injectStyles(ctx) {
+  for (var key in __cssModules) {
+    this[key] = __cssModules[key];
+  }
+}
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  _sfc_injectStyles,
+  null
+);
+const NcFormBoxItem = __component__.exports;
+export {
+  NcFormBoxItem as N
+};
+//# sourceMappingURL=NcFormBoxItem-BcNIAmpc.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcFormBoxItem-BcNIAmpc.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 lang=\"ts\">\nexport default {\n\tinheritAttrs: false,\n}\n</script>\n\n<script setup lang=\"ts\">\nimport type { VueClassType } from '../../utils/VueTypes.ts'\n\nimport { useSlots } from 'vue'\nimport { useNcFormBox } from '../../components/NcFormBox/useNcFormBox.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { isLegacy32 } from '../../utils/legacy.ts'\n\nconst props = withDefaults(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/** Interactive item classes */\n\titemClasses?: VueClassType\n}>(), {\n\tlabel: undefined,\n\tdescription: undefined,\n\tinvertedAccent: false,\n\tclass: undefined,\n\titemClasses: undefined,\n})\n\ndefineEmits<{\n\t/** Click on the item */\n\t(e: 'click', event: MouseEvent): void\n}>()\n\nconst slots = useSlots()\n\nconst { formBoxItemClass } = useNcFormBox()\n\nconst descriptionId = createElementId()\nconst hasDescription = () => !!props.description || !!slots.description\n</script>\n\n<template>\n\t<div\n\t\t:class=\"[\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]: isLegacy32,\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 Item's label custom content\n\t\t\t\t     @binding {string} descriptionId IDRef of the description element if present -->\n\t\t\t\t<slot :description-id=\"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 Custom description content\n\t\t\t\t     @binding {string} descriptionId IDRef of the description element if present -->\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 Icon content -->\n\t\t\t<slot name=\"icon\" :description-id=\"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":[],"mappings":";;;;;AAMA,MAAA,cAAe;AAAA,EACd,cAAc;AACf;;;;;;;;;;;;;;AAmCA,UAAM,QAAQ,SAAA;AAEd,UAAM,EAAE,iBAAA,IAAqB,aAAA;AAE7B,UAAM,gBAAgB,gBAAA;AACtB,UAAM,iBAAiB,MAAM,CAAC,CAAC,MAAM,eAAe,CAAC,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcFormBoxItem-BfXaRfkc.cjs

@@ -0,0 +1,86 @@
+require('../assets/NcFormBoxItem-BfXKp9xJ.css');
+"use strict";
+const Vue = require("vue");
+const useNcFormBox = require("./useNcFormBox-DQeOEuQp.cjs");
+const createElementId = require("./createElementId-lalylSCf.cjs");
+const legacy = require("./legacy-KBXhWdRy.cjs");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+const __default__ = {
+  inheritAttrs: false
+};
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  ...__default__,
+  __name: "NcFormBoxItem",
+  props: {
+    tag: null,
+    label: { default: void 0 },
+    description: { default: void 0 },
+    invertedAccent: { type: Boolean, default: false },
+    itemClasses: { default: void 0 }
+  },
+  emits: ["click"],
+  setup(__props) {
+    const props = __props;
+    const slots = Vue.useSlots();
+    const { formBoxItemClass } = useNcFormBox.useNcFormBox();
+    const descriptionId = createElementId.createElementId();
+    const hasDescription = () => !!props.description || !!slots.description;
+    return { __sfc: true, props, slots, formBoxItemClass, descriptionId, hasDescription, isLegacy32: legacy.isLegacy32 };
+  }
+});
+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
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c("div", { class: [
+    _vm.$style.formBoxItem,
+    _setup.formBoxItemClass,
+    {
+      [_vm.$style.formBoxItem_inverted]: _vm.invertedAccent && _setup.hasDescription(),
+      [_vm.$style.formBoxItem_legacy]: _setup.isLegacy32
+    }
+  ] }, [_c("span", { class: _vm.$style.formBoxItem__content }, [_c(_vm.tag, _vm._b({ tag: "component", class: [_vm.$style.formBoxItem__element, _vm.itemClasses], on: { "click": function($event) {
+    return _vm.$emit("click", $event);
+  } } }, "component", _vm.$attrs, false), [_vm._t("default", function() {
+    return [_vm._v(" " + _vm._s(_vm.label || "⚠️ Label is missing") + " ")];
+  }, { "descriptionId": _setup.descriptionId })], 2), _setup.hasDescription() ? _c("span", { class: _vm.$style.formBoxItem__description, attrs: { "id": _setup.descriptionId } }, [_vm._t("description", function() {
+    return [_vm._v(" " + _vm._s(_vm.description) + " ")];
+  })], 2) : _vm._e()], 1), _c("span", { class: _vm.$style.formBoxItem__icon }, [_vm._t("icon", function() {
+    return [_vm._v(" ⚠️ Icon is missing ")];
+  }, { "descriptionId": _setup.descriptionId })], 2)]);
+};
+var _sfc_staticRenderFns = [];
+const __cssModules = {
+  "$style": style0
+};
+function _sfc_injectStyles(ctx) {
+  for (var key in __cssModules) {
+    this[key] = __cssModules[key];
+  }
+}
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  _sfc_injectStyles,
+  null
+);
+const NcFormBoxItem = __component__.exports;
+exports.NcFormBoxItem = NcFormBoxItem;
+//# sourceMappingURL=NcFormBoxItem-BfXaRfkc.cjs.map

package/dist/chunks/NcFormBoxItem-BfXaRfkc.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcFormBoxItem-BfXaRfkc.cjs","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 lang=\"ts\">\nexport default {\n\tinheritAttrs: false,\n}\n</script>\n\n<script setup lang=\"ts\">\nimport type { VueClassType } from '../../utils/VueTypes.ts'\n\nimport { useSlots } from 'vue'\nimport { useNcFormBox } from '../../components/NcFormBox/useNcFormBox.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { isLegacy32 } from '../../utils/legacy.ts'\n\nconst props = withDefaults(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/** Interactive item classes */\n\titemClasses?: VueClassType\n}>(), {\n\tlabel: undefined,\n\tdescription: undefined,\n\tinvertedAccent: false,\n\tclass: undefined,\n\titemClasses: undefined,\n})\n\ndefineEmits<{\n\t/** Click on the item */\n\t(e: 'click', event: MouseEvent): void\n}>()\n\nconst slots = useSlots()\n\nconst { formBoxItemClass } = useNcFormBox()\n\nconst descriptionId = createElementId()\nconst hasDescription = () => !!props.description || !!slots.description\n</script>\n\n<template>\n\t<div\n\t\t:class=\"[\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]: isLegacy32,\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 Item's label custom content\n\t\t\t\t     @binding {string} descriptionId IDRef of the description element if present -->\n\t\t\t\t<slot :description-id=\"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 Custom description content\n\t\t\t\t     @binding {string} descriptionId IDRef of the description element if present -->\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 Icon content -->\n\t\t\t<slot name=\"icon\" :description-id=\"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","useNcFormBox","createElementId"],"mappings":";;;;;;AAMA,MAAA,cAAe;AAAA,EACd,cAAc;AACf;;;;;;;;;;;;;;AAmCA,UAAM,QAAQA,IAAAA,SAAA;AAEd,UAAM,EAAE,iBAAA,IAAqBC,0BAAA;AAE7B,UAAM,gBAAgBC,gBAAAA,gBAAA;AACtB,UAAM,iBAAiB,MAAM,CAAC,CAAC,MAAM,eAAe,CAAC,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcFormBoxSwitch-BUBD5jli.cjs

@@ -0,0 +1,96 @@
+require('../assets/NcFormBoxSwitch-BmyNQCbA.css');
+"use strict";
+const Vue = require("vue");
+const mdi = require("./mdi-CVXTs58m.cjs");
+const core = require("@vueuse/core");
+const NcFormBoxItem = require("./NcFormBoxItem-BfXaRfkc.cjs");
+const NcIconSvgWrapper = require("./NcIconSvgWrapper-Bbl4kXZI.cjs");
+const createElementId = require("./createElementId-lalylSCf.cjs");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+const __default__ = {
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  }
+};
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  ...__default__,
+  __name: "NcFormBoxSwitch",
+  props: {
+    label: { default: void 0 },
+    description: { default: void 0 },
+    disabled: { type: Boolean, default: false },
+    modelValue: { type: Boolean }
+  },
+  emits: ["enable", "disable", "update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const model = core.useVModel(props, "modelValue", emit, { passive: true });
+    const inputId = createElementId.createElementId();
+    Vue.watch(model, () => {
+      if (model.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 { __sfc: true, props, emit, model, inputId, mdiToggleSwitch: mdi.mdiToggleSwitch, mdiToggleSwitchOff: mdi.mdiToggleSwitchOff, NcFormBoxItem: NcFormBoxItem.NcFormBoxItem, NcIconSvgWrapper: NcIconSvgWrapper.NcIconSvgWrapper };
+  }
+});
+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
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c(_setup.NcFormBoxItem, { attrs: { "tag": "label", "for": _setup.inputId }, scopedSlots: _vm._u([_vm.$slots.default || _vm.label ? { key: "default", fn: function() {
+    return [_vm._t("default", function() {
+      return [_vm._v(" " + _vm._s(_vm.label) + " ")];
+    })];
+  }, proxy: true } : null, _vm.$slots.description || _vm.description ? { key: "description", fn: function() {
+    return [_vm._t("description", function() {
+      return [_vm._v(" " + _vm._s(_vm.description) + " ")];
+    })];
+  }, proxy: true } : null, { key: "icon", fn: function({ descriptionId }) {
+    return [_c("input", { directives: [{ name: "model", rawName: "v-model", value: _setup.model, expression: "model" }], class: _vm.$style.formBoxSwitch__input, attrs: { "id": _setup.inputId, "type": "checkbox", "role": "switch", "aria-describedby": descriptionId, "disabled": _vm.disabled }, domProps: { "checked": Array.isArray(_setup.model) ? _vm._i(_setup.model, null) > -1 : _setup.model }, on: { "change": function($event) {
+      var $$a = _setup.model, $$el = $event.target, $$c = $$el.checked ? true : false;
+      if (Array.isArray($$a)) {
+        var $$v = null, $$i = _vm._i($$a, $$v);
+        if ($$el.checked) {
+          $$i < 0 && (_setup.model = $$a.concat([$$v]));
+        } else {
+          $$i > -1 && (_setup.model = $$a.slice(0, $$i).concat($$a.slice($$i + 1)));
+        }
+      } else {
+        _setup.model = $$c;
+      }
+    } } }), _c(_setup.NcIconSvgWrapper, { class: _vm.$style.formBoxSwitch__icon, attrs: { "path": _setup.model ? _setup.mdiToggleSwitch : _setup.mdiToggleSwitchOff, "size": 34, "inline": "" } })];
+  } }], null, true) });
+};
+var _sfc_staticRenderFns = [];
+const __cssModules = {
+  "$style": style0
+};
+function _sfc_injectStyles(ctx) {
+  for (var key in __cssModules) {
+    this[key] = __cssModules[key];
+  }
+}
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  _sfc_injectStyles,
+  null
+);
+const NcFormBoxSwitch = __component__.exports;
+exports.NcFormBoxSwitch = NcFormBoxSwitch;
+//# sourceMappingURL=NcFormBoxSwitch-BUBD5jli.cjs.map

package/dist/chunks/NcFormBoxSwitch-BUBD5jli.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcFormBoxSwitch-BUBD5jli.cjs","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 lang=\"ts\">\nexport default {\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { mdiToggleSwitch, mdiToggleSwitchOff } from '@mdi/js'\nimport { useVModel } from '@vueuse/core'\nimport { watch } from 'vue'\nimport NcFormBoxItem from '../NcFormBox/NcFormBoxItem.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { createElementId } from '../../utils/createElementId.ts'\n\nconst props = withDefaults(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\t/** Switch toggle model value */\n\tmodelValue: boolean // eslint-disable-line vue/no-unused-properties\n}>(), {\n\tlabel: undefined,\n\tdescription: undefined,\n\tdisabled: false,\n})\n\nconst emit = defineEmits<{\n\t/** Switch is toggled ON */\n\t(event: 'enable'): void\n\t/** Switch is toggled OFF */\n\t(event: 'disable'): void\n\t(event: 'update:modelValue', value: boolean): void\n}>()\n\nconst model = useVModel(props, 'modelValue', emit, { passive: true })\n\nconst inputId = createElementId()\n\nwatch(model, () => {\n\tif (model.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 Custom label content -->\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 Custom description content -->\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=\"model\"\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=\"disabled\">\n\t\t\t<NcIconSvgWrapper\n\t\t\t\t:path=\"model ? 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\tmethods: {\n\t\tlog: console.log,\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=\"log('Switch toggled', $event, switchValue)\"\n\t\t\t@enable=\"log('Switch enabled', switchValue)\"\n\t\t\t@disable=\"log('Switch disabled', switchValue)\"\n\t\t/>\n\t\t<NcFormBoxSwitch v-model=\"switchValue\" />\n\t</NcFormBox>\n</template>\n```\n</docs>\n"],"names":["useVModel","createElementId","watch"],"mappings":";;;;;;;;AAMA,MAAA,cAAe;AAAA,EACd,OAAO;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAET;;;;;;;;;;;;;AAkCA,UAAM,QAAQA,KAAAA,UAAU,OAAO,cAAc,MAAM,EAAE,SAAS,MAAM;AAEpE,UAAM,UAAUC,gBAAAA,gBAAA;AAEhBC,QAAAA,MAAM,OAAO,MAAM;AAClB,UAAI,MAAM,OAAO;AAChB,aAAK,QAAQ;AAAA,MACd,OAAO;AACN,aAAK,SAAS;AAAA,MACf;AAAA,IACD,GAAG;AAAA;AAAA;AAAA,MAGF,OAAO;AAAA,IAAA,CACP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}