@thebase/ui 1.1.5 → 1.1.7

package/dist/baseui.registry.json

@@ -477,6 +477,19 @@
       ],
       "templateName": "baseui.ClipboardButton"
     },
+    {
+      "name": "code-editor",
+      "type": "owl",
+      "dependencies": [
+        "owl"
+      ],
+      "attributes": [],
+      "events": [],
+      "owlComponents": [
+        "CodeEditor"
+      ],
+      "templateName": "baseui.CodeEditor"
+    },
     {
       "name": "collapsible",
       "type": "owl",
@@ -870,30 +883,6 @@
       ],
       "templateName": "baseui.Input"
     },
-    {
-      "name": "input-group",
-      "type": "static",
-      "dependencies": [],
-      "attributes": [
-        "b-ui",
-        "b-input-group-addon",
-        "b-input-group-button",
-        "b-input-group-text",
-        "b-att-align",
-        "b-att-size",
-        "b-att-variant"
-      ],
-      "events": [],
-      "owlComponents": [
-        "InputGroup",
-        "InputGroupAddon",
-        "InputGroupButton",
-        "InputGroupText",
-        "InputGroupInput",
-        "InputGroupTextarea"
-      ],
-      "templateName": "baseui.InputGroup"
-    },
     {
       "name": "input-otp",
       "type": "owl",
@@ -1697,13 +1686,13 @@
     }
   ],
   "integrity": {
-    "baseui.min.css": "sha384-MzYm4tnpt85MomNRXCdL9Rs4jDdw2qAPIoagZbC8/1kQLnPbHlW2tIf2F9OmRgPj",
+    "baseui.min.css": "sha384-Nx35SpSUwT8KeoaINtj0FdbfinuODJWHtYQbAaGAuFL4+Q8i0IIa5WcXnqhfQP02",
     "bootstrap.bundle.min.js": "sha384-RMbllTJcplkCRnELNTOc5Kz/3AvFDE/rNlJqWqfgmRWruobClBdfwvl10akQZkR1",
-    "baseui.min.js": "sha384-GcCWnFI6t+f/dc757+Crav6N80AmqwuB2K8kSTaeb08ErsYd9mTHA1aKB/rnQltB",
-    "baseui.esm.js": "sha384-UBVYm8E0mq0ZAVhefx5fmnAJVT31BD4cukBRhCyGIqxJ8AtoRNqg92NJ6uC233zU",
+    "baseui.min.js": "sha384-/ePf9SGI23sWot17uRZoqXrAHOujul5BK4caZoxuAQBdZBLAHEwgsa6LaWFjeF9T",
+    "baseui.esm.js": "sha384-DnOUezGZVb68/7F/evjpTPUwAe/l1cOKZsOf1wHDQ3vrZsmowB4AUH2IOxW7/3Mr",
     "baseui.icons.esm.js": "sha384-hj39VMhzcFvmYnjob2hlioMOAqwAXCURGreF6s9RitXFp/iYi7rUdqtfCI+ICQeS",
-    "baseui.templates.xml": "sha384-9llWP0L4BuRpij3wEYymvwY8MOBd11X9mdXqI2JtYHr9j2tCrTbE0hIEMNCDOFdj",
-    "baseui.block-viewer.esm.js": "sha384-5Y2lUNdq6p3i8srVH4rVWtYLO7mFPP6Pqn80e4Ih32c/PgQqy1HDf6nI04mu6yLa",
+    "baseui.templates.xml": "sha384-fWKcLP/7ZpBknt3jRvt/BzQk4o/xesmniCK72dwLtafqoG8yubhs6iMqdeweHeUk",
+    "baseui.block-viewer.esm.js": "sha384-8uPD/d2PWi0hAlIxP0qmYsQBZFlcjmnyFmaBItLryEgqm4XwEdwxABAnFngmBzFx",
     "baseui.analytics.esm.js": "sha384-M6TVmchmceTvpSzgI+DNA6zAn9xmz9a+YEexCLslSo/Ngxyp2kmzs9fm+PxWy+Da",
     "baseui.analytics.min.js": "sha384-B0hBkVDbT7gmDmUMazlN4Nc1KnYGSpL+IcW2hd8840knx73HGImPgGs84MvS3hKE",
     "icons/lucide.json": "sha384-mc5mzpmq9eOgZVa2IcjrL33Ty4nMXE8aoZMfy+lgkC/jMQ4aYnk2S58mFsSGFnW1",

package/dist/baseui.templates.xml

@@ -1059,6 +1059,48 @@
     </Button>
   </t>
   <t t-name="ClipboardButton" t-call="baseui.ClipboardButton"/>
+<t t-name="baseui.CodeEditor">
+    <section t-att-class="classNames" t-att-style="props.style">
+      <div class="bu-code-editor-header">
+        <div class="bu-code-editor-heading">
+          <h3 t-if="props.title" class="h6 fw-semibold mb-0" t-esc="props.title"/>
+          <small t-if="globals.length or props.hint" class="text-body-secondary">
+            <t t-if="globals.length">Globals: <t t-foreach="globals" t-as="name" t-key="name"><code t-esc="name"/><t t-if="!name_last">, </t></t>. </t>
+            <t t-esc="props.hint"/>
+          </small>
+        </div>
+        <div class="bu-code-editor-actions">
+          <Spinner t-if="state.loading" className="'spinner-border-sm'" label="'Loading'"/>
+          <Badge variant="'muted'" label="language.label"/>
+          <Badge variant="'secondary'" label="lineLabel"/>
+          <t t-if="props.upload">
+            <input type="file" class="d-none" t-ref="fileInput" t-on-change="onFileChange"/>
+            <Button variant="'outline'" size="'sm'" icon="'upload'" label="'Open file'" onClick="() => this.openPicker()"/>
+          </t>
+          <Button t-if="showFormat" variant="'outline'" size="'sm'" icon="'wand-sparkles'" label="'Format'" disabled="!code" onClick="() => this.format()"/>
+          <ClipboardButton variant="'outline'" size="'sm'" value="code" label="'Copy'" copiedLabel="'Copied'" disabled="!code"/>
+          <Button t-if="showToggle" variant="'outline'" size="'sm'" icon="isReadonly ? 'pencil' : 'eye'" label="isReadonly ? 'Edit' : 'View'" onClick="() => this.toggleEditing()"/>
+        </div>
+      </div>
+      <Alert t-if="state.error" variant="'destructive'"><AlertDescription t-esc="state.error"/></Alert>
+
+      <!-- One scroll container for gutter + code: the transparent textarea is stretched over the colouring pre, so both scroll together and no scroll-sync code is needed. -->
+      <div class="bu-code-editor-box" t-att-class="{ 'is-readonly': isReadonly }">
+        <pre aria-hidden="true" class="bu-code-editor-text bu-code-editor-gutter" t-esc="lineNumbers"/>
+        <div class="bu-code-editor-body">
+          <pre aria-hidden="true" class="bu-code-editor-text"><t t-foreach="tokens" t-as="tok" t-key="tok_index"><span t-att-class="tok.className" t-esc="tok.text"/></t></pre>
+          <textarea t-if="!isReadonly" class="bu-code-editor-text bu-code-editor-input"
+                    wrap="off" spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off"
+                    t-ref="input" t-att-id="props.id" t-att-aria-label="ariaLabel"
+                    t-on-input="onInput" t-on-keydown="onKeydown" t-on-click="(ev) => this.revealCaret(ev.target)"/>
+        </div>
+      </div>
+      <small t-if="!isReadonly" class="text-body-secondary">
+        <Kbd>Tab</Kbd> indents, <Kbd>Shift</Kbd>+<Kbd>Tab</Kbd> outdents, <Kbd>Esc</Kbd> then <Kbd>Tab</Kbd> leaves the editor.
+      </small>
+    </section>
+  </t>
+  <t t-name="CodeEditor" t-call="baseui.CodeEditor"/>
 <t t-name="baseui.collapsible">
     <div b-ui="collapsible"><t t-slot="default"/></div>
   </t>
@@ -1766,13 +1808,22 @@
     ></span>
   </t>
   <t t-name="Icon" t-call="baseui.Icon"/>
-<t t-name="baseui.Outlined">
+<t t-name="baseui.Outlined.label">
+    <div t-if="label" class="bu-input-label">
+      <span class="bu-input-label-text" t-esc="label"/>
+      <Tooltip t-if="tipText" content="tipText" className="'bu-input-tip'"><t t-set-slot="trigger"><IconCircleQuestionMark/></t></Tooltip>
+    </div>
+  </t>
+  <t t-name="baseui.Outlined">
     <div t-if="isOutlined" t-att-class="outlinedClassNames" t-att-style="labelStyle">
-      <div class="bu-input-box">
+      <div class="bu-input-box" t-ref="box">
         <Icon t-if="leadingIcon" name="leadingIcon" className="'bu-input-icon bu-input-leading'"/>
         <t t-out="0"/>
-        <span class="bu-input-label" t-esc="label"/>
+        <t t-call="baseui.Outlined.label"/>
         <Icon t-if="trailingIcon" name="trailingIcon" className="'bu-input-icon bu-input-trailing'"/>
+        <div t-if="hasStart" class="bu-input-slot bu-input-slot-start" t-ref="start"><t t-slot="start"/></div>
+        <div t-if="hasEnd" class="bu-input-slot bu-input-slot-end" t-ref="end"><t t-slot="end"/></div>
+        <div t-if="hasFooter" class="bu-input-slot bu-input-slot-footer" t-ref="footer"><t t-slot="footer"/></div>
       </div>
       <div t-if="supportingText or props.maxLength" class="bu-input-support">
         <span t-att-id="supportId" t-esc="supportingText"/>
@@ -1808,78 +1859,6 @@
     />
   </t>
   <t t-name="Input" t-call="baseui.Input"/>
-<t t-name="baseui.input-group"><div b-ui="input-group"><t t-esc="props.content"/></div></t>
-  <t t-name="baseui.InputGroup">
-    <t t-call="baseui.Outlined"><t t-call="baseui.InputGroup.box"/></t>
-  </t>
-  <t t-name="baseui.InputGroup.box">
-    <div t-att-class="classNames" t-att-style="props.style" data-slot="input-group" role="group"
-         t-att-aria-describedby="describedBy"><t t-slot="default"/></div>
-  </t>
-  <t t-name="baseui.InputGroupAddon">
-    <div
-      t-att-class="classNames"
-      t-att-style="props.style"
-      t-att-data-align="align"
-      data-slot="input-group-addon"
-      role="group"
-      t-on-click="onClick"
-    ><t t-slot="default"/></div>
-  </t>
-  <t t-name="baseui.InputGroupButton">
-    <Button
-      unstyled="true"
-      className="classNames"
-      style="props.style"
-      type="props.type"
-      disabled="props.disabled"
-      label="props.label"
-      attrs="buttonAttrs"
-      onClick="(event) => this.onClick(event)"
-    ><t t-slot="default"/></Button>
-  </t>
-  <t t-name="baseui.InputGroupText">
-    <span t-att-class="classNames" t-att-style="props.style" data-slot="input-group-text"><t t-slot="default"/></span>
-  </t>
-  <t t-name="baseui.InputGroupInput">
-    <input
-      t-att-id="props.id"
-      t-att-name="props.name"
-      t-att-autocomplete="props.autocomplete"
-      t-att-class="classNames"
-      t-att-style="props.style"
-      t-att-type="props.type || 'text'"
-      t-att-placeholder="fieldPlaceholder"
-      t-att-value="props.value"
-      t-att-disabled="props.disabled"
-      t-att-readonly="props.readonly"
-      t-att-aria-invalid="props.invalid ? 'true' : undefined"
-      data-slot="input-group-control"
-      t-on-input="onInput"
-      t-on-change="onChange"
-    />
-  </t>
-  <t t-name="baseui.InputGroupTextarea">
-    <textarea
-      t-att-class="classNames"
-      t-att-style="props.style"
-      t-att-placeholder="fieldPlaceholder"
-      t-att-rows="props.rows"
-      t-att-disabled="props.disabled"
-      t-att-readonly="props.readonly"
-      t-att-value="props.value"
-      t-att-aria-invalid="props.invalid ? 'true' : undefined"
-      data-slot="input-group-control"
-      t-on-input="onInput"
-      t-on-change="onChange"
-    ></textarea>
-  </t>
-  <t t-name="InputGroup" t-call="baseui.InputGroup"/>
-  <t t-name="InputGroupAddon" t-call="baseui.InputGroupAddon"/>
-  <t t-name="InputGroupButton" t-call="baseui.InputGroupButton"/>
-  <t t-name="InputGroupText" t-call="baseui.InputGroupText"/>
-  <t t-name="InputGroupInput" t-call="baseui.InputGroupInput"/>
-  <t t-name="InputGroupTextarea" t-call="baseui.InputGroupTextarea"/>
 <t t-name="baseui.input-otp">
     <div class="bu-input-otp"/>
   </t>
@@ -2275,7 +2254,7 @@
   <t t-name="baseui.Select">
     <div t-att-class="classNames" t-att-style="rootStyle" t-ref="root">
       <t t-slot="default"/>
-      <span t-if="isOutlined" class="bu-input-label" t-esc="label"/>
+      <t t-if="isOutlined" t-call="baseui.Outlined.label"/>
       <div t-if="isOutlined and supportingText" class="bu-input-support">
         <span t-att-id="supportId" t-esc="supportingText"/>
       </div>
@@ -2705,7 +2684,13 @@
         t-att-disabled="props.disabled"
         t-on-change="onChange"
       />
-      <t t-slot="default"/>
+      <span class="bu-switch-label">
+        <t t-slot="default"/>
+        <span t-if="tipText" class="bu-switch-tip" t-on-click.prevent.stop="">
+          <Tooltip content="tipText" className="'bu-input-tip'"><t t-set-slot="trigger"><IconCircleQuestionMark/></t></Tooltip>
+        </span>
+      </span>
+      <small t-if="supportingText" class="bu-switch-support" t-esc="supportingText"/>
     </label>
   </t>
   <t t-name="Switch" t-call="baseui.Switch"/>

package/docs/analytics.md

@@ -13,12 +13,12 @@ init({ backendUrl: "https://stats.example.com" });
 ```html
 <!-- ES module from the CDN (or map it as "@base/analytics" in an import map) -->
 <script type="module">
-  import { init } from "https://cdn.jsdelivr.net/npm/@thebase/ui@1.1.5/dist/baseui.analytics.esm.js";
+  import { init } from "https://cdn.jsdelivr.net/npm/@thebase/ui@1.1.7/dist/baseui.analytics.esm.js";
   init({ backendUrl: "https://stats.example.com" });
 </script>
 
 <!-- Classic script tag: sets window.thebase.analytics (load order vs dist/baseui.min.js doesn't matter) -->
-<script src="https://cdn.jsdelivr.net/npm/@thebase/ui@1.1.5/dist/baseui.analytics.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@thebase/ui@1.1.7/dist/baseui.analytics.min.js"></script>
 <script>
   thebase.analytics.init({ backendUrl: "https://stats.example.com" });
 </script>
@@ -228,7 +228,7 @@ curl -i -X POST http://localhost:8080/api/event -H 'Content-Type: text/plain' \
 
 [`examples/analytics/`](../examples/analytics/dashboard/?backend=http://localhost:8080) contains a working dashboard plus two complete sample backends: [`server-go`](../examples/analytics/server-go/main.go) (Fiber v3) and [`server-fastapi`](../examples/analytics/server-fastapi/main.py). Each one extends the receivers above with an in-memory store, a daily-salted cookieless visitor hash, a `GET /api/stats` endpoint, and static hosting for the dashboard.
 
-The dashboard ([`dashboard/`](../examples/analytics/dashboard/?backend=http://localhost:8080)) is a pure application that loads `@thebase/ui@1.1.5` from jsDelivr: KPI `Card`s, an area `Chart`, top pages/sources/events `Table`s, site and period `NativeSelect`s, and a `ThemeButton`. It refreshes every 30 s and tracks its own visits through `@thebase/ui/analytics`, so a fresh backend has data straight away.
+The dashboard ([`dashboard/`](../examples/analytics/dashboard/?backend=http://localhost:8080)) is a pure application that loads `@thebase/ui@1.1.7` from jsDelivr: KPI `Card`s, an area `Chart`, top pages/sources/events `Table`s, site and period `NativeSelect`s, and a `ThemeButton`. It refreshes every 30 s and tracks its own visits through `@thebase/ui/analytics`, so a fresh backend has data straight away.
 
 ```sh
 # Go (1.25+)

package/docs/blocks.md

@@ -13,7 +13,7 @@ Blocks are not standalone runtime components. Paste the markup and load the norm
 <script src="https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/baseui.min.js" defer></script>
 ```
 
-`https://unpkg.com/@thebase/ui@latest/dist/...` mirrors the same files as an alternative CDN if jsDelivr is unreachable. Pin an exact version (e.g. `@1.1.5`, or `@1` to take only non-breaking updates) instead of `@latest` for production. Blocks are static markup, so they only need the static `b-ui` runtime above — see [Usage Guide](usage-guide.md) if the surrounding page is itself an application and you'd rather compose the equivalent layout from [Base Components](owl-components.md).
+`https://unpkg.com/@thebase/ui@latest/dist/...` mirrors the same files as an alternative CDN if jsDelivr is unreachable. Pin an exact version (e.g. `@1.1.7`, or `@1` to take only non-breaking updates) instead of `@latest` for production. Blocks are static markup, so they only need the static `b-ui` runtime above — see [Usage Guide](usage-guide.md) if the surrounding page is itself an application and you'd rather compose the equivalent layout from [Base Components](owl-components.md).
 
 Use `b-block` to select the block style:
 

package/docs/components/chart.md

@@ -112,6 +112,8 @@ Interactive components emit documented `baseui:*` events from their root element
 
 The component inherits the Base UI semantic tokens plus shadcn-compatible chart tokens: `--b-chart-1` through `--b-chart-5`. Area-card examples also use `--b-chart-height`, `--b-chart-grid`, `b-chart-area`, `b-chart-line`, `b-chart-axis`, `b-chart-footer`, `b-chart-trend`, and `b-chart-range`.
 
+The plot (`b-chart-plot`) has a fixed height of `--b-chart-height` (default `var(--b50)`), and each `b-att-value` column draws its bar from the bottom as a percentage of the largest value in the chart. Override `--b-chart-height` on the chart element to make it taller or shorter; the bar height needs this definite plot height to resolve.
+
 ## Accessibility behavior
 
 The component preserves authored semantic HTML and adds ARIA roles or state attributes where enhancement is required.

package/docs/components/code-editor.md

@@ -0,0 +1,77 @@
+# Code Editor
+
+A dependency-free code box with line numbers, syntax colouring, Tab/Shift+Tab indent, Enter auto-indent and Format, Copy and Edit/View buttons. Pure Base only: it has no static `b-ui` adapter. Name the language with `codeLang`. Editable by default: pass `onChange` to own the text, or omit it and the editor keeps its own edits; add `readonly` to start in reading mode. The **Edit** button (right of Copy) toggles between reading (no typing, no Format button) and editing (**View** switches back).
+
+## Base component
+
+```js
+import { CodeEditor } from "@thebase/ui";
+```
+
+```base-ui
+<div class="d-flex flex-column gap-3 w-100">
+  <CodeEditor title="'main.go'" codeLang="'go'" value="'package main\n\nimport \'fmt\'\n\n// Greets the world.\nfunc main() {\n\tfmt.Println(\'hello\', 42)\n}'"/>
+  <CodeEditor codeLang="'sql'" value="'SELECT id, name\nFROM users\nWHERE active = true -- only live accounts\nLIMIT 10;'"/>
+</div>
+```
+
+Editable, with state:
+
+```js
+this.state = useState({ code: "int main(void) {\n  return 0;\n}" });
+```
+
+```xml
+<CodeEditor codeLang="'c'" value="state.code" onChange="(code) => state.code = code"/>
+```
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `codeLang` | `String` | picked from the loaded file's extension, else `"plaintext"`; language to colour (see below), case-insensitive; unknown names fall back to plain text |
+| `value` | `String` | the code; the component never mutates it |
+| `src` | `String` | URL of a code file to fetch and show; reloads when it changes. Replaces `value` once loaded. Cross-origin URLs need CORS |
+| `upload` | `Boolean` | shows an "Open file" button that loads a local file into the editor |
+| `onLoad` | `Function` | `({ code, name }) => void`, after a file loads from `src` or an upload |
+| `onError` | `Function` | `(error) => void`, when `src` or an upload cannot be read (an error alert is also shown) |
+| `format` | `Boolean` | shows the **Format** button while editable (default on); `false` hides it |
+| `toggle` | `Boolean` | shows the Edit/View button (default on); `false` locks the mode set by `readonly` |
+| `onChange` | `Function` | `(code) => void`, called on every edit; omit it and the editor keeps its own edits |
+| `readonly` | `Boolean` | starts in reading mode; users can switch with the Edit button unless `toggle` is `false` |
+| `title` | `String` | heading, also the textarea's `aria-label`; defaults to `"<Language> code"` |
+| `globals` | `Array<String>` | names your runtime binds; listed in the hint and coloured as builtins |
+| `hint` | `String` | free-text help shown after the globals |
+| `id` | `String` | textarea id, so an external `<label for>` can target the editor |
+| `className` / `style` | `String` / `String \| Object` | on the root |
+
+## Formatting
+
+The **Format** button (or `Shift+Alt+F` in the editor) re-indents the code for the current `codeLang`, then reports it through `onChange`. It is a dependency-free re-indenter, not a full pretty-printer: it never re-wraps or rewrites code.
+
+| Languages | What Format does |
+| --- | --- |
+| `json` | parses and pretty-prints with 2 spaces; invalid JSON shows an error alert, calls `onError` and leaves the text unchanged |
+| `javascript`, `typescript`, `go`, `c`, `cpp`, `java`, `csharp`, `kotlin`, `swift`, `rust`, `php`, `css` | re-indents by bracket depth with the language's indent (tab for Go); brackets inside strings and comments are ignored, lines inside multi-line strings/comments are untouched, C/C++ `#` lines stay at the left margin |
+| `html`, `xml` | re-indents by tag depth (void HTML tags like `<br>` and `/>` self-closing tags don't nest; tags inside comments and attribute values are ignored) |
+| `lua` | re-indents by `function/if/for/while/repeat … end/until` blocks and brackets |
+| everything else (`python`, `yaml`, `ruby`, `bash`, `sql`, plain text) | only trims trailing spaces; indentation is left alone because it carries meaning or has no safe rule |
+
+All languages also collapse runs of blank lines to one and end the text with a single newline.
+
+## Loading files
+
+```xml
+<CodeEditor src="'/examples/main.go'"/>
+<CodeEditor upload="true" title="'Open a file to view it'"/>
+```
+
+`src` fetches the URL as text and shows it; the language comes from `codeLang`, or from the file extension (`.go`, `.c`, `.java`, `.mjs`, …) when `codeLang` is not set. `upload` adds an **Open file** button that reads a local file in the browser (nothing is uploaded anywhere). A loaded file replaces `value`; edits to it stay in the editor and are still reported through `onChange`. A failed fetch (HTTP error, network or CORS) shows an error alert and calls `onError`.
+
+## Languages
+
+`javascript` (`js`, `jsx`), `typescript` (`ts`, `tsx`), `go` (`golang`), `c` (`h`), `cpp` (`c++`, `cc`, `hpp`), `java`, `csharp` (`cs`, `c#`), `kotlin` (`kt`), `swift`, `rust` (`rs`), `php`, `python` (`py`), `ruby` (`rb`), `bash` (`sh`, `shell`), `sql` (`postgres`, `mysql`), `json`, `yaml` (`yml`), `css`, `html` (`htm`), `xml` (`svg`), `lua`, `plaintext`.
+
+Colouring is display-only and follows `codeLang`: comments, strings, numbers, keywords, builtins, function calls (a word followed by `(`), types (`Capitalized` names), HTML/XML tags, attribute names and `&entities;`, `key:` names in JSON/YAML, CSS properties and `#hex` colours, `@Annotations` (Java, Kotlin, TypeScript, Python) and `$variables` (PHP, shell). Colours come from `--bu-code-*` CSS variables on `.bu-code-editor` (light and dark presets built in), so a theme can override them; nothing is parsed or validated. The Tab key inserts one indent for the language (a tab for Go, 4 spaces for C/Java/Python/Rust/…, 2 for the rest). `Esc` then `Tab` leaves the editor for keyboard users.
+
+Live demo: the `code-editor-demo` block in the Blocks gallery (`examples/blocks/code-editor-demo.html`, Go/C/Java/JavaScript/HTML/XML/JSON/CSS/SQL tabs plus file loading).
+
+The chrome is built from [Badge](badge.md), [ClipboardButton](clipboard-button.md) and [Kbd](kbd.md).

package/docs/components/combobox.md

@@ -24,6 +24,16 @@ import { Combobox } from "@thebase/ui";
 </div>
 ```
 
+### Help tooltip (`useTip`)
+
+Set `useTip="1"` to move `supportingText` into a tooltip: a question-mark icon appears right after the label, in the same label box, and the text shows on hover or focus. Error text still shows under the field.
+
+```base-ui
+<div style="max-width: 28rem" class="w-100 pt-3">
+  <Combobox options="[{ value: 'nextjs', label: 'Next.js' }, { value: 'remix', label: 'Remix' }]" label="'Framework'" supportingText="'Pick the one you use most'" useTip="1"/>
+</div>
+```
+
 | Component | Prop | Type | Notes |
 | --- | --- | --- | --- |
 | `Combobox` | `options` | `Array` | required |
@@ -32,7 +42,7 @@ import { Combobox } from "@thebase/ui";
 | `Combobox` | `className` | `String` | optional |
 | `Combobox` | `id` | `String` | optional, e.g. for `Label`'s `for` |
 | `Combobox` | `onChange` | `Function` | optional |
-| `Combobox` | `label`, `labelBackground`, `supportingText`, `errorText`, `invalid`, `disabled` | `String` / `Boolean` | Material-style outlined field, same behaviour as [Input](/examples/blocks.html#/docs/components/input): the label floats onto the border, `errorText` replaces `supportingText`. Also inherited from a parent `Field`. |
+| `Combobox` | `label`, `labelBackground`, `supportingText`, `useTip`, `errorText`, `invalid`, `disabled` | `String` / `Boolean` | Material-style outlined field, same behaviour as [Input](/examples/blocks.html#/docs/components/input): the label floats onto the border, `errorText` replaces `supportingText`. Also inherited from a parent `Field`. |
 
 See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
 

package/docs/components/date-picker.md

@@ -19,13 +19,23 @@ import { DatePicker } from "@thebase/ui";
 </div>
 ```
 
+### Help tooltip (`useTip`)
+
+Set `useTip="1"` to move `supportingText` into a tooltip: a question-mark icon appears right after the label, in the same label box, and the text shows on hover or focus. Error text still shows under the field.
+
+```base-ui
+<div style="max-width: 28rem" class="w-100 pt-3">
+  <DatePicker label="'Date of birth'" supportingText="'As on your ID'" useTip="1"/>
+</div>
+```
+
 | Component | Prop | Type | Notes |
 | --- | --- | --- | --- |
 | `DatePicker` | `value` | `String` | optional |
 | `DatePicker` | `disabled` | `Boolean` | optional |
 | `DatePicker` | `className` | `String` | optional |
 | `DatePicker` | `onChange` | `Function` | optional |
-| `DatePicker` | `label`, `labelBackground`, `supportingText`, `errorText`, `invalid` | `String` / `Boolean` | Material-style outlined field, same behaviour as [Input](/examples/blocks.html#/docs/components/input): the label floats onto the border, `errorText` replaces `supportingText`. Also inherited from a parent `Field`. |
+| `DatePicker` | `label`, `labelBackground`, `supportingText`, `useTip`, `errorText`, `invalid` | `String` / `Boolean` | Material-style outlined field, same behaviour as [Input](/examples/blocks.html#/docs/components/input): the label floats onto the border, `errorText` replaces `supportingText`. Also inherited from a parent `Field`. |
 
 See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
 

package/docs/components/empty.md

@@ -63,4 +63,4 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
 </div>
 ```
 
-The Base UI sets `role="status"` by default. Use `b-att-variant="outline"` for a dashed container and `b-att-variant="background"` for a muted panel; avatar, avatar-group, input-group, and RTL states are composed by placing those components inside `b-empty-media` or `b-empty-content`.
+The Base UI sets `role="status"` by default. Use `b-att-variant="outline"` for a dashed container and `b-att-variant="background"` for a muted panel; avatar, avatar-group, and RTL states are composed by placing those components inside `b-empty-media` or `b-empty-content`.

package/docs/components/field.md

@@ -81,7 +81,7 @@ import {
 
 ### Outlined controls
 
-`Field` accepts `label`, `labelBackground`, `description`, `error` and `invalid`, and hands them to the control inside it. `Input`, `Textarea`, `NativeSelect`, `Select`, `Combobox` and `DatePicker` draw them in the Material outlined style (floating label, helper text, error text and icon). A control's own `label`/`supportingText`/`errorText` props win over the `Field` values.
+`Field` accepts `label`, `labelBackground`, `description`, `useTip` (1 = show the description in a tooltip), `error` and `invalid`, and hands them to the control inside it. `Input`, `Textarea`, `NativeSelect`, `Select`, `Combobox` and `DatePicker` draw them in the Material outlined style (floating label, helper text, error text and icon). A control's own `label`/`supportingText`/`errorText` props win over the `Field` values.
 
 ```base-ui
 <div class="d-grid gap-4" style="max-width: 28rem; width: 100%">
@@ -90,6 +90,14 @@ import {
 </div>
 ```
 
+```base-ui
+<div style="max-width: 28rem; width: 100%">
+  <Field label="'Email'" description="'We never share it'" useTip="1"><Input leadingIcon="'mail'"/></Field>
+</div>
+```
+
+With `useTip="1"` on `Field`, the description moves into a tooltip on a question-mark icon right after the label, as above.
+
 Use one control per labelled `Field`. For checkboxes, radios and switches keep `FieldLabel` and `FieldDescription`; `Field`'s `label` prop no longer renders a standalone label.
 
 ## Static component

package/docs/components/input.md

@@ -26,13 +26,40 @@ import { Input } from "@thebase/ui";
 </div>
 ```
 
+### Addons (`start` / `end` slots)
+
+Put text, icons or buttons inside the field with the `start` and `end` slots. The text stays clear of them, and the label moves over for `start`.  Content can be plain text, an `Icon`, a `Kbd` or a `Button`. For a textarea, see the `footer` slot on [Textarea](/examples/blocks.html#/docs/components/textarea).
+
+```base-ui
+<div style="max-width: 28rem" class="w-100 pt-3 d-flex flex-column gap-4">
+  <Input label="'Website'" placeholder="'example.com'">
+    <t t-set-slot="start"><span>https://</span></t>
+  </Input>
+  <Input label="'Search'">
+    <t t-set-slot="end"><Button size="'xs'">Search</Button></t>
+  </Input>
+</div>
+```
+
+### Help tooltip (`useTip`)
+
+Set `useTip="1"` to move `supportingText` into a tooltip: a question-mark icon appears right after the label, in the same label box, and the text shows on hover or focus. Error text still shows under the field.
+
+```base-ui
+<div style="max-width: 28rem" class="w-100 pt-3">
+  <Input label="'Email'" supportingText="'We only use it to send receipts'" useTip="1" leadingIcon="'mail'"/>
+</div>
+```
+
 | Prop | Type | Notes |
 | --- | --- | --- |
 | `value` | `String` | controlled value; the component never mutates it itself |
 | `label` | `String` | Material-style outlined field: label rests inside, floats onto the border when focused/filled (or when `placeholder` is set) |
 | `labelBackground` | `String` | any CSS colour for the floated label's background (default matches the field, `--bu-field-bg`); use it when the field sits on a surface of a different colour |
 | `supportingText` | `String` | helper line under the field, linked via `aria-describedby` |
+| `useTip` | `Number` | `0` (default) shows `supportingText` under the field; `1` hides it and shows it in a tooltip on a question-mark icon right after the label (error text still shows under the field) |
 | `errorText` | `String` | marks the field invalid, replaces `supportingText`, swaps the trailing icon for an error icon, sets `aria-invalid` |
+| slots `start` / `end` | slot | content drawn inside the box at the left/right edge (e.g. text, `Icon`, `Kbd`, `Button`); forces the outlined box even without a `label` |
 | `leadingIcon` / `trailingIcon` | `String` | Lucide icon names (outlined mode only) |
 | `maxLength` | `Number` | native limit; outlined mode also shows a `n/max` counter |
 | `placeholder` | `String` | |

package/docs/components/kbd.md

@@ -22,12 +22,9 @@ import { Kbd } from "@thebase/ui";
       Accept <Kbd className="'ms-2'">⏎ Enter</Kbd>
     </t>
   </Button>
-  <InputGroup class="w-100">
-    <InputGroupInput placeholder="'Search...'"/>
-    <InputGroupAddon align="'inline-end'">
-      <Kbd>⌘K</Kbd>
-    </InputGroupAddon>
-  </InputGroup>
+  <Input label="'Search'" className="'w-100'">
+    <t t-set-slot="end"><Kbd>⌘K</Kbd></t>
+  </Input>
 </div>
 ```
 

package/docs/components/markdown.md

@@ -107,6 +107,8 @@ A fenced ` ```base-ui ` block renders as a live component, not a code sample:
 
 See `dist/baseui.registry.json` for the full attribute list.
 
+Task-list checkboxes (`- [ ] item`) get an `aria-label` with the item text after rendering. On coarse pointers (touch), links in tables and lists and checkboxes get larger touch targets. Tables scroll horizontally inside their own container.
+
 ## Events
 
 - `baseui:markdown-render` — fired after Markdown parses and diagrams finish enhancing (`detail.html`).

package/docs/components/message-scroller.md

@@ -30,14 +30,9 @@ import { MessageScroller } from "@thebase/ui";
       </MessageScroller>
     </div>
     <CardFooter className="'border-top p-3'">
-      <InputGroup className="'w-100'">
-        <InputGroupTextarea placeholder="'Type your message...'" rows="1"/>
-        <InputGroupAddon align="'block-end'">
-          <InputGroupButton>
-            <Icon name="'arrow-up'"/>
-          </InputGroupButton>
-        </InputGroupAddon>
-      </InputGroup>
+      <Textarea placeholder="'Type your message...'" rows="1" className="'w-100'">
+        <t t-set-slot="footer"><span/><Button size="'icon-xs'" ariaLabel="'Send'"><Icon name="'arrow-up'"/></Button></t>
+      </Textarea>
     </CardFooter>
   </Card>
 </div>

package/docs/components/native-select.md

@@ -19,6 +19,19 @@ import { NativeSelect } from "@thebase/ui";
 </div>
 ```
 
+### Help tooltip (`useTip`)
+
+Set `useTip="1"` to move `supportingText` into a tooltip: a question-mark icon appears right after the label, in the same label box, and the text shows on hover or focus. Error text still shows under the field.
+
+```base-ui
+<div style="max-width: 28rem" class="w-100 pt-3">
+  <NativeSelect label="'Fruit'" supportingText="'Shown on your order'" useTip="1">
+    <option value="'apple'">Apple</option>
+    <option value="'banana'">Banana</option>
+  </NativeSelect>
+</div>
+```
+
 | Component | Prop | Type | Notes |
 | --- | --- | --- | --- |
 | `NativeSelect` | `value` | `String` | optional |
@@ -28,7 +41,7 @@ import { NativeSelect } from "@thebase/ui";
 | `NativeSelect` | `ariaLabel` / `aria-label` | `String` | optional, accessible name for the control |
 | `NativeSelect` | `id` | `String` | optional, e.g. for `Label`'s `for` |
 | `NativeSelect` | `onChange` | `Function` | optional |
-| `NativeSelect` | `label`, `labelBackground`, `supportingText`, `errorText`, `invalid` | `String` / `Boolean` | Material-style outlined field, same behaviour as [Input](/examples/blocks.html#/docs/components/input): the label floats onto the border, `errorText` replaces `supportingText`. Also inherited from a parent `Field`. |
+| `NativeSelect` | `label`, `labelBackground`, `supportingText`, `useTip`, `errorText`, `invalid` | `String` / `Boolean` | Material-style outlined field, same behaviour as [Input](/examples/blocks.html#/docs/components/input): the label floats onto the border, `errorText` replaces `supportingText`. Also inherited from a parent `Field`. |
 
 See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
 

package/docs/components/navigation-menu.md

@@ -39,3 +39,5 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
 ```
 
 The Base UI adds `menubar`/`menuitem` roles and Left/Right arrow focus movement.
+
+Below 768px the menu does not wrap: it scrolls horizontally with a fade on the right edge and no visible scrollbar, so a sticky header keeps a constant height. Items never shrink or wrap their text.

package/docs/components/select.md

@@ -19,12 +19,28 @@ import { Select, SelectContent, SelectItem, SelectTrigger } from "@thebase/ui";
 </div>
 ```
 
+### Help tooltip (`useTip`)
+
+Set `useTip="1"` to move `supportingText` into a tooltip: a question-mark icon appears right after the label, in the same label box, and the text shows on hover or focus. Error text still shows under the field.
+
+```base-ui
+<div style="max-width: 28rem" class="w-100 pt-3">
+  <Select label="'Theme'" value="'dark'" supportingText="'Applies to this device only'" useTip="1">
+    <SelectTrigger>Dark</SelectTrigger>
+    <SelectContent>
+      <SelectItem value="'light'">Light</SelectItem>
+      <SelectItem value="'dark'">Dark</SelectItem>
+    </SelectContent>
+  </Select>
+</div>
+```
+
 | Component | Prop | Type | Notes |
 | --- | --- | --- | --- |
 | `Select` | `value` | `String` | optional |
 | `Select` | `onChange` | `Function` | optional |
 | `Select` | `className` | `String` | optional |
-| `Select` | `label`, `labelBackground`, `supportingText`, `errorText`, `invalid` | `String` / `Boolean` | Material-style outlined field, same behaviour as [Input](/examples/blocks.html#/docs/components/input): the label floats onto the border, `errorText` replaces `supportingText`. Also inherited from a parent `Field`. |
+| `Select` | `label`, `labelBackground`, `supportingText`, `useTip`, `errorText`, `invalid` | `String` / `Boolean` | Material-style outlined field, same behaviour as [Input](/examples/blocks.html#/docs/components/input): the label floats onto the border, `errorText` replaces `supportingText`. Also inherited from a parent `Field`. |
 | `SelectContent` | `className` | `String` | optional |
 | `SelectItem` | `value` | `String` | required |
 | `SelectItem` | `className` | `String` | optional |

package/docs/components/shell.md

@@ -45,6 +45,8 @@ import { SidebarClose, SidebarTrigger } from "@thebase/ui";
 
 `Shell` wraps the existing `Sidebar` primitive internally to provide the off-canvas/mobile drawer behavior (`open`/`defaultOpen`/`onOpenChange` are forwarded to it) and additionally tracks its own desktop `collapsed` state, exposed to descendants via `env.shell`/`env.setShellCollapsed`. A single `SidebarTrigger` toggles both: it opens/closes the mobile drawer via `env.setSidebarOpen` and, when mounted inside a `Shell`, also toggles the desktop collapse rail via `env.setShellCollapsed` — no separate collapse-trigger component is needed.
 
+Below 992px (`max-width: 991.98px`) the sidebar becomes the off-canvas drawer, so tablets in portrait get the drawer too; at 992px and above it is the collapsible desktop rail.
+
 Four cross-cutting concerns are opt-in via props instead of baked into the layout:
 
 - `authState` — an arbitrary object (e.g. `{ username, onLogout }`), exposed to descendants via `env.shell.authState`. `ShellUserMenu` reads it directly and renders nothing when it's absent; pass its own default slot to fully customize the markup instead of the built-in username/logout row.