@1337exp/taoui 1.6.1 → 1.8.0

package/dist/styles.css

@@ -996,6 +996,44 @@ to {
     flex-direction: column;
 }
 
+.tao-grid[data-v-bd5bc452] {
+    container-type: inline-size;
+    display: grid;
+    grid-template-columns: repeat(
+        auto-fill,
+        minmax(min(100%, var(--tao-grid-min, 220px)), 1fr)
+    );
+    gap: var(--tao-grid-gap, var(--tao-space-4));
+}
+.tao-grid--fixed[data-v-bd5bc452] {
+    grid-template-columns: repeat(var(--tao-grid-cols), minmax(0, 1fr));
+}
+@container (max-width: 560px) {
+.tao-grid--fixed[data-v-bd5bc452] {
+        grid-template-columns: minmax(0, 1fr);
+}
+}
+
+.tao-grid-item[data-v-43bd1e34] {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    grid-column: span var(--tao-grid-col, 1);
+    grid-row: span var(--tao-grid-row, 1);
+}
+.tao-grid-item[data-v-43bd1e34] > * {
+    flex: 1 1 auto;
+    min-height: 0;
+    width: 100%;
+}
+@container (max-width: 560px) {
+.tao-grid-item[data-v-43bd1e34] {
+        grid-column: span 1;
+        grid-row: span 1;
+}
+}
+
 .tao-split[data-v-f44196dc] {
     --tao-split-gutter: 8px;
     --tao-split-line: 1px;
@@ -1954,6 +1992,7 @@ to {
     outline: none;
 }
 .tao-dropdown-menu__list .tao-dropdown-menu__item {
+    position: relative;
     padding: var(--tao-space-2) var(--tao-space-4);
     border: none;
     border-radius: 0;
@@ -1966,8 +2005,15 @@ to {
     user-select: none;
     transition: var(--tao-transition-base);
 }
-.tao-dropdown-menu__list .tao-dropdown-menu__item:not(:last-child) {
-    border-bottom: 1px solid var(--tao-color-border);
+.tao-dropdown-menu__list .tao-dropdown-menu__item:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    right: var(--tao-space-2);
+    bottom: 0;
+    left: var(--tao-space-2);
+    height: 1px;
+    background: var(--tao-color-border);
+    pointer-events: none;
 }
 .tao-dropdown-menu__list .tao-dropdown-menu__item:hover,
 .tao-dropdown-menu__list .tao-dropdown-menu__item--active {
@@ -1975,11 +2021,11 @@ to {
     background-color: var(--tao-color-surface-hover);
 }
 
-.tao-dropdown-menu[data-v-4750fe54] {
+.tao-dropdown-menu[data-v-cbfa7294] {
     position: relative;
     display: inline-block;
 }
-.tao-dropdown-menu__button[data-v-4750fe54] {
+.tao-dropdown-menu__button[data-v-cbfa7294] {
     padding: var(--tao-space-2);
     color: var(--tao-color-text);
     border: none;
@@ -1991,10 +2037,10 @@ to {
     line-height: 1;
     transition: var(--tao-transition-base);
 }
-.tao-dropdown-menu__button[data-v-4750fe54]:hover {
+.tao-dropdown-menu__button[data-v-cbfa7294]:hover {
     background: var(--tao-color-surface-hover);
 }
-.tao-dropdown-menu__button[data-v-4750fe54]:focus-visible {
+.tao-dropdown-menu__button[data-v-cbfa7294]:focus-visible {
     outline: 2px solid var(--tao-color-accent);
     outline-offset: 2px;
 }
@@ -3230,6 +3276,172 @@ to {
     margin-top: var(--tao-space-2);
 }
 
+.tao-list[data-v-798c83a3] {
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    background: var(--tao-color-surface-raised);
+    color: var(--tao-color-text);
+}
+.tao-list--bordered[data-v-798c83a3] {
+    overflow: hidden;
+    border: 1px solid var(--tao-color-border);
+    border-radius: var(--tao-radius-control);
+}
+.tao-list--plain[data-v-798c83a3] {
+    padding: var(--tao-space-1);
+    background: transparent;
+}
+.tao-list--scroll[data-v-798c83a3] {
+    overflow: auto;
+}
+.tao-list--divided[data-v-798c83a3] .tao-list-item:not(:last-child) {
+    border-bottom: 1px solid var(--tao-color-border);
+}
+.tao-list--plain[data-v-798c83a3] .tao-list-item {
+    border-radius: var(--tao-radius-sm);
+}
+.tao-list__empty[data-v-798c83a3] {
+    margin: 0;
+    padding: var(--tao-space-3);
+    color: var(--tao-color-text-muted);
+    font-size: var(--tao-font-size-sm);
+    line-height: 1.45;
+    text-align: center;
+}
+
+.tao-list-item[data-v-878b7727] {
+    display: flex;
+    align-items: center;
+    gap: var(--tao-space-1);
+    min-width: 0;
+    color: var(--tao-color-text);
+    transition: background var(--tao-duration-fast) var(--tao-ease-base);
+}
+.tao-list-item--s[data-v-878b7727] {
+    min-height: 32px;
+    padding: 0 var(--tao-space-1) 0 var(--tao-space-2);
+}
+.tao-list-item--m[data-v-878b7727] {
+    min-height: 36px;
+    padding: 0 var(--tao-space-2) 0 var(--tao-space-3);
+}
+.tao-list-item--l[data-v-878b7727] {
+    min-height: 48px;
+    padding: var(--tao-space-1) var(--tao-space-2) var(--tao-space-1) var(--tao-space-3);
+}
+.tao-list-item[data-v-878b7727]:hover:not(.tao-list-item--disabled),
+.tao-list-item--active[data-v-878b7727]:not(.tao-list-item--disabled) {
+    background: var(--tao-color-surface-hover);
+}
+.tao-list-item--selected[data-v-878b7727] {
+    background: var(--tao-color-accent-subtle);
+}
+.tao-list-item--selected[data-v-878b7727]:hover:not(.tao-list-item--disabled),
+.tao-list-item--selected.tao-list-item--active[data-v-878b7727]:not(.tao-list-item--disabled) {
+    background: var(--tao-color-accent-subtle-hover);
+}
+.tao-list-item--disabled[data-v-878b7727] {
+    opacity: 0.5;
+}
+.tao-list-item__hit[data-v-878b7727] {
+    display: flex;
+    align-items: center;
+    gap: var(--tao-space-2);
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 0;
+    padding: var(--tao-space-2) 0;
+    border: none;
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+}
+.tao-list-item--s .tao-list-item__hit[data-v-878b7727] {
+    padding: var(--tao-space-1) 0;
+    gap: var(--tao-space-2);
+}
+.tao-list-item--l .tao-list-item__hit[data-v-878b7727] {
+    padding: var(--tao-space-2) 0;
+}
+button.tao-list-item__hit[data-v-878b7727] {
+    cursor: pointer;
+}
+button.tao-list-item__hit[data-v-878b7727]:disabled {
+    cursor: not-allowed;
+}
+button.tao-list-item__hit[data-v-878b7727]:focus-visible {
+    outline: 2px solid var(--tao-color-accent);
+    outline-offset: -2px;
+}
+.tao-list-item__prefix[data-v-878b7727] {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    color: var(--tao-color-text-muted);
+}
+.tao-list-item__prefix[data-v-878b7727] .tao-avatar {
+    display: block;
+}
+.tao-list-item__text[data-v-878b7727] {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    flex: 1 1 auto;
+    min-width: 0;
+}
+.tao-list-item__title[data-v-878b7727] {
+    min-width: 0;
+    overflow: hidden;
+    font-size: var(--tao-font-size-md);
+    line-height: 1.3;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.tao-list-item--s .tao-list-item__title[data-v-878b7727] {
+    font-size: var(--tao-font-size-sm);
+}
+.tao-list-item--selected .tao-list-item__title[data-v-878b7727] {
+    color: var(--tao-color-accent);
+}
+.tao-list-item--clickable .tao-list-item__title[data-v-878b7727] {
+    user-select: none;
+}
+.tao-list-item__description[data-v-878b7727] {
+    min-width: 0;
+    overflow: hidden;
+    color: var(--tao-color-text-muted);
+    font-size: var(--tao-font-size-xs);
+    line-height: 1.3;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.tao-list-item__suffix[data-v-878b7727] {
+    flex-shrink: 0;
+    color: var(--tao-color-text-muted);
+    font-size: var(--tao-font-size-xs);
+    white-space: nowrap;
+}
+.tao-list-item__action[data-v-878b7727] {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+}
+@media (hover: hover) {
+.tao-list-item--has-action:not(.tao-list-item--action-always) .tao-list-item__action[data-v-878b7727] {
+        opacity: 0;
+}
+.tao-list-item--has-action:not(.tao-list-item--action-always):hover .tao-list-item__action[data-v-878b7727],
+    .tao-list-item--has-action:not(.tao-list-item--action-always):focus-within .tao-list-item__action[data-v-878b7727] {
+        opacity: 1;
+}
+}
+
 .tao-skeleton-group[data-v-e75c3ca1] {
     display: flex;
     flex-direction: column;
@@ -4168,6 +4380,9 @@ to {
     --tao-font-size-md: 14px;
     --tao-font-size-lg: 16px;
     --tao-font-size-xl: 18px;
+    --tao-font-size-2xl: 24px;
+    --tao-font-size-3xl: 32px;
+    --tao-font-size-4xl: 36px;
 
     /* ---------- Shadow scale (color-agnostic, opacity baked in) ---------- */
     --tao-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.12);

package/package.json

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

package/src/styles/primitives.css

@@ -63,6 +63,9 @@
     --tao-font-size-md: 14px;
     --tao-font-size-lg: 16px;
     --tao-font-size-xl: 18px;
+    --tao-font-size-2xl: 24px;
+    --tao-font-size-3xl: 32px;
+    --tao-font-size-4xl: 36px;
 
     /* ---------- Shadow scale (color-agnostic, opacity baked in) ---------- */
     --tao-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.12);