@1337exp/taoui 1.6.1 → 1.8.0

package/README.md

@@ -28,6 +28,7 @@ change a handful of CSS variables and the whole kit follows.
 - **TaoContainer** — max-width (wide / slim / ultra-slim) and centering
 - **TaoFlex** — flexbox wrapper: justify / align / direction / wrap / gap
 - **TaoSpace** — even gap between children
+- **TaoGrid** / **TaoGridItem** — tiles: `min` is a catalog (auto-fill), `cols` is bento. Item `col` / `row` span; below ~560px span resets. Not masonry
 - **TaoDivider** — `line` (hairline), `text` (line with a label), `gap` (empty space, size: small / medium / large)
 - **TaoSplit** — two panes and a gutter. `row` / `column` like Flex. `v-model` is the start size in `%` or `px`; `resizable="false"` locks the gutter. Not Divider.
 - **TaoFieldset** — grouped frame: `legend` sits on the top border, `align` is start / center / end
@@ -56,6 +57,7 @@ change a handful of CSS variables and the whole kit follows.
 - **TaoTable** — simple table: columns, empty, loading, sort via `v-model:sort`. Not a datagrid.
 - **TaoPagination** — pages with ellipsis. Clicking “…” jumps `jump` pages (5 by default)
 - **TaoEmpty** — empty list, no results, no access
+- **TaoList** / **TaoListItem** — list row: icon, title, caption, hover action. Not Select, not a table
 - **TaoStages** — stage list: `wait` / `work` / `ok` / `bad`. Not a linear stepper
 - **TaoSkeleton** — loading placeholder (text / title / circle / rect)
 - **TaoCounter** — flipping digits (not an input)
@@ -91,6 +93,9 @@ Control sizes: `small` | `medium` | `large`.
 Avatar also accepts short `s` / `m` / `l`. Divider `gap` used to call the large size `big` — that is an alias of `large`.
 Container lives on another axis: `wide` / `slim` / `ultra-slim`.
 
+Font size scale (primitives): `xs` 12 … `xl` 18 for controls; `2xl` 24, `3xl` 32, `4xl` 36 for titles and prose.
+There is no heading component — use `h1 { font-size: var(--tao-font-size-3xl) }`.
+
 ## Icons
 
 `TaoIcon` does not ship its own set — it renders `icon-<name>`
@@ -329,6 +334,20 @@ The `cell-<key>` slot replaces a cell. `loading` shows an overlay; an empty list
   { key: 'pack', label: 'Packing', status: 'work' },
   { key: 'ship', label: 'Shipping', status: 'wait' },
 ]" />
+
+<TaoList>
+  <TaoListItem
+    title="Ann Kozlova"
+    description="Design · Moscow"
+    clickable
+    :selected="picked === 'ann'"
+    @click="picked = 'ann'"
+  >
+    <template #prefix>
+      <TaoAvatar name="Ann Kozlova" size="small" />
+    </template>
+  </TaoListItem>
+</TaoList>
 ```
 
 ```vue
@@ -461,6 +480,7 @@ document.documentElement.setAttribute('data-tao-theme', 'light')
 - `--tao-color-input-*` — fields, because input bg/text often differs from surface/text
 - `--tao-radius-control`, `--tao-radius-panel` — radii (small controls vs large panels)
 - `--tao-shadow-panel`, `--tao-shadow-overlay` — shadows
+- `--tao-font-size-*` — type scale in `primitives.css`: `xs`–`xl` controls, `2xl`–`4xl` titles / prose
 
 The full list lives in `src/styles/semantic.css` — the only file worth opening
 to see the whole theming API.

package/README.ru.md

@@ -28,6 +28,7 @@
 - **TaoContainer** — контейнер с ограничением ширины (wide/slim/ultra-slim) и авто-центровкой
 - **TaoFlex** — обёртка над flexbox с пропами justify/align/direction/wrap/gap
 - **TaoSpace** — авто-расстановка дочерних элементов с равномерным gap
+- **TaoGrid** / **TaoGridItem** — плитки: `min` — каталог (auto-fill), `cols` — bento. У item `col` / `row`; уже ~560px span сбрасывается. Не masonry
 - **TaoDivider** — разделитель: line (тонкая линия), text (линия с текстом), gap (пустой отступ, size: small/medium/large)
 - **TaoSplit** — две панели и полоса. `row` / `column` как у Flex. `v-model` — размер start в `%` или `px`; `resizable="false"` фиксирует полосу. Не Divider.
 - **TaoFieldset** — рамка-группа: `legend` сидит на верхней границе, `align` — start / center / end
@@ -56,6 +57,7 @@
 - **TaoTable** — простая таблица: колонки, empty, loading, сортировка через `v-model:sort`. Не datagrid.
 - **TaoPagination** — страницы с многоточием. Клик по «…» прыгает на `jump` страниц (5 по умолчанию)
 - **TaoEmpty** — пустой список, нет результатов, нет прав
+- **TaoList** / **TaoListItem** — строка списка: иконка, заголовок, подпись, действие по ховеру. Не Select и не таблица
 - **TaoStages** — список стадий: `wait` / `work` / `ok` / `bad`. Не линейный степпер
 - **TaoSkeleton** — плейсхолдер загрузки (text / title / circle / rect)
 - **TaoCounter** — витрина числа с переворотом цифр (не инпут)
@@ -91,6 +93,9 @@ Stages — это процесс, не тон: `wait` / `work` / `ok` / `bad` (`
 Avatar понимает и короткие `s` / `m` / `l`. Divider `gap` раньше называл крупный размер `big` — это алиас `large`.
 Container живёт на другой оси: `wide` / `slim` / `ultra-slim`.
 
+Шкала кегля (примитивы): `xs` 12 … `xl` 18 для контролов; `2xl` 24, `3xl` 32, `4xl` 36 для заголовков и прозы.
+Отдельного компонента заголовка нет — `h1 { font-size: var(--tao-font-size-3xl) }`.
+
 ## Иконки
 
 `TaoIcon` не поставляет собственный набор иконок — он рендерит класс `icon-<name>`
@@ -330,6 +335,20 @@ const columns = [
   { key: 'pack', label: 'Сборка', status: 'work' },
   { key: 'ship', label: 'Доставка', status: 'wait' },
 ]" />
+
+<TaoList>
+  <TaoListItem
+    title="Анна Козлова"
+    description="Дизайн · Москва"
+    clickable
+    :selected="picked === 'anna'"
+    @click="picked = 'anna'"
+  >
+    <template #prefix>
+      <TaoAvatar name="Анна Козлова" size="small" />
+    </template>
+  </TaoListItem>
+</TaoList>
 ```
 
 ```vue
@@ -464,6 +483,7 @@ document.documentElement.setAttribute('data-tao-theme', 'light')
 - `--tao-color-input-*` — поля ввода отдельно, т.к. фон/текст полей часто не совпадают с surface/text
 - `--tao-radius-control`, `--tao-radius-panel` — скругления (мелкие контролы vs крупные панели)
 - `--tao-shadow-panel`, `--tao-shadow-overlay` — тени
+- `--tao-font-size-*` — шкала кегля в `primitives.css`: `xs`–`xl` контролы, `2xl`–`4xl` заголовки / проза
 
 Полный список — в `src/styles/semantic.css`, он же единственный файл,
 который стоит открыть, чтобы понять весь доступный API темизации.