srcdev-nuxt-forms 2.1.28 → 2.1.30

package/assets/styles/forms/themes/_primary.css

@@ -27,6 +27,16 @@
 
     --theme-form-range-accent-color: light-dark(var(--blue-12), var(--blue-));
 
+    /*
+    * ToggleSwitch
+    **/
+    --theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
+    --theme-form-toggle-border: 1px solid light-dark(var(--blue-12), var(--blue-1));
+    --theme-form-toggle-outline: 1px solid light-dark(var(--blue-12), var(--blue-12));
+    --theme-form-toggle-symbol-off: var(--orange-12);
+    --theme-form-toggle-symbol-on: var(--gray-12);
+
     /*
     * Checkbox as button
     **/

package/components/forms/input-checkbox/{variants/MultipleCheckboxes.vue → MultipleCheckboxes.vue}

@@ -1,5 +1,5 @@
 <template>
-  <fieldset class="multiple-checkboxes-fieldset" :class="[{ error: fieldHasError }]">
+  <fieldset class="multiple-checkboxes-fieldset" :class="[elementClasses, { error: fieldHasError }]" :data-testid>
     <legend :class="[{ 'has-description': hasDescription }]">{{ legend }}</legend>
 
     <div v-if="hasDescriptionSlot" :id="`${id}-description`">
@@ -59,10 +59,14 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../../c12/prop-validators';
+import propValidators from '../c12/prop-validators';
 import type { IOptionsConfig, IFormMultipleOptions } from '@/types/types.forms';
 
-const { id, name, legend, label, required, fieldHasError, placeholder, isButton, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme, direction } = defineProps({
+const { dataTestid, id, name, legend, label, required, fieldHasError, placeholder, isButton, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme, direction } = defineProps({
+  dataTestid: {
+    type: String,
+    default: 'multiple-checkboxes',
+  },
   id: {
     type: String,
     required: true,

package/components/forms/input-checkbox/{variants/SingleCheckbox.vue → SingleCheckbox.vue}

@@ -1,5 +1,5 @@
 <template>
-  <fieldset class="single-checkbox-fieldset" :class="[{ error: fieldHasError }]">
+  <fieldset class="single-checkbox-fieldset" :class="[elementClasses, { error: fieldHasError }]" :data-testid>
     <legend :class="[{ 'has-description': hasDescription }]">{{ legend }}</legend>
 
     <div v-if="hasDescriptionSlot" :id="`${name}-description`">
@@ -21,10 +21,14 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../../c12/prop-validators';
+import propValidators from '../c12/prop-validators';
 import type { IFormMultipleOptions } from '@/types/types.forms';
 
-const { id, name, legend, label, required, fieldHasError, errorMessage, size, optionsLayout, equalCols, trueValue, falseValue, styleClassPassthrough, theme } = defineProps({
+const { dataTestid, id, name, legend, label, required, fieldHasError, errorMessage, size, optionsLayout, equalCols, trueValue, falseValue, styleClassPassthrough, theme } = defineProps({
+  dataTestid: {
+    type: String,
+    default: 'multiple-radio-buttons',
+  },
   id: {
     type: String,
     required: true,

package/components/forms/input-checkbox/tests/MultipleCheckboxes.spec.ts

@@ -0,0 +1,98 @@
+// https://nuxt.com/docs/getting-started/testing#unit-testing
+import { describe, it, expect } from 'vitest';
+import { VueWrapper } from '@vue/test-utils';
+import { mountSuspended } from '@nuxt/test-utils/runtime';
+import ComponentUnderTest from '../MultipleCheckboxes.vue';
+import tagsData from './data/tags.json';
+
+let initialPropsData = {
+  dataTestid: 'multiple-checkboxes',
+  id: 'tags',
+  name: 'tags',
+  legend: 'Choose tags (as checkboxes)',
+  required: true,
+  label: 'Check between 3 and 8 tags',
+  placeholder: 'eg. Type something here',
+  isButton: true,
+  errorMessage: 'Please select between 3 and 8 tags',
+  fieldHasError: false,
+  fieldData: tagsData,
+  size: 'small',
+  optionsLayout: 'inline',
+  styleClassPassthrough: ['testClass'],
+  theme: 'primary',
+};
+
+const initialSlots = {
+  checkedIcon: () => ``,
+  itemIcon: () => `<Icon name="material-symbols:add-2" class="icon" />`,
+};
+
+let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+const wrapperFactory = (propsData = {}, slotsData = {}) => {
+  const mockPropsData = { ...initialPropsData, ...propsData };
+  const mockSlotsData = { ...initialSlots, ...slotsData };
+
+  return mountSuspended(ComponentUnderTest, {
+    attachTo: document.body,
+    props: mockPropsData,
+    slots: mockSlotsData,
+  });
+};
+
+describe('MultipleCheckboxes Component', () => {
+  it('Mounts', async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('renders properly', async () => {
+    wrapper = await wrapperFactory();
+    const dataTestIdElem = wrapper.attributes('data-testid');
+    expect(dataTestIdElem).toBe(initialPropsData.dataTestid);
+    expect(wrapper.find('[data-testid]').classes()).toContain('testClass');
+  });
+
+  it('updates checkbox modelValue when items clicked', async () => {
+    const modelValue = ref<string[]>([]);
+    const propsData = {
+      modelValue,
+    };
+    wrapper = await wrapperFactory(propsData);
+    const checkboxElements = wrapper.findAll('input[type="checkbox"]');
+
+    /*
+     * Test the first checkbox checked
+     **/
+    const firstCheckbox = checkboxElements[0];
+    expect(firstCheckbox.attributes('aria-checked')).toBe('false');
+    const firstCheckboxTrueValue = firstCheckbox.attributes('true-value');
+
+    await firstCheckbox.trigger('click');
+
+    expect(wrapper.emitted()).toHaveProperty('update:modelValue');
+    const firstEmittedEvents = wrapper.emitted('update:modelValue');
+    if (firstEmittedEvents && firstEmittedEvents[0]) {
+      expect(firstEmittedEvents[0]).includes(firstCheckboxTrueValue);
+    }
+
+    expect(firstCheckbox.attributes('aria-checked')).toBe('true');
+
+    /*
+     * Test the second checkbox chekced
+     **/
+    const secondCheckbox = checkboxElements[1];
+    expect(secondCheckbox.attributes('aria-checked')).toBe('false');
+    const secondCheckboxTrueValue = secondCheckbox.attributes('true-value');
+
+    await secondCheckbox.trigger('click');
+
+    expect(wrapper.emitted()).toHaveProperty('update:modelValue');
+    const secondEmittedEvents = wrapper.emitted('update:modelValue');
+    if (secondEmittedEvents && secondEmittedEvents[0]) {
+      expect(secondEmittedEvents[1]).includes(secondCheckboxTrueValue);
+    }
+
+    expect(secondCheckbox.attributes('aria-checked')).toBe('true');
+  });
+});

package/components/forms/input-checkbox/tests/data/tags.json

@@ -0,0 +1,67 @@
+{
+  "data": [
+    {
+      "id": "pizza",
+      "name": "tags",
+      "value": "pizza",
+      "label": "Pizza"
+    },
+    {
+      "id": "italian",
+      "name": "tags",
+      "value": "italian",
+      "label": "Italian"
+    },
+    {
+      "id": "vegetarian",
+      "name": "tags",
+      "value": "vegetarian",
+      "label": "Vegetarian"
+    },
+    {
+      "id": "stir-fry",
+      "name": "tags",
+      "value": "stir-fry",
+      "label": "Stir-fry"
+    },
+    {
+      "id": "asian",
+      "name": "tags",
+      "value": "asian",
+      "label": "Asian"
+    },
+    {
+      "id": "cookies",
+      "name": "tags",
+      "value": "cookies",
+      "label": "Cookies"
+    },
+    {
+      "id": "dessert",
+      "name": "tags",
+      "value": "dessert",
+      "label": "Dessert"
+    },
+    {
+      "id": "baking",
+      "name": "tags",
+      "value": "baking",
+      "label": "Baking"
+    },
+    {
+      "id": "pasta",
+      "name": "tags",
+      "value": "pasta",
+      "label": "Pasta"
+    },
+    {
+      "id": "chicken",
+      "name": "tags",
+      "value": "chicken",
+      "label": "Chicken"
+    }
+  ],
+  "total": 5,
+  "skip": 0,
+  "limit": 10
+}

package/components/forms/input-checkbox-radio/InputCheckboxRadioCore.vue

@@ -6,8 +6,8 @@
 
     <input
       :type
-      :true-value="trueValue"
-      :false-value="falseValue"
+      :true-value
+      :false-value
       :id
       :name
       :required="required && !multipleOptions"
@@ -103,7 +103,7 @@ const isArray = Array.isArray(modelValue.value);
 
 const isChecked = computed(() => {
   if (isArray) {
-    return modelValue.value.indexOf(trueValue) > -1;
+    return modelValue.value.includes(trueValue);
   } else {
     return modelValue.value === trueValue;
   }

package/components/forms/input-radio/MultipleRadiobuttons.vue

@@ -1,5 +1,5 @@
 <template>
-  <fieldset :aria-required="required" :aria-invalid="fieldHasError" role="radiogroup" class="multiple-radiobuttons-fieldset" :class="[{ error: fieldHasError }]">
+  <fieldset :aria-required="required" :aria-invalid="fieldHasError" role="radiogroup" class="multiple-radiobuttons-fieldset" :class="[elementClasses, { error: fieldHasError }]" :data-testid>
     <legend :class="[{ 'has-description': hasDescriptionSlot }]">{{ legend }}</legend>
 
     <div v-if="hasDescriptionSlot" :id="`${name}-description`">
@@ -62,7 +62,11 @@
 import propValidators from '../c12/prop-validators';
 import type { IFormMultipleOptions } from '@/types/types.forms';
 
-const { id, name, legend, label, required, fieldHasError, placeholder, isButton, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme, direction } = defineProps({
+const { dataTestid, id, name, legend, label, required, fieldHasError, placeholder, isButton, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme, direction } = defineProps({
+  dataTestid: {
+    type: String,
+    default: 'multiple-radio-buttons',
+  },
   id: {
     type: String,
     required: true,

package/components/forms/input-radio/tests/MultipleRadioButtons.spec.ts

@@ -0,0 +1,89 @@
+// https://nuxt.com/docs/getting-started/testing#unit-testing
+import { describe, it, expect } from 'vitest';
+import { VueWrapper } from '@vue/test-utils';
+import { mountSuspended } from '@nuxt/test-utils/runtime';
+import ComponentUnderTest from '../MultipleRadioButtons.vue';
+import tagsData from './data/tags.json';
+
+let initialPropsData = {
+  dataTestid: 'multiple-radio-buttons',
+  id: 'tags',
+  name: 'tags',
+  legend: 'Choose tags (as checkboxes)',
+  required: true,
+  label: 'Check between 3 and 8 tags',
+  placeholder: 'eg. Type something here',
+  isButton: true,
+  errorMessage: 'Please select between 3 and 8 tags',
+  fieldHasError: false,
+  fieldData: tagsData,
+  size: 'small',
+  optionsLayout: 'inline',
+  styleClassPassthrough: ['testClass'],
+  theme: 'primary',
+};
+
+const initialSlots = {
+  checkedIcon: () => ``,
+  itemIcon: () => `<Icon name="material-symbols:add-2" class="icon" />`,
+};
+
+let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+const wrapperFactory = (propsData = {}, slotsData = {}) => {
+  const mockPropsData = { ...initialPropsData, ...propsData };
+  const mockSlotsData = { ...initialSlots, ...slotsData };
+
+  return mountSuspended(ComponentUnderTest, {
+    attachTo: document.body,
+    props: mockPropsData,
+    slots: mockSlotsData,
+  });
+};
+
+describe('MultipleRadioButtons Component', () => {
+  it('Mounts', async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('renders properly', async () => {
+    wrapper = await wrapperFactory();
+    const dataTestIdElem = wrapper.attributes('data-testid');
+    expect(dataTestIdElem).toBe(initialPropsData.dataTestid);
+    expect(wrapper.find('[data-testid]').classes()).toContain('testClass');
+  });
+
+  it('updates radio modelValue when items clicked', async () => {
+    const modelValue = ref<string>('');
+    const propsData = {
+      modelValue,
+    };
+    wrapper = await wrapperFactory(propsData);
+
+    /*
+     * Test the first radio button
+     **/
+    const radiobuttonElements = wrapper.findAll('input[type="radio"]');
+    const firstRadioButton = radiobuttonElements[0];
+    expect(firstRadioButton.attributes('aria-checked')).toBe('false');
+    const firstRadioButtonTrueValue = firstRadioButton.attributes('true-value');
+
+    await firstRadioButton.trigger('click');
+    wrapper.vm.modelValue.value = firstRadioButtonTrueValue;
+    expect(firstRadioButton.attributes('aria-checked')).toBe('true');
+    expect(wrapper.vm.modelValue.value).toEqual(firstRadioButtonTrueValue);
+
+    /*
+     * Test the second radio button
+     **/
+    const secondRadioButton = radiobuttonElements[1];
+    expect(secondRadioButton.attributes('aria-checked')).toBe('false');
+    const secondRadioButtonTrueValue = secondRadioButton.attributes('true-value');
+
+    await secondRadioButton.trigger('click');
+    wrapper.vm.modelValue.value = secondRadioButtonTrueValue;
+    expect(firstRadioButton.attributes('aria-checked')).toBe('false');
+    expect(secondRadioButton.attributes('aria-checked')).toBe('true');
+    expect(wrapper.vm.modelValue.value).toEqual(secondRadioButtonTrueValue);
+  });
+});

package/components/forms/input-radio/tests/data/tags.json

@@ -0,0 +1,67 @@
+{
+  "data": [
+    {
+      "id": "pizza",
+      "name": "tags",
+      "value": "pizza",
+      "label": "Pizza"
+    },
+    {
+      "id": "italian",
+      "name": "tags",
+      "value": "italian",
+      "label": "Italian"
+    },
+    {
+      "id": "vegetarian",
+      "name": "tags",
+      "value": "vegetarian",
+      "label": "Vegetarian"
+    },
+    {
+      "id": "stir-fry",
+      "name": "tags",
+      "value": "stir-fry",
+      "label": "Stir-fry"
+    },
+    {
+      "id": "asian",
+      "name": "tags",
+      "value": "asian",
+      "label": "Asian"
+    },
+    {
+      "id": "cookies",
+      "name": "tags",
+      "value": "cookies",
+      "label": "Cookies"
+    },
+    {
+      "id": "dessert",
+      "name": "tags",
+      "value": "dessert",
+      "label": "Dessert"
+    },
+    {
+      "id": "baking",
+      "name": "tags",
+      "value": "baking",
+      "label": "Baking"
+    },
+    {
+      "id": "pasta",
+      "name": "tags",
+      "value": "pasta",
+      "label": "Pasta"
+    },
+    {
+      "id": "chicken",
+      "name": "tags",
+      "value": "chicken",
+      "label": "Chicken"
+    }
+  ],
+  "total": 5,
+  "skip": 0,
+  "limit": 10
+}

package/components/forms/toggle-switch/ToggleSwitchCore.vue

@@ -0,0 +1,217 @@
+<template>
+  <div class="toggle-switch-core" :class="(elementClasses, size)" :data-form-theme="formTheme">
+    <label class="toggle-switch-input" :class="[{ round }]" :for="inputId">
+      <input type="checkbox" v-model="modelValue" :id="inputId" :aria-describedby="`${id}-description`" :name :required />
+      <div class="symbol-wrapper" :class="[{ round }]">
+        <div class="symbol" :class="[{ round }]">
+          <div v-if="hasIconOnSlot" class="symbol-icon icon-on">
+            <slot name="iconOn"></slot>
+          </div>
+
+          <div v-if="hasIconOffSlot" class="symbol-icon icon-off">
+            <slot name="iconOff"></slot>
+          </div>
+        </div>
+      </div>
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../c12/prop-validators';
+
+const { id, name, required, fieldHasError, styleClassPassthrough, theme, round, size } = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+  round: {
+    type: Boolean,
+    default: true,
+  },
+  size: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+});
+
+const slots = useSlots();
+const hasDescriptionSlot = computed(() => slots.description !== undefined);
+const hasIconOnSlot = computed(() => slots.iconOn !== undefined);
+const hasIconOffSlot = computed(() => slots.iconOff !== undefined);
+
+const formTheme = computed(() => {
+  return fieldHasError ? 'error' : theme;
+});
+
+const modelValue = defineModel();
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+
+const inputId = computed(() => `toggle-sitch-${id}`);
+</script>
+
+<style lang="css">
+.toggle-switch-core {
+  --_transition-duration: 0.4s;
+
+  .toggle-switch-label {
+    display: block;
+  }
+
+  .toggle-switch-input {
+    position: relative;
+    display: inline-block;
+
+    input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+    input:checked {
+      --_icon-on-opacity: 1;
+      --_icon-off-opacity: 0;
+    }
+
+    /* The symbol */
+    .symbol-wrapper {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      overflow: clip;
+
+      .symbol {
+        display: grid;
+        grid-template-areas: 'icon-stack';
+        overflow: clip;
+        position: absolute;
+
+        .symbol-icon {
+          grid-area: icon-stack;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+  }
+}
+
+/*
+    * ToggleSwitch configurable
+    **/
+.toggle-switch-core {
+  /* Sizes */
+  &.x-small {
+    --_symbol-size: 20px;
+  }
+  &.small {
+    --_symbol-size: 24px;
+  }
+  &.normal {
+    --_symbol-size: 34px;
+  }
+  &.medium {
+    --_symbol-size: 40px;
+  }
+  &.large {
+    --_symbol-size: 44px;
+  }
+
+  /* .toggle-switch-label {
+  } */
+
+  .toggle-switch-input {
+    border: var(--theme-form-toggle-border);
+    outline: var(--theme-form-toggle-outline);
+    width: calc(var(--_symbol-size) * 2 - 4px);
+    height: calc(var(--_symbol-size) + 4px);
+
+    &.round {
+      border-radius: calc(var(--_symbol-size) + 2px);
+    }
+
+    .symbol-wrapper {
+      background-color: var(--theme-form-toggle-bg-off);
+      transition: 0.4s;
+
+      &.round {
+        border-radius: var(--_symbol-size);
+      }
+      .symbol {
+        height: calc(var(--_symbol-size) - 6px);
+        width: calc(var(--_symbol-size) - 6px);
+        left: 4px;
+        bottom: 4px;
+        background-color: var(--theme-form-toggle-symbol-off);
+        transition: var(--_transition-duration);
+
+        &.round {
+          border-radius: 50%;
+        }
+
+        .symbol-icon {
+          transition: opacity var(--_transition-duration);
+
+          &.icon-on {
+            opacity: 0;
+          }
+          &.icon-off {
+            opacity: 1;
+          }
+        }
+      }
+    }
+
+    /* input:checked + .symbol-wrapper .symbol {
+      background-color: var(--theme-form-toggle-bg-on);
+    } */
+
+    input:focus-visible + .symbol-wrapper {
+      box-shadow: var(--theme-form-focus-box-shadow);
+    }
+
+    input:checked + .symbol-wrapper .symbol {
+      background-color: var(--theme-form-toggle-symbol-on);
+      transform: translateX(26px);
+
+      .symbol-icon {
+        &.icon-on {
+          opacity: 1;
+        }
+        &.icon-off {
+          opacity: 0;
+        }
+      }
+    }
+  }
+}
+</style>

package/components/forms/toggle-switch/variants/ToggleSwitchWithLabel.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="toggle-switch-with-label" :class="(elementClasses, size)" :data-form-theme="formTheme">
+    <p class="toggle-switch-label input-text-label body-normal-bold" :for="`toggle-sitch-${id}`">{{ label }}</p>
+    <div v-if="hasDescriptionSlot" :id="`${id}-description`">
+      <slot name="description"></slot>
+    </div>
+    <ToggleSwitchCore v-model="modelValue" :id :name :required :field-has-error :theme :round :size>
+      <template v-if="hasIconOnSlot" #iconOn>
+        <slot name="iconOn"></slot>
+      </template>
+
+      <template v-if="hasIconOffSlot" #iconOff>
+        <slot name="iconOff"></slot>
+      </template>
+    </ToggleSwitchCore>
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../../c12/prop-validators';
+
+const { id, name, label, required, fieldHasError, styleClassPassthrough, theme, round, size } = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+  round: {
+    type: Boolean,
+    default: true,
+  },
+  size: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+});
+
+const slots = useSlots();
+const hasDescriptionSlot = computed(() => slots.description !== undefined);
+const hasIconOnSlot = computed(() => slots.iconOn !== undefined);
+const hasIconOffSlot = computed(() => slots.iconOff !== undefined);
+
+const formTheme = computed(() => {
+  return fieldHasError ? 'error' : theme;
+});
+
+const modelValue = defineModel();
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+</script>
+
+<style lang="css">
+.toggle-switch-with-label {
+  --_transition-duration: 0.4s;
+
+  .toggle-switch-label {
+    display: block;
+  }
+}
+</style>

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "2.1.28",
+  "version": "2.1.30",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
+    "cleanall": "rm -rf node_modules && rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output && rm -rf .playground/node_modules && rm package-lock.json",
     "reinstall": "rm -rf node_modules && npm install",
     "dev": "nuxi dev .playground",
     "build": "nuxt build .playground",
@@ -23,12 +24,11 @@
     "types/"
   ],
   "devDependencies": {
-    "@iconify-json/material-symbols": "1.2.10",
-    "@nuxt/eslint-config": "0.7.2",
-    "@nuxt/icon": "1.10.1",
+    "@nuxt/eslint-config": "0.7.3",
+    "@nuxt/icon": "1.10.2",
     "@nuxt/test-utils": "3.15.1",
     "@vue/test-utils": "2.4.6",
-    "eslint": "9.16.0",
+    "eslint": "9.17.0",
     "happy-dom": "15.11.7",
     "nuxt": "3.14.1592",
     "release-it": "17.10.0",
@@ -37,15 +37,18 @@
     "vue": "3.5.13"
   },
   "dependencies": {
-    "@iconify-json/carbon": "1.2.4",
-    "@iconify-json/gridicons": "1.2.1",
-    "@iconify-json/radix-icons": "1.2.1",
-    "@iconify-json/ri": "1.2.3",
+    "@iconify-json/carbon": "1.2.5",
+    "@iconify-json/gridicons": "1.2.2",
+    "@iconify-json/material-symbols": "1.2.12",
+    "@iconify-json/material-symbols-light": "1.2.12",
+    "@iconify-json/ph": "1.2.2",
+    "@iconify-json/radix-icons": "1.2.2",
+    "@iconify-json/ri": "1.2.5",
     "@nuxtjs/storybook": "8.3.2",
-    "@storybook/addon-essentials": "8.4.6",
-    "@storybook/addon-interactions": "8.4.6",
-    "@storybook/addon-links": "8.4.6",
-    "@storybook/vue3": "8.4.6",
+    "@storybook/addon-essentials": "8.4.7",
+    "@storybook/addon-interactions": "8.4.7",
+    "@storybook/addon-links": "8.4.7",
+    "@storybook/vue3": "8.4.7",
     "http-proxy-middleware": "3.0.3",
     "modern-normalize": "3.0.1",
     "zod": "3.24.1"