vueless 0.0.151 → 0.0.152

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.151",
+  "version": "0.0.152",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -28,17 +28,17 @@
     "cva": "^1.0.0-beta.1",
     "lodash-es": "^4.17.21",
     "tailwind-merge": "^2.3.0",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^3.4.4",
     "tippy.js": "^6.3.7",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@material-symbols/svg-500": "^0.17.4",
     "@release-it/bumper": "^6.0.1",
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vueless/plugin-vite": "^0.0.27",
-    "@vueless/storybook": "^0.0.27",
+    "@vueless/plugin-vite": "^0.0.28",
+    "@vueless/storybook": "^0.0.30",
     "@vueless/web-types": "^0.0.8",
     "autoprefixer": "^10.4.19",
     "cssnano": "^6.1.2",
@@ -52,10 +52,10 @@
     "prettier": "^3.2.5",
     "prettier-eslint": "^16.3.0",
     "release-it": "^17.2.1",
-    "vite": "^5.2.10",
+    "vite": "^5.2.13",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-eslint": "^1.8.1",
-    "vue": "^3.4.25",
+    "vue": "^3.4.27",
     "vue-router": "^4.3.2"
   },
   "resolutions": {
@@ -67,6 +67,5 @@
   },
   "bugs": {
     "url": "https://github.com/vuelessjs/vueless/issues"
-  },
-  "web-types": "./web-types.json"
+  }
 }

package/preset.tailwind/index.js

@@ -25,7 +25,7 @@ export function vuelessPreset() {
   const prodSafelist = getSafelist();
   const devSafelist = [
     {
-      pattern: /(border|bg|text|ring)-(.*)-((50|[1-9]00|950)?)$/,
+      pattern: /^!?(border|bg|text|ring)-(.*)-((50|[1-9]00|950)?)$/,
       variants: ["hover", "focus", "focus-within", "active", "disabled"],
     },
   ];

package/ui.button/configs/default.config.js

@@ -3,7 +3,7 @@ export default /*tw*/ {
     base: `
       flex items-center justify-center
       text-base font-medium outline-none
-      border border-solid rounded-lg
+      border border-solid
       transition duration-100 ease-in-out
       focus:ring-opacity-20 focus:ring-4 focus:ring-{color}-700
       focus-within:ring-opacity-20 focus-within:ring-4 focus-within:ring-{color}-700
@@ -47,6 +47,7 @@ export default /*tw*/ {
         true: "pointer-events-none gap-0",
       },
       pill: {
+        false: "rounded-lg",
         true: "rounded-full",
       },
       block: {

package/ui.button-toggle/composables/attrs.composable.js

@@ -23,6 +23,8 @@ export function useAttrs(props) {
   const itemsClasses = computed(() =>
     cvaItems({
       size: props.size,
+      variant: props.variant,
+      multiple: props.multiple,
       separated: props.separated,
     }),
   );

package/ui.button-toggle/configs/default.config.js

@@ -1,12 +1,4 @@
 export default /*tw*/ {
-  label: {
-    base: "flex flex-wrap",
-    variants: {
-      block: {
-        true: "w-full",
-      },
-    },
-  },
   items: {
     base: "flex flex-wrap",
     variants: {
@@ -20,23 +12,33 @@ export default /*tw*/ {
       },
       separated: {
         false: `
-          gap-px flex-nowrap
+          flex-nowrap -space-x-px gap-0
           [&>*:first-child]:rounded-l-lg [&>*:first-child]:rounded-r-none
           [&>*:last-child]:rounded-r-lg [&>*:last-child]:rounded-l-none
         `,
       },
     },
+    compoundVariants: [
+      { separated: false, variant: "thirdary", class: "space-x-0" },
+      { separated: false, multiple: true, class: "space-x-px" },
+    ],
+  },
+  label: {
+    base: "flex flex-wrap",
+    variants: {
+      block: {
+        true: "w-full",
+      },
+    },
   },
   item: "",
   defaultVariants: {
-    color: "brand",
     variant: "primary",
     labelAlign: "top",
     size: "md",
     block: false,
     pill: false,
     square: false,
-    filled: false,
     disabled: false,
     multiple: false,
     separated: false,

package/ui.button-toggle/index.stories.js

@@ -1,14 +1,23 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { ref } from "vue";
+import { getArgTypes } from "../service.storybook";
 
 import UToggle from "../ui.button-toggle";
 import UIcon from "../ui.image-icon";
 import UToggleItem from "../ui.button-toggle-item";
 import URow from "../ui.container-row";
 
+const OPTIONS = [
+  { value: "11", label: "label 1" },
+  { value: "12", label: "label 2" },
+  { value: "13", label: "label 3" },
+  { value: "14", label: "label 4" },
+];
+
 /**
  * The `UToggle` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.button-toggle)
  */
 export default {
+  components: { UIcon, UToggleItem },
   title: "Buttons & Links / Toggle",
   component: UToggle,
   argTypes: {
@@ -25,26 +34,18 @@ const DefaultTemplate = (args) => ({
     };
   },
   setup() {
-    const groupOptions = [
-      { value: "11", label: "label 1" },
-      { value: "12", label: "label 2" },
-      { value: "13", label: "label 3" },
-      { value: "14", label: "label 4" },
-    ];
-
-    return { args, groupOptions };
+    return { args, OPTIONS };
   },
   template: `
     <UToggle
       v-model="value"
       v-bind="args"
-      :options="groupOptions"
-      name="defaultTemplate"
+      :options="OPTIONS"
     />
   `,
 });
 
-const checkboxTemplate = (args) => ({
+const multipleTemplate = (args) => ({
   components: { UToggle },
   data() {
     return {
@@ -52,39 +53,27 @@ const checkboxTemplate = (args) => ({
     };
   },
   setup() {
-    const groupOptions = [
-      { value: "11", label: "label 1" },
-      { value: "12", label: "label 2" },
-      { value: "13", label: "label 3" },
-      { value: "14", label: "label 4" },
-    ];
-
-    return { args, groupOptions };
+    return { args, OPTIONS };
   },
   template: `
     <UToggle
       v-model="value"
       v-bind="args"
       multiple
-      :options="groupOptions"
-      name="defaultTemplate"
+      :options="OPTIONS"
+      name="multipleTemplate"
     />
   `,
 });
 
 const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { UToggle, URow },
-  data() {
-    return {
-      value: "",
-    };
-  },
   setup() {
-    const slots = getSlotNames(UToggle.name);
+    const value = ref("");
 
     return {
       args,
-      slots,
+      value,
       sizes: argTypes.size.options,
     };
   },
@@ -92,6 +81,9 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
     <URow>
       <UToggle
         v-for="(size, index) in sizes"
+        :key="index"
+        name="sizeTemplate"
+        v-model="value"
         v-bind="args"
         :size="size"
         :label="size"
@@ -99,14 +91,37 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
           { value: size + 1, label: size },
           { value: size + 2, label: size },
         ]"
-        v-model="value"
+      />
+    </URow>
+  `,
+});
+
+const VariantsTemplate = (args, { argTypes } = {}) => ({
+  components: { UToggle, URow },
+  setup() {
+    const value = ref("");
+
+    return {
+      args,
+      value,
+      variants: argTypes.variant.options,
+    };
+  },
+  template: `
+    <URow>
+      <UToggle
+        v-for="(variant, index) in variants"
         :key="index"
         name="sizeTemplate"
-      >
-        <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-          <template v-if="args[slot]">{{ args[slot] }}</template>
-        </template>
-      </UToggle>
+        v-model="value"
+        v-bind="args"
+        :variant="variant"
+        :label="variant"
+        :options="[
+          { value: variant + 1, label: variant },
+          { value: variant + 2, label: variant },
+        ]"
+      />
     </URow>
   `,
 });
@@ -114,9 +129,11 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
 const SlotTemplate = (args) => ({
   components: { UToggle, UIcon, UToggleItem },
   setup() {
+    const selected = ref("");
+
     return {
       args,
-      selected: "55",
+      selected,
     };
   },
   template: `
@@ -128,31 +145,79 @@ const SlotTemplate = (args) => ({
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {
-  name: "first name",
+  name: "Default",
 };
 
-export const multiple = checkboxTemplate.bind({});
-multiple.args = {
-  name: "second name",
+export const label = DefaultTemplate.bind({});
+label.args = {
+  label: "Label",
+  description: "description",
 };
 
 export const sizes = SizesTemplate.bind({});
 sizes.args = {
-  name: "four name",
+  name: "sizes",
+};
+
+export const variants = VariantsTemplate.bind({});
+variants.args = {
+  name: "variants",
+};
+
+export const multiple = multipleTemplate.bind({});
+multiple.args = {
+  name: "multiple",
 };
 
 export const block = DefaultTemplate.bind({});
 block.args = {
-  name: "five name",
+  name: "block",
   block: true,
 };
 
+export const separated = DefaultTemplate.bind({});
+separated.args = {
+  name: "separated",
+  separated: true,
+};
+
+export const pill = DefaultTemplate.bind({});
+pill.args = {
+  name: "pill",
+  pill: true,
+  separated: true,
+};
+
+export const square = SlotTemplate.bind({});
+square.args = {
+  name: "square",
+  variant: "secondary",
+  square: true,
+  slotTemplate: `
+    <template #default>
+      <UToggleItem value="1">
+        <UIcon name="star" />
+      </UToggleItem>
+
+      <UToggleItem value="2" >
+        <UIcon name="add" />
+      </UToggleItem>
+
+      <UToggleItem value="3">
+        <UIcon name="timer" />
+      </UToggleItem>
+    </template>
+  `,
+};
+
 export const slotDefault = SlotTemplate.bind({});
 slotDefault.args = {
-  name: "third name",
+  name: "slotDefault",
   slotTemplate: `
     <template #default>
-      <UToggleItem label="label" />
+      <UToggleItem label="label 1" value="1" />
+      <UToggleItem label="label 2" value="2" />
+      <UToggleItem label="label 3" value="3" />
     </template>
   `,
 };

package/ui.button-toggle/index.vue

@@ -17,6 +17,7 @@
           :name="name"
           :model-value="item.value"
           :value="item.value"
+          :disabled="disabled"
           :label="item.label"
           :data-cy="`${dataCy}-item-${index}`"
           v-bind="itemAttrs"
@@ -49,15 +50,6 @@ const props = defineProps({
     default: () => (!this.multiple ? "" : []),
   },
 
-  /**
-   * Toggle variant.
-   * @values primary, secondary, thirdary
-   */
-  variant: {
-    type: String,
-    default: UIService.get(defaultConfig, UToggle).default.variant,
-  },
-
   /**
    * Toggle item options.
    */
@@ -67,11 +59,12 @@ const props = defineProps({
   },
 
   /**
-   * Toggle name.
+   * Toggle variant.
+   * @values primary, secondary, thirdary
    */
-  name: {
+  variant: {
     type: String,
-    required: true,
+    default: UIService.get(defaultConfig, UToggle).default.variant,
   },
 
   /**
@@ -83,6 +76,15 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UToggle).default.size,
   },
 
+  /**
+   * Label placement.
+   * @values top, topInside, topWithDesc, bottom, left, right
+   */
+  labelAlign: {
+    type: String,
+    default: UIService.get(defaultConfig, UToggle).default.labelAlign,
+  },
+
   /**
    * Toggle label.
    */
@@ -100,20 +102,11 @@ const props = defineProps({
   },
 
   /**
-   * Label placement.
-   * @values top, topInside, topWithDesc, bottom, left, right
+   * Toggle name.
    */
-  labelAlign: {
+  name: {
     type: String,
-    default: UIService.get(defaultConfig, UToggle).default.labelAlign,
-  },
-
-  /**
-   * Make the toggle fill the width with its container.
-   */
-  block: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UToggle).default.block,
+    required: true,
   },
 
   /**
@@ -124,15 +117,6 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UToggle).default.multiple,
   },
 
-  /**
-   * Button color.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
-   */
-  color: {
-    type: String,
-    default: UIService.get(defaultConfig, UToggle).default.color,
-  },
-
   /**
    * Separate toggle items.
    */
@@ -150,11 +134,11 @@ const props = defineProps({
   },
 
   /**
-   * Fill the background for thirdary variant.
+   * Make the toggle fill the width with its container.
    */
-  filled: {
+  block: {
     type: Boolean,
-    default: UIService.get(defaultConfig, UToggle).default.filled,
+    default: UIService.get(defaultConfig, UToggle).default.block,
   },
 
   /**
@@ -224,23 +208,24 @@ function updateSelectedValue(value, checked) {
   }
 
   if (checked) {
-    selectedValue.value.push(value);
+    const items = selectedValue.value || [];
+
+    items.push(value);
+    selectedValue.value = items;
   } else {
     selectedValue.value = selectedValue.value.filter((item) => String(item) !== String(value));
   }
 }
 
 provide("toggleType", readonly(type));
+provide("togglePill", () => props.pill);
 provide("toggleName", () => props.name);
 provide("toggleSize", () => props.size);
 provide("toggleBlock", () => props.block);
+provide("toggleSquare", () => props.square);
 provide("toggleVariant", () => props.variant);
-provide("toggleColor", () => props.color);
-provide("toggleFilled", () => props.filled);
 provide("toggleDisabled", () => props.disabled);
 provide("toggleSeparated", () => props.separated);
-provide("togglePill", () => props.pill);
-provide("toggleSquare", () => props.square);
 
 provide("toggleSelectedValue", {
   selectedValue: readonly(selectedValue),

package/ui.button-toggle-item/composables/attrs.composable.js

@@ -4,8 +4,8 @@ import useUI from "../../composable.ui";
 
 import defaultConfig from "../configs/default.config";
 
-export function useAttrs(props, { selectedValue, separated, variant, color }) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+export function useAttrs(props, { selectedValue, separated, variant }) {
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
   const { button, selected } = config.value;
 
   const cvaButton = cva({
@@ -14,11 +14,12 @@ export function useAttrs(props, { selectedValue, separated, variant, color }) {
     compoundVariants: button.compoundVariants,
   });
 
-  const buttonClasses = computed(() =>
-    cvaButton({
+  const buttonClasses = computed(() => {
+    return cvaButton({
+      variant: toValue(variant),
       separated: toValue(separated),
-    }),
-  );
+    });
+  });
 
   const cvaSelected = cva({
     base: selected.base,
@@ -27,22 +28,18 @@ export function useAttrs(props, { selectedValue, separated, variant, color }) {
   });
 
   const selectedClasses = computed(() =>
-    setColor(
-      cvaSelected({
-        color: toValue(color),
-        variant: toValue(variant),
-      }),
-      toValue(color),
-    ),
+    cvaSelected({
+      variant: toValue(variant),
+    }),
   );
 
-  const buttonAttrsRaw = getAttrs("button", { isComponent: true, classes: buttonClasses });
   const inputAttrs = getAttrs("input");
+  const buttonAttrsRaw = getAttrs("button", { isComponent: true, classes: buttonClasses });
 
   const buttonAttrs = computed(() => {
-    const isSelected = Array.isArray(selectedValue.value)
-      ? selectedValue.value?.includes(props.value)
-      : selectedValue.value === props.value;
+    const isSelected = Array.isArray(selectedValue?.value)
+      ? selectedValue?.value?.includes(props.value)
+      : selectedValue?.value === props.value;
 
     return {
       ...buttonAttrsRaw.value,

package/ui.button-toggle-item/configs/default.config.js

@@ -1,40 +1,39 @@
 export default /*tw*/ {
   button: {
-    base: "",
+    base: `
+      border-gray-300 font-normal
+      hover:text-brand-600 hover:border-brand-600 hover:relative hover:z-10
+      focus:text-brand-600 focus:border-brand-600 focus:relative focus:z-10 focus:ring-brand-600 focus-within:ring-brand-600
+      active:text-brand-700 active:border-brand-700 active:relative active:z-10
+      disabled:border-brand-300 disabled:z-0
+    `,
     variants: {
       separated: {
-        false: "!rounded-none",
+        false: "rounded-none",
+      },
+      variant: {
+        thirdary: "border-none hover:bg-brand-600 hover:bg-opacity-5",
       },
     },
   },
   input: "p-0 m-0 size-0 invisible absolute",
   selected: {
-    base: "",
+    base: "relative disabled:z-10",
     variants: {
       variant: {
-        primary: "!bg-{color}-800 !border-{color}-800",
-        secondary: "!text-{color}-800 !border-{color}-800 bg-{color}-800 bg-opacity-10",
-        thirdary: "!text-{color}-800 !bg-{color}-800 !bg-opacity-10",
+        primary: "!text-white bg-brand-600 border-brand-600 disabled:border-brand-600",
+        secondary: "text-brand-600 border-brand-600 disabled:border-brand-600 bg-brand-600 bg-opacity-10",
+        thirdary: "text-brand-600 bg-brand-600 bg-opacity-10",
       },
     },
-    compoundVariants: [
-      { color: "grayscale", variant: "primary", class: "!bg-brand-700 !border-brand-700" },
-      { color: "grayscale", variant: "secondary", class: "!text-brand-700 !border-brand-700 !bg-brand-50 !bg-opacity-100" },
-      { color: "grayscale", variant: "thirdary", class: "!text-brand-700 !bg-brand-50" },
-      { color: "white", variant: "primary", class: "!text-brand-700 !border-brand-600 !bg-brand-50" },
-      { color: "white", variant: "secondary", class: "!text-brand-700 !border-brand-600 !bg-brand-50" },
-      { color: "white", variant: "thirdary", class: "!text-brand-700 !bg-brand-50" },
-    ],
   },
   defaultVariants: {
-    color: "brand",
     variant: "primary",
     type: "radio",
     size: "md",
     block: false,
     pill: false,
     square: false,
-    filled: false,
     disabled: false,
   },
 };

package/ui.button-toggle-item/index.stories.js

@@ -12,6 +12,7 @@ export default {
   args: {
     value: "1",
     label: "Label",
+    modelValue: "",
   },
   argTypes: {
     ...getArgTypes(UToggleItem.name),
@@ -41,7 +42,7 @@ const SlotTemplate = (args) => ({
     return { args };
   },
   template: `
-    <UToggleItem v-bind="args" label="Label" >
+    <UToggleItem v-bind="args" >
       ${args.slotTemplate}
     </UToggleItem>
   `,

package/ui.button-toggle-item/index.vue

@@ -1,16 +1,15 @@
 <template>
   <UButton
-    tag="label"
     tabindex="0"
     :for="id"
+    color="grayscale"
+    variant="secondary"
     :label="label"
     :size="toValue(size)"
-    :block="toValue(block)"
-    :variant="toValue(variant)"
-    :color="toValue(color)"
     :pill="toValue(pill)"
-    :filled="toValue(filled)"
+    :block="toValue(block)"
     :square="toValue(square)"
+    :disabled="toValue(disabled)"
     v-bind="buttonAttrs"
     @click.stop="onClickSetValue"
   >
@@ -118,21 +117,19 @@ const emit = defineEmits(["update:modelValue"]);
 const name = inject("toggleName", () => "toggle");
 const type = inject("toggleType", UIService.get(defaultConfig, UToggleItem).default.type);
 const size = inject("toggleSize", UIService.get(defaultConfig, UToggleItem).default.size);
-const block = inject("toggleBlock", UIService.get(defaultConfig, UToggleItem).default.block);
-const variant = inject("toggleVariant", UIService.get(defaultConfig, UToggleItem).default.variant);
-const color = inject("toggleColor", UIService.get(defaultConfig, UToggleItem).default.color);
-const filled = inject("toggleFilled", UIService.get(defaultConfig, UToggleItem).default.filled);
 const pill = inject("togglePill", UIService.get(defaultConfig, UToggleItem).default.pill);
+const block = inject("toggleBlock", UIService.get(defaultConfig, UToggleItem).default.block);
 const square = inject("toggleSquare", UIService.get(defaultConfig, UToggleItem).default.square);
-const separated = inject("toggleSeparated", false);
+const variant = inject("toggleVariant", UIService.get(defaultConfig, UToggleItem).default.variant);
+const separated = inject("toggleSeparated", () => true);
 // eslint-disable-next-line vue/no-dupe-keys, prettier/prettier
-const disabled = inject("toggleDisabled", UIService.get(defaultConfig, UToggleItem).default.disabled);
+const disabled = inject("toggleDisabled", props.disabled || UIService.get(defaultConfig, UToggleItem).default.disabled);
 
 const { selectedValue, updateSelectedValue } = inject("toggleSelectedValue", {});
 
 const selectedItem = ref("");
 
-const { buttonAttrs, inputAttrs } = useAttrs(props, { selectedValue, separated, variant, color });
+const { buttonAttrs, inputAttrs } = useAttrs(props, { selectedValue, separated, variant });
 
 onMounted(() => {
   if (type.value === TYPE_RADIO) {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.151",
+  "version": "0.0.152",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -7002,15 +7002,6 @@
               },
               "default": "() => (!this.multiple ? \"\" : [])"
             },
-            {
-              "name": "variant",
-              "description": "Toggle variant.",
-              "value": {
-                "kind": "expression",
-                "type": "'primary' | 'secondary' | 'thirdary'"
-              },
-              "default": "primary"
-            },
             {
               "name": "options",
               "description": "Toggle item options.",
@@ -7021,13 +7012,13 @@
               "default": "[]"
             },
             {
-              "name": "name",
-              "required": true,
-              "description": "Toggle name.",
+              "name": "variant",
+              "description": "Toggle variant.",
               "value": {
                 "kind": "expression",
-                "type": "string"
-              }
+                "type": "'primary' | 'secondary' | 'thirdary'"
+              },
+              "default": "primary"
             },
             {
               "name": "size",
@@ -7038,6 +7029,15 @@
               },
               "default": "md"
             },
+            {
+              "name": "labelAlign",
+              "description": "Label placement.",
+              "value": {
+                "kind": "expression",
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
+              },
+              "default": "top"
+            },
             {
               "name": "label",
               "description": "Toggle label.",
@@ -7057,22 +7057,13 @@
               "default": "\"\""
             },
             {
-              "name": "labelAlign",
-              "description": "Label placement.",
-              "value": {
-                "kind": "expression",
-                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
-              },
-              "default": "top"
-            },
-            {
-              "name": "block",
-              "description": "Make the toggle fill the width with its container.",
+              "name": "name",
+              "required": true,
+              "description": "Toggle name.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
+                "type": "string"
+              }
             },
             {
               "name": "multiple",
@@ -7083,15 +7074,6 @@
               },
               "default": "false"
             },
-            {
-              "name": "color",
-              "description": "Button color.",
-              "value": {
-                "kind": "expression",
-                "type": "'brand' | 'grayscale' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white'"
-              },
-              "default": "brand"
-            },
             {
               "name": "separated",
               "description": "Separate toggle items.",
@@ -7111,8 +7093,8 @@
               "default": "false"
             },
             {
-              "name": "filled",
-              "description": "Fill the background for thirdary variant.",
+              "name": "block",
+              "description": "Make the toggle fill the width with its container.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"