srcdev-nuxt-forms 6.1.2 → 6.1.3

package/nuxt.config.ts

@@ -2,7 +2,6 @@
 
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  css: ["modern-normalize", "./app/assets/styles/main.css"],
   modules: ["@nuxt/eslint", "@nuxt/icon", "@nuxt/test-utils/module"],
   alias: {
     "#shared": "./shared",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "6.1.2",
+  "version": "6.1.3",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",

package/app/assets/styles/extends-layer/srcdev-forms/components/_form-fieldset.css

@@ -1,38 +0,0 @@
-.srcdev-forms-extended {
-  .form-fieldset {
-    margin: 0;
-    padding: 0;
-    border: 0;
-
-    &.single-checkbox-fieldset {
-    }
-
-    &.multiple-checkboxes-fieldset {
-    }
-
-    &.multiple-radiobuttons-fieldset {
-    }
-
-    .form-fieldset-legend {
-      color: var(--form-fieldset-legend-color);
-      margin-block: 0.8rem;
-      font-size: var(--step-5);
-      font-weight: normal;
-      line-height: 1.5;
-
-      &.has-description {
-        margin-bottom: 0;
-      }
-    }
-
-    .form-fieldset-description {
-      font-size: 1.6rem;
-      margin-top: 1.2rem;
-    }
-
-    .form-fieldset-content {
-      margin-block-start: 0;
-      margin-block-end: 0;
-    }
-  }
-}

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-button.css

@@ -1,66 +0,0 @@
-.srcdev-forms-extended {
-  .input-button-core {
-    gap: var(--form-button-icon-gap);
-    border-radius: var(--form-input-border-radius);
-
-    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);
-
-    box-shadow: var(--box-shadow-off);
-    background-color: var(--theme-button-surface);
-    border: var(--form-element-border-width) solid var(--theme-button-border);
-    color: var(--theme-button-text);
-    outline: var(--form-element-outline-width) solid var(--theme-button-outline);
-    outline-offset: var(--form-element-outline-offset-focus);
-
-    &:hover {
-      background-color: var(--theme-button-surface-hover);
-      border-color: var(--theme-input-border-hover);
-      color: var(--theme-button-text-hover);
-      outline-color: var(--theme-button-outline-hover);
-      outline-offset: var(--form-element-outline-offset-focus);
-    }
-
-    &:focus-visible {
-      background-color: var(--theme-button-surface-hover);
-      border-color: var(--theme-button-border-focus);
-      color: var(--theme-button-text-focus);
-      outline-color: var(--theme-button-outline-focus);
-      outline-offset: var(--form-element-outline-offset-focus);
-    }
-
-    &[readonly] {
-      opacity: 0.5;
-      &:hover,
-      &:focus-visible {
-        cursor: not-allowed;
-      }
-    }
-
-    &.icon-only {
-      aspect-ratio: 1;
-      height: var(--form-icon-only-button-size);
-      width: var(--form-icon-only-button-size);
-      margin: 0;
-      padding: 0;
-    }
-
-    .btn-text {
-      display: inline-block;
-      white-space: nowrap;
-      font-size: var(--form-element-font-size);
-      line-height: var(--form-element-line-height);
-    }
-
-    .btn-icon {
-      display: flex;
-      .icon {
-        aspect-ratio: 1;
-        display: inline-block;
-        height: var(--form-icon-size);
-        width: var(--form-icon-size);
-      }
-    }
-  }
-}

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-checkbox-radio-core.css

@@ -1,66 +0,0 @@
-.srcdev-forms-extended {
-  .input-checkbox-radio-wrapper {
-    background-color: var(--theme-checkbox-symbol-surface);
-    border: var(--form-element-border-width) solid var(--theme-input-border);
-    outline: var(--form-element-outline-width) solid var(--theme-input-outline);
-    box-shadow: var(--_box-shadow);
-
-    &.x-small {
-      --input-symbol-size: var(--step-3);
-    }
-
-    &.small {
-      --input-symbol-size: var(--step-4);
-    }
-
-    &.default {
-      --input-symbol-size: var(--step-7);
-    }
-
-    &.medium {
-      --input-symbol-size: var(--step-6);
-    }
-
-    &.large {
-      --input-symbol-size: var(--step-6);
-    }
-
-    &.checkbox {
-      border-radius: var(--form-input-border-radius);
-      &.button {
-        &.display-as-disc {
-          border-radius: 50%;
-        }
-      }
-    }
-
-    &.radio {
-      border-radius: 50%;
-    }
-
-    /* focus-visible */
-    &:not(.button):focus-within {
-      background-color: var(--theme-input-surface-focus);
-      outline-color: var(--theme-input-outline-focus);
-      outline-offset: var(--form-element-outline-offset-focus);
-    }
-
-    .input-checked-icon {
-      color: var(--theme-checkbox-symbol-color);
-      box-shadow: var(--_box-shadow);
-    }
-
-    .input-checkbox-radio-core {
-      margin: 0;
-      opacity: 0;
-
-      &:not(.is-button) {
-        &:focus-visible {
-          /* background-color: var(--theme-input-surface-focus);
-          outline-color: var(--theme-input-outline-focus);
-          outline-offset: var(--form-element-outline-offset-focus); */
-        }
-      }
-    }
-  }
-}

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-checkbox-radio-options-button.css

@@ -1,76 +0,0 @@
-.srcdev-forms-extended {
-  .input-checkbox-radio-options-button {
-    gap: 1rem;
-    border-radius: 1lh;
-
-    /* &.inline {} */
-
-    background-color: var(--theme-input-surface);
-    border: var(--form-element-border-width) solid var(--theme-input-border);
-    outline: var(--form-element-outline-width) solid var(--theme-input-outline);
-
-    box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem transparent;
-    padding-block: var(--input-checkbox-radio-options-padding-block);
-    padding-inline: var(--input-checkbox-radio-options-padding-inline);
-
-    &:hover {
-      background-color: var(--theme-input-surface-hover);
-      border-color: var(--theme-input-border);
-      outline-color: var(--theme-input-outline-hover);
-      outline-offset: var(--form-element-outline-offset-focus);
-    }
-
-    &:has(.input-checkbox-radio-core:focus-visible) {
-      background-color: var(--theme-input-surface-focus);
-      outline-color: var(--theme-input-outline-focus);
-      outline-offset: var(--form-element-outline-offset-focus);
-    }
-
-    /* Sizes */
-    &.x-small {
-      padding-block: 0.2rem;
-      padding-inline: 1.6rem;
-      gap: 1rem;
-    }
-    &.small {
-      padding-block: 0.2rem;
-      padding-inline: 1.6rem;
-      gap: 1rem;
-    }
-    &.default {
-      padding-block: 0.4rem;
-      padding-inline: 1.2rem;
-      gap: 1rem;
-    }
-    &.medium {
-      padding-block: 0.4rem;
-      padding-inline: 1.2rem;
-      gap: 1rem;
-    }
-    &.large {
-      padding-block: 0.4rem;
-      padding-inline: 1.2rem;
-      gap: 1rem;
-    }
-
-    .input-checkbox-radio-options-button-label {
-      color: var(--theme-checkbox-label-text-color);
-      font-size: var(--form-element-font-size);
-      min-height: var(--form-element-line-height);
-      padding-block: 0.8rem;
-      padding-inline: 0.8rem;
-
-      &:hover {
-      }
-    }
-
-    .decorator-icon {
-      color: var(--theme-checkbox-symbol-color);
-
-      .icon {
-        height: var(--theme-checkbox-decorator-icon-size);
-        width: var(--theme-checkbox-decorator-icon-size);
-      }
-    }
-  }
-}

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-description.css

@@ -1,13 +0,0 @@
-.srcdev-forms-extended {
-  .input-description {
-    .input-description-html {
-      margin-block: 0.4rem 0.8rem;
-    }
-    .input-description-text {
-      color: var(--form-description-color);
-      font-size: var(--step-4);
-      margin-block: 0.4rem 0.8rem;
-      line-height: var(--step-4);
-    }
-  }
-}

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-error.css

@@ -1,54 +0,0 @@
-.srcdev-forms-extended {
-  .input-error-message {
-    color: var(--input-error-color);
-    background-color: var(--theme-error-surface);
-
-    &.show {
-      border: var(--form-element-border-width) solid var(--theme-error-surface);
-      border-bottom-left-radius: var(--form-input-border-radius-underlined);
-      border-bottom-right-radius: var(--form-input-border-radius-underlined);
-
-      &.detached {
-        border-top: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-right: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-bottom: var(--form-element-border-width) solid var(--red-8);
-        border-left: var(--form-element-border-width) solid var(--theme-error-surface);
-
-        border-radius: var(--form-input-border-radius);
-      }
-    }
-
-    .inner {
-      .inner-content {
-        .inner-icon {
-          padding-left: 1.2rem;
-
-          .icon {
-            color: white;
-          }
-        }
-
-        .message {
-          font-size: 1.6rem;
-          font-weight: 500;
-          padding-block: 1.2rem 1rem;
-          padding-inline: 1.2rem;
-
-          .message-single {
-            color: white;
-          }
-
-          .message-list {
-            .message-list-item {
-              color: white;
-            }
-
-            .message-list-item + .message-list-item {
-              margin-block-start: 0.6rem;
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-label.css

@@ -1,21 +0,0 @@
-.srcdev-forms-extended {
-  .input-label {
-    &.normal {
-      color: var(--form-label-color);
-      margin-block: 0.8rem;
-      font-size: var(--step-5);
-      font-weight: normal;
-      line-height: 1.5;
-      display: block;
-    }
-
-    &.underlined {
-      color: var(--form-label-color);
-      margin-block: 0.8rem;
-      font-size: var(--step-5);
-      font-weight: normal;
-      line-height: 1.5;
-      display: block;
-    }
-  }
-}

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-select.css

@@ -1,140 +0,0 @@
-.srcdev-forms-extended {
-  .input-select-wrapper {
-    background-color: var(--theme-input-surface);
-
-    background-color: var(--theme-input-surface);
-
-    &:hover {
-      background-color: var(--theme-input-surface-hover);
-    }
-
-    &:focus-within {
-      background-color: var(--theme-input-surface-hover);
-      outline: var(--theme-focus-visible-outline);
-      box-shadow: var(--theme-focus-visible-shadow);
-    }
-
-    &.normal {
-      outline: var(--form-element-outline-width) solid var(--theme-input-outline);
-
-      border-top-left-radius: var(--form-input-border-radius);
-      border-top-right-radius: var(--form-input-border-radius);
-      border-bottom-left-radius: var(--form-input-border-radius);
-      border-bottom-right-radius: var(--form-input-border-radius);
-
-      border-top: var(--form-element-border-width) solid var(--theme-input-border);
-      border-right: var(--form-element-border-width) solid var(--theme-input-border);
-      border-bottom: var(--form-element-border-width) solid var(--theme-input-border);
-      border-left: var(--form-element-border-width) solid var(--theme-input-border);
-
-      &:focus-within {
-        outline-color: var(--theme-input-outline-focus);
-        outline-offset: var(--form-element-outline-offset-focus);
-      }
-
-      &.error {
-        border-color: var(--theme-error-surface);
-      }
-    }
-
-    &.underlined {
-      margin-block-start: 0;
-      padding-block: 0;
-
-      outline: var(--form-element-outline-width) solid transparent;
-
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      border-bottom-left-radius: var(--form-input-border-radius-underlined);
-      border-bottom-right-radius: var(--form-input-border-radius-underlined);
-
-      border-top: var(--form-element-border-width) solid transparent;
-      border-right: var(--form-element-border-width) solid transparent;
-      border-bottom: var(--form-element-border-width-underlined) solid var(--theme-input-border);
-      border-left: var(--form-element-border-width) solid transparent;
-
-      &.error {
-        outline-color: var(--theme-error-surface);
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-
-        border-top: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-right: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-bottom: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-left: var(--form-element-border-width) solid var(--theme-error-surface);
-      }
-    }
-
-    .input-select-core {
-      appearance: none;
-      background-color: transparent;
-
-      /* For legacy support - eg, Safari */
-      /* &::after {
-      content: '';
-      width: 0.8em;
-      height: 0.5em;
-      background-color: var(--theme-input-border);
-      clip-path: polygon(100% 0%, 0 0%, 50% 100%);
-    } */
-
-      /* Start modern Select CSS */
-      &,
-      &::picker(select) {
-        appearance: base-select;
-      }
-
-      &::picker(select) {
-        transition: display allow-discrete var(--theme-form-transition-duration), opacity var(--theme-form-transition-duration), overlay var(--theme-form-transition-duration) allow-discrete;
-      }
-
-      &:not(:open)::picker(select) {
-        opacity: 0;
-      }
-
-      &:open::picker(select) {
-        opacity: 1;
-        border: var(--form-element-border-width) solid var(--theme-input-border);
-        outline: var(--form-element-outline-width) solid var(--_input-select-outline-color);
-
-        @starting-style {
-          opacity: 0;
-        }
-      }
-
-      border: none;
-      outline: none;
-      border-radius: 0;
-      width: 100%;
-
-      &:hover {
-        background-color: var(--theme-input-surface-hover);
-      }
-
-      /* END modern Select CSS */
-
-      font-family: var(--font-family);
-      font-size: var(--form-element-font-size);
-      line-height: var(--form-element-line-height);
-      padding-block: 1.5rem;
-      padding-inline: 1rem;
-
-      .input-select-core-option {
-        padding-block: 1rem;
-        padding-inline: 1.75rem;
-        gap: 1.5rem;
-        transition: all var(--theme-form-transition-duration) ease-in-out;
-
-        &:hover {
-          background-color: var(--theme-input-surface-hover);
-        }
-
-        .input-select-core-option-decorator-icon {
-          display: inline-block;
-          width: 1.5rem;
-          height: 1.5rem;
-        }
-      }
-    }
-  }
-}

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-text.css

@@ -1,190 +0,0 @@
-.srcdev-forms-extended {
-  .input-text-wrapper {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    background-color: var(--theme-input-surface);
-    transition: all var(--theme-form-transition-duration) ease-in-out;
-
-    &:hover {
-      background-color: var(--theme-input-surface-hover);
-    }
-
-    &:focus-within {
-      background-color: var(--theme-input-surface-hover);
-      outline: var(--theme-focus-visible-outline);
-      box-shadow: var(--theme-focus-visible-shadow);
-    }
-
-    &.normal {
-      outline: var(--form-element-outline-width) solid var(--theme-input-outline);
-
-      border-radius: var(--form-input-border-radius);
-
-      border-top: var(--form-element-border-width) solid var(--theme-input-border);
-      border-right: var(--form-element-border-width) solid var(--theme-input-border);
-      border-bottom: var(--form-element-border-width) solid var(--theme-input-border);
-      border-left: var(--form-element-border-width) solid var(--theme-input-border);
-
-      padding-inline: 1rem;
-
-      &:focus-within {
-        outline-color: var(--theme-input-outline-focus);
-        outline-offset: var(--form-element-outline-offset-focus);
-      }
-
-      &.error {
-        border-color: var(--theme-error-surface);
-        outline-color: var(--theme-error-surface);
-      }
-
-      .slot {
-        display: flex;
-        place-items: center;
-        background-clip: padding-box;
-
-        &.left-slot:not([data-theme='input-action']) {
-          .icon {
-            width: 2.2rem;
-            height: 2.2rem;
-          }
-
-          [data-theme='input-action'] {
-            width: initial;
-            height: initial;
-            padding: 0.5rem;
-
-            .icon {
-              width: 1.8rem;
-              height: 1.8rem;
-            }
-          }
-        }
-        &.right-slot:not([data-theme='input-action']) {
-          .icon {
-            width: 2.2rem;
-            height: 2.2rem;
-          }
-
-          [data-theme='input-action'] {
-            width: initial;
-            height: initial;
-            padding: 0.5rem;
-
-            .icon {
-              width: 1.8rem;
-              height: 1.8rem;
-            }
-          }
-        }
-      }
-
-      &[data-inputmode='numeric'] {
-        padding-block: 0rem;
-        padding-inline: 0.75rem;
-
-        .slot {
-          [data-theme='input-action'] {
-            width: initial;
-            height: initial;
-            padding: 0.5rem;
-
-            .icon {
-              width: 1.8rem;
-              height: 1.8rem;
-            }
-          }
-        }
-      }
-    }
-
-    &.underlined {
-      margin-block-start: 0;
-      padding-block: 0;
-      padding-inline: 1rem;
-
-      outline: var(--form-element-outline-width) solid transparent;
-
-      border-bottom-left-radius: var(--form-input-border-radius-underlined);
-      border-bottom-right-radius: var(--form-input-border-radius-underlined);
-
-      border-top: none;
-      border-right: none;
-      border-bottom: var(--form-element-border-width-underlined) solid var(--theme-input-border);
-      border-left: none;
-
-      overflow: hidden;
-
-      &.error {
-        outline-color: var(--theme-error-surface);
-        border-bottom-right-radius: var(--form-input-border-radius-underlined);
-        border-bottom-left-radius: var(--form-input-border-radius-underlined);
-
-        border-top: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-right: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-bottom: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-left: var(--form-element-border-width) solid var(--theme-error-surface);
-      }
-
-      .slot {
-        display: flex;
-        place-items: center;
-        background-clip: padding-box;
-
-        &.left-slot:not([data-theme='input-action-underlined']) {
-          .icon {
-            width: 2.2rem;
-            height: 2.2rem;
-          }
-
-          [data-theme='input-action-underlined'] {
-            width: initial;
-            height: initial;
-            padding: 0.5rem;
-
-            .icon {
-              width: 1.8rem;
-              height: 1.8rem;
-            }
-          }
-        }
-        &.right-slot:not([data-theme='input-action-underlined']) {
-          .icon {
-            width: 2.2rem;
-            height: 2.2rem;
-          }
-
-          [data-theme='input-action-underlined'] {
-            width: initial;
-            height: initial;
-            padding: 0.5rem;
-
-            .icon {
-              width: 1.8rem;
-              height: 1.8rem;
-            }
-          }
-        }
-      }
-    }
-
-    .input-text-core {
-      all: unset;
-      flex-grow: 1;
-
-      font-family: var(--font-family);
-      font-size: var(--form-element-font-size);
-      line-height: var(--form-element-line-height);
-      padding-block: var(--input-element-padding-block);
-      padding-inline: 1rem;
-
-      &::placeholder {
-        color: var(--theme-input-placeholder);
-        font-size: var(--theme-input-placeholder-font-size);
-        font-style: italic;
-        line-height: 1;
-        font-weight: normal;
-      }
-    }
-  }
-}