@vsn-ux/gaia-styles 0.2.0 → 0.2.1

package/dist/all-no-reset-10pt.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.0.8 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
 :root {
   --ga-color-blue-10: #edf4fe;
   --ga-color-blue-40: #93bbf9;
@@ -479,6 +479,98 @@
       }
     }
   }
+  .ga-dropdown {
+    display: flex;
+    min-width: calc(0.4rem * 36);
+    flex-direction: column;
+    align-items: stretch;
+    border-radius: var(--ga-radius);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--ga-color-border-primary);
+    background-color: var(--ga-color-surface-primary);
+    --tw-outline-style: none;
+    outline-style: none;
+    .ga-dropdown__item {
+      position: relative;
+      display: flex;
+      height: calc(0.4rem * 9);
+      cursor: pointer;
+      flex-direction: row;
+      align-items: center;
+      gap: calc(0.4rem * 2);
+      padding-inline: calc(0.4rem * 3);
+      padding-block: calc(0.4rem * 2);
+      text-align: left;
+      font-size: var(--ga-size-font-md);
+      line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+      letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
+      --tw-leading: 1;
+      line-height: 1;
+      color: var(--ga-color-text-action);
+      &:first-child {
+        border-top-left-radius: var(--ga-radius);
+        border-top-right-radius: var(--ga-radius);
+      }
+      &:last-child {
+        border-bottom-right-radius: var(--ga-radius);
+        border-bottom-left-radius: var(--ga-radius);
+      }
+      &:focus {
+        --tw-outline-style: none;
+        outline-style: none;
+      }
+      &:hover, &:active {
+        background-color: var(--ga-color-surface-action-hover-2);
+        color: var(--ga-color-text-action-hover);
+      }
+      &.ga-dropdown__item--disabled {
+        cursor: default;
+        background-color: var(--ga-color-surface-disabled);
+        color: var(--ga-color-text-disable-selected);
+      }
+      &.ga-dropdown__item--selected {
+        background-color: var(--ga-color-surface-success);
+        --tw-font-weight: 600;
+        font-weight: 600;
+        color: var(--ga-color-text-body);
+        &.ga-dropdown__item--disabled {
+          background-color: var(--ga-color-surface-disable-selected);
+          color: var(--ga-color-text-on-action);
+        }
+      }
+    }
+    &:not(:focus-within) .ga-dropdown__item.ga-dropdown__item--active, .ga-dropdown__item:focus-visible {
+      &::after {
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        height: calc(100% - 4px);
+        width: calc(100% - 4px);
+        border-radius: var(--ga-radius);
+        border-style: var(--tw-border-style);
+        border-width: 2px;
+        border-color: var(--ga-color-border-focus);
+        --tw-content: '';
+        content: var(--tw-content);
+      }
+    }
+    .ga-dropdown__caption {
+      padding-inline: calc(0.4rem * 3);
+      padding-top: calc(0.4rem * 3);
+      padding-bottom: calc(0.4rem * 2);
+      font-size: var(--ga-size-font-sm);
+      line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+      letter-spacing: var(--tw-tracking, 0);
+      --tw-font-weight: 600;
+      font-weight: 600;
+    }
+    .ga-dropdown__content-spinner {
+      margin-inline: auto;
+      margin-block: calc(0.4rem * 8);
+      display: inline-flex;
+    }
+  }
   .ga-form-field {
     display: flex;
     flex-direction: column;
@@ -786,6 +878,9 @@
       letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
       --tw-leading: calc(0.4rem * 4);
       line-height: calc(0.4rem * 4);
+      &:empty {
+        display: none;
+      }
     }
   }
   .ga-segmented-control {
@@ -850,6 +945,117 @@
       }
     }
   }
+  .ga-native-select {
+    position: relative;
+    select {
+      height: calc(0.4rem * 10);
+      appearance: none;
+      border-radius: var(--ga-radius);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: var(--ga-color-border-primary);
+      background-color: var(--ga-color-surface-primary);
+      padding-block: calc(0.4rem * 2);
+      padding-right: calc(0.4rem * 9);
+      padding-left: calc(0.4rem * 3);
+      font-size: var(--ga-size-font-md);
+      line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+      letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
+      --tw-leading: 1;
+      line-height: 1;
+    }
+    .ga-native-select__arrow {
+      pointer-events: none;
+      position: absolute;
+      top: calc(1/2 * 100%);
+      right: calc(0.4rem * 2);
+      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .ga-select {
+    display: inline-flex;
+    height: calc(0.4rem * 10);
+    width: calc(0.4rem * 50);
+    cursor: pointer;
+    appearance: none;
+    align-items: center;
+    gap: calc(0.4rem * 2);
+    border-radius: var(--ga-radius);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--ga-color-border-primary);
+    background-color: var(--ga-color-surface-primary);
+    padding-block: calc(0.4rem * 2);
+    padding-right: calc(0.4rem * 2);
+    padding-left: calc(0.4rem * 3);
+    text-align: left;
+    font-size: var(--ga-size-font-md);
+    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+    letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
+    --tw-leading: 1;
+    line-height: 1;
+    &.ga-select--expanded {
+      border-color: var(--ga-color-border-focus);
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+      outline-color: var(--ga-color-border-focus);
+    }
+    &:hover {
+      border-color: var(--ga-color-border-action-hover);
+      &:not(.ga-select--empty, .ga-select--disabled) {
+        background-color: var(--ga-color-surface-action-hover-2);
+      }
+    }
+    &.ga-select--disabled {
+      cursor: not-allowed;
+      border-color: var(--ga-color-border-primary);
+      background-color: var(--ga-color-surface-disabled);
+      color: var(--ga-color-text-disable-selected);
+    }
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 2px;
+      outline-color: var(--ga-color-border-focus);
+    }
+    &.ga-select--invalid {
+      border-color: var(--ga-color-border-error);
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+      outline-color: var(--ga-color-border-error);
+      &:not(.ga-select--empty) {
+        background-color: var(--ga-color-surface-error);
+      }
+    }
+    .ga-select__placeholder {
+      min-width: calc(0.4rem * 0);
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: var(--ga-color-text-disabled);
+    }
+    .ga-select__value {
+      min-width: calc(0.4rem * 0);
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .ga-select__input {
+      height: calc(0.4rem * 6);
+      min-width: calc(0.4rem * 0);
+      flex: 1;
+      --tw-leading: calc(0.4rem * 6);
+      line-height: calc(0.4rem * 6);
+      --tw-outline-style: none;
+      outline-style: none;
+      &:is(input)::placeholder {
+        color: var(--ga-color-text-disabled);
+      }
+    }
+  }
   .ga-text-area {
     display: flex;
     width: calc(0.4rem * 50);
@@ -1068,6 +1274,11 @@
   inherits: false;
   initial-value: solid;
 }
+@property --tw-content {
+  syntax: "*";
+  inherits: false;
+  initial-value: "";
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -1083,8 +1294,3 @@
   inherits: false;
   initial-value: 0;
 }
-@property --tw-content {
-  syntax: "*";
-  inherits: false;
-  initial-value: "";
-}

package/dist/all-no-reset.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.0.8 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
 :root {
   --ga-color-blue-10: #edf4fe;
   --ga-color-blue-40: #93bbf9;
@@ -479,6 +479,98 @@
       }
     }
   }
+  .ga-dropdown {
+    display: flex;
+    min-width: calc(0.25rem * 36);
+    flex-direction: column;
+    align-items: stretch;
+    border-radius: var(--ga-radius);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--ga-color-border-primary);
+    background-color: var(--ga-color-surface-primary);
+    --tw-outline-style: none;
+    outline-style: none;
+    .ga-dropdown__item {
+      position: relative;
+      display: flex;
+      height: calc(0.25rem * 9);
+      cursor: pointer;
+      flex-direction: row;
+      align-items: center;
+      gap: calc(0.25rem * 2);
+      padding-inline: calc(0.25rem * 3);
+      padding-block: calc(0.25rem * 2);
+      text-align: left;
+      font-size: var(--ga-size-font-md);
+      line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+      letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
+      --tw-leading: 1;
+      line-height: 1;
+      color: var(--ga-color-text-action);
+      &:first-child {
+        border-top-left-radius: var(--ga-radius);
+        border-top-right-radius: var(--ga-radius);
+      }
+      &:last-child {
+        border-bottom-right-radius: var(--ga-radius);
+        border-bottom-left-radius: var(--ga-radius);
+      }
+      &:focus {
+        --tw-outline-style: none;
+        outline-style: none;
+      }
+      &:hover, &:active {
+        background-color: var(--ga-color-surface-action-hover-2);
+        color: var(--ga-color-text-action-hover);
+      }
+      &.ga-dropdown__item--disabled {
+        cursor: default;
+        background-color: var(--ga-color-surface-disabled);
+        color: var(--ga-color-text-disable-selected);
+      }
+      &.ga-dropdown__item--selected {
+        background-color: var(--ga-color-surface-success);
+        --tw-font-weight: 600;
+        font-weight: 600;
+        color: var(--ga-color-text-body);
+        &.ga-dropdown__item--disabled {
+          background-color: var(--ga-color-surface-disable-selected);
+          color: var(--ga-color-text-on-action);
+        }
+      }
+    }
+    &:not(:focus-within) .ga-dropdown__item.ga-dropdown__item--active, .ga-dropdown__item:focus-visible {
+      &::after {
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        height: calc(100% - 4px);
+        width: calc(100% - 4px);
+        border-radius: var(--ga-radius);
+        border-style: var(--tw-border-style);
+        border-width: 2px;
+        border-color: var(--ga-color-border-focus);
+        --tw-content: '';
+        content: var(--tw-content);
+      }
+    }
+    .ga-dropdown__caption {
+      padding-inline: calc(0.25rem * 3);
+      padding-top: calc(0.25rem * 3);
+      padding-bottom: calc(0.25rem * 2);
+      font-size: var(--ga-size-font-sm);
+      line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+      letter-spacing: var(--tw-tracking, 0);
+      --tw-font-weight: 600;
+      font-weight: 600;
+    }
+    .ga-dropdown__content-spinner {
+      margin-inline: auto;
+      margin-block: calc(0.25rem * 8);
+      display: inline-flex;
+    }
+  }
   .ga-form-field {
     display: flex;
     flex-direction: column;
@@ -786,6 +878,9 @@
       letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
       --tw-leading: calc(0.25rem * 4);
       line-height: calc(0.25rem * 4);
+      &:empty {
+        display: none;
+      }
     }
   }
   .ga-segmented-control {
@@ -850,6 +945,117 @@
       }
     }
   }
+  .ga-native-select {
+    position: relative;
+    select {
+      height: calc(0.25rem * 10);
+      appearance: none;
+      border-radius: var(--ga-radius);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: var(--ga-color-border-primary);
+      background-color: var(--ga-color-surface-primary);
+      padding-block: calc(0.25rem * 2);
+      padding-right: calc(0.25rem * 9);
+      padding-left: calc(0.25rem * 3);
+      font-size: var(--ga-size-font-md);
+      line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+      letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
+      --tw-leading: 1;
+      line-height: 1;
+    }
+    .ga-native-select__arrow {
+      pointer-events: none;
+      position: absolute;
+      top: calc(1/2 * 100%);
+      right: calc(0.25rem * 2);
+      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .ga-select {
+    display: inline-flex;
+    height: calc(0.25rem * 10);
+    width: calc(0.25rem * 50);
+    cursor: pointer;
+    appearance: none;
+    align-items: center;
+    gap: calc(0.25rem * 2);
+    border-radius: var(--ga-radius);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--ga-color-border-primary);
+    background-color: var(--ga-color-surface-primary);
+    padding-block: calc(0.25rem * 2);
+    padding-right: calc(0.25rem * 2);
+    padding-left: calc(0.25rem * 3);
+    text-align: left;
+    font-size: var(--ga-size-font-md);
+    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+    letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
+    --tw-leading: 1;
+    line-height: 1;
+    &.ga-select--expanded {
+      border-color: var(--ga-color-border-focus);
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+      outline-color: var(--ga-color-border-focus);
+    }
+    &:hover {
+      border-color: var(--ga-color-border-action-hover);
+      &:not(.ga-select--empty, .ga-select--disabled) {
+        background-color: var(--ga-color-surface-action-hover-2);
+      }
+    }
+    &.ga-select--disabled {
+      cursor: not-allowed;
+      border-color: var(--ga-color-border-primary);
+      background-color: var(--ga-color-surface-disabled);
+      color: var(--ga-color-text-disable-selected);
+    }
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 2px;
+      outline-color: var(--ga-color-border-focus);
+    }
+    &.ga-select--invalid {
+      border-color: var(--ga-color-border-error);
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+      outline-color: var(--ga-color-border-error);
+      &:not(.ga-select--empty) {
+        background-color: var(--ga-color-surface-error);
+      }
+    }
+    .ga-select__placeholder {
+      min-width: calc(0.25rem * 0);
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: var(--ga-color-text-disabled);
+    }
+    .ga-select__value {
+      min-width: calc(0.25rem * 0);
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .ga-select__input {
+      height: calc(0.25rem * 6);
+      min-width: calc(0.25rem * 0);
+      flex: 1;
+      --tw-leading: calc(0.25rem * 6);
+      line-height: calc(0.25rem * 6);
+      --tw-outline-style: none;
+      outline-style: none;
+      &:is(input)::placeholder {
+        color: var(--ga-color-text-disabled);
+      }
+    }
+  }
   .ga-text-area {
     display: flex;
     width: calc(0.25rem * 50);
@@ -1068,6 +1274,11 @@
   inherits: false;
   initial-value: solid;
 }
+@property --tw-content {
+  syntax: "*";
+  inherits: false;
+  initial-value: "";
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -1083,8 +1294,3 @@
   inherits: false;
   initial-value: 0;
 }
-@property --tw-content {
-  syntax: "*";
-  inherits: false;
-  initial-value: "";
-}