srcdev-nuxt-components 8.0.3 → 9.0.1

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

@@ -0,0 +1,74 @@
+.srcdev-forms-extended {
+  .input-checkbox-radio-options-button {
+    gap: 1rem;
+    border-radius: 0.4rem;
+
+    /* &.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;
+
+    &: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.6rem;
+      padding-inline: 1rem;
+      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(--input-element-line-height);
+      padding-block: 0.8rem;
+      padding-inline: 0.8rem;
+
+      &:hover {
+      }
+    }
+
+    .decorator-icon {
+      color: var(--theme-checkbox-decorator-color);
+
+      .icon {
+        height: var(--input-checkbox-decorator-icon-size);
+        width: var(--input-checkbox-decorator-icon-size);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+.srcdev-forms-extended {
+  .input-checkbox-radio-with-label {
+    &:hover {
+      text-decoration: underline;
+
+      .input-checkbox-radio-wrapper {
+        /* Duplicate within _input-checkbox-radio-core.css */
+        background-color: var(--theme-input-surface-hover);
+        outline-color: var(--theme-input-outline-hover);
+        outline-offset: var(--form-element-outline-offset-hover);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+.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

@@ -0,0 +1,54 @@
+.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-08);
+        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

@@ -0,0 +1,21 @@
+.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

@@ -0,0 +1,143 @@
+.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: none;
+      border-right: none;
+      border-bottom: var(--form-element-border-width-underlined) solid var(--theme-input-border);
+      border-left: none;
+
+      &.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(--input-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

@@ -0,0 +1,190 @@
+.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(--input-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;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,96 @@
+.srcdev-forms-extended {
+  .input-textarea-wrapper {
+    /* Custom placeholder styles */
+    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);
+
+      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);
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+
+    &:hover {
+      /* Custom placeholder styles */
+    }
+
+    .slot {
+      /* Custom placeholder styles */
+
+      &.left-slot {
+        /* Custom placeholder styles */
+      }
+      &.right-slot {
+        /* Custom placeholder styles */
+      }
+    }
+
+    .input-textarea-core {
+      min-height: 4rem;
+
+      &::placeholder {
+        color: var(--theme-input-placeholder);
+        font-size: var(--theme-input-placeholder-font-size);
+        font-style: italic;
+        line-height: 1;
+        font-weight: normal;
+      }
+    }
+
+    &.underlined {
+      margin-block-start: 0;
+      padding-block: 0;
+      padding-inline: 0.6rem;
+
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      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 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 {
+        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);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,68 @@
+.srcdev-forms-extended {
+  .toggle-switch-core {
+    .toggle-switch-wrapper {
+      --_icon-on-opacity: 0;
+      --_icon-off-opacity: 1;
+      --_icon-font-size: 2.4rem;
+      --_symbol-size: 3.4rem;
+      --_symbol-background-color: var(--blue-10);
+      --_symbol-margin-inline-start: 0;
+      --_symbol-checked-offset: calc(var(--_symbol-size) * 0.75);
+
+      /* New vars */
+      --_switch-padding: 0.2rem;
+      --_toggle-symbol-border-width: 0.1rem;
+
+      &.use-default-icons {
+      }
+
+      display: flex;
+      flex-direction: column;
+
+      .symbol-wrapper {
+        background-color: var(--theme-toggle-wrapper-surface-color);
+        border: var(--form-element-border-width) solid var(--theme-input-border);
+        outline: var(--form-element-outline-width) solid var(--theme-input-outline);
+        border-radius: calc(
+          var(--_symbol-size) + calc(var(--_toggle-symbol-border-width) * 2) + calc(var(--_switch-padding) * 2)
+        );
+        width: calc(var(--_symbol-size) * 2);
+        height: calc(
+          var(--_symbol-size) + calc(var(--_toggle-symbol-border-width) * 5) + calc(var(--_switch-padding) * 2)
+        );
+        padding: var(--_switch-padding);
+
+        &:hover {
+          background-color: var(--theme-toggle-wrapper-surface-color-hover);
+        }
+
+        .symbol {
+          padding: calc(calc(var(--_symbol-size) - var(--_icon-font-size)) / 2);
+          border: 0.1rem solid var(--theme-toggle-symbol-border-color);
+          outline: 0.1rem solid var(--theme-toggle-symbol-outline-color);
+          border-radius: 50%;
+          background-color: var(--theme-toggle-symbol-surface-color);
+          transition: left 0.4s ease;
+
+          .symbol-icon {
+            color: var(--theme-toggle-symbol-icon-color);
+            font-size: var(--_icon-font-size);
+            transition: opacity var(--theme-form-transition-duration);
+
+            &.active {
+              /* opacity: 1; */
+            }
+
+            &.icon-off {
+              /* color: red; */
+            }
+
+            &.icon-on {
+              /* color: green; */
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+@import "./_input-error";
+@import "./_input-select";
+@import "./_input-label";
+@import "./_input-description";
+@import "./_input-textarea";
+@import "./_input-text";
+@import "./_input-checkbox-radio-core";
+@import "./_input-button";
+@import "./_input-checkbox-radio-options-button";
+@import "./_input-checkbox-radio-with-label";
+@import "./_input-toggle-switch";
+@import "./_form-fieldset";

package/app/assets/styles/extends-layer/srcdev-forms/index.css

@@ -0,0 +1,2 @@
+@import './setup/';
+@import './components/';