@varlet/ui 3.16.1 → 3.17.0

package/es/segmented-buttons/SegmentedButtons.mjs

@@ -0,0 +1,218 @@
+import { call, callOrReturn, isArray } from "@varlet/shared";
+import { useEventListener } from "@varlet/use";
+import { computed, defineComponent, nextTick, watch } from "vue";
+import VarFormDetails from "../form-details/index.mjs";
+import { useForm } from "../form/provide.mjs";
+import VarSegmentedButton from "../segmented-button/index.mjs";
+import { createNamespace, MaybeVNode, useValidation } from "../utils/components.mjs";
+import {
+  props
+} from "./props.mjs";
+import { useSegmentedButtons } from "./provide.mjs";
+const { name, n, classes } = createNamespace("segmented-buttons");
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, createVNode as _createVNode, withCtx as _withCtx, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode } from "vue";
+const _hoisted_1 = ["role"];
+function __render__(_ctx, _cache) {
+  const _component_maybe_v_node = _resolveComponent("maybe-v-node");
+  const _component_var_segmented_button = _resolveComponent("var-segmented-button");
+  const _component_var_form_details = _resolveComponent("var-form-details");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n("wrap"))
+    },
+    [
+      _createElementVNode("div", {
+        role: _ctx.multiple ? "group" : "radiogroup",
+        class: _normalizeClass([_ctx.n(), _ctx.hasError ? _ctx.n("--error") : null])
+      }, [
+        _ctx.options.length ? (_openBlock(true), _createElementBlock(
+          _Fragment,
+          { key: 0 },
+          _renderList(_ctx.options, (option) => {
+            return _openBlock(), _createBlock(_component_var_segmented_button, {
+              key: _ctx.getOptionValue(option),
+              "checked-value": _ctx.getOptionValue(option),
+              disabled: option.disabled,
+              ripple: option.ripple
+            }, {
+              default: _withCtx(() => [
+                _createVNode(_component_maybe_v_node, {
+                  is: _ctx.renderOptionLabel(option)
+                }, null, 8, ["is"])
+              ]),
+              _: 2
+              /* DYNAMIC */
+            }, 1032, ["checked-value", "disabled", "ripple"]);
+          }),
+          128
+          /* KEYED_FRAGMENT */
+        )) : _createCommentVNode("v-if", true),
+        _renderSlot(_ctx.$slots, "default")
+      ], 10, _hoisted_1),
+      _createVNode(_component_var_form_details, { "error-message": _ctx.errorMessage }, null, 8, ["error-message"])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  components: {
+    VarFormDetails,
+    VarSegmentedButton,
+    MaybeVNode
+  },
+  props,
+  setup(props2) {
+    const { length, buttons, bindButtons } = useSegmentedButtons();
+    const { bindForm } = useForm();
+    const {
+      errorMessage,
+      validateWithTrigger: vt,
+      validate: v,
+      // expose
+      resetValidation
+    } = useValidation();
+    const segmentedButtonsProvider = {
+      multiple: computed(() => props2.multiple),
+      checkmark: computed(() => props2.checkmark),
+      size: computed(() => props2.size),
+      onClick
+    };
+    const segmentedButtonsValidationProvider = {
+      validate,
+      reset,
+      resetValidation
+    };
+    watch(() => props2.modelValue, syncButtons);
+    watch(() => length.value, syncButtons);
+    bindButtons(segmentedButtonsProvider);
+    call(bindForm, segmentedButtonsValidationProvider);
+    useEventListener(() => window, "keydown", handleKeydown);
+    useEventListener(() => window, "keyup", handleKeyup);
+    function getSafeModelValue() {
+      return props2.multiple ? isArray(props2.modelValue) ? props2.modelValue : [] : props2.modelValue;
+    }
+    function isChecked(value) {
+      const modelValue = getSafeModelValue();
+      return isArray(modelValue) ? modelValue.includes(value) : modelValue === value;
+    }
+    function renderOptionLabel(option) {
+      return callOrReturn(option[props2.labelKey], option, isChecked(getOptionValue(option)));
+    }
+    function getOptionValue(option) {
+      return option[props2.valueKey];
+    }
+    function handleKeydown(event) {
+      const focusingButtonIndex = buttons.findIndex(({ isFocusing }) => isFocusing.value);
+      if (focusingButtonIndex === -1) {
+        return;
+      }
+      const hasMoveableButton = buttons.some(
+        ({ disabled }, index) => index === focusingButtonIndex ? false : !disabled.value
+      );
+      if (!hasMoveableButton) {
+        return;
+      }
+      if (["ArrowLeft", "ArrowRight"].includes(event.key)) {
+        event.preventDefault();
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+      }
+      if (event.key === "ArrowLeft") {
+        moveButton(focusingButtonIndex, "prev");
+        return;
+      }
+      if (event.key === "ArrowRight") {
+        moveButton(focusingButtonIndex, "next");
+        return;
+      }
+      if (event.key === "Enter") {
+        buttons[focusingButtonIndex].toggle();
+      }
+    }
+    function handleKeyup(event) {
+      const focusingButtonIndex = buttons.findIndex(({ isFocusing }) => isFocusing.value);
+      if (focusingButtonIndex === -1) {
+        return;
+      }
+      if (event.key !== " ") {
+        return;
+      }
+      event.preventDefault();
+      buttons[focusingButtonIndex].toggle();
+    }
+    function moveButton(fromIndex, method) {
+      while (true) {
+        fromIndex += method === "prev" ? -1 : 1;
+        if (fromIndex < 0) {
+          fromIndex = buttons.length - 1;
+        }
+        if (fromIndex > buttons.length - 1) {
+          fromIndex = 0;
+        }
+        const button = buttons[fromIndex];
+        if (!button.disabled.value) {
+          button.move(!props2.multiple);
+          break;
+        }
+      }
+    }
+    function validateWithTrigger(trigger) {
+      nextTick(() => {
+        vt(props2.validateTrigger, trigger, props2.rules, getSafeModelValue());
+      });
+    }
+    function onClick(changedValue, checked) {
+      validateWithTrigger("onClick");
+      if (!props2.multiple) {
+        if (checked) {
+          return;
+        }
+        change(changedValue);
+        return;
+      }
+      const modelValue = getSafeModelValue();
+      if (checked) {
+        change(modelValue.filter((value) => value !== changedValue));
+        return;
+      }
+      change([...modelValue, changedValue]);
+    }
+    function syncButtons() {
+      const modelValue = getSafeModelValue();
+      buttons.forEach(({ sync }) => sync(modelValue));
+    }
+    function change(changedModelValue) {
+      call(props2["onUpdate:modelValue"], changedModelValue);
+      call(props2.onChange, changedModelValue);
+      validateWithTrigger("onChange");
+    }
+    const hasError = computed(() => !!errorMessage.value);
+    function validate() {
+      return v(props2.rules, getSafeModelValue());
+    }
+    function reset() {
+      call(props2["onUpdate:modelValue"], props2.multiple ? [] : void 0);
+      resetValidation();
+    }
+    return {
+      errorMessage,
+      n,
+      classes,
+      renderOptionLabel,
+      getOptionValue,
+      hasError,
+      validate,
+      reset,
+      resetValidation
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/segmented-buttons/index.mjs

@@ -0,0 +1,12 @@
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as segmentedButtonsProps } from "./props.mjs";
+import SegmentedButtons from "./SegmentedButtons.mjs";
+withInstall(SegmentedButtons);
+withPropsDefaultsSetter(SegmentedButtons, segmentedButtonsProps);
+const _SegmentedButtonsComponent = SegmentedButtons;
+var stdin_default = SegmentedButtons;
+export {
+  _SegmentedButtonsComponent,
+  stdin_default as default,
+  segmentedButtonsProps
+};

package/es/segmented-buttons/props.mjs

@@ -0,0 +1,38 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  modelValue: {
+    type: [String, Number, Boolean, Object, Array],
+    default: void 0
+  },
+  options: {
+    type: Array,
+    default: () => []
+  },
+  labelKey: {
+    type: String,
+    default: "label"
+  },
+  valueKey: {
+    type: String,
+    default: "value"
+  },
+  multiple: Boolean,
+  checkmark: {
+    type: Boolean,
+    default: true
+  },
+  size: {
+    type: String,
+    default: "normal"
+  },
+  validateTrigger: {
+    type: Array,
+    default: () => ["onChange"]
+  },
+  rules: [Array, Function, Object],
+  onChange: defineListenerProp(),
+  "onUpdate:modelValue": defineListenerProp()
+};
+export {
+  props
+};

package/es/segmented-buttons/provide.mjs

@@ -0,0 +1,16 @@
+import { useChildren } from "@varlet/use";
+const SEGMENTED_BUTTONS_BIND_BUTTON_KEY = /* @__PURE__ */ Symbol("SEGMENTED_BUTTONS_BIND_BUTTON_KEY");
+function useSegmentedButtons() {
+  const { bindChildren, childProviders, length } = useChildren(
+    SEGMENTED_BUTTONS_BIND_BUTTON_KEY
+  );
+  return {
+    length,
+    buttons: childProviders,
+    bindButtons: bindChildren
+  };
+}
+export {
+  SEGMENTED_BUTTONS_BIND_BUTTON_KEY,
+  useSegmentedButtons
+};

package/es/segmented-buttons/segmentedButtons.css

@@ -0,0 +1 @@
+:root { --segmented-buttons-border-color: var(--color-outline); --segmented-buttons-border-radius: 4px; --segmented-buttons-border-width: 1px; --segmented-buttons-error-border-color: var(--color-danger); --segmented-buttons-error-color: var(--color-danger); --segmented-buttons-error-checked-background: hsla(var(--hsl-danger), 0.12);}.var-segmented-buttons { display: inline-flex; max-width: 100%; overflow: hidden; border: var(--segmented-buttons-border-width) solid var(--segmented-buttons-border-color); border-radius: var(--segmented-buttons-border-radius);}.var-segmented-buttons__wrap { display: inline-flex; flex-direction: column; align-items: flex-start;}.var-segmented-buttons .var-segmented-button:not(:last-child) { border-right: var(--segmented-buttons-border-width) solid var(--segmented-buttons-border-color);}.var-segmented-buttons--error { border-color: var(--segmented-buttons-error-border-color);}.var-segmented-buttons--error .var-segmented-button { color: var(--segmented-buttons-error-color);}.var-segmented-buttons--error .var-segmented-button:not(:last-child) { border-right-color: var(--segmented-buttons-error-border-color);}.var-segmented-buttons--error .var-segmented-button--checked { background-color: var(--segmented-buttons-error-checked-background); color: var(--segmented-buttons-error-color);}

package/es/segmented-buttons/style/index.mjs

@@ -0,0 +1,7 @@
+import '../../styles/common.css'
+import '../../form-details/formDetails.css'
+import '../../ripple/ripple.css'
+import '../../hover-overlay/hoverOverlay.css'
+import '../../segmented-button/segmentedButton.css'
+import '../segmentedButtons.css'
+import '../SegmentedButtonsSfc.css'

package/es/style.mjs

@@ -70,6 +70,8 @@ import './rate/style/index.mjs'
 import './result/style/index.mjs'
 import './ripple/style/index.mjs'
 import './row/style/index.mjs'
+import './segmented-button/style/index.mjs'
+import './segmented-buttons/style/index.mjs'
 import './select/style/index.mjs'
 import './signature/style/index.mjs'
 import './skeleton/style/index.mjs'

package/es/themes/dark/index.mjs

@@ -65,6 +65,8 @@ import radio from "./radio.mjs";
 import rate from "./rate.mjs";
 import result from "./result.mjs";
 import ripple from "./ripple.mjs";
+import segmentedButton from "./segmentedButton.mjs";
+import segmentedButtons from "./segmentedButtons.mjs";
 import select from "./select.mjs";
 import signature from "./signature.mjs";
 import skeleton from "./skeleton.mjs";
@@ -81,7 +83,7 @@ import timePicker from "./timePicker.mjs";
 import tooltip from "./tooltip.mjs";
 import uploader from "./uploader.mjs";
 import watermark from "./watermark.mjs";
-var stdin_default = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+var stdin_default = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
   "--color-scheme": "dark",
   "--font-size-xs": "10px",
   "--font-size-sm": "12px",
@@ -160,7 +162,7 @@ var stdin_default = __spreadValues(__spreadValues(__spreadValues(__spreadValues(
   "--shadow-key-umbra-opacity": "rgba(0, 0, 0, 0.2)",
   "--shadow-key-penumbra-opacity": "rgba(0, 0, 0, 0.14)",
   "--shadow-key-ambient-opacity": "rgba(0, 0, 0, 0.12)"
-}, button), alert), cell), card), timePicker), datePicker), skeleton), tabs), tab), popup), dialog), actionSheet), chip), badge), uploader), collapse), pullRefresh), switchThemes), step), pagination), table), fieldDecorator), radio), checkbox), divider), picker), appBar), bottomNavigationItem), menu), result), breadcrumb), avatar), link), progress), option), watermark), menuSelect), menuOption), avatarGroup), backTop), bottomNavigation), countdown), counter), fab), floatingPanel), formDetails), hoverOverlay), icon), imagePreview), indexBar), input), otpInput), list), loading), loadingBar), overlay), paper), rate), ripple), slider), snackbar), space), swipe), tooltip), select), code), signature);
+}, button), alert), cell), card), timePicker), datePicker), skeleton), tabs), tab), popup), dialog), actionSheet), chip), badge), uploader), collapse), pullRefresh), switchThemes), step), pagination), table), fieldDecorator), radio), checkbox), segmentedButton), segmentedButtons), divider), picker), appBar), bottomNavigationItem), menu), result), breadcrumb), avatar), link), progress), option), watermark), menuSelect), menuOption), avatarGroup), backTop), bottomNavigation), countdown), counter), fab), floatingPanel), formDetails), hoverOverlay), icon), imagePreview), indexBar), input), otpInput), list), loading), loadingBar), overlay), paper), rate), ripple), slider), snackbar), space), swipe), tooltip), select), code), signature);
 export {
   stdin_default as default
 };

package/es/themes/dark/segmentedButton.mjs

@@ -0,0 +1,22 @@
+var stdin_default = {
+  "--segmented-button-text-color": "var(--color-on-surface-variant)",
+  "--segmented-button-checked-background": "hsla(var(--hsl-primary), 0.2)",
+  "--segmented-button-checked-text-color": "var(--color-primary)",
+  "--segmented-button-disabled-background": "var(--color-disabled)",
+  "--segmented-button-disabled-color": "var(--color-text-disabled)",
+  "--segmented-button-mini-padding": "0 8px",
+  "--segmented-button-small-padding": "0 12px",
+  "--segmented-button-normal-padding": "0 16px",
+  "--segmented-button-large-padding": "0 22px",
+  "--segmented-button-mini-height": "20px",
+  "--segmented-button-small-height": "28px",
+  "--segmented-button-normal-height": "36px",
+  "--segmented-button-large-height": "44px",
+  "--segmented-button-mini-font-size": "var(--font-size-xs)",
+  "--segmented-button-small-font-size": "var(--font-size-sm)",
+  "--segmented-button-normal-font-size": "var(--font-size-md)",
+  "--segmented-button-large-font-size": "var(--font-size-lg)"
+};
+export {
+  stdin_default as default
+};

package/es/themes/dark/segmentedButtons.mjs

@@ -0,0 +1,11 @@
+var stdin_default = {
+  "--segmented-buttons-border-color": "var(--color-outline)",
+  "--segmented-buttons-border-radius": "4px",
+  "--segmented-buttons-border-width": "1px",
+  "--segmented-buttons-error-border-color": "var(--color-danger)",
+  "--segmented-buttons-error-color": "var(--color-danger)",
+  "--segmented-buttons-error-checked-background": "hsla(var(--hsl-danger), 0.12)"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-dark/index.mjs

@@ -65,6 +65,8 @@ import radio from "./radio.mjs";
 import rate from "./rate.mjs";
 import result from "./result.mjs";
 import ripple from "./ripple.mjs";
+import segmentedButton from "./segmentedButton.mjs";
+import segmentedButtons from "./segmentedButtons.mjs";
 import select from "./select.mjs";
 import signature from "./signature.mjs";
 import skeleton from "./skeleton.mjs";
@@ -81,7 +83,7 @@ import timePicker from "./timePicker.mjs";
 import tooltip from "./tooltip.mjs";
 import uploader from "./uploader.mjs";
 import watermark from "./watermark.mjs";
-var stdin_default = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+var stdin_default = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
   "--color-scheme": "dark",
   "--font-size-xs": "10px",
   "--font-size-sm": "12px",
@@ -160,7 +162,7 @@ var stdin_default = __spreadValues(__spreadValues(__spreadValues(__spreadValues(
   "--shadow-key-umbra-opacity": "rgba(0, 0, 0, 0.2)",
   "--shadow-key-penumbra-opacity": "rgba(0, 0, 0, 0.14)",
   "--shadow-key-ambient-opacity": "rgba(0, 0, 0, 0.12)"
-}, button), alert), hoverOverlay), menu), menuSelect), menuOption), fab), breadcrumb), link), cell), paper), avatar), fieldDecorator), checkbox), radio), card), chip), badge), tooltip), progress), tabs), tab), step), divider), table), pagination), watermark), collapse), result), appBar), bottomNavigation), bottomNavigationItem), snackbar), actionSheet), dialog), pullRefresh), popup), picker), floatingPanel), backTop), select), option), counter), switchThemes), slider), uploader), timePicker), datePicker), rate), skeleton), avatarGroup), countdown), formDetails), icon), imagePreview), indexBar), input), otpInput), list), loading), loadingBar), overlay), ripple), space), swipe), code), signature);
+}, button), alert), hoverOverlay), menu), menuSelect), menuOption), fab), breadcrumb), link), cell), paper), avatar), fieldDecorator), checkbox), radio), segmentedButton), segmentedButtons), card), chip), badge), tooltip), progress), tabs), tab), step), divider), table), pagination), watermark), collapse), result), appBar), bottomNavigation), bottomNavigationItem), snackbar), actionSheet), dialog), pullRefresh), popup), picker), floatingPanel), backTop), select), option), counter), switchThemes), slider), uploader), timePicker), datePicker), rate), skeleton), avatarGroup), countdown), formDetails), icon), imagePreview), indexBar), input), otpInput), list), loading), loadingBar), overlay), ripple), space), swipe), code), signature);
 export {
   stdin_default as default
 };

package/es/themes/md3-dark/segmentedButton.mjs

@@ -0,0 +1,22 @@
+var stdin_default = {
+  "--segmented-button-text-color": "var(--color-on-surface-variant)",
+  "--segmented-button-checked-background": "var(--color-info-container)",
+  "--segmented-button-checked-text-color": "var(--color-on-info-container)",
+  "--segmented-button-disabled-background": "var(--color-info-container)",
+  "--segmented-button-disabled-color": "var(--color-text-disabled)",
+  "--segmented-button-mini-padding": "0 8px",
+  "--segmented-button-small-padding": "0 12px",
+  "--segmented-button-normal-padding": "0 16px",
+  "--segmented-button-large-padding": "0 22px",
+  "--segmented-button-mini-height": "20px",
+  "--segmented-button-small-height": "28px",
+  "--segmented-button-normal-height": "36px",
+  "--segmented-button-large-height": "44px",
+  "--segmented-button-mini-font-size": "var(--font-size-xs)",
+  "--segmented-button-small-font-size": "var(--font-size-sm)",
+  "--segmented-button-normal-font-size": "var(--font-size-md)",
+  "--segmented-button-large-font-size": "var(--font-size-lg)"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-dark/segmentedButtons.mjs

@@ -0,0 +1,11 @@
+var stdin_default = {
+  "--segmented-buttons-border-color": "#938F99",
+  "--segmented-buttons-border-radius": "100px",
+  "--segmented-buttons-border-width": "1px",
+  "--segmented-buttons-error-border-color": "var(--color-danger)",
+  "--segmented-buttons-error-color": "var(--color-danger)",
+  "--segmented-buttons-error-checked-background": "hsla(var(--hsl-danger), 0.12)"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/index.mjs

@@ -65,6 +65,8 @@ import radio from "./radio.mjs";
 import rate from "./rate.mjs";
 import result from "./result.mjs";
 import ripple from "./ripple.mjs";
+import segmentedButton from "./segmentedButton.mjs";
+import segmentedButtons from "./segmentedButtons.mjs";
 import select from "./select.mjs";
 import signature from "./signature.mjs";
 import skeleton from "./skeleton.mjs";
@@ -81,7 +83,7 @@ import timePicker from "./timePicker.mjs";
 import tooltip from "./tooltip.mjs";
 import uploader from "./uploader.mjs";
 import watermark from "./watermark.mjs";
-var stdin_default = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+var stdin_default = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
   "--color-scheme": "light",
   "--font-size-xs": "10px",
   "--font-size-sm": "12px",
@@ -160,7 +162,7 @@ var stdin_default = __spreadValues(__spreadValues(__spreadValues(__spreadValues(
   "--shadow-key-umbra-opacity": "rgba(0, 0, 0, 0.2)",
   "--shadow-key-penumbra-opacity": "rgba(0, 0, 0, 0.14)",
   "--shadow-key-ambient-opacity": "rgba(0, 0, 0, 0.12)"
-}, button), alert), hoverOverlay), menu), menuSelect), menuOption), fab), breadcrumb), link), cell), paper), avatar), fieldDecorator), checkbox), radio), card), chip), tooltip), tabs), tab), table), collapse), result), bottomNavigation), bottomNavigationItem), snackbar), actionSheet), dialog), pullRefresh), popup), picker), floatingPanel), backTop), select), option), slider), uploader), timePicker), datePicker), switchThemes), rate), avatarGroup), badge), countdown), counter), divider), formDetails), icon), imagePreview), indexBar), input), otpInput), list), loading), loadingBar), overlay), pagination), progress), ripple), skeleton), space), step), swipe), watermark), appBar), code), signature);
+}, button), alert), hoverOverlay), menu), menuSelect), menuOption), fab), breadcrumb), link), cell), paper), avatar), fieldDecorator), checkbox), radio), segmentedButton), segmentedButtons), card), chip), tooltip), tabs), tab), table), collapse), result), bottomNavigation), bottomNavigationItem), snackbar), actionSheet), dialog), pullRefresh), popup), picker), floatingPanel), backTop), select), option), slider), uploader), timePicker), datePicker), switchThemes), rate), avatarGroup), badge), countdown), counter), divider), formDetails), icon), imagePreview), indexBar), input), otpInput), list), loading), loadingBar), overlay), pagination), progress), ripple), skeleton), space), step), swipe), watermark), appBar), code), signature);
 export {
   stdin_default as default
 };

package/es/themes/md3-light/segmentedButton.mjs

@@ -0,0 +1,22 @@
+var stdin_default = {
+  "--segmented-button-text-color": "var(--color-on-surface-variant)",
+  "--segmented-button-checked-background": "var(--color-info-container)",
+  "--segmented-button-checked-text-color": "var(--color-on-info-container)",
+  "--segmented-button-disabled-background": "var(--color-info-container)",
+  "--segmented-button-disabled-color": "var(--color-text-disabled)",
+  "--segmented-button-mini-padding": "0 8px",
+  "--segmented-button-small-padding": "0 12px",
+  "--segmented-button-normal-padding": "0 16px",
+  "--segmented-button-large-padding": "0 22px",
+  "--segmented-button-mini-height": "20px",
+  "--segmented-button-small-height": "28px",
+  "--segmented-button-normal-height": "36px",
+  "--segmented-button-large-height": "44px",
+  "--segmented-button-mini-font-size": "var(--font-size-xs)",
+  "--segmented-button-small-font-size": "var(--font-size-sm)",
+  "--segmented-button-normal-font-size": "var(--font-size-md)",
+  "--segmented-button-large-font-size": "var(--font-size-lg)"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/segmentedButtons.mjs

@@ -0,0 +1,11 @@
+var stdin_default = {
+  "--segmented-buttons-border-color": "#79747E",
+  "--segmented-buttons-border-radius": "100px",
+  "--segmented-buttons-border-width": "1px",
+  "--segmented-buttons-error-border-color": "var(--color-danger)",
+  "--segmented-buttons-error-color": "var(--color-danger)",
+  "--segmented-buttons-error-checked-background": "hsla(var(--hsl-danger), 0.12)"
+};
+export {
+  stdin_default as default
+};

package/es/utils/components.mjs

@@ -208,7 +208,7 @@ function formatElevation(elevation, defaultLevel) {
 const MaybeVNode = defineComponent({
   props: {
     is: {
-      type: [String, Object]
+      type: [String, Number, Boolean, Object, Array]
     },
     tag: {
       type: String,