@thebase/ui 1.1.5 → 1.1.7

package/docs/components/sidebar.md

@@ -306,3 +306,5 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
 ```
 
 State is reflected through `b-att-state="open|closed"`. Events: `baseui:open`, `baseui:close`.
+
+Below 992px the sidebar is an off-canvas drawer closed by navigation; the `Shell` and `Sidebar` CSS and `matchMedia` checks share this breakpoint.

package/docs/components/switch.md

@@ -14,10 +14,21 @@ import { Switch } from "@thebase/ui";
 </div>
 ```
 
+### Help tooltip (`useTip`)
+
+```base-ui
+<div class="d-flex flex-column gap-3" style="max-width: 28rem">
+  <Switch supportingText="'Turns off all wireless radios'">Airplane Mode</Switch>
+  <Switch supportingText="'Turns off all wireless radios'" useTip="1">Airplane Mode</Switch>
+</div>
+```
+
 | Component | Prop | Type | Notes |
 | --- | --- | --- | --- |
 | `Switch` | `checked` | `Boolean` | optional |
 | `Switch` | `disabled` | `Boolean` | optional |
+| `Switch` | `supportingText` | `String` | optional helper text shown under the label |
+| `Switch` | `useTip` | `Number` | `1` moves `supportingText` into a tooltip on a question-mark icon right after the label |
 | `Switch` | `className` | `String` | optional |
 | `Switch` | `onChange` | `Function` | optional |
 

package/docs/components/textarea.md

@@ -27,6 +27,28 @@ import { Textarea } from "@thebase/ui";
 </div>
 ```
 
+### Footer slot
+
+The `footer` slot draws a bar along the bottom edge inside the field (counter on the left, send button on the right). `start` and `end` work as on [Input](/examples/blocks.html#/docs/components/input).
+
+```base-ui
+<div style="max-width: 28rem" class="w-100 pt-3">
+  <Textarea label="'Message'" rows="3">
+    <t t-set-slot="footer"><span>0/280</span><Button size="'xs'">Send</Button></t>
+  </Textarea>
+</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">
+  <Textarea label="'Your message'" supportingText="'Copied to the support team'" useTip="1"/>
+</div>
+```
+
 | Component | Prop | Type | Notes |
 | --- | --- | --- | --- |
 | `Textarea` | `value` | `String` | optional |
@@ -39,7 +61,8 @@ import { Textarea } from "@thebase/ui";
 | `Textarea` | `id` | `String` | optional, e.g. for `Label`'s `for` |
 | `Textarea` | `onInput` | `Function` | optional |
 | `Textarea` | `onChange` | `Function` | optional |
-| `Textarea` | `label`, `supportingText`, `errorText`, `maxLength`, `invalid`, `placeholder` | `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`. |
+| `Textarea` | slots `start` / `end` / `footer` | slot | content drawn inside the box; `footer` sits along the bottom edge |
+| `Textarea` | `label`, `supportingText`, `useTip`, `errorText`, `maxLength`, `invalid`, `placeholder` | `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/icons.md

@@ -22,7 +22,7 @@ Load the normal the Base UI assets. No separate icon script is required.
 <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. `b-icon` also works with the [pure Base `Icon` component](components/icon.md) — the recommended API in an application; the classic script above is for pages using the static `b-ui` API.
+`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. `b-icon` also works with the [pure Base `Icon` component](components/icon.md) — the recommended API in an application; the classic script above is for pages using the static `b-ui` API.
 
 The build publishes every Lucide SVG to `dist/icons/lucide/` and writes the generated icon manifest to `dist/icons/lucide.json`.
 

package/docs/installation.md

@@ -4,7 +4,7 @@ See the [Usage Guide](usage-guide.md) for the end-to-end integration path (choos
 
 The Base UI is distributed as one CSS file and one JavaScript file for browser use. `dist/baseui.min.js` is fully self-contained: Bootstrap's JS bundle (Popper.js included) and the Owl runtime are embedded ahead of the Base UI's own code, in load order (Bootstrap, then Owl, then the Base UI) — nothing else needs to load first. Both install paths below load this same file; the Base component API is the recommended way to consume the Base UI in an application, with the base static markup (`b-ui`) API available as a lighter-weight alternative for non-Owl pages.
 
-The snippets below use the `@latest` tag for readability. Pin an exact version instead (e.g. `@1.1.5`, or `@1` to take only non-breaking updates) for any production page — `@latest` can silently change what your page loads the moment a new version is published.
+The snippets below use the `@latest` tag for readability. Pin an exact version instead (e.g. `@1.1.7`, or `@1` to take only non-breaking updates) for any production page — `@latest` can silently change what your page loads the moment a new version is published.
 
 ## Base component install (recommended)
 
@@ -43,7 +43,7 @@ For static HTML, a server-rendered page, or a Base HUB website page that has no
 
 Bootstrap 5 is the bundled baseline CSS framework, and its JS bundle now drives the Base UI's interactive components directly.
 
-`@thebase/ui` is published on npm, so [unpkg](https://unpkg.com/@thebase/ui@latest/) mirrors the same files as an alternative CDN (`https://unpkg.com/@thebase/ui@latest/dist/baseui.min.css` / `baseui.min.js`) if jsDelivr is unreachable in your environment. Pin an exact version (e.g. `@1.1.5`, or `@1` to take only non-breaking updates) instead of `@latest` for production.
+`@thebase/ui` is published on npm, so [unpkg](https://unpkg.com/@thebase/ui@latest/) mirrors the same files as an alternative CDN (`https://unpkg.com/@thebase/ui@latest/dist/baseui.min.css` / `baseui.min.js`) if jsDelivr is unreachable in your environment. Pin an exact version (e.g. `@1.1.7`, or `@1` to take only non-breaking updates) instead of `@latest` for production.
 
 For npm/self-hosted usage:
 

package/docs/owl-components.md

@@ -55,7 +55,7 @@ Everything — the static `b-ui` runtime, the Owl framework, every Base componen
 </script>
 ```
 
-`https://unpkg.com/@thebase/ui@latest/dist/...` mirrors the same files as an alternative CDN if jsDelivr is unreachable — swap the host in each URL above. For a self-hosted build, replace the CDN host with your own served path (e.g. `/dist/baseui.esm.js`). These snippets use `@latest` for readability; pin an exact version (e.g. `@1.1.5`, or `@1` to take only non-breaking updates) in production so a new release can't change what your page loads.
+`https://unpkg.com/@thebase/ui@latest/dist/...` mirrors the same files as an alternative CDN if jsDelivr is unreachable — swap the host in each URL above. For a self-hosted build, replace the CDN host with your own served path (e.g. `/dist/baseui.esm.js`). These snippets use `@latest` for readability; pin an exact version (e.g. `@1.1.6`, or `@1` to take only non-breaking updates) in production so a new release can't change what your page loads.
 
 No `@odoo/owl` import appears anywhere in that snippet — `@base/owl` is the only Owl entry point the Base UI components and consumer apps need. Because `@base/owl`, `@base/component`, and `@base/theme` all point at the exact same `dist/baseui.esm.js` URL, the browser fetches and evaluates it once and every key shares the same module instance — no separate classic `<script>` needs to load first to set up a shared global.
 

package/docs/theming.md

@@ -38,7 +38,7 @@ For a reusable theme toggle with persistence, URL override, button-label sync, a
 </script>
 ```
 
-`https://unpkg.com/@thebase/ui@latest/dist/baseui.esm.js` mirrors the same file 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. Npm/bundler consumers can import the same API from `@thebase/ui`.
+`https://unpkg.com/@thebase/ui@latest/dist/baseui.esm.js` mirrors the same file 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. Npm/bundler consumers can import the same API from `@thebase/ui`.
 
 For a ready-made icon button, use the Base UI component instead of wiring your own click handler:
 

package/docs/usage-guide.md

@@ -32,7 +32,7 @@ Save this as an `.html` file and open it — no build step, no server required.
 </html>
 ```
 
-`https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/...` is the real jsDelivr URL for the published `@thebase/ui` npm package's `latest` tag, used here for a copy-paste-and-go quick start. Pin an exact version instead (e.g. `@1.1.5`, or `@1` to take only non-breaking updates) for production, so a new release can't change what your page loads. See [Installation](installation.md) for jsDelivr/unpkg/npm/self-hosted paths.
+`https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/...` is the real jsDelivr URL for the published `@thebase/ui` npm package's `latest` tag, used here for a copy-paste-and-go quick start. Pin an exact version instead (e.g. `@1.1.7`, or `@1` to take only non-breaking updates) for production, so a new release can't change what your page loads. See [Installation](installation.md) for jsDelivr/unpkg/npm/self-hosted paths.
 
 The static bundle calls `thebase.mountAll()` automatically on `DOMContentLoaded`, so initial `[b-ui]` and `[b-icon]` markup mounts without an extra script. Call `thebase.mountAll(root)` yourself only after injecting new markup or when mounting a specific fragment. If the consumer is itself an application, use [step 2](#2-install-pure-owl-api--recommended) instead — that's the recommended path.
 
@@ -63,7 +63,7 @@ Both APIs come from the same package and the same CSS file, and can be mixed on
 </script>
 ```
 
-`https://unpkg.com/@thebase/ui@latest/dist/...` mirrors the same files as an alternative CDN if jsDelivr is unreachable — swap the host in each URL above. Pin an exact version (e.g. `@1.1.5`, or `@1` to take only non-breaking updates) instead of `@latest` for production.
+`https://unpkg.com/@thebase/ui@latest/dist/...` mirrors the same files as an alternative CDN if jsDelivr is unreachable — swap the host in each URL above. Pin an exact version (e.g. `@1.1.7`, or `@1` to take only non-breaking updates) instead of `@latest` for production.
 
 ```html
 <script type="module">
@@ -103,7 +103,7 @@ Two rules that account for most integration failures — see [Base Components](o
 <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.
+`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.
 
 **Option B — npm (bundler-based apps: Vite, webpack, etc.):**
 
@@ -120,7 +120,7 @@ import "@thebase/ui"; // side-effect import: registers window.thebase and auto-m
 
 Rule that applies to both options:
 
-- Production pages must use a pinned version (e.g. `@thebase/ui@1.1.5` or `@thebase/ui@1`), never `@latest`.
+- Production pages must use a pinned version (e.g. `@thebase/ui@1.1.7` or `@thebase/ui@1`), never `@latest`.
 
 Mount markup:
 
@@ -219,7 +219,7 @@ export default {
   },
   serviceWorker: {
     cacheName: "my-app-cache-v1",
-    cdnVersion: "1.1.5", // pin to match the importmap in index.html
+    cdnVersion: "1.1.7", // pin to match the importmap in index.html
     appFiles: ["/app.css", "/app.js", "/app.xml", "/favicon.svg", "/icons/icon-192.png", "/icons/icon-512.png"],
   },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thebase/ui",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "description": "CDN-installable Bootstrap 5 UI component library.",
   "type": "module",
   "main": "./dist/baseui.min.js",

package/docs/components/input-group.md

@@ -1,68 +0,0 @@
-# Input Group
-
-## Base component
-
-```js
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-  InputGroupText,
-  InputGroupTextarea,
-} from "@thebase/ui";
-```
-
-```base-ui
-<div class="d-flex flex-column gap-4 w-100" style="max-width: 28rem">
-  <InputGroup label="'Search'" supportingText="'Search the docs'">
-    <InputGroupInput/>
-    <InputGroupAddon align="'inline-end'">
-      <Icon name="'search'"/>
-    </InputGroupAddon>
-  </InputGroup>
-
-  <InputGroup label="'Website'">
-    <InputGroupInput placeholder="'https://'"/>
-    <InputGroupAddon align="'inline-end'">
-      <InputGroupButton>Search</InputGroupButton>
-    </InputGroupAddon>
-  </InputGroup>
-
-  <InputGroup label="'Message'">
-    <InputGroupTextarea rows="3"/>
-    <InputGroupAddon align="'block-end'">
-      <InputGroupText>0/280</InputGroupText>
-      <InputGroupButton variant="'default'" className="'ms-auto'">Send</InputGroupButton>
-    </InputGroupAddon>
-  </InputGroup>
-</div>
-```
-
-| Component | Prop | Type | Notes |
-| --- | --- | --- | --- |
-| `InputGroup` | `className` | `String` | optional |
-| `InputGroup` | `label`, `labelBackground`, `supportingText`, `errorText`, `invalid` | `String` / `Boolean` | Material-style outlined group, same label as [Input](/examples/blocks.html#/docs/components/input): the label floats onto the border once the control is focused or filled. Also inherited from a parent `Field`. |
-| `InputGroupAddon` | `align` | `String` | `inline-start` (default), `inline-end`, `block-start`, `block-end` |
-| `InputGroupButton` | `variant` | `String` | `default`, `destructive`, `outline`, `secondary`, `ghost` (default), `link` |
-| `InputGroupButton` | `size` | `String` | `xs` (default), `icon-xs`, `sm`, `icon-sm` |
-| `InputGroupText` | `className` | `String` | optional |
-| `InputGroupInput` | `type`, `value`, `placeholder`, `disabled`, `readonly`, `invalid` | mixed | input control |
-| `InputGroupTextarea` | `value`, `placeholder`, `rows`, `disabled`, `readonly`, `invalid`, `resize` | mixed | textarea control |
-
-See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
-
-## Static component
-
-```base-ui
-<div b-ui="input-group">
-  <div b-input-group-addon b-att-align="inline-start">
-    <span b-input-group-text>@</span>
-  </div>
-  <input b-ui="input" placeholder="username">
-</div>
-```
-
-Use `b-att-align="inline-start|inline-end|block-start|block-end"` on `b-input-group-addon`.
-Use `b-input-group-button` with `b-att-size="xs|icon-xs|sm|icon-sm"` and
-`b-att-variant="default|destructive|outline|secondary|ghost|link"` for embedded actions.