@nextcloud/vue 8.32.0 → 8.34.0

package/dist/chunks/NcFormBoxItem-DPBm3ZbJ.mjs

@@ -0,0 +1,87 @@
+import '../assets/NcFormBoxItem-j2nGdOvd.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_pugbs_20";
+const formBoxItem_legacy = "_formBoxItem_legacy_pugbs_60";
+const formBoxItem_inverted = "_formBoxItem_inverted_pugbs_64";
+const formBoxItem__element = "_formBoxItem__element_pugbs_64";
+const formBoxItem__description = "_formBoxItem__description_pugbs_67";
+const formBoxItem__content = "_formBoxItem__content_pugbs_71";
+const formBoxItem__icon = "_formBoxItem__icon_pugbs_89";
+const style0 = {
+  "material-design-icon": "_material-design-icon_pugbs_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-DPBm3ZbJ.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcFormBoxItem-DPBm3ZbJ.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-primary-element-light-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/NcFormBoxSwitch-CM3WaFkA.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-CtrbGjnv.cjs");
+const NcIconSvgWrapper = require("./NcIconSvgWrapper-D-aKMbf3.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);
+    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-CM3WaFkA.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcFormBoxSwitch-CM3WaFkA.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)\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,IAAI;AAEjD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcFormBoxSwitch-aOCNeI-K.mjs

@@ -0,0 +1,97 @@
+import '../assets/NcFormBoxSwitch-BmyNQCbA.css';
+import { defineComponent, watch } from "vue";
+import { f as mdiToggleSwitchOff, g as mdiToggleSwitch } from "./mdi-C_j0YT8c.mjs";
+import { useVModel } from "@vueuse/core";
+import { N as NcFormBoxItem } from "./NcFormBoxItem-DPBm3ZbJ.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BreCg8pX.mjs";
+import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+const __default__ = {
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  }
+};
+const _sfc_main = /* @__PURE__ */ 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 = useVModel(props, "modelValue", emit);
+    const inputId = createElementId();
+    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, mdiToggleSwitchOff, NcFormBoxItem, 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__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  _sfc_injectStyles,
+  null
+);
+const NcFormBoxSwitch = __component__.exports;
+export {
+  NcFormBoxSwitch as N
+};
+//# sourceMappingURL=NcFormBoxSwitch-aOCNeI-K.mjs.map

package/dist/chunks/NcFormBoxSwitch-aOCNeI-K.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcFormBoxSwitch-aOCNeI-K.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 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)\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":[],"mappings":";;;;;;;AAMA,MAAA,cAAe;AAAA,EACd,OAAO;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAET;;;;;;;;;;;;;AAkCA,UAAM,QAAQ,UAAU,OAAO,cAAc,IAAI;AAEjD,UAAM,UAAU,gBAAA;AAEhB,UAAM,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcFormGroup-BfsPo9aC.mjs

@@ -0,0 +1,69 @@
+import '../assets/NcFormGroup-BrD0Scm7.css';
+import { defineComponent, useSlots } from "vue";
+import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+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 props = __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 { __sfc: true, props, slots, id, descriptionId, hasDescription, getDescriptionId, hasContentOnly };
+  }
+});
+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
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c("fieldset", { class: [_vm.$style.formGroup, { [_vm.$style.formGroup_noGap]: _vm.noGap }], attrs: { "aria-describedby": _setup.getDescriptionId() } }, [_c("legend", { class: [_vm.$style.formGroup__label, { "hidden-visually": _vm.hideLabel }] }, [_vm._t("label", function() {
+    return [_vm._v(" " + _vm._s(_vm.label || "⚠️ Missing label") + " ")];
+  })], 2), _setup.hasDescription() ? _c("div", { class: [_vm.$style.formGroup__description, { "hidden-visually": _vm.hideDescription }], attrs: { "id": _setup.descriptionId } }, [_vm._t("description", function() {
+    return [_vm._v(" " + _vm._s(_vm.description) + " ")];
+  })], 2) : _vm._e(), _c("div", { class: [_vm.$style.formGroup__content, { [_vm.$style.formGroup__content_only]: _setup.hasContentOnly() }] }, [_vm._t("default")], 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 NcFormGroup = __component__.exports;
+export {
+  NcFormGroup as N
+};
+//# sourceMappingURL=NcFormGroup-BfsPo9aC.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcFormGroup-BfsPo9aC.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 { useSlots } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\n\nconst props = withDefaults(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\tlabel: undefined,\n\tdescription: undefined,\n\thideLabel: false,\n\thideDescription: false,\n\tnoGap: false,\n})\n\nconst slots = useSlots()\n\nconst id = `nc-form-group-${createElementId()}`\nconst descriptionId = `${id}-description`\n\nconst hasDescription = () => !!props.description || !!slots.description\nconst getDescriptionId = () => hasDescription() ? descriptionId : undefined\nconst hasContentOnly = () => props.hideLabel && (!hasDescription() || props.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 Custom label content -->\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 Custom description content -->\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 Content -->\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":[],"mappings":";;;;;;;;;;;;;;AAsCA,UAAM,QAAQ,SAAA;AAEd,UAAM,KAAK,iBAAiB,gBAAA,CAAiB;AAC7C,UAAM,gBAAgB,GAAG,EAAE;AAE3B,UAAM,iBAAiB,MAAM,CAAC,CAAC,MAAM,eAAe,CAAC,CAAC,MAAM;AAC5D,UAAM,mBAAmB,MAAM,eAAA,IAAmB,gBAAgB;AAClE,UAAM,iBAAiB,MAAM,MAAM,cAAc,CAAC,eAAA,KAAoB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcFormGroup-CBMl_9_J.cjs

@@ -0,0 +1,68 @@
+require('../assets/NcFormGroup-BrD0Scm7.css');
+"use strict";
+const Vue = require("vue");
+const createElementId = require("./createElementId-lalylSCf.cjs");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+const _sfc_main = /* @__PURE__ */ Vue.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 props = __props;
+    const slots = Vue.useSlots();
+    const id = `nc-form-group-${createElementId.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 { __sfc: true, props, slots, id, descriptionId, hasDescription, getDescriptionId, hasContentOnly };
+  }
+});
+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
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c("fieldset", { class: [_vm.$style.formGroup, { [_vm.$style.formGroup_noGap]: _vm.noGap }], attrs: { "aria-describedby": _setup.getDescriptionId() } }, [_c("legend", { class: [_vm.$style.formGroup__label, { "hidden-visually": _vm.hideLabel }] }, [_vm._t("label", function() {
+    return [_vm._v(" " + _vm._s(_vm.label || "⚠️ Missing label") + " ")];
+  })], 2), _setup.hasDescription() ? _c("div", { class: [_vm.$style.formGroup__description, { "hidden-visually": _vm.hideDescription }], attrs: { "id": _setup.descriptionId } }, [_vm._t("description", function() {
+    return [_vm._v(" " + _vm._s(_vm.description) + " ")];
+  })], 2) : _vm._e(), _c("div", { class: [_vm.$style.formGroup__content, { [_vm.$style.formGroup__content_only]: _setup.hasContentOnly() }] }, [_vm._t("default")], 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 NcFormGroup = __component__.exports;
+exports.NcFormGroup = NcFormGroup;
+//# sourceMappingURL=NcFormGroup-CBMl_9_J.cjs.map

package/dist/chunks/NcFormGroup-CBMl_9_J.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcFormGroup-CBMl_9_J.cjs","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 { useSlots } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\n\nconst props = withDefaults(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\tlabel: undefined,\n\tdescription: undefined,\n\thideLabel: false,\n\thideDescription: false,\n\tnoGap: false,\n})\n\nconst slots = useSlots()\n\nconst id = `nc-form-group-${createElementId()}`\nconst descriptionId = `${id}-description`\n\nconst hasDescription = () => !!props.description || !!slots.description\nconst getDescriptionId = () => hasDescription() ? descriptionId : undefined\nconst hasContentOnly = () => props.hideLabel && (!hasDescription() || props.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 Custom label content -->\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 Custom description content -->\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 Content -->\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","createElementId"],"mappings":";;;;;;;;;;;;;;;AAsCA,UAAM,QAAQA,IAAAA,SAAA;AAEd,UAAM,KAAK,iBAAiBC,gBAAAA,gBAAA,CAAiB;AAC7C,UAAM,gBAAgB,GAAG,EAAE;AAE3B,UAAM,iBAAiB,MAAM,CAAC,CAAC,MAAM,eAAe,CAAC,CAAC,MAAM;AAC5D,UAAM,mBAAmB,MAAM,eAAA,IAAmB,gBAAgB;AAClE,UAAM,iBAAiB,MAAM,MAAM,cAAc,CAAC,eAAA,KAAoB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcHeaderButton-CNQVz4QP.cjs → NcHeaderButton-6kuTEKbj.cjs}

@@ -1,7 +1,7 @@
-require('../assets/NcHeaderButton-CeT-dsLr.css');
+require('../assets/NcHeaderButton-DI-1Gsph.css');
 "use strict";
 const GenRandomId = require("./GenRandomId-D7iOvpZS.cjs");
-const NcButton = require("./NcButton-DK7bNZIL.cjs");
+const NcButton = require("./NcButton-CJBZrdiL.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const _sfc_main = {
   name: "NcHeaderButton",
@@ -56,8 +56,8 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "598aea0c"
+  "f1ee5a71"
 );
 const NcHeaderButton = __component__.exports;
 exports.NcHeaderButton = NcHeaderButton;
-//# sourceMappingURL=NcHeaderButton-CNQVz4QP.cjs.map
+//# sourceMappingURL=NcHeaderButton-6kuTEKbj.cjs.map

package/dist/chunks/{NcHeaderButton-CNQVz4QP.cjs.map → NcHeaderButton-6kuTEKbj.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcHeaderButton-CNQVz4QP.cjs","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\t:open.sync=\"showDialog\">\n\t\t\t<NcTextField label=\"Search for files, comments, contacts …\"\n\t\t\t\ttype=\"search\"\n\t\t\t\t:value.sync=\"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\tclass=\"header-menu__trigger\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:aria-describedby=\"descriptionId\"\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>\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcHeaderButton',\n\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Unique id for this menu\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * `aria-label` attribute of the button\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Additional visually hidden description text for the button\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'click',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tdescriptionId: GenRandomId(),\n\t\t}\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../NcHeaderMenu/header-menu__trigger';\n</style>\n"],"names":["NcButton","GenRandomId"],"mappings":";;;;AA6FA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAA,SAAAA;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,eAAAC,YAAAA,YAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcHeaderButton-6kuTEKbj.cjs","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\t:open.sync=\"showDialog\">\n\t\t\t<NcTextField label=\"Search for files, comments, contacts …\"\n\t\t\t\ttype=\"search\"\n\t\t\t\t:value.sync=\"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\tclass=\"header-menu__trigger\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:aria-describedby=\"descriptionId\"\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>\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcHeaderButton',\n\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Unique id for this menu\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * `aria-label` attribute of the button\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Additional visually hidden description text for the button\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'click',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tdescriptionId: GenRandomId(),\n\t\t}\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@use '../NcHeaderMenu/header-menu__trigger.scss';\n</style>\n"],"names":["NcButton","GenRandomId"],"mappings":";;;;AA6FA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAA,SAAAA;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,eAAAC,YAAAA,YAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcHeaderButton-TJML067P.mjs → NcHeaderButton-TgPjfPtk.mjs}

@@ -1,6 +1,6 @@
-import '../assets/NcHeaderButton-CeT-dsLr.css';
+import '../assets/NcHeaderButton-DI-1Gsph.css';
 import { G as GenRandomId } from "./GenRandomId-F5ebeBB_.mjs";
-import { N as NcButton } from "./NcButton-D3CaJu1f.mjs";
+import { N as NcButton } from "./NcButton-DUZTtFhr.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 const _sfc_main = {
   name: "NcHeaderButton",
@@ -55,10 +55,10 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "598aea0c"
+  "f1ee5a71"
 );
 const NcHeaderButton = __component__.exports;
 export {
   NcHeaderButton as N
 };
-//# sourceMappingURL=NcHeaderButton-TJML067P.mjs.map
+//# sourceMappingURL=NcHeaderButton-TgPjfPtk.mjs.map

package/dist/chunks/{NcHeaderButton-TJML067P.mjs.map → NcHeaderButton-TgPjfPtk.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcHeaderButton-TJML067P.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\t:open.sync=\"showDialog\">\n\t\t\t<NcTextField label=\"Search for files, comments, contacts …\"\n\t\t\t\ttype=\"search\"\n\t\t\t\t:value.sync=\"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\tclass=\"header-menu__trigger\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:aria-describedby=\"descriptionId\"\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>\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcHeaderButton',\n\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Unique id for this menu\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * `aria-label` attribute of the button\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Additional visually hidden description text for the button\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'click',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tdescriptionId: GenRandomId(),\n\t\t}\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../NcHeaderMenu/header-menu__trigger';\n</style>\n"],"names":[],"mappings":";;;AA6FA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,eAAA,YAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcHeaderButton-TgPjfPtk.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\t:open.sync=\"showDialog\">\n\t\t\t<NcTextField label=\"Search for files, comments, contacts …\"\n\t\t\t\ttype=\"search\"\n\t\t\t\t:value.sync=\"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\tclass=\"header-menu__trigger\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:aria-describedby=\"descriptionId\"\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>\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcHeaderButton',\n\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Unique id for this menu\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * `aria-label` attribute of the button\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Additional visually hidden description text for the button\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'click',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tdescriptionId: GenRandomId(),\n\t\t}\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@use '../NcHeaderMenu/header-menu__trigger.scss';\n</style>\n"],"names":[],"mappings":";;;AA6FA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,eAAA,YAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;"}