@smwb/ui-react 2.0.0

package/AI_LESS_OVERRIDES.md

@@ -0,0 +1,192 @@
+<!--
+  AUDIENCE: AI agent (not human). Dense, exact, copy-paste ready.
+  TOPIC: compile-time customization of @smwb/ui-react via Less overrides.
+  Companion: AI_THEMING.md (runtime CSS vars + component props).
+-->
+
+# AI_LESS_OVERRIDES — Less override mechanism
+
+## Resolution model (READ FIRST)
+
+The published aggregate stylesheet is compiled from `@smwb/ui-styles/less/components.less`
+into the standalone `@smwb/ui-css` package (`dist/ui.css`) at build time
+(`npm -w @smwb/ui-css run build`).
+
+Import order (`@smwb/ui-styles/less/theme.less`):
+
+```
+site/globals/site.variables.less
+default/globals/default.variables.less
+variables.less          (maps @vars → :root{--smui-*})
+@{themesFolder}/@{theme}/variables.less   (optional theme)
+theme.config            (optional, client-supplied — imported LAST)
+```
+
+The `foundation` layer is imported FIRST via
+`@smwb/ui-styles/less/components.less` → `@smwb/ui-styles/less/foundation.less`:
+`palette → spacing → radius → elevation → breakpoints → sizing`.
+
+**Less is last-declaration-wins at root scope** (lazy eval). Every
+`@var` resolves to its LAST assignment in the whole compilation.
+`theme.config` is imported LAST (after `default.variables.less` and
+`variables.less`) precisely so a consumer's reassignment wins over the
+defaults. Component CSS reads these via lazy evaluation, so the final
+assignment wins even though component rules are emitted earlier. To
+override a token, assign it again in `theme.config`; the sanctioned
+hook is `theme.config`.
+
+### How a consumer overrides (the only supported entry point)
+
+1. Create a Less file, e.g. `theme.config`, resolvable from
+   `@smwb/ui-styles/less/` (build with `lessc` include paths or copy alongside).
+   `theme.less` does `@import (optional) "theme.config";` — absent file
+   is a no-op.
+2. Put `@token: <value>;` lines in it. Recompile.
+
+```less
+// theme.config  (consumer)
+@smui-spacing-unit: 8px;          // double every gap/padding/margin
+@smui-radius-md:    2px;          // sharper corners library-wide
+@primaryColor:      @md-teal-500; // pull brand from the MD palette
+@cardPadding:       @smui-space-xxl;
+```
+
+`site.variables.less` (`@smwb/ui-styles/less/site/globals/site.variables.less`)
+is an in-repo equivalent hook (currently only doc comments) for
+first-party theming.
+
+## Token catalog (authoritative files)
+
+| Layer | File | Tokens |
+|---|---|---|
+| MD palette | `@smwb/ui-styles/less/foundation/palette.less` | `@md-<color>-<shade>` |
+| Spacing | `@smwb/ui-styles/less/foundation/spacing.less` | `@smui-spacing-unit`, `@smui-space-*` + mixins |
+| Radius | `@smwb/ui-styles/less/foundation/radius.less` | `@smui-radius-*` |
+| Elevation | `@smwb/ui-styles/less/foundation/elevation.less` | `@smui-elevation-*` + mixin |
+| Breakpoints | `@smwb/ui-styles/less/foundation/breakpoints.less` | `@smui-bp-*`, `@xs..@xl` + media mixins |
+| Control sizing | `@smwb/ui-styles/less/foundation/sizing.less` | `@smui-control-*`, `@smui-selection-*`, `@smui-icon-*` |
+| Semantic colors + per-component vars | `@smwb/ui-styles/less/default/globals/default.variables.less` | `@primaryColor`, `@secondaryColor`, `@errorColor`, … and component vars |
+| Dark theme vars | same file, `*Dark` suffixed | e.g. `@primaryColorDark` |
+| Runtime exposure | `@smwb/ui-styles/less/variables.less` | `:root { --smui-* }` |
+
+To enumerate any group exactly, grep the source (always current):
+
+```
+grep -oE '@smui-[a-zA-Z0-9-]+' @smwb/ui-styles/less/foundation/*.less | sort -u
+grep -oE '@md-[a-zA-Z]+-[a-z0-9]+'  @smwb/ui-styles/less/foundation/palette.less | sort -u
+grep -oE '^@[a-zA-Z][a-zA-Z0-9]+:' @smwb/ui-styles/less/default/globals/default.variables.less
+```
+
+### MD palette (`@md-<color>-<shade>`)
+
+Colors: `red pink purple deepPurple indigo blue lightBlue cyan teal
+green lightGreen lime yellow amber orange deepOrange brown grey
+blueGrey`. Shades: `50 100 200 300 400 500 600 700 800 900`; accents
+`a100 a200 a400 a700` (most colors). Plus `@md-white`, `@md-black`.
+Example: `@md-blue-700`, `@md-amber-a200`.
+
+### Spacing scale + mixins (`foundation/spacing.less`)
+
+- Base unit: `@smui-spacing-unit: 4px;`
+- Numeric: `@smui-space-0,1,2,3,4,5,6,8,10,12,16` (= unit×n).
+- Named: `@smui-space-none|xxs|xs|sm|md|lg|xl|xxl|xxxl`
+  (2,4,8,12,16,20,24,32 px).
+- Property mixins (consume keyword OR raw length):
+  `.smwb-gap(@s)`, `.smwb-row-gap(@s)`, `.smwb-column-gap(@s)`,
+  `.smwb-inset(@s)` (=padding), `.smwb-padding(@a[;@b[;@c[;@d]]])`,
+  `.smwb-margin(@a[;…])`. Keyword resolver: `.smwb-resolve-space`.
+
+### Radius (`foundation/radius.less`)
+
+`@smui-radius-none|xs|sm|md|lg|xl|xxl|pill|circle`
+(0,2,4,8,12,16,28,9999px,50%).
+
+### Elevation (`foundation/elevation.less`)
+
+`@smui-elevation-0,1,2,3,4,6,8,9,12,16,24` (Material umbra/penumbra/
+ambient stacks). Mixin: `.smwb-elevation(@dp)` (e.g. `.smwb-elevation(2)`).
+
+### Breakpoints + media mixins (`foundation/breakpoints.less`)
+
+`@smui-bp-xs=0, -sm=420px, -md=768px, -lg=1024px, -xl=1200px`.
+Legacy aliases `@xs..@xl` map to these (used by Grid).
+Detached-ruleset mixins:
+
+```less
+.smwb-media-up(md;   { .x { gap: @smui-space-xl; } });
+.smwb-media-down(sm; { .x { padding: @smui-space-sm; } });
+.smwb-media-between(sm; lg; { .x { display: none; } });
+```
+
+### Control sizing (`foundation/sizing.less`)
+
+`@smui-control-h-sm|md|lg` (32/40/48), `@smui-control-px-sm|md|lg`,
+`@smui-control-font-sm|md|lg`, `@smui-selection-sm|md|lg` (16/18/22),
+`@smui-icon-sm|md|lg` (18/20/24). Component `size` props map to
+`*_size-sm|md|lg` classes that read these.
+
+### Semantic colors (`default.variables.less`)
+
+Base: `@primaryColor @secondaryColor @errorColor @successColor
+@warningColor @infoColor` (+ `@onXColor` foregrounds). Each has
+`@<name>ColorHover|Active|Focus`. Dark variants are `*Dark`-suffixed
+and exposed under `:root[data-theme="dark"]`.
+
+### Per-component spacing/appearance variables
+
+`default.variables.less` defines a “Component spacing tokens” section:
+`@<component><Role>` (e.g. `@cardPadding`, `@buttonGap`,
+`@menuItemPaddingX`, `@chipGap`, `@modalHeaderPadding`,
+`@tabPaddingX`, …). On-grid values reference the spacing scale;
+off-grid ones are literals tagged `// off-grid`. Authoritative list:
+
+```
+grep -nE '^@[a-z][A-Za-z0-9]+:' @smwb/ui-styles/less/default/globals/default.variables.less
+```
+
+## Recipes
+
+```less
+// 1. Rescale entire UI density
+@smui-spacing-unit: 6px;
+
+// 2. Flatter corners everywhere
+@smui-radius-md: 2px; @smui-radius-lg: 4px; @smui-radius-xl: 6px;
+
+// 3. Rebrand from the MD palette (cascades to all primary usages)
+@primaryColor: @md-indigo-600;
+@primaryContainer: @md-indigo-50;
+
+// 4. Retune ONE component without touching others
+@cardPadding: @smui-space-xxl;
+@tooltipBg:   @md-blueGrey-800;
+
+// 5. Soften elevation globally
+@smui-elevation-2: @smui-elevation-1;
+
+// 6. Mobile tweak via media mixin (in a component .less or override)
+.smwb-media-down(sm; { .smwb-appbar { padding: 0 @smui-space-sm; } });
+```
+
+## Rules for an AI editing this library
+
+- New shared scale value → add to the matching `foundation/*.less`
+  (single source); never hardcode px/hex in component `.less`.
+- Use `//` comments in foundation files (Less strips them; `/* */`
+  leak into shipped CSS and bloat it).
+- Component spacing/color → add a `@<component><Role>` var in
+  `default.variables.less`, reference it from the component `.less`.
+- Runtime-overridable token → also expose `--smui-*` in
+  `@smwb/ui-styles/less/variables.less` (both light and `data-theme="dark"`).
+- NEVER apply a Less colour function (`rgba`/`lighten`/`darken`/`fade`/
+  `mix`/…) to an overridable theme token (`@primaryColor`,
+  `@onSurfaceColor`, `@errorColor`, …): a consumer's `theme.config` may
+  set it to a `var(--…)` string, which Less colour functions cannot
+  evaluate. Use CSS `color-mix()` with Less interpolation instead, e.g.
+  `~"color-mix(in srgb, @{primaryColor} 8%, transparent)"` (overlay) or
+  `~"color-mix(in srgb, #fff 4%, @{primaryColor})"` (tint). This works
+  for both hex defaults and `var()` overrides.
+- After any `.less` change in `@smwb/ui-styles`: rebuild the aggregate
+  (`npm -w @smwb/ui-css run build`), then diff the emitted
+  `packages/ui-css/dist/ui.css` vs baseline — non-additive changes to
+  existing rules are regressions.

package/AI_THEMING.md

@@ -0,0 +1,155 @@
+<!--
+  AUDIENCE: AI agent (not human). Dense, exact, copy-paste ready.
+  TOPIC: changing component appearance in @smwb/ui-react — at runtime
+  (CSS custom properties) and via component props.
+  Companion: AI_LESS_OVERRIDES.md (compile-time Less tokens).
+-->
+
+# AI_THEMING — change component appearance
+
+Three independent layers, cheapest first:
+
+1. **Runtime CSS custom properties** (`--smui-*`) — no rebuild, switch
+   live (incl. dark mode).
+2. **Component props** — `size`, `color`, `variant`, etc. per component.
+3. **Compile-time Less tokens** — see `AI_LESS_OVERRIDES.md`.
+
+## 1. Runtime: CSS custom properties
+
+`@smwb/ui-styles/less/variables.less` emits two blocks into the shipped CSS:
+
+```css
+:root { --smui-primaryColor: …; --smui-space-md: 12px; … }
+:root[data-theme="dark"] { --smui-primaryColor: …; … }
+```
+
+- **Dark mode**: set `document.documentElement.dataset.theme = "dark"`
+  (or `<html data-theme="dark">`). Storybook does this via the Theme
+  global. The library hook `useTheme()` (exported) toggles + persists.
+- **Override any token at runtime** by setting the custom property on
+  `:root` or any subtree (cascades):
+
+```css
+:root { --smui-primaryColor: #00695c; --smui-radius-md: 2px; }
+.dense-area { --smui-space-md: 8px; --smui-space-lg: 12px; }
+```
+
+Authoritative list of runtime-overridable props:
+
+```
+grep -oE '--smui-[a-zA-Z0-9-]+' @smwb/ui-styles/less/variables.less | sort -u
+```
+
+Groups exposed: `--smui-primaryColor*`, full semantic set
+(`--smui-secondaryColor`, `--smui-errorColor*`, `--smui-successColor*`,
+`--smui-warningColor*`, `--smui-infoColor*`, `--smui-on<Name>Color`),
+surface/text (`--smui-surfaceBackground`, `--smui-onSurfaceColor`,
+`--smui-dividerColor`, …), per-component (`--smui-tooltipBg`,
+`--smui-menuTextColor`, `--smui-tableBorderColor`, …), spacing
+(`--smui-space-*`, `--smui-spacing-unit`), `--smui-radius-*`,
+`--smui-elevation-*`, `--smui-bp-*`.
+
+## 2. Component props (appearance)
+
+Standardized vocabulary (rollout in progress across the library):
+
+- `size?: "small" | "medium" | "large"` — control density. Emits
+  `*_size-sm|md|lg`, reads `@smui-control-*` (see AI_LESS_OVERRIDES).
+- `color?: "primary" | "secondary" | "error" | "success" | "warning"
+  | "info"` — semantic color, resolves through `--smui-<name>Color*`.
+- `variant?: …` — structural style; component-specific values.
+
+Authoritative per-component prop surface = the exported `*Props`
+interface in each `src/components/<cat>/<name>/<name>.tsx`. Inspect:
+
+```
+grep -nE 'export interface .*Props|size\?|color\?|variant\?' \
+  src/components/<cat>/<name>/<name>.tsx
+```
+
+Representative current values:
+
+| Component | variant | color | size | other appearance props |
+|---|---|---|---|---|
+| Button | contained\|text\|outlined | (colorTheme:primary) | small\|medium\|large | `fullWidth`, `icon`, `iconProps` |
+| FloatingButton | default\|extended | primary\|secondary\|error\|success\|warning\|info | small\|medium\|large | `type` |
+| Chip | filled\|outlined | — | — | `icon`, `deleteIcon`, `selected` |
+| TextField | outlined\|filled | — | — | `startAdornment`, `endAdornment`, `inline`, `fullWidth` |
+| SelectField | outlined\|filled | — | — | `chips`, `search`, `endAdornment`, `optionRenderer` |
+| Card | filled\|elevated\|outlined | — | — | `disabled` |
+| Avatar | circular\|rounded\|square | (`color` = bg of fallback) | small\|medium\|large \| px | — |
+| Badge | inside\|outside | primary\|success\|danger | — | `vertical`, `horizontal` |
+| Skeleton | text\|circular\|rounded\|rectangular | — | (`width`/`height`) | `animation` |
+| Pagination | — | — | small\|medium | `showFirstButton`, `showLastButton` |
+| Message | outlined\|filled\|left-accent | (`type`: success/error/warning/info) | — | `onClose` |
+| Modal | — | — | small\|large\|fullscreen | `backdrop`, `animation` |
+| ProgressIndicator | circular\|linear | — | — | `type` det/indet, `progressValue` |
+| Divider | fullWidth\|inset\|middle | — | — | `orientation`, `textAlign` |
+| Slider | continuous\|discrete | — | — | `withTicks`, `valueField` |
+| Tabs/Tab | — | — | — | `scrollable`, `stacked`, `icon` |
+
+(The exported `*Props` interface is the source of truth; this table is
+a navigational summary, not exhaustive.)
+
+## 3. Per-component Less variables
+
+Each component reads `@<component><Role>` vars from
+`@smwb/ui-styles/less/default/globals/default.variables.less` and `--smui-*`
+runtime props. To change a single component’s look without affecting
+others, override its var (compile-time) or its `--smui-*` (runtime).
+
+Find a component’s knobs:
+
+```
+# Less vars it consumes
+grep -oE '@[a-z][A-Za-z0-9]+' @smwb/ui-styles/less/components/<name>/<name>.less | sort -u
+# runtime props it consumes
+grep -oE 'var\(--smui-[a-zA-Z0-9-]+' @smwb/ui-styles/less/components/<name>/<name>.less | sort -u
+```
+
+## Recipes — “change the look of component X”
+
+```less
+// A. Card: bigger padding + rounded (compile-time, one component)
+@cardPadding: @smui-space-xxl;
+@cardBorderRadius: @smui-radius-xl;
+```
+
+```css
+/* B. Tooltip: dark slate, at runtime, no rebuild */
+:root { --smui-tooltipBg: #37474f; --smui-tooltipTextColor: #fff; }
+```
+
+```tsx
+// C. FloatingButton: semantic color + size via props
+<FloatingButton color="success" size="large" variant="extended">Save</FloatingButton>
+```
+
+```css
+/* D. Scope a denser theme to a region (runtime, cascades) */
+.compact { --smui-space-md: 8px; --smui-space-lg: 12px;
+           --smui-control-h-md: 32px; }
+```
+
+```less
+// E. Whole-library rebrand (compile-time) — see AI_LESS_OVERRIDES recipes
+@primaryColor: @md-deepPurple-600;
+```
+
+```tsx
+// F. Live dark mode toggle
+import { useTheme } from "@smwb/ui-react";
+const { theme, toggleTheme } = useTheme(); // sets <html data-theme>
+```
+
+## Decision rule for an AI
+
+- Need a live/per-subtree/per-user change, no rebuild → **runtime
+  `--smui-*`** (layer 1).
+- Per-instance variation in app code → **component prop** (layer 2).
+- Library-wide default change shipped in CSS → **Less token** in
+  `foundation/*` or `default.variables.less` (layer 3,
+  see `AI_LESS_OVERRIDES.md`), then rebuild the aggregate
+  (`npm -w @smwb/ui-css run build`) + baseline diff.
+- Never hardcode hex/px in app CSS targeting `.smwb-*` internals;
+  prefer the token of the correct layer.

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 - Summerweb LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,209 @@
+# @smwb/ui-react
+
+TypeScript React component library based on [Material Design](https://m3.material.io/), with
+runtime light/dark theming and LESS-based customization. Part of the `@smwb` design-system monorepo.
+
+![license](https://img.shields.io/badge/license-MIT-blue.svg)
+
+## The `@smwb` packages
+
+| Package | What it is |
+| --- | --- |
+| **`@smwb/ui-react`** | This package — React components. |
+| `@smwb/ui-solid` | SolidJS port, same design system and class names. |
+| `@smwb/ui-styles` | Framework-agnostic **LESS source** + design tokens (`smwb-*`). |
+| `@smwb/ui-css` | **Prebuilt aggregate stylesheet** (`import "@smwb/ui-css"`). |
+| `@smwb/ui-mcp-react` | MCP server exposing this catalog to AI tools. |
+
+## Component catalog
+
+- **Storybook (production):** https://summerweb.ru/ui
+- **Local:** `npm run storybook` → http://localhost:6006
+
+## Installation
+
+Published on [npm](https://www.npmjs.com/package/@smwb/ui-react) as `@smwb/ui-react`.
+
+**Requirements:** Node.js ≥ 20, React and React DOM ≥ 18 (peer dependencies).
+
+```sh
+npm install @smwb/ui-react
+```
+
+## Getting started
+
+```tsx
+import { Button } from "@smwb/ui-react";
+
+function App() {
+  return <Button>Hello World</Button>;
+}
+```
+
+In ESM builds each imported component **pulls in its own CSS automatically** (tree-shakeable) —
+nothing else to import for the default theme.
+
+## Styles
+
+Three ways to get the CSS, pick one:
+
+1. **Auto-injected per-component CSS** (default, ESM) — import components and their styles come
+   along. Tree-shaken: you only ship CSS for what you use.
+2. **Full prebuilt stylesheet** — one file with every component, from `@smwb/ui-css`
+   (recommended for CJS or when you need a fixed global cascade order):
+   ```tsx
+   import "@smwb/ui-css";
+   ```
+   Optional CSS reset: `import "@smwb/ui-styles/normalize.css";`.
+3. **Custom LESS bundle** compiled from `@smwb/ui-styles` — see [Theming](#customization-and-theming).
+
+### Headless entry (compile one LESS bundle yourself)
+
+For apps that compile a single themed LESS bundle instead of per-chunk CSS injection:
+
+```tsx
+import "@smwb/ui-styles/normalize.css";
+import "@smwb/ui-styles/components.less";
+import { Button, TextField } from "@smwb/ui-react/headless";
+```
+
+### Selective LESS bundle (only the components you use)
+
+Compile a minimal stylesheet from `@smwb/ui-styles`:
+
+```less
+@import (less) "node_modules/@smwb/ui-styles/less/headless-base.less";
+@import (less) "node_modules/@smwb/ui-styles/less/components/button/button.entry.less";
+@import (less) "node_modules/@smwb/ui-styles/less/components/textField/textField.entry.less";
+```
+
+- `headless-base.less` = foundation tokens + `:root` / dark CSS variables (import once).
+- One `*.entry.less` per component (each resolves LESS variables via `_prelude.less`).
+- A component's required entries **and** their dependencies are listed by the MCP tool
+  `get_component_props` (see `@smwb/ui-mcp-react`) under each component's `styles` block.
+- Import `<name>.entry.less`, never the bare `components/<name>/<name>.less`.
+
+### TanStack Table adapter
+
+```tsx
+import { ReactTable } from "@smwb/ui-react/react-table";
+```
+
+Targets [@tanstack/react-table](https://tanstack.com/table) v8 (install it in your app). See
+Storybook → **Connects / react-table**.
+
+## Customization and theming
+
+Pick the shallowest layer that solves the task:
+
+| Goal | Approach | Rebuild CSS? |
+| --- | --- | --- |
+| Toggle light/dark, tweak a few colors live | CSS variables `--smui-*` + `data-theme` | No |
+| One component instance looks different | Component props (`color`, `size`, `variant`, …) | No |
+| New brand, density, or defaults library-wide | LESS overrides via `theme.config` on `@smwb/ui-styles` | Yes |
+
+Full token catalogs and recipes: [`AI_THEMING.md`](./AI_THEMING.md) (runtime + props),
+[`AI_LESS_OVERRIDES.md`](./AI_LESS_OVERRIDES.md) (compile-time LESS).
+
+### Light and dark mode
+
+Tokens are exposed on `:root` and `:root[data-theme="dark"]` as `--smui-*`.
+
+```tsx
+import { useTheme, Theme } from "@smwb/ui-react";
+
+function ThemeToggle() {
+  const { theme, setTheme } = useTheme(); // persists + syncs <html data-theme>
+  return (
+    <button type="button" onClick={() => setTheme(theme === Theme.dark ? Theme.light : Theme.dark)}>
+      {theme === Theme.dark ? "Light" : "Dark"}
+    </button>
+  );
+}
+```
+
+Or set the attribute yourself (`<html data-theme="dark">`). Without it, `useTheme` follows
+`prefers-color-scheme`.
+
+### Runtime overrides (no rebuild)
+
+```css
+:root {
+  --smui-primaryColor: #00695c;
+  --smui-radius-md: 2px;
+}
+.settings-panel { --smui-space-md: 8px; } /* scoped, cascades */
+```
+
+Prefer `--smui-*` tokens over targeting internal `.smwb-*` classes (implementation detail).
+
+### Per-component appearance (props)
+
+```tsx
+<Button variant="outlined" color="primary" size="large">Save</Button>
+<FloatingButton color="success" size="large" />
+<Message type="error" variant="filled" />
+```
+
+### Compile-time overrides (`theme.config`)
+
+For library-wide changes, add a `theme.config` (see [`theme.config.example`](./theme.config.example))
+and compile `@smwb/ui-styles/components.less`:
+
+```less
+// theme.config
+@theme: "summer"; // or "material"
+@themesFolder: "node_modules/@smwb/ui-styles/less/themes";
+
+@primaryColor: @md-teal-600;
+@smui-spacing-unit: 8px;
+@smui-radius-md: 2px;
+```
+
+```sh
+lessc -rp=/ ./node_modules/@smwb/ui-styles/less/components.less ./src/app.css
+```
+
+`theme.config` is imported last, so your reassignments win. Token catalog and rules:
+[`AI_LESS_OVERRIDES.md`](./AI_LESS_OVERRIDES.md).
+
+## MCP server (component catalog for AI tools)
+
+The catalog is exposed to AI assistants by a **separate package, [`@smwb/ui-mcp-react`](https://www.npmjs.com/package/@smwb/ui-mcp-react)** — a stdio MCP server (no HTTP port). Tools:
+
+| Tool | Purpose |
+| --- | --- |
+| `search_components` | Find components by name, id, description, or prop keywords |
+| `get_component_props` | Full metadata for one component (props + required LESS imports) |
+| `search_customization` | Global theming options and per-component customization |
+| `get_customization` | What and how to customize a component or global topic |
+
+Run it from npm:
+
+```sh
+npx -y @smwb/ui-mcp-react
+```
+
+Cursor (`.cursor/mcp.json`) or Claude Desktop config:
+
+```json
+{
+  "mcpServers": {
+    "smwb-ui-react": {
+      "command": "npx",
+      "args": ["-y", "@smwb/ui-mcp-react"]
+    }
+  }
+}
+```
+
+## Documentation for AI assistants
+
+| File | Topic |
+| --- | --- |
+| [`AI_THEMING.md`](./AI_THEMING.md) | Runtime theming: `--smui-*` variables, `useTheme`, `color` / `size` / `variant` props |
+| [`AI_LESS_OVERRIDES.md`](./AI_LESS_OVERRIDES.md) | Compile-time LESS overrides: token catalog, `theme.config`, custom stylesheet |
+
+## License
+
+[MIT](./LICENSE)

package/dist/assets/styles/less/components/accordion/accordion.entry.css

@@ -0,0 +1 @@
+.smwb-accordion{display:flex;flex-direction:column;align-self:flex-start;box-shadow:0 2px 2px -1px #0003,0 1px 2px #00000024,0 1px 11px #0000001f}.smwb-accordion__header{background-color:var(--smui-appBarBg);color:var(--smui-appBarContentColor);height:65px;display:flex;align-items:center;padding:0 16px;cursor:pointer;gap:15px;width:100%}.smwb-accordion__header arrow-icon{flex-shrink:0}.smwb-accordion__title{white-space:nowrap}.smwb-accordion__content{background-color:var(--smui-surfaceBackground)}.smwb-accordion__arrow-icon{transform:rotate(0);transition:transform .3s ease-in-out;margin-left:auto}.smwb-accordion__arrow-icon_opened{transform:rotate(-180deg)}

package/dist/assets/styles/less/components/appBar/appBar.entry.css

@@ -0,0 +1 @@
+.smwb-appbar{padding:0 16px;display:flex;align-items:center;inset:0 0 auto;min-width:100%;background-color:var(--smui-appBarBg);color:var(--smui-appBarContentColor);font-size:1rem;height:65px}.smwb-appbar.smwb-bottom{bottom:0;top:auto}.smwb-appbar.smwb-relative{position:relative}.smwb-appbar.smwb-static{position:static}.smwb-appbar.smwb-sticky{position:sticky}.smwb-appbar.smwb-fixed{position:fixed}.smwb-appbar.smwb-absolute{position:absolute}.smwb-appbar.smwb-dense{padding:12px;height:48px}.smwb-appbar__inner{display:flex;align-items:center;width:100%;justify-content:space-between;flex-wrap:nowrap}.smwb-appbar__left{display:flex;align-items:center;gap:10px;white-space:nowrap}.smwb-appbar__right{white-space:nowrap}.smwb-appbar__mid{width:100%;display:flex;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap}.smwb-appbar__mid.smwb-middle{align-items:center}.smwb-appbar__mid.smwb-right{align-items:flex-end}.smwb-appbar__mid.smwb-left{align-items:flex-start}.smwb-appbar_color-primary{background-color:var(--smui-primaryColor);color:var(--smui-onPrimaryColor)}.smwb-appbar_color-secondary{background-color:var(--smui-secondaryColor);color:var(--smui-onSecondaryColor)}.smwb-appbar_color-error{background-color:var(--smui-errorColor);color:var(--smui-onErrorColor)}.smwb-appbar_color-success{background-color:var(--smui-successColor);color:var(--smui-onSuccessColor)}.smwb-appbar_color-warning{background-color:var(--smui-warningColor);color:var(--smui-onWarningColor)}.smwb-appbar_color-info{background-color:var(--smui-infoColor);color:var(--smui-onInfoColor)}

package/dist/assets/styles/less/components/appLayout/appLayout.entry.css

@@ -0,0 +1 @@
+.smwb-app-layout{display:flex;flex-direction:column;min-height:100vh;width:100%;background-color:var(--smui-pageBackground);color:var(--smui-onSurfaceColor)}.smwb-app-layout__header{flex-shrink:0;z-index:10}.smwb-app-layout_sticky-header .smwb-app-layout__header{position:sticky;top:0}.smwb-app-layout__body{position:relative;display:flex;flex:1 1 auto;min-height:0}.smwb-app-layout__sidebar{position:relative;flex:0 0 var(--smui-app-sidebar-w, 260px);width:var(--smui-app-sidebar-w, 260px);overflow-y:auto;transition:flex-basis .2s ease-in-out,width .2s ease-in-out}.smwb-app-layout__sidebar>.smwb-sidebar{position:static;top:auto;left:auto;width:100%;height:100%;min-height:0}.smwb-app-layout__content{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;overflow-x:hidden}.smwb-app-layout__footer{margin-top:auto;flex-shrink:0;border-top:1px solid var(--smui-dividerColor)}@media(max-width:767.98px){.smwb-app-layout__sidebar{position:absolute;top:0;bottom:0;left:0;z-index:20}}.smwb-app-layout__collapse{display:flex;justify-content:flex-end;padding:8px}.smwb-app-layout_collapsed .smwb-app-layout__collapse{justify-content:center}.smwb-app-layout__collapse-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:8px;cursor:pointer;color:var(--smui-onSurfaceColor);background-color:transparent;transition:background-color .15s ease-in-out}.smwb-app-layout__collapse-btn:hover{background-color:var(--smui-onSurfaceHover)}.smwb-app-layout__collapse-btn:active{background-color:var(--smui-onSurfaceActive)}.smwb-app-layout__collapse-btn:focus-visible{outline:2px solid var(--smui-primaryColor);outline-offset:2px}

package/dist/assets/styles/less/components/avatar/avatar.entry.css

@@ -0,0 +1 @@
+.smwb-avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;user-select:none;width:40px;height:40px;font-size:16px;font-weight:500;line-height:1;color:var(--smui-onPrimaryColor);background-color:var(--smui-primaryColor)}.smwb-avatar_small{width:24px;height:24px;font-size:9.6px}.smwb-avatar_large{width:56px;height:56px;font-size:22.4px}.smwb-avatar_circular{border-radius:50%}.smwb-avatar_rounded{border-radius:12px}.smwb-avatar_square{border-radius:0}.smwb-avatar__img{width:100%;height:100%;object-fit:cover;color:transparent;text-align:center}.smwb-avatar__fallback{display:inline-flex;align-items:center;justify-content:center}.smwb-avatar-group{display:inline-flex;flex-direction:row-reverse;align-items:center}.smwb-avatar-group .smwb-avatar{border:2px solid var(--smui-surfaceBackground);box-sizing:content-box}.smwb-avatar-group .smwb-avatar:not(:last-child){margin-left:-8px}.smwb-avatar-group__surplus{background-color:var(--smui-surfaceVariant);color:var(--smui-onSurfaceVariant);font-size:.8rem}

package/dist/assets/styles/less/components/badge/badge.entry.css

@@ -0,0 +1 @@
+.smwb-badge{border-radius:10px;z-index:2;font-weight:500;font-size:.75rem;padding:0 6px;color:#fff;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;height:20px;min-width:20px}.smwb-badge_outside{position:absolute}.smwb-badge_outside_top{top:0}.smwb-badge_outside_top_left{transform:scale(1) translate(-50%,-50%);left:-2px}.smwb-badge_outside_top_right{right:-2px;transform:scale(1) translate(50%,-50%)}.smwb-badge_outside_bottom{bottom:0}.smwb-badge_outside_bottom_right{right:-2px;transform:scale(1) translate(50%,50%)}.smwb-badge_outside_bottom_left{transform:scale(1) translate(-50%,50%);left:-2px}.smwb-badge_inside{position:static}.smwb-badge_success{background-color:var(--smui-successColor)}.smwb-badge_danger{background-color:var(--smui-errorColor)}.smwb-badge_primary{background-color:var(--smui-primaryColor)}.smwb-badge_no-content{padding:0;width:8px;height:8px;min-width:auto}.smwb-badge__wrapper{position:relative;display:inline-flex;align-items:center}

package/dist/assets/styles/less/components/bottomBar/bottomBar.entry.css

@@ -0,0 +1 @@
+.smwb-bottom-bar{position:fixed;left:0;right:0;bottom:0;z-index:2;color:var(--smui-onSurfaceVariant);background-color:var(--smui-surfaceBackground);box-shadow:0 -2px 6px #00000026;padding-bottom:env(safe-area-inset-bottom,0)}.smwb-bottom-bar__nav{display:flex;align-items:stretch;width:100%;min-height:56px}.smwb-bottom-bar__item{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 4px;border:0;background:transparent;color:var(--smui-primaryTextColor);cursor:pointer;text-decoration:none;transition:background-color .2s ease-in-out}.smwb-bottom-bar__item:hover{background-color:var(--smui-onSurfaceHover)}.smwb-bottom-bar__item:active{background-color:var(--smui-onSurfaceActive)}.smwb-bottom-bar__item:focus-visible{outline:2px solid var(--smui-primaryColor);outline-offset:-2px}.smwb-bottom-bar__item_active{color:var(--smui-primaryColor);background-color:var(--smui-navItemActiveBg)}.smwb-bottom-bar__item_active .smwb-bottom-bar__item-icon,.smwb-bottom-bar__item_active .smwb-bottom-bar__item-title{color:var(--smui-primaryColor)}.smwb-bottom-bar__item_active:hover{background-color:var(--smui-primaryColorHover)}.smwb-bottom-bar__item_active:active{background-color:var(--smui-primaryColorActive)}.smwb-bottom-bar__item-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1}.smwb-bottom-bar__item-title{font-size:.75rem;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}

package/dist/assets/styles/less/components/breadcrumbs/breadcrumbs.entry.css

@@ -0,0 +1 @@
+.smwb-breadcrumbs{color:var(--smui-onSurfaceVariant);font-size:.875rem}.smwb-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none}.smwb-breadcrumbs__item{display:inline-flex;align-items:center}.smwb-breadcrumbs__item a{color:inherit;text-decoration:none;transition:color .15s ease-in-out}.smwb-breadcrumbs__item a:hover{color:var(--smui-primaryColor);text-decoration:underline}.smwb-breadcrumbs__item:last-child{color:var(--smui-onSurfaceColor);font-weight:500}.smwb-breadcrumbs__separator{display:inline-flex;align-items:center;user-select:none;opacity:.6}.smwb-breadcrumbs__expand{border:0;background-color:var(--smui-onSurfaceHover);color:inherit;cursor:pointer;border-radius:4px;padding:0 4px;line-height:1.4;transition:background-color .15s ease-in-out}.smwb-breadcrumbs__expand:hover{background-color:var(--smui-onSurfaceActive)}

package/dist/assets/styles/less/components/button/button.entry.css

@@ -0,0 +1 @@
+.smwb-button{gap:8px;overflow:hidden;font-weight:500;cursor:pointer;transition:all .2s ease-out;display:inline-flex;align-items:center;justify-content:center;border-radius:24px;letter-spacing:1px;vertical-align:middle;word-spacing:0;line-height:1.5;min-width:64px;position:relative;align-self:flex-start}.smwb-button:disabled,.smwb-button.smwb-disabled{color:var(--smui-disabledTextColor);pointer-events:none;border-color:var(--smui-buttonDisabledBg)}.smwb-button:disabled.smwb-contained,.smwb-button.smwb-disabled.smwb-contained{background-color:var(--smui-buttonDisabledBg);color:var(--smui-disabledTextColor)}.smwb-button.smwb-full-width{width:100%}.smwb-button.smwb-small{font-size:13px;padding:4px 10px}.smwb-button.smwb-medium{font-size:14px;padding:6px 14px}.smwb-button.smwb-large{font-size:15px;padding:8px 22px}.smwb-button.smwb-contained{color:var(--smui-onPrimaryColor);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.smwb-button.smwb-contained.smwb-primary:not(.smwb-disabled){background-color:var(--smui-primaryColor)}.smwb-button.smwb-contained.smwb-primary:hover{background-color:var(--smui-buttonContainedHoverBg);box-shadow:0 4px 22px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.smwb-button.smwb-contained.smwb-primary:disabled{background-color:var(--smui-buttonDisabledBg)}.smwb-button.smwb-contained.smwb-primary:focus{background-color:var(--smui-buttonContainedFocusBg)}.smwb-button.smwb-contained.smwb-primary:active{background-color:var(--smui-buttonContainedActiveBg)}.smwb-button.smwb-outlined{background-color:transparent;border:1px solid var(--smui-outlineColor)}.smwb-button.smwb-outlined.smwb-primary:not(.smwb-disabled){color:var(--smui-primaryColor)}.smwb-button.smwb-outlined:hover{background-color:var(--smui-buttonOutlinedHoverBg)}.smwb-button.smwb-outlined:focus{background-color:var(--smui-buttonOutlinedFocusBg)}.smwb-button.smwb-outlined:active{background-color:var(--smui-buttonOutlinedActiveBg);border:1px solid var(--smui-primaryColor)}.smwb-button.smwb-outlined:disabled,.smwb-button.smwb-outlined.smwb-disabled{background-color:transparent;color:var(--smui-disabledTextColor);border-color:var(--smui-buttonDisabledBg)}.smwb-button.smwb-text{background-color:transparent}.smwb-button.smwb-text.smwb-primary:not(.smwb-disabled){color:var(--smui-primaryColor)}.smwb-button.smwb-text.smwb-primary:disabled{background-color:transparent}.smwb-button.smwb-text.smwb-primary:hover{background-color:var(--smui-buttonOutlinedHoverBg)}.smwb-button.smwb-text.smwb-primary:focus{background-color:var(--smui-buttonOutlinedFocusBg)}.smwb-button.smwb-text.smwb-primary:active{background-color:var(--smui-buttonOutlinedActiveBg)}.smwb-button.smwb-text:disabled{background-color:transparent;color:var(--smui-disabledTextColor);border-color:var(--smui-buttonDisabledBg)}.smwb-button *{pointer-events:none}.smwb-button_color-secondary.smwb-contained{background-color:var(--smui-secondaryColor);color:var(--smui-onSecondaryColor)}.smwb-button_color-secondary.smwb-contained:hover:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-secondaryColor) 88%,#000)}.smwb-button_color-secondary.smwb-contained:focus:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-secondaryColor) 78%,#000)}.smwb-button_color-secondary.smwb-contained:active:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-secondaryColor) 78%,#000)}.smwb-button_color-secondary.smwb-outlined{color:var(--smui-secondaryColor);border-color:var(--smui-secondaryColor)}.smwb-button_color-secondary.smwb-outlined:hover:not(.smwb-disabled){background-color:var(--smui-secondaryColorHover)}.smwb-button_color-secondary.smwb-text{color:var(--smui-secondaryColor)}.smwb-button_color-secondary.smwb-text:hover:not(.smwb-disabled){background-color:var(--smui-secondaryColorHover)}.smwb-button_color-error.smwb-contained{background-color:var(--smui-errorColor);color:var(--smui-onErrorColor)}.smwb-button_color-error.smwb-contained:hover:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-errorColor) 88%,#000)}.smwb-button_color-error.smwb-contained:focus:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-errorColor) 78%,#000)}.smwb-button_color-error.smwb-contained:active:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-errorColor) 78%,#000)}.smwb-button_color-error.smwb-outlined{color:var(--smui-errorColor);border-color:var(--smui-errorColor)}.smwb-button_color-error.smwb-outlined:hover:not(.smwb-disabled){background-color:var(--smui-errorColorHover)}.smwb-button_color-error.smwb-text{color:var(--smui-errorColor)}.smwb-button_color-error.smwb-text:hover:not(.smwb-disabled){background-color:var(--smui-errorColorHover)}.smwb-button_color-success.smwb-contained{background-color:var(--smui-successColor);color:var(--smui-onSuccessColor)}.smwb-button_color-success.smwb-contained:hover:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-successColor) 88%,#000)}.smwb-button_color-success.smwb-contained:focus:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-successColor) 78%,#000)}.smwb-button_color-success.smwb-contained:active:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-successColor) 78%,#000)}.smwb-button_color-success.smwb-outlined{color:var(--smui-successColor);border-color:var(--smui-successColor)}.smwb-button_color-success.smwb-outlined:hover:not(.smwb-disabled){background-color:var(--smui-successColorHover)}.smwb-button_color-success.smwb-text{color:var(--smui-successColor)}.smwb-button_color-success.smwb-text:hover:not(.smwb-disabled){background-color:var(--smui-successColorHover)}.smwb-button_color-warning.smwb-contained{background-color:var(--smui-warningColor);color:var(--smui-onWarningColor)}.smwb-button_color-warning.smwb-contained:hover:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-warningColor) 88%,#000)}.smwb-button_color-warning.smwb-contained:focus:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-warningColor) 78%,#000)}.smwb-button_color-warning.smwb-contained:active:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-warningColor) 78%,#000)}.smwb-button_color-warning.smwb-outlined{color:var(--smui-warningColor);border-color:var(--smui-warningColor)}.smwb-button_color-warning.smwb-outlined:hover:not(.smwb-disabled){background-color:var(--smui-warningColorHover)}.smwb-button_color-warning.smwb-text{color:var(--smui-warningColor)}.smwb-button_color-warning.smwb-text:hover:not(.smwb-disabled){background-color:var(--smui-warningColorHover)}.smwb-button_color-info.smwb-contained{background-color:var(--smui-infoColor);color:var(--smui-onInfoColor)}.smwb-button_color-info.smwb-contained:hover:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-infoColor) 88%,#000)}.smwb-button_color-info.smwb-contained:focus:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-infoColor) 78%,#000)}.smwb-button_color-info.smwb-contained:active:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-infoColor) 78%,#000)}.smwb-button_color-info.smwb-outlined{color:var(--smui-infoColor);border-color:var(--smui-infoColor)}.smwb-button_color-info.smwb-outlined:hover:not(.smwb-disabled){background-color:var(--smui-infoColorHover)}.smwb-button_color-info.smwb-text{color:var(--smui-infoColor)}.smwb-button_color-info.smwb-text:hover:not(.smwb-disabled){background-color:var(--smui-infoColorHover)}

package/dist/assets/styles/less/components/buttonGroup/buttonGroup.entry.css

@@ -0,0 +1 @@
+.smwb-button-group{display:inline-flex;border-radius:24px}.smwb-button-group.smwb-vertical{flex-direction:column}.smwb-button-group.smwb-contained{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.smwb-button-group.smwb-full-width{width:100%}.smwb-button-group__grouped{align-self:stretch;min-width:40px}.smwb-contained .smwb-button-group__grouped{box-shadow:none}.smwb-horizontal .smwb-button-group__grouped:not(:first-of-type){border-top-left-radius:0;border-bottom-left-radius:0}.smwb-horizontal .smwb-button-group__grouped:not(:first-of-type).smwb-outlined{margin-left:-1px}.smwb-horizontal .smwb-button-group__grouped:not(:last-of-type){border-top-right-radius:0;border-bottom-right-radius:0}.smwb-horizontal .smwb-button-group__grouped:not(:last-of-type).smwb-outlined{border-right-color:transparent}.smwb-horizontal .smwb-button-group__grouped:not(:last-of-type).smwb-contained{border-right:1px solid color-mix(in srgb,#fff 12%,var(--smui-primaryColor))}.smwb-horizontal .smwb-button-group__grouped:not(:last-of-type).smwb-text{border-right:1px solid var(--smui-primaryColor)}.smwb-horizontal .smwb-button-group__grouped:not(:last-of-type).smwb-disabled.smwb-text,.smwb-horizontal .smwb-button-group__grouped:not(:last-of-type).smwb-disabled.smwb-contained{border-right:1px solid var(--smui-disabledBgColor)}.smwb-vertical .smwb-button-group__grouped:not(:first-of-type){border-top-right-radius:0;border-top-left-radius:0}.smwb-vertical .smwb-button-group__grouped:not(:first-of-type).smwb-outlined{margin-top:-1px}.smwb-vertical .smwb-button-group__grouped:not(:last-of-type){border-bottom-right-radius:0;border-bottom-left-radius:0}.smwb-vertical .smwb-button-group__grouped:not(:last-of-type).smwb-outlined{border-bottom-color:transparent}.smwb-vertical .smwb-button-group__grouped:not(:last-of-type).smwb-contained{border-bottom:1px solid color-mix(in srgb,#fff 12%,var(--smui-primaryColor))}.smwb-vertical .smwb-button-group__grouped:not(:last-of-type).smwb-text{border-bottom:1px solid color-mix(in srgb,var(--smui-primaryColor) 50%,transparent)}.smwb-vertical .smwb-button-group__grouped:not(:last-of-type).smwb-disabled.smwb-text,.smwb-vertical .smwb-button-group__grouped:not(:last-of-type).smwb-disabled.smwb-contained{border-bottom:1px solid var(--smui-disabledBgColor)}

package/dist/assets/styles/less/components/card/card.entry.css

@@ -0,0 +1 @@
+.smwb-card{background-color:var(--smui-surfaceBackground);padding:16px;border-radius:12px;color:var(--smui-onSurfaceColor);transition:all .25s ease-in-out;line-height:1.5;display:flex;flex-direction:column}.smwb-card_elevated{box-shadow:0 2px 1px -1px #0003,0 1px 1px #0000001c,0 1px 3px #0000001c}.smwb-card_elevated:hover{box-shadow:0 2px 10px -1px #0003,0 1px 4px #0000001c,0 1px 4px #0000001c}.smwb-card_elevated:active{background-color:var(--smui-onSurfaceHover)}.smwb-card_outlined{border:1px solid var(--smui-outlineColor)}.smwb-card_outlined:hover{background-color:var(--smui-onSurfaceHover);box-shadow:0 2px 4px -1px #0000001c,0 1px 4px #0000001c,0 1px 11px #0000001c}.smwb-card_outlined:active{background-color:var(--smui-onSurfaceHover)}.smwb-card_filled{background-color:var(--smui-surfaceVariant)}.smwb-card_filled:hover{box-shadow:0 2px 10px -1px #00000024,0 1px 4px #0000001c,0 1px 4px #0000001c}.smwb-card_filled:active{background-color:var(--smui-onSurfaceActive)}.smwb-card_disabled{pointer-events:none;opacity:.38}.smwb-card__title{font-size:1.25rem;font-weight:500}.smwb-card__footer{margin-top:12px}.smwb-card_interactive{cursor:pointer}.smwb-card_interactive:focus-visible{outline:2px solid var(--smui-primaryColor);outline-offset:2px}

package/dist/assets/styles/less/components/carousel/carousel.entry.css

@@ -0,0 +1 @@
+.smwb-carousel{max-width:412px}.smwb-carousel__inner{position:relative}.smwb-carousel__track{text-align:center;overflow:hidden;cursor:pointer;margin-left:-4px;margin-right:-4px;touch-action:pan-y}.smwb-carousel__layer{width:100%;height:100%;display:flex;will-change:transform}.smwb-carousel__slide{flex-shrink:0;padding-left:4px;padding-right:4px}.smwb-carousel__slide-inner{border-radius:28px;overflow:hidden;will-change:width}.smwb-carousel__slide-inner img{height:205px;aspect-ratio:.9;object-fit:cover;width:100%;user-select:none}.smwb-carousel__navigation{display:flex;justify-content:center}.smwb-carousel__navigation .current{background-color:var(--smui-onPrimaryContainerActive)}.smwb-carousel__navigation__dot{margin:3px;width:10px;height:10px;border-radius:50%;border:1px solid var(--smui-onPrimaryContainer)}.smwb-carousel__arrow{cursor:pointer;position:absolute;background:var(--smui-onPrimaryContainerActive);color:var(--smui-onPrimaryContainer);border-radius:50%;z-index:1;display:flex;align-items:center;justify-content:center}