srcdev-nuxt-forms 2.1.36 → 2.1.38

package/components/forms/input-button/InputButtonCore.vue

@@ -5,23 +5,24 @@
     :aria-disabled="readonly"
     :data-testid="dataTestid"
     :data-btn-theme="theme"
-    class="input-button-core btn"
-    :class="[`btn-${type}`, size, effectClass, elementClasses, { 'icon-only': isIconOnly }]"
+    :data-size="size"
+    class="input-button-core"
+    :class="[`btn-${type}`, effectClass, elementClasses, { 'icon-only': isIconOnly }]"
   >
     <span v-if="useEffect && effect == 'fancy'" class="fancy"></span>
     <template v-if="hasLeftContent && !isIconOnly">
-      <span class="btn-icon left" :class="[size]">
+      <span class="btn-icon left">
         <slot name="left"></slot>
       </span>
     </template>
-    <span class="btn-text" :class="[size, weight, { 'sr-only': isIconOnly }]">{{ buttonText }}</span>
+    <span class="btn-text" :class="[weight, { 'sr-only': isIconOnly }]">{{ buttonText }}</span>
     <template v-if="hasRightContent && !isIconOnly">
       <span class="btn-icon right">
         <slot name="right"></slot>
       </span>
     </template>
     <template v-if="isIconOnly">
-      <span class="btn-icon icon-only" :class="[size]">
+      <span class="btn-icon icon-only">
         <slot name="iconOnly"></slot>
       </span>
     </template>
@@ -111,31 +112,26 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
 </script>
 
 <style lang="css">
-.btn {
-  --_padding-block: var(--theme-form-button-padding-block-normal);
-  --_padding-inline: var(--theme-form-button-padding-inline-normal);
-  --_icon-gap: var(--theme-form-button-icon-gap-normal);
-  --_border-width: var(--input-border-width-default);
-  --_outline-width: var(--input-outline-width-thin);
-
+.input-button-core {
   align-items: center;
   display: flex;
-  gap: var(--_icon-gap);
+  gap: var(--form-button-icon-gap);
   justify-content: center;
   border: none;
-  border-radius: var(--input-border-radius);
+  border-radius: var(--form-input-border-radius);
   font-family: var(--font-family);
 
-  /* line-height: var(--theme-form-button-line-height); */
-  padding-inline: var(--_padding-inline);
-  padding-block: var(--_padding-block);
+  padding-inline: var(--form-button-padding-inline);
+  padding-block-start: var(--form-element-padding-block-start);
+  padding-block-end: var(--form-element-padding-block-end);
 
   transition: all 0.2s ease-in-out;
 
+  box-shadow: var(--box-shadow-off);
   background-color: var(--theme-btn-bg);
-  border: var(--_border-width) solid var(--theme-btn-border);
+  border: var(--form-element-border-width) solid var(--theme-btn-border);
   color: var(--theme-btn-text);
-  outline: 0.1rem solid var(--theme-btn-outline);
+  outline: var(--form-element-outline-width) solid var(--theme-btn-outline);
 
   /*
   * States
@@ -156,7 +152,7 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
     --theme-btn-border: var(--theme-btn-border-focus);
     --theme-btn-text: var(--theme-btn-text-focus);
     --theme-btn-outline: var(--theme-btn-outline-focus);
-    box-shadow: var(--theme-form-focus-box-shadow);
+    box-shadow: var(--box-shadow-on);
   }
 
   &[readonly] {
@@ -167,88 +163,19 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
     }
   }
 
-  &.x-small {
-    &:not(.icon-only) {
-      --_padding-block: var(--theme-form-button-padding-block-x-small);
-      --_padding-inline: var(--theme-form-button-padding-inline-x-small);
-      --_icon-gap: var(--theme-form-button-icon-gap-x-small);
-    }
-    &.icon-only {
-      --_padding-block: var(--theme-form-button-padding-block-icon-only-x-small);
-      --_padding-inline: var(--theme-form-button-padding-inline-icon-only-x-small);
-    }
-  }
-
-  &.small {
-    &:not(.icon-only) {
-      --_padding-block: var(--theme-form-button-padding-block-x-small);
-      --_padding-inline: var(--theme-form-button-padding-inline-small);
-      --_icon-gap: var(--theme-form-button-icon-gap-small);
-    }
-    &.icon-only {
-      --_padding-block: var(--theme-form-button-padding-block-icon-only-small);
-      --_padding-inline: var(--theme-form-button-padding-inline-icon-only-small);
-    }
-  }
-  &.normal {
-    &:not(.icon-only) {
-      --_padding-block: var(--theme-form-button-padding-block-x-small);
-      --_padding-inline: var(--theme-form-button-padding-inline-normal);
-      --_icon-gap: var(--theme-form-button-icon-gap-normal);
-    }
-    &.icon-only {
-      --_padding-block: var(--theme-form-button-padding-block-icon-only-normal);
-      --_padding-inline: var(--theme-form-button-padding-inline-icon-only-normal);
-    }
-  }
-  &.medium {
-    &:not(.icon-only) {
-      --_padding-block: var(--theme-form-button-padding-block-x-small);
-      --_padding-inline: var(--theme-form-button-padding-inline-medium);
-      --_icon-gap: var(--theme-form-button-icon-gap-medium);
-    }
-    &.icon-only {
-      --_padding-block: var(--theme-form-button-padding-block-icon-only-medium);
-      --_padding-inline: var(--theme-form-button-padding-inline-icon-only-medium);
-    }
-  }
-
-  &.large {
-    &:not(.icon-only) {
-      --_padding-block: var(--theme-form-button-padding-block-x-small);
-      --_padding-inline: var(--theme-form-button-padding-inline-large);
-      --_icon-gap: var(--theme-form-button-icon-gap-large);
-    }
-    &.icon-only {
-      --_padding-block: var(--theme-form-button-padding-block-icon-only-large);
-      --_padding-inline: var(--theme-form-button-padding-inline-icon-only-large);
-    }
+  &.icon-only {
+    aspect-ratio: 1;
+    height: var(--form-icon-only-button-size);
+    width: var(--form-icon-only-button-size);
+    margin: 0 !important;
+    padding: 0 !important;
   }
 
   .btn-text {
-    &.small {
-      font-size: var(--theme-form-button-font-size-small);
-    }
-    &.normal {
-      font-size: var(--theme-form-button-font-size-normal);
-    }
-    &.medium {
-      font-size: var(--theme-form-button-font-size-medium);
-    }
-
-    &.large {
-      font-size: var(--theme-form-button-font-size-large);
-    }
-
-    &.sr-only {
-      position: absolute;
-      clip: rect(1px, 0.1rem, 0.1rem, 0.1rem);
-      clip-path: inset(50%);
-      height: 0.1rem;
-      width: 0.1rem;
-      overflow: hidden;
-      white-space: nowrap;
-    }
+    display: inline-block;
+    white-space: nowrap;
+    font-size: var(--form-element-font-size);
+    line-height: var(--form-element-line-height);
   }
 
   .btn-icon {
@@ -256,38 +183,8 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
     .icon {
       aspect-ratio: 1;
       display: inline-block;
-    }
-
-    &.x-small {
-      .icon {
-        height: var(--theme-form-button-icon-size-small);
-        width: var(--theme-form-button-icon-size-small);
-      }
-    }
-    &.small {
-      .icon {
-        height: var(--theme-form-button-icon-size-small);
-        width: var(--theme-form-button-icon-size-small);
-      }
-    }
-    &.normal {
-      .icon {
-        height: var(--theme-form-button-icon-size-normal);
-        width: var(--theme-form-button-icon-size-normal);
-      }
-    }
-    &.medium {
-      .icon {
-        height: var(--theme-form-button-icon-size-medium);
-        width: var(--theme-form-button-icon-size-medium);
-      }
-    }
-
-    &.large {
-      .icon {
-        height: var(--theme-form-button-icon-size-large);
-        width: var(--theme-form-button-icon-size-large);
-      }
+      height: var(--form-icon-size);
+      width: var(--form-icon-size);
     }
   }
 }

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

@@ -1,14 +1,14 @@
 <template>
-  <div class="input-checkbox-radio-button-button" :data-form-theme="formTheme" :class="[size, elementClasses, optionsLayout, { error: fieldHasError }]">
+  <div class="input-checkbox-radio-button-button" :data-form-theme="formTheme" :data-size="size" :class="[size, elementClasses, optionsLayout, { error: fieldHasError }]">
     <InputCheckboxRadioCore :isButton="true" :type :id :name :required v-model="modelValue" :size :trueValue :falseValue :fieldHasError :theme :ariaDescribedby>
       <template #checkedIcon>
         <slot name="checkedIcon"></slot>
       </template>
     </InputCheckboxRadioCore>
-    <label v-if="hasLabelContent" class="input-checkbox-radio-button-label body-normal" :for="id">
+    <label v-if="hasLabelContent" class="input-checkbox-radio-button-label" :for="id">
       <slot name="labelContent"></slot>
     </label>
-    <label v-else class="input-checkbox-radio-button-label body-normal-semibold" :for="id">{{ label }}</label>
+    <label v-else class="input-checkbox-radio-button-label" :for="id">{{ label }}</label>
     <div class="item-icon">
       <slot name="itemIcon">
         <Icon name="material-symbols:add-2" class="icon" />
@@ -106,16 +106,16 @@ const flexDirection = ref(direction);
 
 <style lang="css">
 .input-checkbox-radio-button-button {
-  --_checkbox-size: initial;
+  /* --_checkbox-size: initial; */
   --_background-color: var(--theme-checkbox-radio-button-bg-default);
-  --_outline-width: var(--input-outline-width-thin);
+  --_outline-width: var(--form-element-outline-width);
   --_border-color: var(--theme-checkbox-radio-button-border-default);
   --_outline-color: var(--theme-checkbox-radio-button-outline-default);
   --_label-color: var(--theme-checkbox-radio-button-label-default);
   --_box-shadow: var(--theme-checkbox-radio-button-shadow);
   --_white-space: wrap;
   --_gap: 0.4rem;
-  --_border-radius: 2.2rem;
+  /* --_border-radius: 2.2rem; */
   --_padding-block: 0.4rem;
   --_padding-inline: 1.2rem;
 
@@ -126,7 +126,7 @@ const flexDirection = ref(direction);
   gap: var(--_gap);
 
   background-color: var(--_background-color);
-  border-radius: var(--_border-radius);
+  border-radius: calc(var(--form-element-line-height) / 1);
   border: var(--theme-checkbox-radio-button-border-width) solid var(--_border-color);
   outline: var(--theme-checkbox-radio-button-outline-width) solid var(--_outline-color);
   box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem var(--_box-shadow);
@@ -149,37 +149,37 @@ const flexDirection = ref(direction);
 
   /* Sizes */
   &.x-small {
-    --_checkbox-size: 2rem;
+    /* --_checkbox-size: 2rem; */
     --_gap: 1rem;
-    --_border-radius: 2rem;
+    /* --_border-radius: 2rem; */
     --_padding-block: 0.2rem;
     --_padding-inline: 1.6rem;
   }
   &.small {
-    --_checkbox-size: 2.2rem;
+    /* --_checkbox-size: 2.2rem; */
     --_gap: 1.2rem;
-    --_border-radius: 1.8rem;
+    /* --_border-radius: 1.8rem; */
     --_padding-block: 0rem;
     --_padding-inline: 1.2rem;
   }
   &.normal {
-    --_checkbox-size: 3.4rem;
+    /* --_checkbox-size: 3.4rem; */
     --_gap: 1rem;
-    --_border-radius: 2rem;
+    /* --_border-radius: 2rem; */
     --_padding-block: 0.4rem;
     --_padding-inline: 1.2rem;
   }
   &.medium {
-    --_checkbox-size: 3.4rem;
+    /* --_checkbox-size: 3.4rem; */
     --_gap: 1rem;
-    --_border-radius: 2rem;
+    /* --_border-radius: 2rem; */
     --_padding-block: 0.4rem;
     --_padding-inline: 1.2rem;
   }
   &.large {
-    --_checkbox-size: 3.4rem;
+    /* --_checkbox-size: 3.4rem; */
     --_gap: 1rem;
-    --_border-radius: 2rem;
+    /* --_border-radius: 2rem; */
     --_padding-block: 0.4rem;
     --_padding-inline: 1.2rem;
   }
@@ -189,8 +189,9 @@ const flexDirection = ref(direction);
   display: flex;
   flex-grow: 1;
   color: var(--_label-color);
+  font-size: var(--form-element-font-size);
   width: 100%;
-  height: 100%;
+  height: var(--form-element-line-height);
   align-items: center;
   justify-content: center;
   margin-block: 0.8rem;
@@ -207,7 +208,7 @@ const flexDirection = ref(direction);
   align-items: center;
   justify-content: center;
   color: var(--_border-color);
-  height: var(--_checkbox-size);
-  width: var(--_checkbox-size);
+  height: var(--form-input-checkbox-radio-button-size);
+  width: var(--form-input-checkbox-radio-button-size);
 }
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-checkbox-radio-wrapper" :data-form-theme="formTheme" :class="[type, size, elementClasses, { error: fieldHasError }, { button: isButton }]">
+  <div class="input-checkbox-radio-wrapper" :data-form-theme="formTheme" :data-theme="size" :class="[type, size, elementClasses, { error: fieldHasError }, { button: isButton }]">
     <slot name="checkedIcon" v-if="isChecked">
       <Icon :name="defaultIcon" class="input-checked-icon" />
     </slot>
@@ -112,16 +112,18 @@ const isChecked = computed(() => {
 
 <style lang="css">
 .input-checkbox-radio-wrapper {
-  --_checkbox-size: initial;
   --_outline-width: 0.1rem;
   --_border-width: 0.1rem;
   --_border-radius: 50%;
   --_background-color: var(--theme-form-checkbox-bg);
   --_box-shadow: none;
 
+  --_icon-size: var(--form-input-checkbox-radio-button-size);
+
   &:not(.button) {
-    --_outline-width: var(--input-outline-width-thin);
-    --_border-width: var(--input-border-width-default);
+    --_icon-size: var(--form-toggle-symbol-size);
+    --_outline-width: var(--form-element-outline-width);
+    --_border-width: var(--form-element-border-width);
     &.checkbox {
       --_background-color: var(--theme-form-checkbox-bg);
       --_border-color: var(--theme-form-checkbox-border);
@@ -147,37 +149,20 @@ const isChecked = computed(() => {
   outline: 0.1rem solid var(--_outline-color);
   box-shadow: var(--_box-shadow);
 
-  height: var(--_checkbox-size);
-  width: var(--_checkbox-size);
+  height: var(--_icon-size);
+  width: var(--_icon-size);
 
   transition: all 0.2s ease-in-out;
 
   &:not(.button):has(.input-checkbox-radio-core:focus-visible) {
-    --_box-shadow: var(--theme-form-focus-box-shadow);
-  }
-
-  /* Sizes */
-  &.x-small {
-    --_checkbox-size: 2rem;
-  }
-  &.small {
-    --_checkbox-size: 2.4rem;
-  }
-  &.normal {
-    --_checkbox-size: 3.4rem;
-  }
-  &.medium {
-    --_checkbox-size: 4rem;
-  }
-  &.large {
-    --_checkbox-size: 4.4rem;
+    --_box-shadow: var(--form-focus-box-shadow);
   }
 
   .input-checked-icon {
     grid-area: element-stack;
     color: var(--theme-form-checkbox-symbol);
-    height: var(--_checkbox-size);
-    width: var(--_checkbox-size);
+    height: var(--_icon-size);
+    width: var(--_icon-size);
     box-shadow: var(--_box-shadow);
   }
 
@@ -188,8 +173,8 @@ const isChecked = computed(() => {
     overflow: hidden;
     opacity: 0;
 
-    height: var(--_checkbox-size);
-    width: var(--_checkbox-size);
+    height: var(--_icon-size);
+    width: var(--_icon-size);
 
     &:hover {
       cursor: pointer;
@@ -197,7 +182,7 @@ const isChecked = computed(() => {
 
     &:not(.is-button) {
       &:focus-visible {
-        --_box-shadow: var(--theme-form-focus-box-shadow);
+        --_box-shadow: var(--form-focus-box-shadow);
       }
     }
   }

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-checkbox-radio-with-label" :class="[elementClasses, optionsLayout, { error: fieldHasError }]">
+  <div class="input-checkbox-radio-with-label" :data-size="size" :class="[elementClasses, optionsLayout, { error: fieldHasError }]">
     <InputCheckboxRadioCore :type :id :name :required v-model="modelValue" :size :trueValue :falseValue :fieldHasError :theme :ariaDescribedby>
       <template #checkedIcon>
         <slot name="checkedIcon"></slot>

package/components/forms/input-number/InputNumberCore.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-number-wrapper" :data-form-theme="formTheme" :class="elementClasses">
+  <div class="input-number-wrapper" :data-form-theme="formTheme" :data-size="size" :class="elementClasses">
     <div v-if="hasLeftContent" class="slot left">
       <slot name="left"></slot>
     </div>
@@ -13,7 +13,7 @@
         :min
         :max
         :step
-        :class="['input-number-core', `input-number--${theme}`, `input-number--${size}`, `input-number--${weight}`, styleClassPassthrough]"
+        :class="['input-number-core', `input-number--${theme}`, `input-number--${size}`, `input-number--${weight}`]"
         v-model="modelValue"
         ref="inputField"
         inputmode="numeric"
@@ -109,8 +109,7 @@ onMounted(() => {
 
 <style lang="css">
 .input-number-wrapper {
-  --_gutter: 1.2rem;
-  --_border-width: var(--input-border-width-default);
+  --_focus-box-shadow: var(--box-shadow-off);
   --_min-width: v-bind(minLength);
 
   display: flex;
@@ -118,9 +117,14 @@ onMounted(() => {
 
   width: fit-content;
 
+  background-color: var(--theme-form-input-bg);
+  border-radius: var(--form-element-border-width);
+  border: var(--form-element-border-width) solid var(--theme-form-input-border);
+  outline: var(--form-element-outline-width) solid var(--theme-form-input-outline);
+  box-shadow: var(--_focus-box-shadow);
+
   .slot {
     display: inline-block;
-    padding-inline: 0.8rem;
 
     .icon {
       font-weight: 900;
@@ -148,22 +152,19 @@ onMounted(() => {
     box-shadow: none;
 
     background-color: var(--theme-form-input-bg);
-    border-radius: var(--input-border-width-default);
-    border: var(--_border-width) solid var(--theme-form-input-border);
-    outline: var(--_outline-width) solid var(--theme-form-input-outline);
-
     color: var(--theme-form-input-text);
     font-family: var(--font-family);
-    font-size: var(--theme-form-button-font-size-normal);
-    line-height: var(--line-height);
-    padding: 0.4rem 1.6rem;
+    font-size: var(--form-element-font-size);
+    line-height: var(--form-element-line-height);
+
+    padding-inline: var(--form-text-padding-inline);
+    padding-block-start: var(--form-element-padding-block-start);
+    padding-block-end: var(--form-element-padding-block-end);
     text-align: center;
     min-width: var(--_min-width);
 
     &:focus-visible {
-      border: var(--_border-width) solid var(--theme-form-input-border);
-      outline: var(--_outline-width) solid hsl(from var(--theme-form-input-outline-focus) h s 50%);
-      box-shadow: var(--theme-form-focus-box-shadow);
+      --_focus-box-shadow: var(--box-shadow-on);
     }
 
     &::placeholder,

package/components/forms/input-number/variants/InputNumberDefault.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-number-with-label" :data-form-theme="formTheme" :class="[elementClasses, `theme-${theme}`, { error: fieldHasError }]">
+  <div class="input-number-with-label" :data-form-theme="formTheme" :data-size="size" :class="[elementClasses, `theme-${theme}`, { error: fieldHasError }]">
     <label class="input-number-label body-normal-bold" :for="id">{{ label }}</label>
     <template v-if="hasDescription">
       <slot name="description"></slot>
@@ -13,8 +13,8 @@
           :readonly="Number(modelValue) <= min"
           :is-pending="false"
           buttonText="Step down"
-          :theme
-          size="x-small"
+          theme="input-action"
+          :size
         >
           <template #iconOnly>
             <slot name="left"></slot>
@@ -28,8 +28,8 @@
           :readonly="Number(modelValue) >= max"
           :is-pending="false"
           buttonText="Step up"
-          :theme
-          size="x-small"
+          theme="input-action"
+          :size
         >
           <template #iconOnly>
             <slot name="right"></slot>
@@ -133,8 +133,8 @@ const updateValue = (step: number, withinRangeLimit: boolean) => {
 
 <style lang="css">
 .input-number-with-label {
-  --_border-width: var(--input-border-width-default);
-  --_outline-width: var(--input-outline-width-thin);
+  --_border-width: var(--form-element-border-width);
+  --_outline-width: var(--form-element-outline-width);
   --_label-padding-inline: 1rem;
 
   .input-number-label {

package/components/forms/input-range/InputRangeCore.vue

@@ -116,8 +116,8 @@ const changeBackgroundColor = () => {
 <style lang="css">
 .input-range-wrapper {
   --_gutter: 1.2rem;
-  --_border-width: var(--input-border-width-default);
-  --_outline-width: var(--input-outline-width-thin);
+  --_border-width: var(--form-element-border-width);
+  --_outline-width: var(--form-element-outline-width);
 
   --_input-range-height: 2.4rem;
   --_slot-translate-y: calc(var(--_input-range-height) / 4);
@@ -203,7 +203,7 @@ const changeBackgroundColor = () => {
       } */
 
       &:focus-visible {
-        box-shadow: var(--theme-form-focus-box-shadow);
+        box-shadow: var(--form-focus-box-shadow);
       }
     }
 

package/components/forms/input-range-fancy/InputRangeFancyCore.vue

@@ -154,18 +154,6 @@ onMounted(() => {
     margin: 0 auto;
   }
 
-  .sr-only {
-    position: absolute;
-    width: 0.1rem;
-    height: 0.1rem;
-    padding: 0;
-    margin: -0.1rem;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-
   .control:focus-within,
   .control:hover {
     --active: 1;