@1337exp/taoui 1.1.1 → 1.2.2

package/dist/styles.css

@@ -1779,6 +1779,131 @@ to {
     transform: rotate(180deg);
 }
 
+.tao-combobox__panel {
+    z-index: 1050;
+    position: fixed;
+    overflow: hidden;
+    background: var(--tao-color-surface-raised);
+    color: var(--tao-color-text);
+    border: 1px solid var(--tao-color-border);
+    border-radius: var(--tao-radius-control);
+    box-shadow: var(--tao-shadow-overlay);
+}
+.tao-combobox__list {
+    margin: 0;
+    padding: var(--tao-space-1);
+    max-height: 240px;
+    overflow: auto;
+    list-style: none;
+}
+.tao-combobox__empty {
+    padding: var(--tao-space-2) var(--tao-space-3);
+    color: var(--tao-color-text-muted);
+    font-size: var(--tao-font-size-sm);
+}
+.tao-combobox__clear {
+    display: block;
+    width: 100%;
+    margin: 0;
+    padding: var(--tao-space-2) var(--tao-space-3);
+    border: none;
+    border-top: 1px solid var(--tao-color-border);
+    background: none;
+    color: var(--tao-color-text-muted);
+    font: inherit;
+    font-size: var(--tao-font-size-sm);
+    text-align: left;
+    cursor: pointer;
+}
+.tao-combobox__clear:hover {
+    color: var(--tao-color-accent);
+    background: var(--tao-color-surface-hover);
+}
+.tao-combobox__option {
+    padding: var(--tao-space-2) var(--tao-space-3);
+    border-radius: var(--tao-radius-sm);
+    font-size: var(--tao-font-size-md);
+    cursor: pointer;
+    user-select: none;
+}
+.tao-combobox__option--active,
+.tao-combobox__option:hover:not(.tao-combobox__option--disabled) {
+    background: var(--tao-color-surface-hover);
+}
+.tao-combobox__option--selected {
+    color: var(--tao-color-accent);
+}
+.tao-combobox__option--create {
+    color: var(--tao-color-accent);
+}
+.tao-combobox__option--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.tao-combobox[data-v-adeb76a4] {
+    width: 100%;
+}
+.tao-combobox__field[data-v-adeb76a4] {
+    display: flex;
+    align-items: center;
+    gap: var(--tao-space-2);
+    width: 100%;
+    min-height: 36px;
+    padding: 0 var(--tao-space-3);
+    border: 1px solid var(--tao-color-border-strong);
+    border-radius: var(--tao-radius-control);
+    background: var(--tao-color-input-bg);
+    color: var(--tao-color-input-text);
+    transition: var(--tao-transition-base);
+}
+.tao-combobox__field[data-v-adeb76a4]:focus-within {
+    border-color: var(--tao-color-accent);
+    box-shadow: 0 0 0 2px var(--tao-color-accent-subtle-hover);
+}
+.tao-combobox--invalid .tao-combobox__field[data-v-adeb76a4] {
+    border-color: var(--tao-color-danger);
+}
+.tao-combobox--invalid .tao-combobox__field[data-v-adeb76a4]:focus-within {
+    box-shadow: 0 0 0 2px var(--tao-color-danger-subtle);
+}
+.tao-combobox__input[data-v-adeb76a4] {
+    flex: 1;
+    min-width: 0;
+    height: 34px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: inherit;
+    font-size: var(--tao-font-size-md);
+    font-family: inherit;
+    outline: none;
+}
+.tao-combobox__input[data-v-adeb76a4]::placeholder {
+    color: var(--tao-color-input-placeholder);
+}
+.tao-combobox__input[data-v-adeb76a4]:disabled {
+    cursor: not-allowed;
+}
+.tao-combobox--disabled .tao-combobox__field[data-v-adeb76a4] {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+.tao-combobox__chevron[data-v-adeb76a4] {
+    flex-shrink: 0;
+    width: 0;
+    height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 5px solid currentColor;
+    opacity: 0.6;
+    pointer-events: none;
+    transition: transform var(--tao-duration-fast) var(--tao-ease-base);
+}
+.tao-combobox--open .tao-combobox__chevron[data-v-adeb76a4] {
+    transform: rotate(180deg);
+}
+
 .tao-date__panel {
     z-index: 1050;
     position: fixed;
@@ -2749,19 +2874,19 @@ to {
 }
 }
 
-.tao-carousel[data-v-173f4ce0] {
+.tao-carousel[data-v-81afb8b0] {
     display: flex;
     flex-direction: column;
     gap: var(--tao-space-2);
     width: 100%;
 }
-.tao-carousel__row[data-v-173f4ce0] {
+.tao-carousel__row[data-v-81afb8b0] {
     display: flex;
     align-items: center;
     gap: var(--tao-space-2);
     width: 100%;
 }
-.tao-carousel__track[data-v-173f4ce0] {
+.tao-carousel__track[data-v-81afb8b0] {
     display: flex;
     flex: 1 1 auto;
     gap: var(--tao-space-3);
@@ -2775,18 +2900,18 @@ to {
     touch-action: pan-x;
     cursor: grab;
 }
-.tao-carousel__track[data-v-173f4ce0]::-webkit-scrollbar {
+.tao-carousel__track[data-v-81afb8b0]::-webkit-scrollbar {
     display: none;
 }
-.tao-carousel__track--dragging[data-v-173f4ce0] {
+.tao-carousel__track--dragging[data-v-81afb8b0] {
     scroll-snap-type: none;
     cursor: grabbing;
 }
-.tao-carousel__track[data-v-173f4ce0]:focus-visible {
+.tao-carousel__track[data-v-81afb8b0]:focus-visible {
     outline: 2px solid var(--tao-color-accent);
     outline-offset: 2px;
 }
-.tao-carousel__track[data-v-173f4ce0] >  * {
+.tao-carousel__track[data-v-81afb8b0] >  * {
     box-sizing: border-box;
     flex: 0 0 auto;
     width: max(
@@ -2799,7 +2924,7 @@ to {
     min-width: 0;
     scroll-snap-align: start;
 }
-.tao-carousel__nav[data-v-173f4ce0] {
+.tao-carousel__nav[data-v-81afb8b0] {
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
@@ -2818,29 +2943,29 @@ to {
     cursor: pointer;
     transition: var(--tao-transition-base);
 }
-.tao-carousel__nav svg[data-v-173f4ce0] {
+.tao-carousel__nav svg[data-v-81afb8b0] {
     display: block;
 }
-.tao-carousel__nav[data-v-173f4ce0]:hover:not(:disabled) {
+.tao-carousel__nav[data-v-81afb8b0]:hover:not(:disabled) {
     background: var(--tao-color-surface-hover);
     color: var(--tao-color-text-strong);
 }
-.tao-carousel__nav[data-v-173f4ce0]:focus-visible {
+.tao-carousel__nav[data-v-81afb8b0]:focus-visible {
     outline: 2px solid var(--tao-color-accent);
     outline-offset: 2px;
 }
-.tao-carousel__nav[data-v-173f4ce0]:disabled {
+.tao-carousel__nav[data-v-81afb8b0]:disabled {
     opacity: 0.4;
     cursor: not-allowed;
 }
-.tao-carousel__dots[data-v-173f4ce0] {
+.tao-carousel__dots[data-v-81afb8b0] {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     gap: 2px;
 }
-.tao-carousel__dot[data-v-173f4ce0] {
+.tao-carousel__dot[data-v-81afb8b0] {
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
@@ -2853,7 +2978,7 @@ to {
     background: transparent;
     cursor: pointer;
 }
-.tao-carousel__pip[data-v-173f4ce0] {
+.tao-carousel__pip[data-v-81afb8b0] {
     display: block;
     width: 6px;
     height: 6px;
@@ -2861,23 +2986,23 @@ to {
     background: var(--tao-color-border-strong);
     transition: width var(--tao-duration-base) var(--tao-ease-base), background var(--tao-duration-base) var(--tao-ease-base);
 }
-.tao-carousel__dot--active .tao-carousel__pip[data-v-173f4ce0] {
+.tao-carousel__dot--active .tao-carousel__pip[data-v-81afb8b0] {
     width: 18px;
     background: var(--tao-color-accent);
 }
-.tao-carousel__dot:hover:not(.tao-carousel__dot--active) .tao-carousel__pip[data-v-173f4ce0] {
+.tao-carousel__dot:hover:not(.tao-carousel__dot--active) .tao-carousel__pip[data-v-81afb8b0] {
     background: var(--tao-color-text-muted);
 }
-.tao-carousel__dot[data-v-173f4ce0]:focus-visible {
+.tao-carousel__dot[data-v-81afb8b0]:focus-visible {
     outline: 2px solid var(--tao-color-accent);
     outline-offset: 2px;
     border-radius: var(--tao-radius-full);
 }
 @media (prefers-reduced-motion: reduce) {
-.tao-carousel__track[data-v-173f4ce0] {
+.tao-carousel__track[data-v-81afb8b0] {
         scroll-behavior: auto;
 }
-.tao-carousel__pip[data-v-173f4ce0] {
+.tao-carousel__pip[data-v-81afb8b0] {
         transition: none;
 }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1337exp/taoui",
-  "version": "1.1.1",
+  "version": "1.2.2",
   "description": "Modern UI component library for Nuxt/Vue",
   "homepage": "https://666.io",
   "type": "module",