@esportsplus/ui 0.53.0 → 0.55.0

package/README.md

@@ -14,6 +14,8 @@ pnpm add @esportsplus/ui
 - `@esportsplus/action` - Response/error handling
 - `@esportsplus/utilities` - Core utilities
 
+*https://github.com/Chainlift/liftkit* temporarily trying liftkit rules
+
 ## Quick Start
 
 ```typescript
@@ -86,7 +88,7 @@ html`
 | Component | Description |
 |-----------|-------------|
 | `scrollbar` | Native scrollbar styling |
-| `frame` | Scrollable frame |
+| `tabs.scss` | Tab panels: instant by default, `tabs--slide` for horizontal motion, `tabs--scroll` for vertical motion |
 | `sidebar` | Side navigation |
 | `overlay` | Modal/overlay container |
 
@@ -99,6 +101,26 @@ html`
 
 ## Component Patterns
 
+### Tabs
+
+Import `@esportsplus/ui/tabs.scss`. Put `.tabs-content` panels inside `.tabs`
+and apply `.--active` to the selected panel. The default switch is instant.
+For motion, add `.tabs--slide` (horizontal) or `.tabs--scroll` (vertical),
+and set `--i` to the negative selected index: `0`, `-1`, `-2`, etc.
+
+```html
+<div style="overflow: hidden; height: 300px;">
+    <div class="tabs tabs--scroll" style="--i: -1;">
+        <div class="tabs-content" inert aria-hidden="true">First panel</div>
+        <div class="tabs-content --active">Second panel</div>
+    </div>
+</div>
+```
+
+Animated tracks need a clipping parent; vertical tracks also need a definite
+parent height. Keep inactive panels `inert` and update tab/panel ARIA attributes
+alongside the active class. The docs include reactive switching examples.
+
 ### Factory Pattern
 
 Components use `template.factory()` supporting flexible call signatures:
@@ -186,7 +208,7 @@ Located in `tokens.scss`:
 - **Sizing**: `--size-{300-800}` (12px-80px)
 - **Spacing**: `--spacing-{0-600}`
 - **Border**: `--border-radius-{100-900}`, `--border-width-{100-700}`
-- **Typography**: `--font-size-*`, `--font-weight-*`, `--line-height-*`
+- **Typography**: `--font-size-*`, `--font-weight-*`; line height adjusts automatically to each element's font size.
 
 ### CSS Utilities
 
@@ -249,12 +271,35 @@ build/
 │   │   └── scss/index.scss
 │   └── index.js
 ├── css-utilities/
-├── themes/
-│   ├── dark/
-│   └── light/
-└── fonts/
+│   └── font/
+└── themes/
+    ├── dark/
+    └── light/
+```
+
+## Fonts
+
+Import the font stylesheet and apply its family class to `html` or `body`:
+
+```typescript
+import '@esportsplus/ui/css-utilities/font/montserrat.scss';
+
+document.documentElement.classList.add('--font-montserrat');
 ```
 
+`@esportsplus/ui/css-utilities/font/geist.scss` includes Geist Sans and Geist Mono,
+selected with `--font-geist` and `--font-geist-mono`. The aggregate
+`@esportsplus/ui/css-utilities.scss` includes all three families.
+
+Family classes define `--font-family` and their `--font-weight-*` token maps.
+Components consume these variables through their own `font-family` and
+`font-weight` declarations. Nested family classes override the inherited tokens.
+The root component no longer chooses Montserrat automatically.
+
+Fonts are bundled as local assets for the consuming app to serve; no runtime CDN
+is required. Geist Sans and Geist Mono include variable weights 100–900 in normal
+and italic styles. The previous `@esportsplus/ui/fonts` entry point has been removed.
+
 ## TypeScript
 
 Full type safety with zero `any` types: