@nextcloud/vue 8.30.0 → 8.32.0

package/dist/chunks/NcProgressBar-D10gQgAY.cjs

@@ -0,0 +1,119 @@
+require('../assets/NcProgressBar-CU_ib_HL.css');
+"use strict";
+const Vue = require("vue");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+const __default__ = {
+  name: "NcProgressBar",
+  props: {
+    /**
+     * An integer between 1 and 100
+     */
+    value: {
+      type: Number,
+      default: 0,
+      validator(value) {
+        return value >= 0 && value <= 100;
+      }
+    },
+    /**
+     * Determines the height of the progressbar.
+     * Possible values:
+     * - 'small' (default)
+     * - 'medium'
+     * - Number
+     *
+     * @type {'small'|'medium'|number}
+     */
+    size: {
+      type: [String, Number],
+      default: "small",
+      validator(value) {
+        return ["small", "medium"].includes(value) || typeof value === "number";
+      }
+    },
+    /**
+     * Applies an error color to the progressbar if true.
+     */
+    error: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * ProgressBar type
+     */
+    type: {
+      type: String,
+      default: "linear",
+      validator(value) {
+        return ["linear", "circular"].includes(value);
+      }
+    },
+    /**
+     * The color of the progress bar
+     */
+    color: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      stroke: 4
+    };
+  },
+  computed: {
+    height() {
+      if (this.type === "circular") {
+        if (Number.isInteger(this.size)) {
+          return this.size;
+        }
+        return 44;
+      }
+      if (this.size === "small") {
+        return 4;
+      } else if (this.size === "medium") {
+        return 6;
+      }
+      return this.size;
+    },
+    progress() {
+      return this.value / 100;
+    },
+    radius() {
+      return this.height / 2;
+    },
+    radiusNormalized() {
+      return this.radius - 3 * this.stroke;
+    },
+    circumference() {
+      return this.radiusNormalized * 2 * Math.PI;
+    }
+  }
+};
+const __injectCSSVars__ = () => {
+  Vue.useCssVars((_vm, _setup) => ({
+    "15a054de": _vm.color
+  }));
+};
+const __setup__ = __default__.setup;
+__default__.setup = __setup__ ? (props, ctx) => {
+  __injectCSSVars__();
+  return __setup__(props, ctx);
+} : __injectCSSVars__;
+const _sfc_main = __default__;
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _vm.type === "circular" ? _c("span", { staticClass: "progress-bar progress-bar--circular", class: { "progress-bar--error": _vm.error }, style: { "--progress-bar-height": _vm.height + "px" }, attrs: { "role": "progressbar", "aria-valuenow": _vm.value } }, [_c("svg", { attrs: { "height": _vm.height, "width": _vm.height } }, [_c("circle", { attrs: { "stroke": "currentColor", "fill": "transparent", "stroke-dasharray": "".concat(_vm.progress * _vm.circumference, " ").concat((1 - _vm.progress) * _vm.circumference), "stroke-dashoffset": 0.25 * _vm.circumference, "stroke-width": _vm.stroke, "r": _vm.radiusNormalized, "cx": _vm.radius, "cy": _vm.radius } }), _c("circle", { attrs: { "stroke": "var(--color-background-darker)", "fill": "transparent", "stroke-dasharray": "".concat((1 - _vm.progress) * _vm.circumference, " ").concat(_vm.progress * _vm.circumference), "stroke-dashoffset": (0.25 - _vm.progress) * _vm.circumference, "stroke-width": _vm.stroke, "r": _vm.radiusNormalized, "cx": _vm.radius, "cy": _vm.radius } })])]) : _c("progress", { staticClass: "progress-bar progress-bar--linear vue", class: { "progress-bar--error": _vm.error }, style: { "--progress-bar-height": _vm.height + "px" }, attrs: { "max": "100" }, domProps: { "value": _vm.value } });
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "06c9abdc"
+);
+const NcProgressBar = __component__.exports;
+exports.NcProgressBar = NcProgressBar;
+//# sourceMappingURL=NcProgressBar-D10gQgAY.cjs.map

package/dist/chunks/NcProgressBar-D10gQgAY.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcProgressBar-D10gQgAY.cjs","sources":["../../src/components/NcProgressBar/NcProgressBar.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis is a simple progress bar component.\n## Usage:\n\n### Linear\n```vue\n<template>\n\t<span>\n\t\tSmall\n\t\t<NcProgressBar :value=\"20\" />\n\t\t<br>\n\t\tMedium\n\t\t<NcProgressBar :value=\"60\" size=\"medium\" />\n\t\t<br>\n\t\tMedium with color\n\t\t<NcProgressBar :value=\"55\" size=\"medium\" color=\"green\" />\n\t\t<br>\n\t\tError\n\t\t<NcProgressBar :value=\"80\" :error=\"true\" />\n\t</span>\n</template>\n```\n\n### Circular\n```vue\n<template>\n\t<span>\n\t\tDefault\n\t\t<NcProgressBar type=\"circular\" :value=\"55\" />\n\t\t<br />\n\t\tColor\n\t\t<NcProgressBar type=\"circular\" :value=\"70\" color=\"green\" />\n\t\t<br />\n\t\tError\n\t\t<NcProgressBar type=\"circular\" :value=\"60\" :error=\"true\" />\n\t</span>\n</template>\n```\n</docs>\n\n<template>\n\t<span\n\t\tv-if=\"type === 'circular'\"\n\t\trole=\"progressbar\"\n\t\t:aria-valuenow=\"value\"\n\t\t:style=\"{ '--progress-bar-height': height + 'px' }\"\n\t\t:class=\"{ 'progress-bar--error': error }\"\n\t\tclass=\"progress-bar progress-bar--circular\">\n\t\t<svg\n\t\t\t:height=\"height\"\n\t\t\t:width=\"height\">\n\t\t\t<circle\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\t:stroke-dasharray=\"`${progress * circumference} ${(1 - progress) * circumference}`\"\n\t\t\t\t:stroke-dashoffset=\"0.25 * circumference\"\n\t\t\t\t:stroke-width=\"stroke\"\n\t\t\t\t:r=\"radiusNormalized\"\n\t\t\t\t:cx=\"radius\"\n\t\t\t\t:cy=\"radius\" />\n\t\t\t<circle\n\t\t\t\tstroke=\"var(--color-background-darker)\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\t:stroke-dasharray=\"`${(1 - progress) * circumference} ${progress * circumference}`\"\n\t\t\t\t:stroke-dashoffset=\"(0.25 - progress) * circumference\"\n\t\t\t\t:stroke-width=\"stroke\"\n\t\t\t\t:r=\"radiusNormalized\"\n\t\t\t\t:cx=\"radius\"\n\t\t\t\t:cy=\"radius\" />\n\t\t</svg>\n\t</span>\n\t<progress\n\t\tv-else\n\t\tclass=\"progress-bar progress-bar--linear vue\"\n\t\t:class=\"{ 'progress-bar--error': error }\"\n\t\t:style=\"{ '--progress-bar-height': height + 'px' }\"\n\t\t:value=\"value\"\n\t\tmax=\"100\" />\n</template>\n\n<script>\nexport default {\n\n\tname: 'NcProgressBar',\n\n\tprops: {\n\t\t/**\n\t\t * An integer between 1 and 100\n\t\t */\n\t\tvalue: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t\tvalidator(value) {\n\t\t\t\treturn value >= 0\n\t\t\t\t\t&& value <= 100\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Determines the height of the progressbar.\n\t\t * Possible values:\n\t\t * - 'small' (default)\n\t\t * - 'medium'\n\t\t * - Number\n\t\t *\n\t\t * @type {'small'|'medium'|number}\n\t\t */\n\t\tsize: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: 'small',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['small', 'medium'].includes(value) || typeof value === 'number'\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Applies an error color to the progressbar if true.\n\t\t */\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * ProgressBar type\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'linear',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['linear', 'circular'].includes(value)\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * The color of the progress bar\n\t\t */\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tstroke: 4,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\theight() {\n\t\t\tif (this.type === 'circular') {\n\t\t\t\tif (Number.isInteger(this.size)) {\n\t\t\t\t\treturn this.size\n\t\t\t\t}\n\t\t\t\treturn 44\n\t\t\t}\n\t\t\tif (this.size === 'small') {\n\t\t\t\treturn 4\n\t\t\t} else if (this.size === 'medium') {\n\t\t\t\treturn 6\n\t\t\t}\n\t\t\treturn this.size\n\t\t},\n\n\t\tprogress() {\n\t\t\treturn this.value / 100\n\t\t},\n\n\t\tradius() {\n\t\t\treturn this.height / 2\n\t\t},\n\n\t\tradiusNormalized() {\n\t\t\treturn this.radius - 3 * this.stroke\n\t\t},\n\n\t\tcircumference() {\n\t\t\treturn this.radiusNormalized * 2 * Math.PI\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.progress-bar {\n\tdisplay: block;\n\theight: var(--progress-bar-height);\n\n\t--progress-bar-color: v-bind(color);\n\n\t&--linear {\n\t\twidth: 100%;\n\t\toverflow: hidden;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t\tbackground: var(--color-background-dark);\n\t\tborder-radius: calc(var(--progress-bar-height) / 2);\n\n\t\t// Browser specific rules\n\t\t&::-webkit-progress-bar {\n\t\t\theight: var(--progress-bar-height);\n\t\t\tbackground-color: transparent;\n\t\t}\n\t\t&::-webkit-progress-value {\n\t\t\tbackground: var(--progress-bar-color, var(--gradient-primary-background));\n\t\t\tborder-radius: calc(var(--progress-bar-height) / 2);\n\t\t}\n\t\t&::-moz-progress-bar {\n\t\t\tbackground: var(--progress-bar-color, var(--gradient-primary-background));\n\t\t\tborder-radius: calc(var(--progress-bar-height) / 2);\n\t\t}\n\t}\n\t&--circular {\n\t\twidth: var(--progress-bar-height);\n\t\tcolor: var(--progress-bar-color, var(--color-primary-element));\n\t}\n\t&--error {\n\t\tcolor: var(--color-text-error, var(--color-error)) !important;\n\t\t// Override previous values\n\t\t&::-moz-progress-bar {\n\t\t\tbackground: var(--color-text-error, var(--color-error)) !important;\n\t\t}\n\t\t&::-webkit-progress-value {\n\t\t\tbackground: var(--color-text-error, var(--color-error)) !important;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":[],"mappings":";;;AAsFA,MAAA,cAAA;AAAA,EAEA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,OAAA;AACA,eAAA,SAAA,KACA,SAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWA,MAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,OAAA;AACA,eAAA,CAAA,SAAA,QAAA,EAAA,SAAA,KAAA,KAAA,OAAA,UAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,OAAA;AACA,eAAA,CAAA,UAAA,UAAA,EAAA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,SAAA;AACA,UAAA,KAAA,SAAA,YAAA;AACA,YAAA,OAAA,UAAA,KAAA,IAAA,GAAA;AACA,iBAAA,KAAA;AAAA,QACA;AACA,eAAA;AAAA,MACA;AACA,UAAA,KAAA,SAAA,SAAA;AACA,eAAA;AAAA,MACA,WAAA,KAAA,SAAA,UAAA;AACA,eAAA;AAAA,MACA;AACA,aAAA,KAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,aAAA,KAAA,QAAA;AAAA,IACA;AAAA,IAEA,SAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAA,KAAA,SAAA,IAAA,KAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA,KAAA,mBAAA,IAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcRadioGroup-DsnIVQZJ.cjs

@@ -0,0 +1,102 @@
+require('../assets/NcRadioGroup-CNgjqqiP.css');
+"use strict";
+const Vue = require("vue");
+const createElementId = require("./createElementId-DaJhnLzq.cjs");
+const useNcRadioGroup = require("./useNcRadioGroup-Djvu7bo0.cjs");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const Vue__default = /* @__PURE__ */ _interopDefault(Vue);
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const __default__ = {
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  }
+};
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent(__spreadProps(__spreadValues({}, __default__), {
+  __name: "NcRadioGroup",
+  props: {
+    label: null,
+    labelHidden: { type: Boolean },
+    description: null,
+    modelValue: null
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const descriptionId = createElementId.createElementId();
+    const buttonVariant = Vue.ref();
+    Vue.provide(useNcRadioGroup.INSIDE_RADIO_GROUP_KEY, Vue.computed(() => ({
+      modelValue: props.modelValue,
+      onUpdate,
+      register
+    })));
+    function register(isButton) {
+      if (buttonVariant.value !== void 0 && buttonVariant.value !== isButton) {
+        Vue__default.default.util.warn("[NcRadioGroup] Mixing NcCheckboxRadioSwitch and NcRadioGroupButton is not possible!");
+      }
+      buttonVariant.value = isButton;
+    }
+    function onUpdate(value) {
+      emit("update:modelValue", value);
+    }
+    return { __sfc: true, props, emit, descriptionId, buttonVariant, register, onUpdate };
+  }
+}));
+const radioGroup = "_radioGroup_u3tih_20";
+const radioGroup_buttonVariant = "_radioGroup_buttonVariant_u3tih_24";
+const radioGroup__label = "_radioGroup__label_u3tih_28";
+const radioGroup__description = "_radioGroup__description_u3tih_34";
+const radioGroup__wrapper = "_radioGroup__wrapper_u3tih_40";
+const style0 = {
+  "material-design-icon": "_material-design-icon_u3tih_12",
+  radioGroup,
+  radioGroup_buttonVariant,
+  radioGroup__label,
+  radioGroup__description,
+  radioGroup__wrapper
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c("fieldset", { class: [{
+    [_vm.$style.radioGroup_buttonVariant]: _setup.buttonVariant
+  }, _vm.$style.radioGroup], attrs: { "aria-describedby": _vm.description ? _setup.descriptionId : void 0 } }, [_c("legend", { class: [_vm.$style.radioGroup__label, { "hidden-visually": _vm.labelHidden }] }, [_vm._v(" " + _vm._s(_vm.label) + " ")]), _vm.description ? _c("p", { class: _vm.$style.radioGroup__description, attrs: { "id": _setup.descriptionId } }, [_vm._v(" " + _vm._s(_vm.description) + " ")]) : _vm._e(), _c("div", { class: _vm.$style.radioGroup__wrapper }, [_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 NcRadioGroup = __component__.exports;
+exports.NcRadioGroup = NcRadioGroup;
+//# sourceMappingURL=NcRadioGroup-DsnIVQZJ.cjs.map

package/dist/chunks/NcRadioGroup-DsnIVQZJ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcRadioGroup-DsnIVQZJ.cjs","sources":["../../src/components/NcRadioGroup/NcRadioGroup.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 Vue, { computed, provide, ref } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { INSIDE_RADIO_GROUP_KEY } from './useNcRadioGroup.ts'\n\nconst props = defineProps<{\n\t/**\n\t * Label of the radio group (accessible name).\n\t * It can be hidden visually if needed using `hidden-label` prop.\n\t */\n\tlabel: string\n\n\t/**\n\t * If set the label of the button group will not be shown visually but only for accessibility purposes.\n\t */\n\tlabelHidden?: boolean\n\n\t/**\n\t * Optional visual description of the radio group.\n\t */\n\tdescription?: string\n\n\t/**\n\t * The currently selected value\n\t */\n\tmodelValue?: string\n}>()\n\nconst emit = defineEmits<{\n\t(e: 'update:modelValue', v: string): void\n}>()\n\nconst descriptionId = createElementId()\nconst buttonVariant = ref<boolean>()\n\nprovide(INSIDE_RADIO_GROUP_KEY, computed(() => ({\n\tmodelValue: props.modelValue,\n\tonUpdate,\n\tregister,\n})))\n\n/**\n * Register a child component\n *\n * @param isButton - Whether the registered child component is a button or normal radio\n */\nfunction register(isButton: boolean): void {\n\tif (buttonVariant.value !== undefined && buttonVariant.value !== isButton) {\n\t\tVue.util.warn('[NcRadioGroup] Mixing NcCheckboxRadioSwitch and NcRadioGroupButton is not possible!')\n\t}\n\tbuttonVariant.value = isButton\n}\n\n/**\n * Handle updating the current model value\n *\n * @param value - The new value\n */\nfunction onUpdate(value: string) {\n\temit('update:modelValue', value)\n}\n</script>\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<template>\n\t<fieldset\n\t\t:aria-describedby=\"description ? descriptionId : undefined\"\n\t\t:class=\"[{\n\t\t\t[$style.radioGroup_buttonVariant]: buttonVariant,\n\t\t}, $style.radioGroup]\">\n\t\t<legend :class=\"[$style.radioGroup__label, { 'hidden-visually': labelHidden }]\">\n\t\t\t{{ label }}\n\t\t</legend>\n\t\t<p v-if=\"description\" :id=\"descriptionId\" :class=\"$style.radioGroup__description\">\n\t\t\t{{ description }}\n\t\t</p>\n\t\t<div :class=\"$style.radioGroup__wrapper\">\n\t\t\t<!-- @slot Slot for the included radio buttons (`NcCheckboxRadioSwitch`).\n\t\t\t\t The `type` prop of the `NcCheckboxRadioSwitch` will be automatically set (and forced) to `radio`.\n\t\t\t\t If you want the button variant, then you have to use `NcRadioGroupButton`.-->\n\t\t\t<slot />\n\t\t</div>\n\t</fieldset>\n</template>\n\n<style module lang=\"scss\">\n.radioGroup {\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t&:not(.radioGroup_buttonVariant) :global(.checkbox-content) {\n\t\tmax-width: unset !important;\n\t}\n}\n\n.radioGroup__label {\n\tfont-size: 1.2em;\n\tfont-weight: bold;\n\tmargin-inline-start: var(--border-radius-element);\n}\n\n.radioGroup__description {\n\tcolor: var(--color-text-maxcontrast);\n\tmargin-block-end: var(--default-grid-baseline);\n\tmargin-inline-start: var(--border-radius-element);\n}\n\n.radioGroup__wrapper {\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t> * {\n\t\tflex: 1 0 1px;\n\t}\n}\n\n.radioGroup__label + .radioGroup__wrapper {\n\t// when there is no description we need to add some margin between wrapper and label\n\tmargin-block-start: var(--default-grid-baseline);\n}\n\n.radioGroup_buttonVariant .radioGroup__wrapper {\n\tflex-direction: row;\n\tgap: var(--default-grid-baseline);\n}\n</style>\n\n<docs>\n## Usage example\n\n### Grouping multiple radio buttons\n\nThe radio group allows to group radio buttons into semantical groups.\nThe `v-model` only needs to be bound to the group component, also the `type` will automatically be set to `radio`.\n\n```vue\n<template>\n\t<NcRadioGroup v-model=\"selectedSides\" class=\"radio-group\" label=\"Sides\" description=\"Please choose the sides for your menu.\">\n\t\t<NcCheckboxRadioSwitch value=\"fries\">\n\t\t\tFries\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch value=\"salad\">\n\t\t\tSalad\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch value=\"none\">\n\t\t\tNothing\n\t\t</NcCheckboxRadioSwitch>\n\t</NcRadioGroup>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tselectedSides: 'none',\n\t\t}\n\t},\n}\n</script>\n\n<style scoped>\n.radio-group {\n\tmax-width: 400px\n}\n</style>\n```\n\n### Radio buttons with button styling\n\nThe radio group also allows to create a button like styling together with the `NcRadioGroupButton` component:\n\n```vue\n<template>\n\t<div>\n\t\t<h4>With text labels</h4>\n\t\t<div style=\"max-width: 400px\">\n\t\t\t<NcRadioGroup v-model=\"alignment\" label=\"Example alignment\" label-hidden>\n\t\t\t\t<NcRadioGroupButton label=\"Start\" value=\"start\" />\n\t\t\t\t<NcRadioGroupButton label=\"Center\" value=\"center\" />\n\t\t\t\t<NcRadioGroupButton label=\"End\" value=\"end\" />\n\t\t\t</NcRadioGroup>\n\t\t</div>\n\n\t\t<br>\n\n\t\t<h4>With icons</h4>\n\t\t<div style=\"max-width: 250px\">\n\t\t\t<NcRadioGroup v-model=\"alignment\" label=\"Example alignment with icons\" label-hidden>\n\t\t\t\t<NcRadioGroupButton aria-label=\"Start\" value=\"start\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiAlignHorizontalLeft\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t<NcRadioGroupButton aria-label=\"Center\" value=\"center\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiAlignHorizontalCenter\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t<NcRadioGroupButton aria-label=\"End\" value=\"end\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiAlignHorizontalRight\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t</NcRadioGroup>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport { mdiAlignHorizontalCenter, mdiAlignHorizontalLeft, mdiAlignHorizontalRight } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiAlignHorizontalCenter,\n\t\t\tmdiAlignHorizontalLeft,\n\t\t\tmdiAlignHorizontalRight,\n\t\t}\n\t},\n\tdata() {\n\t\treturn {\n\t\t\talignment: 'center',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n"],"names":["createElementId","ref","provide","INSIDE_RADIO_GROUP_KEY","computed","Vue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqEA,MAAA,cAAe;AAAA,EACd,OAAO;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAET;;;;;;;;;;;;AArCA,UAAM,gBAAgBA,gBAAAA,gBAAA;AACtB,UAAM,gBAAgBC,IAAAA,IAAA;AAEtBC,gBAAQC,gBAAAA,wBAAwBC,IAAAA,SAAS,OAAO;AAAA,MAC/C,YAAY,MAAM;AAAA,MAClB;AAAA,MACA;AAAA,IAAA,EACC,CAAC;AAOH,aAAS,SAAS,UAAyB;AAC1C,UAAI,cAAc,UAAU,UAAa,cAAc,UAAU,UAAU;AAC1EC,6BAAI,KAAK,KAAK,qFAAqF;AAAA,MACpG;AACA,oBAAc,QAAQ;AAAA,IACvB;AAOA,aAAS,SAAS,OAAe;AAChC,WAAK,qBAAqB,KAAK;AAAA,IAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcRadioGroup-sZaH_3Y0.mjs

@@ -0,0 +1,101 @@
+import '../assets/NcRadioGroup-CNgjqqiP.css';
+import Vue, { defineComponent, ref, provide, computed } from "vue";
+import { c as createElementId } from "./createElementId-5skgwxOP.mjs";
+import { I as INSIDE_RADIO_GROUP_KEY } from "./useNcRadioGroup-DaZbEKbf.mjs";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const __default__ = {
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  }
+};
+const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
+  __name: "NcRadioGroup",
+  props: {
+    label: null,
+    labelHidden: { type: Boolean },
+    description: null,
+    modelValue: null
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const descriptionId = createElementId();
+    const buttonVariant = ref();
+    provide(INSIDE_RADIO_GROUP_KEY, computed(() => ({
+      modelValue: props.modelValue,
+      onUpdate,
+      register
+    })));
+    function register(isButton) {
+      if (buttonVariant.value !== void 0 && buttonVariant.value !== isButton) {
+        Vue.util.warn("[NcRadioGroup] Mixing NcCheckboxRadioSwitch and NcRadioGroupButton is not possible!");
+      }
+      buttonVariant.value = isButton;
+    }
+    function onUpdate(value) {
+      emit("update:modelValue", value);
+    }
+    return { __sfc: true, props, emit, descriptionId, buttonVariant, register, onUpdate };
+  }
+}));
+const radioGroup = "_radioGroup_u3tih_20";
+const radioGroup_buttonVariant = "_radioGroup_buttonVariant_u3tih_24";
+const radioGroup__label = "_radioGroup__label_u3tih_28";
+const radioGroup__description = "_radioGroup__description_u3tih_34";
+const radioGroup__wrapper = "_radioGroup__wrapper_u3tih_40";
+const style0 = {
+  "material-design-icon": "_material-design-icon_u3tih_12",
+  radioGroup,
+  radioGroup_buttonVariant,
+  radioGroup__label,
+  radioGroup__description,
+  radioGroup__wrapper
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c("fieldset", { class: [{
+    [_vm.$style.radioGroup_buttonVariant]: _setup.buttonVariant
+  }, _vm.$style.radioGroup], attrs: { "aria-describedby": _vm.description ? _setup.descriptionId : void 0 } }, [_c("legend", { class: [_vm.$style.radioGroup__label, { "hidden-visually": _vm.labelHidden }] }, [_vm._v(" " + _vm._s(_vm.label) + " ")]), _vm.description ? _c("p", { class: _vm.$style.radioGroup__description, attrs: { "id": _setup.descriptionId } }, [_vm._v(" " + _vm._s(_vm.description) + " ")]) : _vm._e(), _c("div", { class: _vm.$style.radioGroup__wrapper }, [_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 NcRadioGroup = __component__.exports;
+export {
+  NcRadioGroup as N
+};
+//# sourceMappingURL=NcRadioGroup-sZaH_3Y0.mjs.map

package/dist/chunks/NcRadioGroup-sZaH_3Y0.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcRadioGroup-sZaH_3Y0.mjs","sources":["../../src/components/NcRadioGroup/NcRadioGroup.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 Vue, { computed, provide, ref } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { INSIDE_RADIO_GROUP_KEY } from './useNcRadioGroup.ts'\n\nconst props = defineProps<{\n\t/**\n\t * Label of the radio group (accessible name).\n\t * It can be hidden visually if needed using `hidden-label` prop.\n\t */\n\tlabel: string\n\n\t/**\n\t * If set the label of the button group will not be shown visually but only for accessibility purposes.\n\t */\n\tlabelHidden?: boolean\n\n\t/**\n\t * Optional visual description of the radio group.\n\t */\n\tdescription?: string\n\n\t/**\n\t * The currently selected value\n\t */\n\tmodelValue?: string\n}>()\n\nconst emit = defineEmits<{\n\t(e: 'update:modelValue', v: string): void\n}>()\n\nconst descriptionId = createElementId()\nconst buttonVariant = ref<boolean>()\n\nprovide(INSIDE_RADIO_GROUP_KEY, computed(() => ({\n\tmodelValue: props.modelValue,\n\tonUpdate,\n\tregister,\n})))\n\n/**\n * Register a child component\n *\n * @param isButton - Whether the registered child component is a button or normal radio\n */\nfunction register(isButton: boolean): void {\n\tif (buttonVariant.value !== undefined && buttonVariant.value !== isButton) {\n\t\tVue.util.warn('[NcRadioGroup] Mixing NcCheckboxRadioSwitch and NcRadioGroupButton is not possible!')\n\t}\n\tbuttonVariant.value = isButton\n}\n\n/**\n * Handle updating the current model value\n *\n * @param value - The new value\n */\nfunction onUpdate(value: string) {\n\temit('update:modelValue', value)\n}\n</script>\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<template>\n\t<fieldset\n\t\t:aria-describedby=\"description ? descriptionId : undefined\"\n\t\t:class=\"[{\n\t\t\t[$style.radioGroup_buttonVariant]: buttonVariant,\n\t\t}, $style.radioGroup]\">\n\t\t<legend :class=\"[$style.radioGroup__label, { 'hidden-visually': labelHidden }]\">\n\t\t\t{{ label }}\n\t\t</legend>\n\t\t<p v-if=\"description\" :id=\"descriptionId\" :class=\"$style.radioGroup__description\">\n\t\t\t{{ description }}\n\t\t</p>\n\t\t<div :class=\"$style.radioGroup__wrapper\">\n\t\t\t<!-- @slot Slot for the included radio buttons (`NcCheckboxRadioSwitch`).\n\t\t\t\t The `type` prop of the `NcCheckboxRadioSwitch` will be automatically set (and forced) to `radio`.\n\t\t\t\t If you want the button variant, then you have to use `NcRadioGroupButton`.-->\n\t\t\t<slot />\n\t\t</div>\n\t</fieldset>\n</template>\n\n<style module lang=\"scss\">\n.radioGroup {\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t&:not(.radioGroup_buttonVariant) :global(.checkbox-content) {\n\t\tmax-width: unset !important;\n\t}\n}\n\n.radioGroup__label {\n\tfont-size: 1.2em;\n\tfont-weight: bold;\n\tmargin-inline-start: var(--border-radius-element);\n}\n\n.radioGroup__description {\n\tcolor: var(--color-text-maxcontrast);\n\tmargin-block-end: var(--default-grid-baseline);\n\tmargin-inline-start: var(--border-radius-element);\n}\n\n.radioGroup__wrapper {\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t> * {\n\t\tflex: 1 0 1px;\n\t}\n}\n\n.radioGroup__label + .radioGroup__wrapper {\n\t// when there is no description we need to add some margin between wrapper and label\n\tmargin-block-start: var(--default-grid-baseline);\n}\n\n.radioGroup_buttonVariant .radioGroup__wrapper {\n\tflex-direction: row;\n\tgap: var(--default-grid-baseline);\n}\n</style>\n\n<docs>\n## Usage example\n\n### Grouping multiple radio buttons\n\nThe radio group allows to group radio buttons into semantical groups.\nThe `v-model` only needs to be bound to the group component, also the `type` will automatically be set to `radio`.\n\n```vue\n<template>\n\t<NcRadioGroup v-model=\"selectedSides\" class=\"radio-group\" label=\"Sides\" description=\"Please choose the sides for your menu.\">\n\t\t<NcCheckboxRadioSwitch value=\"fries\">\n\t\t\tFries\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch value=\"salad\">\n\t\t\tSalad\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch value=\"none\">\n\t\t\tNothing\n\t\t</NcCheckboxRadioSwitch>\n\t</NcRadioGroup>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tselectedSides: 'none',\n\t\t}\n\t},\n}\n</script>\n\n<style scoped>\n.radio-group {\n\tmax-width: 400px\n}\n</style>\n```\n\n### Radio buttons with button styling\n\nThe radio group also allows to create a button like styling together with the `NcRadioGroupButton` component:\n\n```vue\n<template>\n\t<div>\n\t\t<h4>With text labels</h4>\n\t\t<div style=\"max-width: 400px\">\n\t\t\t<NcRadioGroup v-model=\"alignment\" label=\"Example alignment\" label-hidden>\n\t\t\t\t<NcRadioGroupButton label=\"Start\" value=\"start\" />\n\t\t\t\t<NcRadioGroupButton label=\"Center\" value=\"center\" />\n\t\t\t\t<NcRadioGroupButton label=\"End\" value=\"end\" />\n\t\t\t</NcRadioGroup>\n\t\t</div>\n\n\t\t<br>\n\n\t\t<h4>With icons</h4>\n\t\t<div style=\"max-width: 250px\">\n\t\t\t<NcRadioGroup v-model=\"alignment\" label=\"Example alignment with icons\" label-hidden>\n\t\t\t\t<NcRadioGroupButton aria-label=\"Start\" value=\"start\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiAlignHorizontalLeft\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t<NcRadioGroupButton aria-label=\"Center\" value=\"center\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiAlignHorizontalCenter\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t<NcRadioGroupButton aria-label=\"End\" value=\"end\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiAlignHorizontalRight\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t</NcRadioGroup>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport { mdiAlignHorizontalCenter, mdiAlignHorizontalLeft, mdiAlignHorizontalRight } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiAlignHorizontalCenter,\n\t\t\tmdiAlignHorizontalLeft,\n\t\t\tmdiAlignHorizontalRight,\n\t\t}\n\t},\n\tdata() {\n\t\treturn {\n\t\t\talignment: 'center',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAqEA,MAAA,cAAe;AAAA,EACd,OAAO;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAET;;;;;;;;;;;;AArCA,UAAM,gBAAgB,gBAAA;AACtB,UAAM,gBAAgB,IAAA;AAEtB,YAAQ,wBAAwB,SAAS,OAAO;AAAA,MAC/C,YAAY,MAAM;AAAA,MAClB;AAAA,MACA;AAAA,IAAA,EACC,CAAC;AAOH,aAAS,SAAS,UAAyB;AAC1C,UAAI,cAAc,UAAU,UAAa,cAAc,UAAU,UAAU;AAC1E,YAAI,KAAK,KAAK,qFAAqF;AAAA,MACpG;AACA,oBAAc,QAAQ;AAAA,IACvB;AAOA,aAAS,SAAS,OAAe;AAChC,WAAK,qBAAqB,KAAK;AAAA,IAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcRadioGroupButton-B6m10k9G.mjs

@@ -0,0 +1,63 @@
+import '../assets/NcRadioGroupButton-6mf16D0h.css';
+import { defineComponent, onMounted, computed } from "vue";
+import { c as createElementId } from "./createElementId-5skgwxOP.mjs";
+import { u as useInsideRadioGroup } from "./useNcRadioGroup-DaZbEKbf.mjs";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcRadioGroupButton",
+  props: {
+    ariaLabel: null,
+    label: null,
+    value: null
+  },
+  setup(__props) {
+    const props = __props;
+    const labelId = createElementId();
+    const radioGroup = useInsideRadioGroup();
+    onMounted(() => radioGroup.value.register(true));
+    const isChecked = computed(() => (radioGroup == null ? void 0 : radioGroup.value.modelValue) === props.value);
+    function onUpdate() {
+      radioGroup.value.onUpdate(props.value);
+    }
+    return { __sfc: true, props, labelId, radioGroup, isChecked, onUpdate };
+  }
+});
+const radioGroupButton = "_radioGroupButton_buhgs_20";
+const radioGroupButton__label = "_radioGroupButton__label_buhgs_46";
+const radioGroupButton__icon = "_radioGroupButton__icon_buhgs_49";
+const radioGroupButton_active = "_radioGroupButton_active_buhgs_70";
+const style0 = {
+  "material-design-icon": "_material-design-icon_buhgs_12",
+  radioGroupButton,
+  radioGroupButton__label,
+  radioGroupButton__icon,
+  radioGroupButton_active
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c("div", { class: [{
+    [_vm.$style.radioGroupButton_active]: _setup.isChecked
+  }, _vm.$style.radioGroupButton], on: { "click": _setup.onUpdate } }, [_vm.$slots.icon ? _c("div", { class: _vm.$style.radioGroupButton__icon }, [_vm._t("icon")], 2) : _vm._e(), _vm.label ? _c("div", { class: _vm.$style.radioGroupButton__label, attrs: { "id": _setup.labelId } }, [_vm._v(" " + _vm._s(_vm.label) + " ")]) : _vm._e(), _c("input", { staticClass: "hidden-visually", attrs: { "aria-labelledby": _vm.label ? _setup.labelId : void 0, "aria-label": _vm.label ? void 0 : _vm.ariaLabel, "type": "radio" }, domProps: { "checked": _setup.isChecked, "value": _vm.value }, on: { "input": _setup.onUpdate } })]);
+};
+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 NcRadioGroupButton = __component__.exports;
+export {
+  NcRadioGroupButton as N
+};
+//# sourceMappingURL=NcRadioGroupButton-B6m10k9G.mjs.map

package/dist/chunks/NcRadioGroupButton-B6m10k9G.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcRadioGroupButton-B6m10k9G.mjs","sources":["../../src/components/NcRadioGroupButton/NcRadioGroupButton.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, onMounted } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { useInsideRadioGroup } from '../NcRadioGroup/useNcRadioGroup.ts'\n\nconst props = defineProps<{\n\t/**\n\t * Non visible label for accessibility when no `label` is passed.\n\t */\n\tariaLabel?: string\n\n\t/**\n\t * The visual label of the radio button\n\t */\n\tlabel?: string\n\n\t/**\n\t * The value that should be assigned to the `modelValue` of the `NcRadioGroup`.\n\t */\n\tvalue: string\n}>()\n\nconst labelId = createElementId()\nconst radioGroup = useInsideRadioGroup()\nonMounted(() => radioGroup!.value.register(true))\n\nconst isChecked = computed(() => radioGroup?.value.modelValue === props.value)\n\n/**\n * Handle updating the current model value\n */\nfunction onUpdate() {\n\tradioGroup!.value.onUpdate(props.value)\n}\n</script>\n\n<template>\n\t<div\n\t\t:class=\"[{\n\t\t\t[$style.radioGroupButton_active]: isChecked,\n\t\t}, $style.radioGroupButton]\"\n\t\t@click=\"onUpdate\">\n\t\t<div v-if=\"$slots.icon\" :class=\"$style.radioGroupButton__icon\">\n\t\t\t<!-- @slot Optional icon slot -->\n\t\t\t<slot name=\"icon\" />\n\t\t</div>\n\n\t\t<div v-if=\"label\" :id=\"labelId\" :class=\"$style.radioGroupButton__label\">\n\t\t\t{{ label }}\n\t\t</div>\n\n\t\t<input\n\t\t\t:aria-labelledby=\"label ? labelId : undefined\"\n\t\t\t:aria-label=\"label ? undefined : ariaLabel\"\n\t\t\tclass=\"hidden-visually\"\n\t\t\t:checked=\"isChecked\"\n\t\t\ttype=\"radio\"\n\t\t\t:value=\"value\"\n\t\t\t@input=\"onUpdate\">\n\t</div>\n</template>\n\n<style module lang=\"scss\">\n.radioGroupButton {\n\t--radio-group-button--border-radius: var(--border-radius-small);\n\t--radio-group-button--border-width: 1px;\n\t--radio-group-button--color: var(--color-primary-element-light-text);\n\t--radio-group-button--background-color: var(--color-primary-element-light);\n\t--radio-group-button--background-color-hover: var(--color-primary-element-light-hover);\n\t--radio-group-button--padding: 1px;\n\tcursor: pointer;\n\tcolor: var(--radio-group-button--color);\n\tbackground-color: var(--radio-group-button--background-color);\n\ttransition: var(--animation-quick) background-color;\n\tborder: var(--radio-group-button--border-width) solid var(--radio-group-button--background-color-hover);\n\tborder-bottom-width: 2px;\n\tborder-radius: var(--radio-group-button--border-radius);\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: center;\n\ttext-align: center;\n\tmin-height: var(--default-clickable-area);\n\t// ensure that the content is centered because of uneven border\n\tpadding-block: var(--radio-group-button--padding) 0;\n\tpadding-inline: var(--radio-group-button--padding);\n\n\t* {\n\t\tcursor: pointer;\n\t}\n\n\t:has(&__label) {\n\t\tpadding-inline: calc(var(--radio-group-button--padding) + var(--border-radius-element));\n\t}\n\n\t:has(&__icon) {\n\t\tpadding-inline-start: var(--radio-group-button--padding);\n\t}\n\n\t&:hover {\n\t\tbackground-color: var(--radio-group-button--background-color-hover);\n\t}\n\n\t&:focus-within {\n\t\t--radio-group-button--border-width: 2px;\n\t\t--radio-group-button--padding: 0px;\n\t\tborder: var(--radio-group-button--border-width) solid var(--color-main-text) !important;\n\t\toutline: calc(var(--default-grid-baseline) / 2) var(--color-main-background);\n\t}\n\n\t&:first-of-type {\n\t\tborder-start-start-radius: var(--border-radius-element);\n\t\tborder-end-start-radius: var(--border-radius-element);\n\t}\n\n\t&:last-of-type {\n\t\tborder-start-end-radius: var(--border-radius-element);\n\t\tborder-end-end-radius: var(--border-radius-element);\n\t}\n}\n\n.radioGroupButton_active {\n\t--radio-group-button--color: var(--color-primary-element-text);\n\t--radio-group-button--background-color: var(--color-primary-element);\n\t--radio-group-button--background-color-hover: var(--color-primary-element-hover);\n}\n\n.radioGroupButton__label {\n\tfont-weight: bold;\n}\n\n.radioGroupButton__icon {\n\t--radio-group-button--icon-size: calc(var(--default-clickable-area) - 4px);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n\twidth: var(--radio-group-button--icon-size);\n\n\t// make sure the icon is a bit smaller to account for border\n\t* {\n\t\t--default-clickable-area: var(--radio-group-button--icon-size);\n\t}\n}\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;AA2BA,UAAM,UAAU,gBAAA;AAChB,UAAM,aAAa,oBAAA;AACnB,cAAU,MAAM,WAAY,MAAM,SAAS,IAAI,CAAC;AAEhD,UAAM,YAAY,SAAS,OAAM,yCAAY,MAAM,gBAAe,MAAM,KAAK;AAK7E,aAAS,WAAW;AACnB,iBAAY,MAAM,SAAS,MAAM,KAAK;AAAA,IACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcRadioGroupButton-CDf_01-t.cjs

@@ -0,0 +1,62 @@
+require('../assets/NcRadioGroupButton-6mf16D0h.css');
+"use strict";
+const Vue = require("vue");
+const createElementId = require("./createElementId-DaJhnLzq.cjs");
+const useNcRadioGroup = require("./useNcRadioGroup-Djvu7bo0.cjs");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  __name: "NcRadioGroupButton",
+  props: {
+    ariaLabel: null,
+    label: null,
+    value: null
+  },
+  setup(__props) {
+    const props = __props;
+    const labelId = createElementId.createElementId();
+    const radioGroup = useNcRadioGroup.useInsideRadioGroup();
+    Vue.onMounted(() => radioGroup.value.register(true));
+    const isChecked = Vue.computed(() => (radioGroup == null ? void 0 : radioGroup.value.modelValue) === props.value);
+    function onUpdate() {
+      radioGroup.value.onUpdate(props.value);
+    }
+    return { __sfc: true, props, labelId, radioGroup, isChecked, onUpdate };
+  }
+});
+const radioGroupButton = "_radioGroupButton_buhgs_20";
+const radioGroupButton__label = "_radioGroupButton__label_buhgs_46";
+const radioGroupButton__icon = "_radioGroupButton__icon_buhgs_49";
+const radioGroupButton_active = "_radioGroupButton_active_buhgs_70";
+const style0 = {
+  "material-design-icon": "_material-design-icon_buhgs_12",
+  radioGroupButton,
+  radioGroupButton__label,
+  radioGroupButton__icon,
+  radioGroupButton_active
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c("div", { class: [{
+    [_vm.$style.radioGroupButton_active]: _setup.isChecked
+  }, _vm.$style.radioGroupButton], on: { "click": _setup.onUpdate } }, [_vm.$slots.icon ? _c("div", { class: _vm.$style.radioGroupButton__icon }, [_vm._t("icon")], 2) : _vm._e(), _vm.label ? _c("div", { class: _vm.$style.radioGroupButton__label, attrs: { "id": _setup.labelId } }, [_vm._v(" " + _vm._s(_vm.label) + " ")]) : _vm._e(), _c("input", { staticClass: "hidden-visually", attrs: { "aria-labelledby": _vm.label ? _setup.labelId : void 0, "aria-label": _vm.label ? void 0 : _vm.ariaLabel, "type": "radio" }, domProps: { "checked": _setup.isChecked, "value": _vm.value }, on: { "input": _setup.onUpdate } })]);
+};
+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 NcRadioGroupButton = __component__.exports;
+exports.NcRadioGroupButton = NcRadioGroupButton;
+//# sourceMappingURL=NcRadioGroupButton-CDf_01-t.cjs.map

package/dist/chunks/NcRadioGroupButton-CDf_01-t.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcRadioGroupButton-CDf_01-t.cjs","sources":["../../src/components/NcRadioGroupButton/NcRadioGroupButton.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, onMounted } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { useInsideRadioGroup } from '../NcRadioGroup/useNcRadioGroup.ts'\n\nconst props = defineProps<{\n\t/**\n\t * Non visible label for accessibility when no `label` is passed.\n\t */\n\tariaLabel?: string\n\n\t/**\n\t * The visual label of the radio button\n\t */\n\tlabel?: string\n\n\t/**\n\t * The value that should be assigned to the `modelValue` of the `NcRadioGroup`.\n\t */\n\tvalue: string\n}>()\n\nconst labelId = createElementId()\nconst radioGroup = useInsideRadioGroup()\nonMounted(() => radioGroup!.value.register(true))\n\nconst isChecked = computed(() => radioGroup?.value.modelValue === props.value)\n\n/**\n * Handle updating the current model value\n */\nfunction onUpdate() {\n\tradioGroup!.value.onUpdate(props.value)\n}\n</script>\n\n<template>\n\t<div\n\t\t:class=\"[{\n\t\t\t[$style.radioGroupButton_active]: isChecked,\n\t\t}, $style.radioGroupButton]\"\n\t\t@click=\"onUpdate\">\n\t\t<div v-if=\"$slots.icon\" :class=\"$style.radioGroupButton__icon\">\n\t\t\t<!-- @slot Optional icon slot -->\n\t\t\t<slot name=\"icon\" />\n\t\t</div>\n\n\t\t<div v-if=\"label\" :id=\"labelId\" :class=\"$style.radioGroupButton__label\">\n\t\t\t{{ label }}\n\t\t</div>\n\n\t\t<input\n\t\t\t:aria-labelledby=\"label ? labelId : undefined\"\n\t\t\t:aria-label=\"label ? undefined : ariaLabel\"\n\t\t\tclass=\"hidden-visually\"\n\t\t\t:checked=\"isChecked\"\n\t\t\ttype=\"radio\"\n\t\t\t:value=\"value\"\n\t\t\t@input=\"onUpdate\">\n\t</div>\n</template>\n\n<style module lang=\"scss\">\n.radioGroupButton {\n\t--radio-group-button--border-radius: var(--border-radius-small);\n\t--radio-group-button--border-width: 1px;\n\t--radio-group-button--color: var(--color-primary-element-light-text);\n\t--radio-group-button--background-color: var(--color-primary-element-light);\n\t--radio-group-button--background-color-hover: var(--color-primary-element-light-hover);\n\t--radio-group-button--padding: 1px;\n\tcursor: pointer;\n\tcolor: var(--radio-group-button--color);\n\tbackground-color: var(--radio-group-button--background-color);\n\ttransition: var(--animation-quick) background-color;\n\tborder: var(--radio-group-button--border-width) solid var(--radio-group-button--background-color-hover);\n\tborder-bottom-width: 2px;\n\tborder-radius: var(--radio-group-button--border-radius);\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: center;\n\ttext-align: center;\n\tmin-height: var(--default-clickable-area);\n\t// ensure that the content is centered because of uneven border\n\tpadding-block: var(--radio-group-button--padding) 0;\n\tpadding-inline: var(--radio-group-button--padding);\n\n\t* {\n\t\tcursor: pointer;\n\t}\n\n\t:has(&__label) {\n\t\tpadding-inline: calc(var(--radio-group-button--padding) + var(--border-radius-element));\n\t}\n\n\t:has(&__icon) {\n\t\tpadding-inline-start: var(--radio-group-button--padding);\n\t}\n\n\t&:hover {\n\t\tbackground-color: var(--radio-group-button--background-color-hover);\n\t}\n\n\t&:focus-within {\n\t\t--radio-group-button--border-width: 2px;\n\t\t--radio-group-button--padding: 0px;\n\t\tborder: var(--radio-group-button--border-width) solid var(--color-main-text) !important;\n\t\toutline: calc(var(--default-grid-baseline) / 2) var(--color-main-background);\n\t}\n\n\t&:first-of-type {\n\t\tborder-start-start-radius: var(--border-radius-element);\n\t\tborder-end-start-radius: var(--border-radius-element);\n\t}\n\n\t&:last-of-type {\n\t\tborder-start-end-radius: var(--border-radius-element);\n\t\tborder-end-end-radius: var(--border-radius-element);\n\t}\n}\n\n.radioGroupButton_active {\n\t--radio-group-button--color: var(--color-primary-element-text);\n\t--radio-group-button--background-color: var(--color-primary-element);\n\t--radio-group-button--background-color-hover: var(--color-primary-element-hover);\n}\n\n.radioGroupButton__label {\n\tfont-weight: bold;\n}\n\n.radioGroupButton__icon {\n\t--radio-group-button--icon-size: calc(var(--default-clickable-area) - 4px);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n\twidth: var(--radio-group-button--icon-size);\n\n\t// make sure the icon is a bit smaller to account for border\n\t* {\n\t\t--default-clickable-area: var(--radio-group-button--icon-size);\n\t}\n}\n</style>\n"],"names":["createElementId","useInsideRadioGroup","onMounted","computed"],"mappings":";;;;;;;;;;;;;;AA2BA,UAAM,UAAUA,gBAAAA,gBAAA;AAChB,UAAM,aAAaC,gBAAAA,oBAAA;AACnBC,QAAAA,UAAU,MAAM,WAAY,MAAM,SAAS,IAAI,CAAC;AAEhD,UAAM,YAAYC,IAAAA,SAAS,OAAM,yCAAY,MAAM,gBAAe,MAAM,KAAK;AAK7E,aAAS,WAAW;AACnB,iBAAY,MAAM,SAAS,MAAM,KAAK;AAAA,IACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}