@nextcloud/vue 8.29.2 → 8.31.0

package/dist/Components/NcEmptyContent.mjs

@@ -1,10 +1,11 @@
-import '../assets/NcEmptyContent-CHVEJoER.css';
+import '../assets/NcEmptyContent-xdTcF0yQ.css';
 import { n as normalizeComponent } from "../chunks/_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 const _sfc_main = {
   name: "NcEmptyContent",
   props: {
     /**
      * A header message about an empty content shown
+     *
      * @example 'No comments'
      */
     name: {
@@ -13,6 +14,7 @@ const _sfc_main = {
     },
     /**
      * Desription of the empty content
+     *
      * @example 'No comments yet, start the conversation!'
      */
     description: {
@@ -47,7 +49,7 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "8aaa3146"
+  "e5f606f7"
 );
 const NcEmptyContent = __component__.exports;
 export {

package/dist/Components/NcEmptyContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcEmptyContent.mjs","sources":["../../src/components/NcEmptyContent/NcEmptyContent.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Basic use\n\nUse this component to display a message about an empty content.\nProviding an icon, name, and a description is strongly advised.\n\n```\n<template>\n\t<NcEmptyContent name=\"No comments\"\n\t\tdescription=\"Start writing comments and they will appear here.\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment.vue'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n#### With custom svg\n\n```\n<template>\n\t<NcEmptyContent\n\t\tname=\"No files in here\">\n\t\t<template #icon>\n\t\t\t<NcIconSvgWrapper :svg=\"folderSvg\" />\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport folderSvg from '@mdi/svg/svg/folder.svg?raw'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfolderSvg,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also customize the name using the `#name` slot\nand add actions. But to keep the style consistent across Nextcloud\nconsider only using header elements as the root elements for the name slot.\n\n```\n<template>\n\t<NcEmptyContent\n\t\tdescription=\"No comments in here\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t\t<template #name>\n\t\t\t<h1 class=\"empty-content__name\">\n\t\t\t\tNo comments\n\t\t\t</h1>\n\t\t</template>\n\t\t<template #action>\n\t\t\t<NcButton variant=\"primary\">\n\t\t\t\tAdd a comment!\n\t\t\t</NcButton>\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment.vue'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n\nSimilar to the `#name` slot, you could also use the `#description` slot.\nThe content will be rendered within a paragraph so you can use any inline element,\nlike a link.\n\n```\n<template>\n\t<NcEmptyContent\n\t\tname=\"No comments\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t\t<template #description>\n\t\t\t<a href=\"https://en.wikipedia.org/wiki/Comment\">What is even a comment?</a>\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment.vue'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<div class=\"empty-content\" role=\"note\">\n\t\t<div v-if=\"$slots.icon\" class=\"empty-content__icon\" aria-hidden=\"true\">\n\t\t\t<!-- @slot Optional material design icon -->\n\t\t\t<slot name=\"icon\" />\n\t\t</div>\n\t\t<!-- @slot Optional name if not set as property, shall be enclosed by a header element -->\n\t\t<slot name=\"name\">\n\t\t\t<span v-if=\"hasName\" class=\"empty-content__name\">\n\t\t\t\t{{ name }}\n\t\t\t</span>\n\t\t</slot>\n\t\t<p v-if=\"hasDescription\" class=\"empty-content__description\">\n\t\t\t<!-- @slot Optional formatted description rendered inside a paragraph -->\n\t\t\t<slot name=\"description\">\n\t\t\t\t{{ description }}\n\t\t\t</slot>\n\t\t</p>\n\t\t<div v-if=\"$slots.action\" class=\"empty-content__action\">\n\t\t\t<!-- @slot Optional slot for a button or the like -->\n\t\t\t<slot name=\"action\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcEmptyContent',\n\n\tprops: {\n\t\t/**\n\t\t * A header message about an empty content shown\n\t\t * @example 'No comments'\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Desription of the empty content\n\t\t * @example 'No comments yet, start the conversation!'\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\thasName() {\n\t\t\treturn this.name !== ''\n\t\t},\n\t\t/**\n\t\t * Check if a description is given as either property or slot\n\t\t */\n\t\thasDescription() {\n\t\t\treturn this.description !== '' || this.$slots.description?.[0]\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.empty-content {\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: column;\n\tjustify-content: center;\n\t/* In case of using in a flex container - flex in advance */\n\tflex-grow: 1;\n\tpadding: var(--default-grid-baseline);\n\n\t.modal-wrapper & {\n\t\tmargin-top: 5vh;\n\t\tmargin-bottom: 5vh;\n\t}\n\n\t&__icon {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 64px;\n\t\theight: 64px;\n\t\tmargin: 0 auto 15px;\n\t\topacity: .4;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\tbackground-size: 64px;\n\n\t\t:deep(svg) {\n\t\t\twidth: 64px !important;\n\t\t\theight: 64px !important;\n\t\t\tmax-width: 64px !important;\n\t\t\tmax-height: 64px !important;\n\t\t}\n\t}\n\n\t&__name {\n\t\tmargin-bottom: 10px;\n\t\ttext-align: center;\n\t\tfont-weight: bold;\n\t\tfont-size: 20px;\n\t\tline-height: 30px;\n\t}\n\n\t&__description {\n\t\tcolor: var(--color-text-maxcontrast);\n\t\ttext-align: center;\n\t\ttext-wrap-style: balance;\n\t}\n\n\t&__action {\n\t\tmargin-top: 8px;\n\n\t\t.modal-wrapper & {\n\t\t\tmargin-top: 20px;\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n}\n</style>\n"],"names":[],"mappings":";AAqJA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,UAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,iBAAA;AACA,aAAA,KAAA,gBAAA,MAAA,KAAA,OAAA,cAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcEmptyContent.mjs","sources":["../../src/components/NcEmptyContent/NcEmptyContent.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Basic use\n\nUse this component to display a message about an empty content.\nProviding an icon, name, and a description is strongly advised.\n\n```\n<template>\n\t<NcEmptyContent name=\"No comments\"\n\t\tdescription=\"Start writing comments and they will appear here.\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment.vue'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n#### With custom svg\n\n```\n<template>\n\t<NcEmptyContent\n\t\tname=\"No files in here\">\n\t\t<template #icon>\n\t\t\t<NcIconSvgWrapper :svg=\"folderSvg\" />\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport folderSvg from '@mdi/svg/svg/folder.svg?raw'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfolderSvg,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also customize the name using the `#name` slot\nand add actions. But to keep the style consistent across Nextcloud\nconsider only using header elements as the root elements for the name slot.\n\n```\n<template>\n\t<NcEmptyContent\n\t\tdescription=\"No comments in here\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t\t<template #name>\n\t\t\t<h1 class=\"empty-content__name\">\n\t\t\t\tNo comments\n\t\t\t</h1>\n\t\t</template>\n\t\t<template #action>\n\t\t\t<NcButton variant=\"primary\">\n\t\t\t\tAdd a comment!\n\t\t\t</NcButton>\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment.vue'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n\nSimilar to the `#name` slot, you could also use the `#description` slot.\nThe content will be rendered within a paragraph so you can use any inline element,\nlike a link.\n\n```\n<template>\n\t<NcEmptyContent\n\t\tname=\"No comments\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t\t<template #description>\n\t\t\t<a href=\"https://en.wikipedia.org/wiki/Comment\">What is even a comment?</a>\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment.vue'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<div class=\"empty-content\" role=\"note\">\n\t\t<div v-if=\"$slots.icon\" class=\"empty-content__icon\" aria-hidden=\"true\">\n\t\t\t<!-- @slot Optional material design icon -->\n\t\t\t<slot name=\"icon\" />\n\t\t</div>\n\t\t<!-- @slot Optional name if not set as property, shall be enclosed by a header element -->\n\t\t<slot name=\"name\">\n\t\t\t<span v-if=\"hasName\" class=\"empty-content__name\">\n\t\t\t\t{{ name }}\n\t\t\t</span>\n\t\t</slot>\n\t\t<p v-if=\"hasDescription\" class=\"empty-content__description\">\n\t\t\t<!-- @slot Optional formatted description rendered inside a paragraph -->\n\t\t\t<slot name=\"description\">\n\t\t\t\t{{ description }}\n\t\t\t</slot>\n\t\t</p>\n\t\t<div v-if=\"$slots.action\" class=\"empty-content__action\">\n\t\t\t<!-- @slot Optional slot for a button or the like -->\n\t\t\t<slot name=\"action\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcEmptyContent',\n\n\tprops: {\n\t\t/**\n\t\t * A header message about an empty content shown\n\t\t *\n\t\t * @example 'No comments'\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Desription of the empty content\n\t\t *\n\t\t * @example 'No comments yet, start the conversation!'\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\thasName() {\n\t\t\treturn this.name !== ''\n\t\t},\n\n\t\t/**\n\t\t * Check if a description is given as either property or slot\n\t\t */\n\t\thasDescription() {\n\t\t\treturn this.description !== '' || this.$slots.description?.[0]\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.empty-content {\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: column;\n\tjustify-content: center;\n\t/* In case of using in a flex container - flex in advance */\n\tflex-grow: 1;\n\tpadding: var(--default-grid-baseline);\n\n\t.modal-wrapper & {\n\t\tmargin-top: 5vh;\n\t\tmargin-bottom: 5vh;\n\t}\n\n\t&__icon {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 64px;\n\t\theight: 64px;\n\t\tmargin: 0 auto 15px;\n\t\topacity: .4;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\tbackground-size: 64px;\n\n\t\t:deep(svg) {\n\t\t\twidth: 64px !important;\n\t\t\theight: 64px !important;\n\t\t\tmax-width: 64px !important;\n\t\t\tmax-height: 64px !important;\n\t\t}\n\t}\n\n\t&__name {\n\t\tmargin-bottom: 10px;\n\t\ttext-align: center;\n\t\tfont-weight: bold;\n\t\tfont-size: 20px;\n\t\tline-height: 30px;\n\t}\n\n\t&__description {\n\t\tcolor: var(--color-text-maxcontrast);\n\t\ttext-align: center;\n\t\ttext-wrap-style: balance;\n\t}\n\n\t&__action {\n\t\tmargin-top: 8px;\n\n\t\t.modal-wrapper & {\n\t\t\tmargin-top: 20px;\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n}\n</style>\n"],"names":[],"mappings":";AAqJA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,UAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AACA,aAAA,KAAA,gBAAA,MAAA,KAAA,OAAA,cAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcGuestContent.cjs

@@ -1,4 +1,4 @@
-require('../assets/NcGuestContent-ByAkjts7.css');
+require('../assets/NcGuestContent-BkegjnLL.css');
 "use strict";
 const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const _sfc_main = {
@@ -21,7 +21,7 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "29a083f5"
+  "528e9576"
 );
 const NcGuestContent = __component__.exports;
 module.exports = NcGuestContent;

package/dist/Components/NcGuestContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcGuestContent.cjs","sources":["../../src/components/NcGuestContent/NcGuestContent.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis components provides a wrapper around guest page content.\nIt should be used as the main wrapper for guest pages, similar to `NcContent` for public and user pages.\nMeaning this component must be used as the root component for your application\nif you render the page using `OCP\\AppFramework\\Http\\TemplateResponse::RENDER_AS_GUEST`.\n\nIt can't be used multiple times on the same page.\n\n### Usage\n\n```html static\n<template>\n\t<NcGuestContent>\n\t\t<h2>Hello guest</h2>\n\t\t<span>How are you?</span>\n\t</NcGuestContent>\n</template>\n```\n</docs>\n\n<template>\n\t<div id=\"guest-content-vue\">\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\n/**\n * Guest content container to be used for the guest content of your app\n */\nexport default {\n\tname: 'NcGuestContent',\n\tmounted() {\n\t\tdocument.getElementById('content').classList.add('nc-guest-content')\n\t},\n\tdestroyed() {\n\t\tdocument.getElementById('content').classList.remove('nc-guest-content')\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n#guest-content-vue {\n\tcolor: var(--color-main-text);\n\tbackground-color: var(--color-main-background);\n\tmin-width: 0;\n\tborder-radius: var(--border-radius-large);\n\tbox-shadow: 0 0 10px var(--color-box-shadow);\n\theight: fit-content;\n\tpadding: 15px;\n\tmargin: 20px auto;\n}\n</style>\n\n<style lang=\"scss\">\n#content.nc-guest-content {\n\t// Enable scrolling\n\toverflow: auto;\n\n\t// Fix box being cutoff at the bottom\n\tmargin-bottom: 0;\n\theight: calc(var(--body-height) + var(--body-container-margin));\n}\n</style>\n"],"names":[],"mappings":";;AAqCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AACA,aAAA,eAAA,SAAA,EAAA,UAAA,IAAA,kBAAA;AAAA,EACA;AAAA,EACA,YAAA;AACA,aAAA,eAAA,SAAA,EAAA,UAAA,OAAA,kBAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcGuestContent.cjs","sources":["../../src/components/NcGuestContent/NcGuestContent.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis components provides a wrapper around guest page content.\nIt should be used as the main wrapper for guest pages, similar to `NcContent` for public and user pages.\nMeaning this component must be used as the root component for your application\nif you render the page using `OCP\\AppFramework\\Http\\TemplateResponse::RENDER_AS_GUEST`.\n\nIt can't be used multiple times on the same page.\n\n### Usage\n\n```html static\n<template>\n\t<NcGuestContent>\n\t\t<h2>Hello guest</h2>\n\t\t<span>How are you?</span>\n\t</NcGuestContent>\n</template>\n```\n</docs>\n\n<template>\n\t<div id=\"guest-content-vue\">\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\n/**\n * Guest content container to be used for the guest content of your app\n */\nexport default {\n\tname: 'NcGuestContent',\n\tmounted() {\n\t\tdocument.getElementById('content').classList.add('nc-guest-content')\n\t},\n\n\tdestroyed() {\n\t\tdocument.getElementById('content').classList.remove('nc-guest-content')\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n#guest-content-vue {\n\tcolor: var(--color-main-text);\n\tbackground-color: var(--color-main-background);\n\tmin-width: 0;\n\tborder-radius: var(--border-radius-large);\n\tbox-shadow: 0 0 10px var(--color-box-shadow);\n\theight: fit-content;\n\tpadding: 15px;\n\tmargin: 20px auto;\n}\n</style>\n\n<style lang=\"scss\">\n#content.nc-guest-content {\n\t// Enable scrolling\n\toverflow: auto;\n\n\t// Fix box being cutoff at the bottom\n\tmargin-bottom: 0;\n\theight: calc(var(--body-height) + var(--body-container-margin));\n}\n</style>\n"],"names":[],"mappings":";;AAqCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AACA,aAAA,eAAA,SAAA,EAAA,UAAA,IAAA,kBAAA;AAAA,EACA;AAAA,EAEA,YAAA;AACA,aAAA,eAAA,SAAA,EAAA,UAAA,OAAA,kBAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}

package/dist/Components/NcGuestContent.mjs

@@ -1,4 +1,4 @@
-import '../assets/NcGuestContent-ByAkjts7.css';
+import '../assets/NcGuestContent-BkegjnLL.css';
 import { n as normalizeComponent } from "../chunks/_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 const _sfc_main = {
   name: "NcGuestContent",
@@ -20,7 +20,7 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "29a083f5"
+  "528e9576"
 );
 const NcGuestContent = __component__.exports;
 export {

package/dist/Components/NcGuestContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcGuestContent.mjs","sources":["../../src/components/NcGuestContent/NcGuestContent.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis components provides a wrapper around guest page content.\nIt should be used as the main wrapper for guest pages, similar to `NcContent` for public and user pages.\nMeaning this component must be used as the root component for your application\nif you render the page using `OCP\\AppFramework\\Http\\TemplateResponse::RENDER_AS_GUEST`.\n\nIt can't be used multiple times on the same page.\n\n### Usage\n\n```html static\n<template>\n\t<NcGuestContent>\n\t\t<h2>Hello guest</h2>\n\t\t<span>How are you?</span>\n\t</NcGuestContent>\n</template>\n```\n</docs>\n\n<template>\n\t<div id=\"guest-content-vue\">\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\n/**\n * Guest content container to be used for the guest content of your app\n */\nexport default {\n\tname: 'NcGuestContent',\n\tmounted() {\n\t\tdocument.getElementById('content').classList.add('nc-guest-content')\n\t},\n\tdestroyed() {\n\t\tdocument.getElementById('content').classList.remove('nc-guest-content')\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n#guest-content-vue {\n\tcolor: var(--color-main-text);\n\tbackground-color: var(--color-main-background);\n\tmin-width: 0;\n\tborder-radius: var(--border-radius-large);\n\tbox-shadow: 0 0 10px var(--color-box-shadow);\n\theight: fit-content;\n\tpadding: 15px;\n\tmargin: 20px auto;\n}\n</style>\n\n<style lang=\"scss\">\n#content.nc-guest-content {\n\t// Enable scrolling\n\toverflow: auto;\n\n\t// Fix box being cutoff at the bottom\n\tmargin-bottom: 0;\n\theight: calc(var(--body-height) + var(--body-container-margin));\n}\n</style>\n"],"names":[],"mappings":";AAqCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AACA,aAAA,eAAA,SAAA,EAAA,UAAA,IAAA,kBAAA;AAAA,EACA;AAAA,EACA,YAAA;AACA,aAAA,eAAA,SAAA,EAAA,UAAA,OAAA,kBAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcGuestContent.mjs","sources":["../../src/components/NcGuestContent/NcGuestContent.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis components provides a wrapper around guest page content.\nIt should be used as the main wrapper for guest pages, similar to `NcContent` for public and user pages.\nMeaning this component must be used as the root component for your application\nif you render the page using `OCP\\AppFramework\\Http\\TemplateResponse::RENDER_AS_GUEST`.\n\nIt can't be used multiple times on the same page.\n\n### Usage\n\n```html static\n<template>\n\t<NcGuestContent>\n\t\t<h2>Hello guest</h2>\n\t\t<span>How are you?</span>\n\t</NcGuestContent>\n</template>\n```\n</docs>\n\n<template>\n\t<div id=\"guest-content-vue\">\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\n/**\n * Guest content container to be used for the guest content of your app\n */\nexport default {\n\tname: 'NcGuestContent',\n\tmounted() {\n\t\tdocument.getElementById('content').classList.add('nc-guest-content')\n\t},\n\n\tdestroyed() {\n\t\tdocument.getElementById('content').classList.remove('nc-guest-content')\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n#guest-content-vue {\n\tcolor: var(--color-main-text);\n\tbackground-color: var(--color-main-background);\n\tmin-width: 0;\n\tborder-radius: var(--border-radius-large);\n\tbox-shadow: 0 0 10px var(--color-box-shadow);\n\theight: fit-content;\n\tpadding: 15px;\n\tmargin: 20px auto;\n}\n</style>\n\n<style lang=\"scss\">\n#content.nc-guest-content {\n\t// Enable scrolling\n\toverflow: auto;\n\n\t// Fix box being cutoff at the bottom\n\tmargin-bottom: 0;\n\theight: calc(var(--body-height) + var(--body-container-margin));\n}\n</style>\n"],"names":[],"mappings":";AAqCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AACA,aAAA,eAAA,SAAA,EAAA,UAAA,IAAA,kBAAA;AAAA,EACA;AAAA,EAEA,YAAA;AACA,aAAA,eAAA,SAAA,EAAA,UAAA,OAAA,kBAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}

package/dist/Components/NcHeaderButton.cjs

@@ -1,63 +1,4 @@
-require('../assets/NcHeaderButton-BRhv2o2J.css');
 "use strict";
-const GenRandomId = require("../chunks/GenRandomId-BQDud3d4.cjs");
-const Components_NcButton = require("./NcButton.cjs");
-const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-V0q-tHlQ.cjs");
-const _sfc_main = {
-  name: "NcHeaderButton",
-  components: {
-    NcButton: Components_NcButton
-  },
-  props: {
-    /**
-     * Unique id for this menu
-     */
-    id: {
-      type: String,
-      required: true
-    },
-    /**
-     * `aria-label` attribute of the button
-     */
-    ariaLabel: {
-      type: String,
-      required: true
-    },
-    /**
-     * Additional visually hidden description text for the button
-     */
-    description: {
-      type: String,
-      default: null
-    }
-  },
-  emits: [
-    "click"
-  ],
-  data() {
-    return {
-      descriptionId: GenRandomId.GenRandomId()
-    };
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("div", { staticClass: "header-menu", attrs: { "id": _vm.id } }, [_c("NcButton", { staticClass: "header-menu__trigger", attrs: { "aria-label": _vm.ariaLabel, "aria-describedby": _vm.descriptionId, "size": "large", "variant": "tertiary-no-background" }, on: { "click": function($event) {
-    $event.preventDefault();
-    return _vm.$emit("click", $event);
-  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-    return [_vm._t("icon")];
-  }, proxy: true }], null, true) }), _vm.description ? _c("span", { staticClass: "header-menu__description hidden-visually", attrs: { "id": _vm.descriptionId } }, [_vm._v(" " + _vm._s(_vm.description) + " ")]) : _vm._e()], 1);
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  "d0e56bcf"
-);
-const NcHeaderButton = __component__.exports;
-module.exports = NcHeaderButton;
+const NcHeaderButton = require("../chunks/NcHeaderButton-AKzxd51V.cjs");
+module.exports = NcHeaderButton.NcHeaderButton;
 //# sourceMappingURL=NcHeaderButton.cjs.map

package/dist/Components/NcHeaderButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcHeaderButton.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 class=\"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 v-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":";;;;AA2FA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAA;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.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/Components/NcHeaderButton.mjs

@@ -1,64 +1,5 @@
-import '../assets/NcHeaderButton-BRhv2o2J.css';
-import { G as GenRandomId } from "../chunks/GenRandomId-CMooMQt0.mjs";
-import NcButton from "./NcButton.mjs";
-import { n as normalizeComponent } from "../chunks/_plugin-vue2_normalizer-DU4iP6Vu.mjs";
-const _sfc_main = {
-  name: "NcHeaderButton",
-  components: {
-    NcButton
-  },
-  props: {
-    /**
-     * Unique id for this menu
-     */
-    id: {
-      type: String,
-      required: true
-    },
-    /**
-     * `aria-label` attribute of the button
-     */
-    ariaLabel: {
-      type: String,
-      required: true
-    },
-    /**
-     * Additional visually hidden description text for the button
-     */
-    description: {
-      type: String,
-      default: null
-    }
-  },
-  emits: [
-    "click"
-  ],
-  data() {
-    return {
-      descriptionId: GenRandomId()
-    };
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("div", { staticClass: "header-menu", attrs: { "id": _vm.id } }, [_c("NcButton", { staticClass: "header-menu__trigger", attrs: { "aria-label": _vm.ariaLabel, "aria-describedby": _vm.descriptionId, "size": "large", "variant": "tertiary-no-background" }, on: { "click": function($event) {
-    $event.preventDefault();
-    return _vm.$emit("click", $event);
-  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-    return [_vm._t("icon")];
-  }, proxy: true }], null, true) }), _vm.description ? _c("span", { staticClass: "header-menu__description hidden-visually", attrs: { "id": _vm.descriptionId } }, [_vm._v(" " + _vm._s(_vm.description) + " ")]) : _vm._e()], 1);
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  "d0e56bcf"
-);
-const NcHeaderButton = __component__.exports;
+import { N } from "../chunks/NcHeaderButton-BORaK-yT.mjs";
 export {
-  NcHeaderButton as default
+  N as default
 };
 //# sourceMappingURL=NcHeaderButton.mjs.map

package/dist/Components/NcHeaderButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcHeaderButton.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 class=\"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 v-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":";;;AA2FA,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.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/Components/NcHeaderMenu.cjs

@@ -1,4 +1,4 @@
 "use strict";
-const NcHeaderMenu = require("../chunks/NcHeaderMenu-BWFubuox.cjs");
+const NcHeaderMenu = require("../chunks/NcHeaderMenu-CBP4SYca.cjs");
 module.exports = NcHeaderMenu.NcHeaderMenu;
 //# sourceMappingURL=NcHeaderMenu.cjs.map

package/dist/Components/NcHeaderMenu.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcHeaderMenu-Dq_Avv2T.mjs";
+import { N } from "../chunks/NcHeaderMenu-CkD6cjnH.mjs";
 export {
   N as default
 };

package/dist/Components/NcHighlight.cjs

@@ -1,4 +1,4 @@
 "use strict";
-const Components_NcHighlight = require("../chunks/index-DIJxEozm.cjs");
+const Components_NcHighlight = require("../chunks/index-Dr9k4hIP.cjs");
 module.exports = Components_NcHighlight.NcHighlight;
 //# sourceMappingURL=NcHighlight.cjs.map

package/dist/Components/NcHighlight.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/index-Bz6q9mZw.mjs";
+import { N } from "../chunks/index-CxTT94_h.mjs";
 export {
   N as default
 };

package/dist/Components/NcIconSvgWrapper.cjs

@@ -1,4 +1,4 @@
 "use strict";
-const NcIconSvgWrapper = require("../chunks/NcIconSvgWrapper-CrnN5Sq5.cjs");
+const NcIconSvgWrapper = require("../chunks/NcIconSvgWrapper-D-aKMbf3.cjs");
 module.exports = NcIconSvgWrapper.NcIconSvgWrapper;
 //# sourceMappingURL=NcIconSvgWrapper.cjs.map

package/dist/Components/NcIconSvgWrapper.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcIconSvgWrapper-Cb-cPj1R.mjs";
+import { N } from "../chunks/NcIconSvgWrapper-BreCg8pX.mjs";
 export {
   N as default
 };

package/dist/Components/NcInputField.cjs

@@ -1,4 +1,4 @@
 "use strict";
-const NcInputField = require("../chunks/NcInputField-cT3u4gMS.cjs");
+const NcInputField = require("../chunks/NcInputField-Dry3uU_8.cjs");
 module.exports = NcInputField.NcInputField;
 //# sourceMappingURL=NcInputField.cjs.map

package/dist/Components/NcInputField.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcInputField-BNSfmQqu.mjs";
+import { N } from "../chunks/NcInputField-kKgY_2GV.mjs";
 export {
   N as default
 };

package/dist/Components/NcKbd.cjs

@@ -0,0 +1,65 @@
+require('../assets/NcKbd-BGW1_Jb7.css');
+"use strict";
+const Vue = require("vue");
+const _l10n = require("../chunks/_l10n-DM-VRK9x.cjs");
+const platform = require("../chunks/platform-oKxQ1agV.cjs");
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+_l10n.register();
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  __name: "NcKbd",
+  props: {
+    symbol: { default: void 0 },
+    mac: { type: [Boolean, null], default: platform.isMac }
+  },
+  setup(__props) {
+    const props = __props;
+    const labels = Vue.computed(() => ({
+      ArrowUp: "↑",
+      ArrowDown: "↓",
+      ArrowLeft: "←",
+      ArrowRight: "→",
+      Control: !props.mac ? _l10n.t("Ctrl") : "⌘",
+      Alt: !props.mac ? _l10n.t("Alt") : "⌥",
+      Shift: !props.mac ? _l10n.t("Shift") : "⇧",
+      Enter: !props.mac ? _l10n.t("Enter") : "⏎",
+      Tab: !props.mac ? _l10n.t("Tab") : "⇥",
+      Delete: !props.mac ? _l10n.t("Delete") : "⌫",
+      Escape: !props.mac ? _l10n.t("Escape") : "⎋",
+      Space: _l10n.t("Space")
+      // TRANSLATORS: Space key on keyboard
+    }));
+    const label = Vue.computed(() => props.symbol && labels.value[props.symbol] || props.symbol);
+    return { __sfc: true, props, labels, label };
+  }
+});
+const kbd = "_kbd_lf0a1_20";
+const style0 = {
+  "material-design-icon": "_material-design-icon_lf0a1_12",
+  kbd
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c("kbd", { class: _vm.$style.kbd }, [_vm._t("default", function() {
+    return [_vm._v(" " + _vm._s(_setup.label) + " ")];
+  })], 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 NcKbd = __component__.exports;
+module.exports = NcKbd;
+//# sourceMappingURL=NcKbd.cjs.map

package/dist/Components/NcKbd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcKbd.cjs","sources":["../../src/components/NcKbd/NcKbd.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 { computed } from 'vue'\nimport { t } from '../../l10n.js'\nimport { isMac } from '../../utils/platform.ts'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Key name or symbol to display.\n\t * For common special keys (CTRL, ALT, SHIFT, Arrow keys, etc.) it will display the symbol on macOS and the localized name on Windows/Linux.\n\t */\n\tsymbol?: 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'Control' | 'Alt' | 'Shift' | 'Enter' | 'Space' | 'Tab' | 'Delete' | 'Escape' | (string & {})\n\t/**\n\t * Explicitly use macOS (true) or Windows/Linux (false) key symbols.\n\t * By default it uses the OS detected from the user agent.\n\t */\n\tmac?: boolean | undefined\n}>(), {\n\tsymbol: undefined,\n\tmac: isMac,\n})\n\n/**\n * Map of special key names to symbols or localized names:\n * - macOS uses symbols instead of names\n * - Windows/Linux uses localized names\n * - In ternary expressions, // TRANSLATORS comments only works for the second operand, but not for `else`\n */\nconst labels = computed(() => ({\n\tArrowUp: '↑',\n\tArrowDown: '↓',\n\tArrowLeft: '←',\n\tArrowRight: '→',\n\tControl: !props.mac\n\t\t? t('Ctrl') // TRANSLATORS: Ctrl key on keyboard (Windows/Linux)\n\t\t: '⌘',\n\tAlt: !props.mac\n\t\t? t('Alt') // TRANSLATORS: Alt key on keyboard (Windows/Linux)\n\t\t: '⌥',\n\tShift: !props.mac\n\t\t? t('Shift') // TRANSLATORS: Shift key on keyboard\n\t\t: '⇧',\n\tEnter: !props.mac\n\t\t? t('Enter') // TRANSLATORS: Enter key on keyboard\n\t\t: '⏎',\n\tTab: !props.mac\n\t\t? t('Tab') // TRANSLATORS: Tab key on keyboard\n\t\t: '⇥',\n\tDelete: !props.mac\n\t\t? t('Delete') // TRANSLATORS: Delete key on keyboard\n\t\t: '⌫',\n\tEscape: !props.mac\n\t\t? t('Escape') // TRANSLATORS: Escape key on keyboard\n\t\t: '⎋',\n\tSpace: t('Space'), // TRANSLATORS: Space key on keyboard\n} as const))\n\nconst label = computed(() => (props.symbol && labels.value[props.symbol]) || props.symbol)\n</script>\n\n<template>\n\t<kbd :class=\"$style.kbd\">\n\t\t<slot>\n\t\t\t{{ label }}\n\t\t</slot>\n\t</kbd>\n</template>\n\n<style lang=\"scss\" module>\n.kbd {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmin-width: var(--default-clickable-area);\n\theight: var(--default-clickable-area);\n\tpadding-inline: calc(2 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));\n\tborder: 2px solid var(--color-primary-element-light);\n\tborder-block-end-width: 4px;\n\tborder-radius: var(--border-radius-element);\n\tbox-shadow: none; /* Override server <kbd> styles */\n\tfont-family: var(--font-family); /* Design decision: looks better with the default font instead of mono */\n\tline-height: 1;\n\twhite-space: nowrap;\n\n\t& + .kbd {\n\t\tmargin-inline-start: calc(1 * var(--default-grid-baseline));\n\t}\n}\n</style>\n\n<docs>\nNextcloud-styled `<kbd>` element. It can be used with a single key symbol in the content or with the `symbol` prop (preferred).\n\nSubsequent `<NcKbd>` elements will have a small margin between them.\n\n```vue\n<template>\n\t<div>\n\t\t<NcKbd symbol=\"Control\" />\n\t\t<NcKbd symbol=\"F\" />\n\t</div>\n</template>\n```\n\n### Special symbols\n\nIt is recommended to use the `symbol` prop. It displays the appropriate symbol or localized name depending on the OS.\nOS detection is automatic but can be overridden via the `mac` prop.\n\n```vue\n<template>\n\t<table class=\"sample-table\">\n\t\t<tr>\n\t\t\t<th>symbol</th>\n\t\t\t<th>Auto</th>\n\t\t\t<th>macOS</th>\n\t\t\t<th>Windows/Linux</th>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowUp</th>\n\t\t\t<td><NcKbd symbol=\"ArrowUp\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowUp\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowUp\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowDown</th>\n\t\t\t<td><NcKbd symbol=\"ArrowDown\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowDown\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowDown\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowLeft</th>\n\t\t\t<td><NcKbd symbol=\"ArrowLeft\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowLeft\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowLeft\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowRight</th>\n\t\t\t<td><NcKbd symbol=\"ArrowRight\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowRight\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowRight\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Control</th>\n\t\t\t<td><NcKbd symbol=\"Control\" /></td>\n\t\t\t<td><NcKbd symbol=\"Control\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Control\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Alt</th>\n\t\t\t<td><NcKbd symbol=\"Alt\" /></td>\n\t\t\t<td><NcKbd symbol=\"Alt\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Alt\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Shift</th>\n\t\t\t<td><NcKbd symbol=\"Shift\" /></td>\n\t\t\t<td><NcKbd symbol=\"Shift\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Shift\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Enter</th>\n\t\t\t<td><NcKbd symbol=\"Enter\" /></td>\n\t\t\t<td><NcKbd symbol=\"Enter\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Enter\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Tab</th>\n\t\t\t<td><NcKbd symbol=\"Tab\" /></td>\n\t\t\t<td><NcKbd symbol=\"Tab\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Tab\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Delete</th>\n\t\t\t<td><NcKbd symbol=\"Delete\" /></td>\n\t\t\t<td><NcKbd symbol=\"Delete\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Delete\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Escape</th>\n\t\t\t<td><NcKbd symbol=\"Escape\" /></td>\n\t\t\t<td><NcKbd symbol=\"Escape\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Escape\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Space</th>\n\t\t\t<td><NcKbd symbol=\"Space\" /></td>\n\t\t\t<td><NcKbd symbol=\"Space\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Space\" :mac=\"false\" /></td>\n\t\t</tr>\n\t</table>\n</template>\n\n<style scoped>\n.sample-table {\n\tborder-collapse: collapse;\n\n\tth,\n\ttd {\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\tpadding-block: calc(1 * var(--default-grid-baseline));\n\t}\n\n\ttr:first-child {\n\t\tborder-block-end: 2px solid var(--color-border);\n\n\t\tth {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n}\n</style>\n```\n\n### Custom content\n\nIn a special case you might want to use a custom content.\n\n```vue\n<template>\n\t<NcKbd aria-label=\"Eject\">\n\t\t<IconEject :size=\"15\" />\n\t</NcKbd>\n</template>\n\n<script>\nimport IconEject from 'vue-material-design-icons/Eject.vue'\n\nexport default {\n\tcomponents: { IconEject }\n}\n</script>\n```\n</docs>\n"],"names":["computed","t"],"mappings":";;;;;;;;;;;;;;AAgCA,UAAM,SAASA,IAAAA,SAAS,OAAO;AAAA,MAC9B,SAAS;AAAA,MACT,WAAW;AAAA,MACX,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,SAAS,CAAC,MAAM,MACbC,MAAAA,EAAE,MAAM,IACR;AAAA,MACH,KAAK,CAAC,MAAM,MACTA,MAAAA,EAAE,KAAK,IACP;AAAA,MACH,OAAO,CAAC,MAAM,MACXA,MAAAA,EAAE,OAAO,IACT;AAAA,MACH,OAAO,CAAC,MAAM,MACXA,MAAAA,EAAE,OAAO,IACT;AAAA,MACH,KAAK,CAAC,MAAM,MACTA,MAAAA,EAAE,KAAK,IACP;AAAA,MACH,QAAQ,CAAC,MAAM,MACZA,MAAAA,EAAE,QAAQ,IACV;AAAA,MACH,QAAQ,CAAC,MAAM,MACZA,MAAAA,EAAE,QAAQ,IACV;AAAA,MACH,OAAOA,MAAAA,EAAE,OAAO;AAAA;AAAA,IAAA,EACN;AAEX,UAAM,QAAQD,IAAAA,SAAS,MAAO,MAAM,UAAU,OAAO,MAAM,MAAM,MAAM,KAAM,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcKbd.mjs

@@ -0,0 +1,66 @@
+import '../assets/NcKbd-BGW1_Jb7.css';
+import { defineComponent, computed } from "vue";
+import { r as register, a as t } from "../chunks/_l10n-BEfeU7gr.mjs";
+import { i as isMac } from "../chunks/platform-CC2ecGvV.mjs";
+import { n as normalizeComponent } from "../chunks/_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+register();
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcKbd",
+  props: {
+    symbol: { default: void 0 },
+    mac: { type: [Boolean, null], default: isMac }
+  },
+  setup(__props) {
+    const props = __props;
+    const labels = computed(() => ({
+      ArrowUp: "↑",
+      ArrowDown: "↓",
+      ArrowLeft: "←",
+      ArrowRight: "→",
+      Control: !props.mac ? t("Ctrl") : "⌘",
+      Alt: !props.mac ? t("Alt") : "⌥",
+      Shift: !props.mac ? t("Shift") : "⇧",
+      Enter: !props.mac ? t("Enter") : "⏎",
+      Tab: !props.mac ? t("Tab") : "⇥",
+      Delete: !props.mac ? t("Delete") : "⌫",
+      Escape: !props.mac ? t("Escape") : "⎋",
+      Space: t("Space")
+      // TRANSLATORS: Space key on keyboard
+    }));
+    const label = computed(() => props.symbol && labels.value[props.symbol] || props.symbol);
+    return { __sfc: true, props, labels, label };
+  }
+});
+const kbd = "_kbd_lf0a1_20";
+const style0 = {
+  "material-design-icon": "_material-design-icon_lf0a1_12",
+  kbd
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c("kbd", { class: _vm.$style.kbd }, [_vm._t("default", function() {
+    return [_vm._v(" " + _vm._s(_setup.label) + " ")];
+  })], 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 NcKbd = __component__.exports;
+export {
+  NcKbd as default
+};
+//# sourceMappingURL=NcKbd.mjs.map

package/dist/Components/NcKbd.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcKbd.mjs","sources":["../../src/components/NcKbd/NcKbd.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 { computed } from 'vue'\nimport { t } from '../../l10n.js'\nimport { isMac } from '../../utils/platform.ts'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Key name or symbol to display.\n\t * For common special keys (CTRL, ALT, SHIFT, Arrow keys, etc.) it will display the symbol on macOS and the localized name on Windows/Linux.\n\t */\n\tsymbol?: 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'Control' | 'Alt' | 'Shift' | 'Enter' | 'Space' | 'Tab' | 'Delete' | 'Escape' | (string & {})\n\t/**\n\t * Explicitly use macOS (true) or Windows/Linux (false) key symbols.\n\t * By default it uses the OS detected from the user agent.\n\t */\n\tmac?: boolean | undefined\n}>(), {\n\tsymbol: undefined,\n\tmac: isMac,\n})\n\n/**\n * Map of special key names to symbols or localized names:\n * - macOS uses symbols instead of names\n * - Windows/Linux uses localized names\n * - In ternary expressions, // TRANSLATORS comments only works for the second operand, but not for `else`\n */\nconst labels = computed(() => ({\n\tArrowUp: '↑',\n\tArrowDown: '↓',\n\tArrowLeft: '←',\n\tArrowRight: '→',\n\tControl: !props.mac\n\t\t? t('Ctrl') // TRANSLATORS: Ctrl key on keyboard (Windows/Linux)\n\t\t: '⌘',\n\tAlt: !props.mac\n\t\t? t('Alt') // TRANSLATORS: Alt key on keyboard (Windows/Linux)\n\t\t: '⌥',\n\tShift: !props.mac\n\t\t? t('Shift') // TRANSLATORS: Shift key on keyboard\n\t\t: '⇧',\n\tEnter: !props.mac\n\t\t? t('Enter') // TRANSLATORS: Enter key on keyboard\n\t\t: '⏎',\n\tTab: !props.mac\n\t\t? t('Tab') // TRANSLATORS: Tab key on keyboard\n\t\t: '⇥',\n\tDelete: !props.mac\n\t\t? t('Delete') // TRANSLATORS: Delete key on keyboard\n\t\t: '⌫',\n\tEscape: !props.mac\n\t\t? t('Escape') // TRANSLATORS: Escape key on keyboard\n\t\t: '⎋',\n\tSpace: t('Space'), // TRANSLATORS: Space key on keyboard\n} as const))\n\nconst label = computed(() => (props.symbol && labels.value[props.symbol]) || props.symbol)\n</script>\n\n<template>\n\t<kbd :class=\"$style.kbd\">\n\t\t<slot>\n\t\t\t{{ label }}\n\t\t</slot>\n\t</kbd>\n</template>\n\n<style lang=\"scss\" module>\n.kbd {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmin-width: var(--default-clickable-area);\n\theight: var(--default-clickable-area);\n\tpadding-inline: calc(2 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));\n\tborder: 2px solid var(--color-primary-element-light);\n\tborder-block-end-width: 4px;\n\tborder-radius: var(--border-radius-element);\n\tbox-shadow: none; /* Override server <kbd> styles */\n\tfont-family: var(--font-family); /* Design decision: looks better with the default font instead of mono */\n\tline-height: 1;\n\twhite-space: nowrap;\n\n\t& + .kbd {\n\t\tmargin-inline-start: calc(1 * var(--default-grid-baseline));\n\t}\n}\n</style>\n\n<docs>\nNextcloud-styled `<kbd>` element. It can be used with a single key symbol in the content or with the `symbol` prop (preferred).\n\nSubsequent `<NcKbd>` elements will have a small margin between them.\n\n```vue\n<template>\n\t<div>\n\t\t<NcKbd symbol=\"Control\" />\n\t\t<NcKbd symbol=\"F\" />\n\t</div>\n</template>\n```\n\n### Special symbols\n\nIt is recommended to use the `symbol` prop. It displays the appropriate symbol or localized name depending on the OS.\nOS detection is automatic but can be overridden via the `mac` prop.\n\n```vue\n<template>\n\t<table class=\"sample-table\">\n\t\t<tr>\n\t\t\t<th>symbol</th>\n\t\t\t<th>Auto</th>\n\t\t\t<th>macOS</th>\n\t\t\t<th>Windows/Linux</th>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowUp</th>\n\t\t\t<td><NcKbd symbol=\"ArrowUp\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowUp\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowUp\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowDown</th>\n\t\t\t<td><NcKbd symbol=\"ArrowDown\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowDown\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowDown\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowLeft</th>\n\t\t\t<td><NcKbd symbol=\"ArrowLeft\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowLeft\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowLeft\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowRight</th>\n\t\t\t<td><NcKbd symbol=\"ArrowRight\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowRight\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowRight\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Control</th>\n\t\t\t<td><NcKbd symbol=\"Control\" /></td>\n\t\t\t<td><NcKbd symbol=\"Control\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Control\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Alt</th>\n\t\t\t<td><NcKbd symbol=\"Alt\" /></td>\n\t\t\t<td><NcKbd symbol=\"Alt\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Alt\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Shift</th>\n\t\t\t<td><NcKbd symbol=\"Shift\" /></td>\n\t\t\t<td><NcKbd symbol=\"Shift\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Shift\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Enter</th>\n\t\t\t<td><NcKbd symbol=\"Enter\" /></td>\n\t\t\t<td><NcKbd symbol=\"Enter\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Enter\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Tab</th>\n\t\t\t<td><NcKbd symbol=\"Tab\" /></td>\n\t\t\t<td><NcKbd symbol=\"Tab\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Tab\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Delete</th>\n\t\t\t<td><NcKbd symbol=\"Delete\" /></td>\n\t\t\t<td><NcKbd symbol=\"Delete\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Delete\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Escape</th>\n\t\t\t<td><NcKbd symbol=\"Escape\" /></td>\n\t\t\t<td><NcKbd symbol=\"Escape\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Escape\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Space</th>\n\t\t\t<td><NcKbd symbol=\"Space\" /></td>\n\t\t\t<td><NcKbd symbol=\"Space\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Space\" :mac=\"false\" /></td>\n\t\t</tr>\n\t</table>\n</template>\n\n<style scoped>\n.sample-table {\n\tborder-collapse: collapse;\n\n\tth,\n\ttd {\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\tpadding-block: calc(1 * var(--default-grid-baseline));\n\t}\n\n\ttr:first-child {\n\t\tborder-block-end: 2px solid var(--color-border);\n\n\t\tth {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n}\n</style>\n```\n\n### Custom content\n\nIn a special case you might want to use a custom content.\n\n```vue\n<template>\n\t<NcKbd aria-label=\"Eject\">\n\t\t<IconEject :size=\"15\" />\n\t</NcKbd>\n</template>\n\n<script>\nimport IconEject from 'vue-material-design-icons/Eject.vue'\n\nexport default {\n\tcomponents: { IconEject }\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAgCA,UAAM,SAAS,SAAS,OAAO;AAAA,MAC9B,SAAS;AAAA,MACT,WAAW;AAAA,MACX,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,SAAS,CAAC,MAAM,MACb,EAAE,MAAM,IACR;AAAA,MACH,KAAK,CAAC,MAAM,MACT,EAAE,KAAK,IACP;AAAA,MACH,OAAO,CAAC,MAAM,MACX,EAAE,OAAO,IACT;AAAA,MACH,OAAO,CAAC,MAAM,MACX,EAAE,OAAO,IACT;AAAA,MACH,KAAK,CAAC,MAAM,MACT,EAAE,KAAK,IACP;AAAA,MACH,QAAQ,CAAC,MAAM,MACZ,EAAE,QAAQ,IACV;AAAA,MACH,QAAQ,CAAC,MAAM,MACZ,EAAE,QAAQ,IACV;AAAA,MACH,OAAO,EAAE,OAAO;AAAA;AAAA,IAAA,EACN;AAEX,UAAM,QAAQ,SAAS,MAAO,MAAM,UAAU,OAAO,MAAM,MAAM,MAAM,KAAM,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcListItem.cjs

@@ -1,4 +1,4 @@
 "use strict";
-const NcListItem = require("../chunks/NcListItem-DV4HPJWQ.cjs");
+const NcListItem = require("../chunks/NcListItem-D_-a7WR9.cjs");
 module.exports = NcListItem.NcListItem;
 //# sourceMappingURL=NcListItem.cjs.map

package/dist/Components/NcListItem.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcListItem-CnxZixD_.mjs";
+import { N } from "../chunks/NcListItem-B3ETbT9w.mjs";
 export {
   N as default
 };

package/dist/Components/NcListItemIcon.cjs

@@ -1,4 +1,4 @@
 "use strict";
-const NcListItemIcon = require("../chunks/NcListItemIcon-BUthbF_v.cjs");
+const NcListItemIcon = require("../chunks/NcListItemIcon-CYR8eKOU.cjs");
 module.exports = NcListItemIcon.NcListItemIcon;
 //# sourceMappingURL=NcListItemIcon.cjs.map

package/dist/Components/NcListItemIcon.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcListItemIcon-CTfYEjBB.mjs";
+import { N } from "../chunks/NcListItemIcon-bQZej-L0.mjs";
 export {
   N as default
 };

package/dist/Components/NcLoadingIcon.cjs

@@ -1,4 +1,4 @@
-require('../assets/NcLoadingIcon-DbbToJVp.css');
+require('../assets/NcLoadingIcon-C7S2_wmi.css');
 "use strict";
 const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const _sfc_main = {
@@ -54,7 +54,7 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "d5de7f82"
+  "94ff8098"
 );
 const NcLoadingIcon = __component__.exports;
 module.exports = NcLoadingIcon;

package/dist/Components/NcLoadingIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcLoadingIcon.cjs","sources":["../../src/components/NcLoadingIcon/NcLoadingIcon.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n# Usage\n\n```\n<div>\n\t<NcLoadingIcon />\n</div>\n<div style=\"background-color: #171717;\">\n\t<NcLoadingIcon :size=\"64\" appearance=\"light\" name=\"Loading on dark background\" />\n</div>\n<div style=\"background-color: #fff;\">\n\t<NcLoadingIcon :size=\"64\" appearance=\"dark\" name=\"Loading on light background\" />\n</div>\n```\n</docs>\n\n<template>\n\t<span :aria-label=\"name\"\n\t\trole=\"img\"\n\t\tclass=\"material-design-icon loading-icon\">\n\t\t<svg :width=\"size\"\n\t\t\t:height=\"size\"\n\t\t\tviewBox=\"0 0 24 24\">\n\t\t\t<path :fill=\"colors[0]\" d=\"M12,4V2A10,10 0 1,0 22,12H20A8,8 0 1,1 12,4Z\" />\n\t\t\t<path :fill=\"colors[1]\" d=\"M12,4V2A10,10 0 0,1 22,12H20A8,8 0 0,0 12,4Z\">\n\t\t\t\t<title v-if=\"name\">{{ name }}</title>\n\t\t\t</path>\n\t\t</svg>\n\t</span>\n</template>\n\n<script>\nexport default {\n\tname: 'NcLoadingIcon',\n\tprops: {\n\t\t/**\n\t\t * Specify the size of the loading icon.\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\t\t/**\n\t\t * The appearance of the loading icon.\n\t\t * 'auto' adjusts to the Nextcloud color scheme,\n\t\t * 'light' and 'dark' are static.\n\t\t */\n\t\tappearance: {\n\t\t\ttype: String,\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['auto', 'light', 'dark'].includes(value)\n\t\t\t},\n\t\t\tdefault: 'auto',\n\t\t},\n\t\t/**\n\t\t * Specify what is loading.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\tcomputed: {\n\t\tcolors() {\n\t\t\tconst colors = ['#777', '#CCC']\n\t\t\tif (this.appearance === 'light') {\n\t\t\t\treturn colors\n\t\t\t} else if (this.appearance === 'dark') {\n\t\t\t\treturn colors.reverse()\n\t\t\t}\n\t\t\treturn ['var(--color-loading-light)', 'var(--color-loading-dark)']\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.loading-icon {\n\toverflow: hidden;\n\n\tsvg {\n\t\tanimation: rotate var(--animation-duration, 0.8s) linear infinite;\n\t}\n}\n</style>\n"],"names":[],"mappings":";;AAqCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA,OAAA;AACA,eAAA,CAAA,QAAA,SAAA,MAAA,EAAA,SAAA,KAAA;AAAA,MACA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA,IACA,SAAA;AACA,YAAA,SAAA,CAAA,QAAA,MAAA;AACA,UAAA,KAAA,eAAA,SAAA;AACA,eAAA;AAAA,MACA,WAAA,KAAA,eAAA,QAAA;AACA,eAAA,OAAA,QAAA;AAAA,MACA;AACA,aAAA,CAAA,8BAAA,2BAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcLoadingIcon.cjs","sources":["../../src/components/NcLoadingIcon/NcLoadingIcon.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n# Usage\n\n```\n<div>\n\t<NcLoadingIcon />\n</div>\n<div style=\"background-color: #171717;\">\n\t<NcLoadingIcon :size=\"64\" appearance=\"light\" name=\"Loading on dark background\" />\n</div>\n<div style=\"background-color: #fff;\">\n\t<NcLoadingIcon :size=\"64\" appearance=\"dark\" name=\"Loading on light background\" />\n</div>\n```\n</docs>\n\n<template>\n\t<span\n\t\t:aria-label=\"name\"\n\t\trole=\"img\"\n\t\tclass=\"material-design-icon loading-icon\">\n\t\t<svg\n\t\t\t:width=\"size\"\n\t\t\t:height=\"size\"\n\t\t\tviewBox=\"0 0 24 24\">\n\t\t\t<path :fill=\"colors[0]\" d=\"M12,4V2A10,10 0 1,0 22,12H20A8,8 0 1,1 12,4Z\" />\n\t\t\t<path :fill=\"colors[1]\" d=\"M12,4V2A10,10 0 0,1 22,12H20A8,8 0 0,0 12,4Z\">\n\t\t\t\t<title v-if=\"name\">{{ name }}</title>\n\t\t\t</path>\n\t\t</svg>\n\t</span>\n</template>\n\n<script>\nexport default {\n\tname: 'NcLoadingIcon',\n\tprops: {\n\t\t/**\n\t\t * Specify the size of the loading icon.\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\n\t\t/**\n\t\t * The appearance of the loading icon.\n\t\t * 'auto' adjusts to the Nextcloud color scheme,\n\t\t * 'light' and 'dark' are static.\n\t\t */\n\t\tappearance: {\n\t\t\ttype: String,\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['auto', 'light', 'dark'].includes(value)\n\t\t\t},\n\n\t\t\tdefault: 'auto',\n\t\t},\n\n\t\t/**\n\t\t * Specify what is loading.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tcolors() {\n\t\t\tconst colors = ['#777', '#CCC']\n\t\t\tif (this.appearance === 'light') {\n\t\t\t\treturn colors\n\t\t\t} else if (this.appearance === 'dark') {\n\t\t\t\treturn colors.reverse()\n\t\t\t}\n\t\t\treturn ['var(--color-loading-light)', 'var(--color-loading-dark)']\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.loading-icon {\n\toverflow: hidden;\n\n\tsvg {\n\t\tanimation: rotate var(--animation-duration, 0.8s) linear infinite;\n\t}\n}\n</style>\n"],"names":[],"mappings":";;AAuCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA,OAAA;AACA,eAAA,CAAA,QAAA,SAAA,MAAA,EAAA,SAAA,KAAA;AAAA,MACA;AAAA,MAEA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,SAAA;AACA,YAAA,SAAA,CAAA,QAAA,MAAA;AACA,UAAA,KAAA,eAAA,SAAA;AACA,eAAA;AAAA,MACA,WAAA,KAAA,eAAA,QAAA;AACA,eAAA,OAAA,QAAA;AAAA,MACA;AACA,aAAA,CAAA,8BAAA,2BAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}

package/dist/Components/NcLoadingIcon.mjs

@@ -1,4 +1,4 @@
-import '../assets/NcLoadingIcon-DbbToJVp.css';
+import '../assets/NcLoadingIcon-C7S2_wmi.css';
 import { n as normalizeComponent } from "../chunks/_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 const _sfc_main = {
   name: "NcLoadingIcon",
@@ -53,7 +53,7 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "d5de7f82"
+  "94ff8098"
 );
 const NcLoadingIcon = __component__.exports;
 export {

package/dist/Components/NcLoadingIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcLoadingIcon.mjs","sources":["../../src/components/NcLoadingIcon/NcLoadingIcon.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n# Usage\n\n```\n<div>\n\t<NcLoadingIcon />\n</div>\n<div style=\"background-color: #171717;\">\n\t<NcLoadingIcon :size=\"64\" appearance=\"light\" name=\"Loading on dark background\" />\n</div>\n<div style=\"background-color: #fff;\">\n\t<NcLoadingIcon :size=\"64\" appearance=\"dark\" name=\"Loading on light background\" />\n</div>\n```\n</docs>\n\n<template>\n\t<span :aria-label=\"name\"\n\t\trole=\"img\"\n\t\tclass=\"material-design-icon loading-icon\">\n\t\t<svg :width=\"size\"\n\t\t\t:height=\"size\"\n\t\t\tviewBox=\"0 0 24 24\">\n\t\t\t<path :fill=\"colors[0]\" d=\"M12,4V2A10,10 0 1,0 22,12H20A8,8 0 1,1 12,4Z\" />\n\t\t\t<path :fill=\"colors[1]\" d=\"M12,4V2A10,10 0 0,1 22,12H20A8,8 0 0,0 12,4Z\">\n\t\t\t\t<title v-if=\"name\">{{ name }}</title>\n\t\t\t</path>\n\t\t</svg>\n\t</span>\n</template>\n\n<script>\nexport default {\n\tname: 'NcLoadingIcon',\n\tprops: {\n\t\t/**\n\t\t * Specify the size of the loading icon.\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\t\t/**\n\t\t * The appearance of the loading icon.\n\t\t * 'auto' adjusts to the Nextcloud color scheme,\n\t\t * 'light' and 'dark' are static.\n\t\t */\n\t\tappearance: {\n\t\t\ttype: String,\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['auto', 'light', 'dark'].includes(value)\n\t\t\t},\n\t\t\tdefault: 'auto',\n\t\t},\n\t\t/**\n\t\t * Specify what is loading.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\tcomputed: {\n\t\tcolors() {\n\t\t\tconst colors = ['#777', '#CCC']\n\t\t\tif (this.appearance === 'light') {\n\t\t\t\treturn colors\n\t\t\t} else if (this.appearance === 'dark') {\n\t\t\t\treturn colors.reverse()\n\t\t\t}\n\t\t\treturn ['var(--color-loading-light)', 'var(--color-loading-dark)']\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.loading-icon {\n\toverflow: hidden;\n\n\tsvg {\n\t\tanimation: rotate var(--animation-duration, 0.8s) linear infinite;\n\t}\n}\n</style>\n"],"names":[],"mappings":";AAqCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA,OAAA;AACA,eAAA,CAAA,QAAA,SAAA,MAAA,EAAA,SAAA,KAAA;AAAA,MACA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA,IACA,SAAA;AACA,YAAA,SAAA,CAAA,QAAA,MAAA;AACA,UAAA,KAAA,eAAA,SAAA;AACA,eAAA;AAAA,MACA,WAAA,KAAA,eAAA,QAAA;AACA,eAAA,OAAA,QAAA;AAAA,MACA;AACA,aAAA,CAAA,8BAAA,2BAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcLoadingIcon.mjs","sources":["../../src/components/NcLoadingIcon/NcLoadingIcon.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n# Usage\n\n```\n<div>\n\t<NcLoadingIcon />\n</div>\n<div style=\"background-color: #171717;\">\n\t<NcLoadingIcon :size=\"64\" appearance=\"light\" name=\"Loading on dark background\" />\n</div>\n<div style=\"background-color: #fff;\">\n\t<NcLoadingIcon :size=\"64\" appearance=\"dark\" name=\"Loading on light background\" />\n</div>\n```\n</docs>\n\n<template>\n\t<span\n\t\t:aria-label=\"name\"\n\t\trole=\"img\"\n\t\tclass=\"material-design-icon loading-icon\">\n\t\t<svg\n\t\t\t:width=\"size\"\n\t\t\t:height=\"size\"\n\t\t\tviewBox=\"0 0 24 24\">\n\t\t\t<path :fill=\"colors[0]\" d=\"M12,4V2A10,10 0 1,0 22,12H20A8,8 0 1,1 12,4Z\" />\n\t\t\t<path :fill=\"colors[1]\" d=\"M12,4V2A10,10 0 0,1 22,12H20A8,8 0 0,0 12,4Z\">\n\t\t\t\t<title v-if=\"name\">{{ name }}</title>\n\t\t\t</path>\n\t\t</svg>\n\t</span>\n</template>\n\n<script>\nexport default {\n\tname: 'NcLoadingIcon',\n\tprops: {\n\t\t/**\n\t\t * Specify the size of the loading icon.\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\n\t\t/**\n\t\t * The appearance of the loading icon.\n\t\t * 'auto' adjusts to the Nextcloud color scheme,\n\t\t * 'light' and 'dark' are static.\n\t\t */\n\t\tappearance: {\n\t\t\ttype: String,\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['auto', 'light', 'dark'].includes(value)\n\t\t\t},\n\n\t\t\tdefault: 'auto',\n\t\t},\n\n\t\t/**\n\t\t * Specify what is loading.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tcolors() {\n\t\t\tconst colors = ['#777', '#CCC']\n\t\t\tif (this.appearance === 'light') {\n\t\t\t\treturn colors\n\t\t\t} else if (this.appearance === 'dark') {\n\t\t\t\treturn colors.reverse()\n\t\t\t}\n\t\t\treturn ['var(--color-loading-light)', 'var(--color-loading-dark)']\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.loading-icon {\n\toverflow: hidden;\n\n\tsvg {\n\t\tanimation: rotate var(--animation-duration, 0.8s) linear infinite;\n\t}\n}\n</style>\n"],"names":[],"mappings":";AAuCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA,OAAA;AACA,eAAA,CAAA,QAAA,SAAA,MAAA,EAAA,SAAA,KAAA;AAAA,MACA;AAAA,MAEA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,SAAA;AACA,YAAA,SAAA,CAAA,QAAA,MAAA;AACA,UAAA,KAAA,eAAA,SAAA;AACA,eAAA;AAAA,MACA,WAAA,KAAA,eAAA,QAAA;AACA,eAAA,OAAA,QAAA;AAAA,MACA;AACA,aAAA,CAAA,8BAAA,2BAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}