@thebase/ui 1.1.4 → 1.1.6

package/dist/baseui.registry.json

@@ -1697,13 +1697,13 @@
     }
   ],
   "integrity": {
-    "baseui.min.css": "sha384-RP2d04etuqh6nmVNHdJFYqK79B7N55jITUg52YrEXI3lyla5kJA4AHa2hUq79v0m",
+    "baseui.min.css": "sha384-CJXU0BIk1YJ6i2k4WqGlnxRXisLJ1pvbbdAOaIYXbsq3NjdqvCsST304XieDxyIp",
     "bootstrap.bundle.min.js": "sha384-RMbllTJcplkCRnELNTOc5Kz/3AvFDE/rNlJqWqfgmRWruobClBdfwvl10akQZkR1",
-    "baseui.min.js": "sha384-6WmmDQaq2vveoleqTuVjap7gNc/1I9cKo+GmkXdLpgKwap8gwo8P5Yw80YWT+Cuj",
-    "baseui.esm.js": "sha384-9haHF/FrXo5MXP2GQGK33GkmwAXQAde21ogM5mvCuWyOHwhyEwSw8isxrzgaHrs7",
+    "baseui.min.js": "sha384-RRvp6vUHm/o+shXVAySNrLIPTaWQis8FmnhSPziowptMMfxaPmfWvrwCqKqNpYTo",
+    "baseui.esm.js": "sha384-lqsK9lnh8XSA2lx94aLjn0Ndngg3B6lRVp734RbJmO51IUA0xufqGYyE5+nV9kKu",
     "baseui.icons.esm.js": "sha384-hj39VMhzcFvmYnjob2hlioMOAqwAXCURGreF6s9RitXFp/iYi7rUdqtfCI+ICQeS",
-    "baseui.templates.xml": "sha384-4pEOfbxiBDpMq0vJHvl9+ZFNcnTDhvZGdTZcmCFOELE0vXQrateo0qlO8VeuoKdq",
-    "baseui.block-viewer.esm.js": "sha384-6GNPYUTwsoi1ZsfOWhVWqw4vI328WX6Xb5f7A4HygyT5s+fmJaEbL7ZQmPamoyJz",
+    "baseui.templates.xml": "sha384-7ALCzje9vh+KVAMbUXRuj10oa2Fnreo1X8wv2+MFVsMo1wXYNL59Yh/HCk35Vn8d",
+    "baseui.block-viewer.esm.js": "sha384-y7RT1EQqZt+wRpYQOjJW1vV/flr7rMB62ri6NmYbf8Yg+YQEIhFBeywjB90YIaML",
     "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

@@ -1085,16 +1085,7 @@
   </t>
   <t t-name="baseui.Combobox">
     <div t-att-class="'bu-combobox' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" t-ref="root">
-      <input
-        class="form-control"
-        role="combobox"
-        t-att-id="props.id"
-        t-att-aria-expanded="disclosure.open ? 'true' : 'false'"
-        t-att-placeholder="props.placeholder"
-        t-att-value="state.query"
-        t-on-input="onInput"
-        t-on-focus="onFocus"
-      />
+      <t t-call="baseui.Outlined"><t t-call="baseui.Combobox.field"/></t>
       <div t-if="disclosure.open" class="bu-combobox-list" role="listbox">
         <div
           t-foreach="filteredOptions"
@@ -1109,6 +1100,21 @@
       </div>
     </div>
   </t>
+  <t t-name="baseui.Combobox.field">
+    <input
+      t-att-class="classNames"
+      role="combobox"
+      t-att-id="props.id"
+      t-att-disabled="props.disabled"
+      t-att-aria-expanded="disclosure.open ? 'true' : 'false'"
+      t-att-aria-invalid="isInvalid ? 'true' : undefined"
+      t-att-aria-describedby="describedBy"
+      t-att-placeholder="fieldPlaceholder"
+      t-att-value="state.query"
+      t-on-input="onInput"
+      t-on-focus="onFocus"
+    />
+  </t>
   <t t-name="Combobox" t-call="baseui.Combobox"/>
 <t t-name="baseui.command">
     <div b-ui="command" class="bu-command"/>
@@ -1344,12 +1350,17 @@
     <input class="form-control" type="date"/>
   </t>
   <t t-name="baseui.DatePicker">
+    <t t-call="baseui.Outlined"><t t-call="baseui.DatePicker.field"/></t>
+  </t>
+  <t t-name="baseui.DatePicker.field">
     <input
       type="date"
       t-att-class="classNames"
       t-att-style="props.style"
       t-att-value="props.value"
       t-att-disabled="props.disabled"
+      t-att-aria-invalid="isInvalid ? 'true' : undefined"
+      t-att-aria-describedby="describedBy"
       t-on-input="onInput"
     />
   </t>
@@ -1616,13 +1627,7 @@
       t-att-class="classNames"
       t-att-style="props.style"
     >
-      <label t-if="props.label" class="bu-field-label" data-slot="field-label">
-        <t t-esc="props.label"/>
-      </label>
       <t t-slot="default"/>
-      <div t-if="props.error" role="alert" class="bu-field-error" data-slot="field-error">
-        <t t-esc="props.error"/>
-      </div>
     </div>
   </t>
   <t t-name="Field" t-call="baseui.Field"/>
@@ -1746,7 +1751,7 @@
   </t>
   <t t-name="HoverCardTrigger" t-call="baseui.HoverCardTrigger"/>
   <t t-name="baseui.HoverCardContent">
-    <span t-if="open" class="bu-hover-card-content" t-att-style="props.style" role="dialog"><t t-slot="default"/></span>
+    <span t-if="open" t-att-class="'bu-hover-card-content' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" role="dialog"><t t-slot="default"/></span>
   </t>
   <t t-name="HoverCardContent" t-call="baseui.HoverCardContent"/>
 <t t-name="baseui.Icon">
@@ -1761,20 +1766,24 @@
     ></span>
   </t>
   <t t-name="Icon" t-call="baseui.Icon"/>
-<t t-name="baseui.Input">
-    <div t-if="isOutlined" t-att-class="outlinedClassNames">
+<t t-name="baseui.Outlined">
+    <div t-if="isOutlined" t-att-class="outlinedClassNames" t-att-style="labelStyle">
       <div class="bu-input-box">
-        <Icon t-if="props.leadingIcon" name="props.leadingIcon" className="'bu-input-icon bu-input-leading'"/>
-        <t t-call="baseui.Input.field"/>
-        <span class="bu-input-label" t-esc="props.label"/>
+        <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"/>
         <Icon t-if="trailingIcon" name="trailingIcon" className="'bu-input-icon bu-input-trailing'"/>
+        <Tooltip t-if="tipText" content="tipText" className="'bu-input-tip'"><t t-set-slot="trigger"><Icon name="'info'"/></t></Tooltip>
       </div>
       <div t-if="supportingText or props.maxLength" class="bu-input-support">
         <span t-att-id="supportId" t-esc="supportingText"/>
         <span t-if="props.maxLength" class="bu-input-counter" t-esc="counter"/>
       </div>
     </div>
-    <t t-else="" t-call="baseui.Input.field"/>
+    <t t-else="" t-out="0"/>
+  </t>
+  <t t-name="baseui.Input">
+    <t t-call="baseui.Outlined"><t t-call="baseui.Input.field"/></t>
   </t>
   <t t-name="baseui.Input.field">
     <input
@@ -1791,7 +1800,7 @@
       t-att-maxlength="props.maxLength"
       t-att-aria-label="ariaLabel"
       t-att-aria-invalid="isInvalid ? 'true' : undefined"
-      t-att-aria-describedby="supportingText ? supportId : undefined"
+      t-att-aria-describedby="describedBy"
       t-att-min="props.min"
       t-att-max="props.max"
       t-att-step="props.step"
@@ -1802,7 +1811,11 @@
   <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">
-    <div t-att-class="classNames" t-att-style="props.style" data-slot="input-group" role="group"><t t-slot="default"/></div>
+    <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
@@ -1837,7 +1850,7 @@
       t-att-class="classNames"
       t-att-style="props.style"
       t-att-type="props.type || 'text'"
-      t-att-placeholder="props.placeholder"
+      t-att-placeholder="fieldPlaceholder"
       t-att-value="props.value"
       t-att-disabled="props.disabled"
       t-att-readonly="props.readonly"
@@ -1851,7 +1864,7 @@
     <textarea
       t-att-class="classNames"
       t-att-style="props.style"
-      t-att-placeholder="props.placeholder"
+      t-att-placeholder="fieldPlaceholder"
       t-att-rows="props.rows"
       t-att-disabled="props.disabled"
       t-att-readonly="props.readonly"
@@ -2044,8 +2057,13 @@
     <select b-ui="native-select"><t t-slot="default"/></select>
   </t>
   <t t-name="baseui.NativeSelect">
+    <t t-call="baseui.Outlined"><t t-call="baseui.NativeSelect.field"/></t>
+  </t>
+  <t t-name="baseui.NativeSelect.field">
     <select t-att-class="classNames" t-att-disabled="props.disabled" t-att-value="props.value"
-            t-att-aria-label="ariaLabel" t-att-id="props.id" t-att-style="props.style" t-on-change="onChange">
+            t-att-aria-label="ariaLabel" t-att-id="props.id" t-att-style="props.style"
+            t-att-aria-invalid="isInvalid ? 'true' : undefined" t-att-aria-describedby="describedBy"
+            t-on-change="onChange">
       <t t-slot="default"/>
     </select>
   </t>
@@ -2256,7 +2274,14 @@
   <t t-name="Separator" t-call="baseui.Separator"/>
 <t t-name="baseui.select"><div b-ui="select"><t t-esc="props.content"/></div></t>
   <t t-name="baseui.Select">
-    <div t-att-class="classNames" t-att-style="props.style" t-ref="root"><t t-slot="default"/></div>
+    <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"/>
+      <Tooltip t-if="isOutlined and tipText" content="tipText" className="'bu-input-tip'"><t t-set-slot="trigger"><Icon name="'info'"/></t></Tooltip>
+      <div t-if="isOutlined and supportingText" class="bu-input-support">
+        <span t-att-id="supportId" t-esc="supportingText"/>
+      </div>
+    </div>
   </t>
   <t t-name="Select" t-call="baseui.Select"/>
   <t t-name="baseui.SelectTrigger">
@@ -2732,15 +2757,21 @@
     <textarea b-ui="textarea"></textarea>
   </t>
   <t t-name="baseui.Textarea">
+    <t t-call="baseui.Outlined"><t t-call="baseui.Textarea.field"/></t>
+  </t>
+  <t t-name="baseui.Textarea.field">
     <textarea
       t-att-class="classNames"
       t-att-style="props.style"
-      t-att-placeholder="props.placeholder"
+      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-id="props.id"
+      t-att-maxlength="props.maxLength"
+      t-att-aria-invalid="isInvalid ? 'true' : undefined"
+      t-att-aria-describedby="describedBy"
       t-on-input="onInput"
       t-on-change="onChange"
     ></textarea>

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.3/dist/baseui.analytics.esm.js";
+  import { init } from "https://cdn.jsdelivr.net/npm/@thebase/ui@1.1.6/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.3/dist/baseui.analytics.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@thebase/ui@1.1.6/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.3` 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.6` 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.3`, 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.6`, 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/combobox.md

@@ -20,7 +20,7 @@ import { Combobox } from "@thebase/ui";
     { value: 'nuxtjs', label: 'Nuxt.js' },
     { value: 'remix', label: 'Remix' },
     { value: 'astro', label: 'Astro' },
-  ]" placeholder="'Select a framework'"/>
+  ]" label="'Framework'" placeholder="'Select a framework'"/>
 </div>
 ```
 
@@ -32,6 +32,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`, `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

@@ -13,9 +13,9 @@ import { DatePicker } from "@thebase/ui";
 ```
 
 ```base-ui
-<div style="max-width: 28rem" class="w-100 d-flex flex-column gap-2">
-  <Label>Date of birth</Label>
-  <DatePicker/>
+<div style="max-width: 28rem" class="w-100 d-flex flex-column gap-4">
+  <DatePicker label="'Date of birth'" supportingText="'As on your ID'"/>
+  <DatePicker label="'Start date'" errorText="'Pick a date'"/>
 </div>
 ```
 
@@ -25,6 +25,7 @@ import { DatePicker } from "@thebase/ui";
 | `DatePicker` | `disabled` | `Boolean` | optional |
 | `DatePicker` | `className` | `String` | optional |
 | `DatePicker` | `onChange` | `Function` | optional |
+| `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/field.md

@@ -25,37 +25,31 @@ import {
     <FieldLegend>Payment Method</FieldLegend>
     <FieldDescription>All transactions are secure and encrypted</FieldDescription>
     <FieldGroup className="'mt-3 gap-3 d-flex flex-column'">
-      <Field>
-        <FieldLabel for="'card-name'">Name on Card</FieldLabel>
+      <Field label="'Name on Card'">
         <Input id="'card-name'" value="'Evil Rabbit'"/>
       </Field>
 
-      <Field>
-        <FieldLabel for="'card-number'">Card Number</FieldLabel>
-        <Input id="'card-number'" value="'1234 5678 9012 3456'"/>
-        <FieldDescription>Enter your 16-digit card number</FieldDescription>
+      <Field label="'Card Number'" description="'Enter your 16-digit card number'">
+        <Input id="'card-number'" value="'1234 5678 9012 3456'" leadingIcon="'credit-card'"/>
       </Field>
 
       <div class="row g-3">
         <div class="col-4">
-          <Field>
-            <FieldLabel for="'expiry-month'">Month</FieldLabel>
-            <NativeSelect id="'expiry-month'" ariaLabel="'Month'">
+          <Field label="'Month'">
+            <NativeSelect id="'expiry-month'">
               <option>MM</option>
             </NativeSelect>
           </Field>
         </div>
         <div class="col-4">
-          <Field>
-            <FieldLabel for="'expiry-year'">Year</FieldLabel>
-            <NativeSelect id="'expiry-year'" ariaLabel="'Year'">
+          <Field label="'Year'">
+            <NativeSelect id="'expiry-year'">
               <option>YYYY</option>
             </NativeSelect>
           </Field>
         </div>
         <div class="col-4">
-          <Field>
-            <FieldLabel for="'card-cvv'">CVV</FieldLabel>
+          <Field label="'CVV'">
             <Input id="'card-cvv'" value="'123'"/>
           </Field>
         </div>
@@ -72,8 +66,7 @@ import {
         </Field>
       </FieldSet>
 
-      <Field>
-        <FieldLabel for="'comments'">Comments</FieldLabel>
+      <Field label="'Comments'">
         <Textarea id="'comments'" placeholder="'Add any additional comments'" rows="3"/>
       </Field>
     </FieldGroup>
@@ -86,6 +79,19 @@ import {
 </form>
 ```
 
+### Outlined controls
+
+`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%">
+  <Field label="'Email'" description="'We never share it'"><Input leadingIcon="'mail'"/></Field>
+  <Field label="'Bio'" error="'Too short'"><Textarea/></Field>
+</div>
+```
+
+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
 
 ```base-ui

package/docs/components/hover-card.md

@@ -10,15 +10,12 @@ import { HoverCard, HoverCardContent, HoverCardTrigger } from "@thebase/ui";
 <div style="max-width: 28rem">
   <HoverCard>
     <HoverCardTrigger>
-      <a href="https://twitter.com/shadcn" class="text-decoration-underline">@shadcn</a>
+      <a href="https://thebase.vn" class="text-decoration-underline">@thebase</a>
     </HoverCardTrigger>
     <HoverCardContent className="'w-auto'">
       <div class="d-flex justify-content-between gap-3" style="width: 20rem">
-        <Avatar src="'https://github.com/shadcn.png'" alt="'@shadcn'">
-          <t t-set-slot="fallback">SC</t>
-        </Avatar>
-        <div class="d-flex flex-column gap-1">
-          <h4 class="small fw-semibold mb-0">@shadcn</h4>
+        <div class="d-flex flex-column gap-1" style="min-width: 0">
+          <h4 class="small fw-semibold mb-0">@thebase</h4>
           <p class="small mb-0">The React Framework – created and maintained by @vercel.</p>
           <div class="d-flex align-items-center pt-2">
             <span class="small text-muted">Joined December 2021</span>

package/docs/components/input-group.md

@@ -15,22 +15,22 @@ import {
 
 ```base-ui
 <div class="d-flex flex-column gap-4 w-100" style="max-width: 28rem">
-  <InputGroup>
-    <InputGroupInput placeholder="'Search...'"/>
+  <InputGroup label="'Search'" supportingText="'Search the docs'">
+    <InputGroupInput/>
     <InputGroupAddon align="'inline-end'">
       <Icon name="'search'"/>
     </InputGroupAddon>
   </InputGroup>
 
-  <InputGroup>
+  <InputGroup label="'Website'">
     <InputGroupInput placeholder="'https://'"/>
     <InputGroupAddon align="'inline-end'">
       <InputGroupButton>Search</InputGroupButton>
     </InputGroupAddon>
   </InputGroup>
 
-  <InputGroup>
-    <InputGroupTextarea placeholder="'Enter message...'" rows="3"/>
+  <InputGroup label="'Message'">
+    <InputGroupTextarea rows="3"/>
     <InputGroupAddon align="'block-end'">
       <InputGroupText>0/280</InputGroupText>
       <InputGroupButton variant="'default'" className="'ms-auto'">Send</InputGroupButton>
@@ -42,6 +42,7 @@ import {
 | Component | Prop | Type | Notes |
 | --- | --- | --- | --- |
 | `InputGroup` | `className` | `String` | optional |
+| `InputGroup` | `label`, `labelBackground`, `supportingText`, `useTip`, `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` |

package/docs/components/input.md

@@ -30,7 +30,9 @@ import { Input } from "@thebase/ui";
 | --- | --- | --- |
 | `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 an info icon (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` |
 | `leadingIcon` / `trailingIcon` | `String` | Lucide icon names (outlined mode only) |
 | `maxLength` | `Number` | native limit; outlined mode also shows a `n/max` counter |

package/docs/components/native-select.md

@@ -10,8 +10,7 @@ import { NativeSelect } from "@thebase/ui";
 
 ```base-ui
 <div class="d-grid w-100 gap-2" style="max-width: 24rem">
-  <Label for="'fruit'">Fruit</Label>
-  <NativeSelect>
+  <NativeSelect label="'Fruit'">
     <option value="'apple'">Apple</option>
     <option value="'banana'">Banana</option>
     <option value="'blueberry'">Blueberry</option>
@@ -29,6 +28,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`, `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/select.md

@@ -7,9 +7,9 @@ import { Select, SelectContent, SelectItem, SelectTrigger } from "@thebase/ui";
 ```
 
 ```base-ui
-<div style="max-width: 180px">
-  <Select value="'dark'">
-    <SelectTrigger>Theme</SelectTrigger>
+<div style="max-width: 240px">
+  <Select label="'Theme'" value="'dark'">
+    <SelectTrigger>Dark</SelectTrigger>
     <SelectContent>
       <SelectItem value="'light'">Light</SelectItem>
       <SelectItem value="'dark'">Dark</SelectItem>
@@ -24,6 +24,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger } from "@thebase/ui";
 | `Select` | `value` | `String` | optional |
 | `Select` | `onChange` | `Function` | optional |
 | `Select` | `className` | `String` | optional |
+| `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/textarea.md

@@ -10,25 +10,20 @@ import { Textarea } from "@thebase/ui";
 
 ```base-ui
 <div class="d-flex flex-column gap-4" style="max-width: 28rem; width: 100%">
-  <Textarea placeholder="'Type your message here.'"/>
+  <Textarea label="'Message'"/>
 
-  <div class="d-grid gap-3">
-    <Label htmlFor="'message'">Your message</Label>
-    <Textarea placeholder="'Type your message here.'" id="'message'"/>
-  </div>
+  <Textarea label="'Your message'" placeholder="'Type your message here.'" id="'message'"/>
 
-  <div class="d-grid gap-3">
-    <Label htmlFor="'message-2'">Your Message</Label>
-    <Textarea placeholder="'Type your message here.'" id="'message-2'"/>
-    <Typography variant="'small'" className="'text-muted'">Your message will be copied to the support team.</Typography>
-  </div>
+  <Textarea label="'Your message'" supportingText="'Your message will be copied to the support team.'" maxLength="200"/>
+
+  <Textarea label="'Your message'" errorText="'Message is required'"/>
 
   <div class="d-grid gap-2">
-    <Textarea placeholder="'Type your message here.'"/>
+    <Textarea label="'Feedback'"/>
     <Button>Send message</Button>
   </div>
 
-  <Textarea placeholder="'Type your message here.'" disabled="true"/>
+  <Textarea label="'Disabled'" placeholder="'Type your message here.'" disabled="true"/>
 </div>
 ```
 
@@ -44,6 +39,7 @@ 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`, `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.3`, 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.6`, 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.3`, 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.6`, 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.3`, 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.6`, 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.0`, 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.3`, 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.6`, 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: