tera-system-ui 0.1.76 → 0.2.1

package/dist/{components → internal}/icons/IconSearch.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">import { styles } from "./Icons";
 import IconSearch from "@tabler/icons-svelte/icons/search";
 let { children, ...props } = $props();
-</script>
-
-<IconSearch class={styles({...props})}/>
-
+</script>
+
+<IconSearch class={styles({...props})}/>

package/dist/{components → internal}/icons/IconX.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">import { styles } from "./Icons";
 import IconX from "@tabler/icons-svelte/icons/x";
 let { children, ...props } = $props();
-</script>
-
-<IconX class={styles({...props})}/>
-
+</script>
+
+<IconX class={styles({...props})}/>

package/dist/internal/icons/index.d.ts

@@ -0,0 +1,4 @@
+export { default as IconX } from './IconX.svelte';
+export { default as IconCheck } from './IconCheck.svelte';
+export { default as IconChevronDown } from './IconChevronDown.svelte';
+export { default as IconSearch } from './IconSearch.svelte';

package/dist/internal/icons/index.js

@@ -0,0 +1,4 @@
+export { default as IconX } from './IconX.svelte';
+export { default as IconCheck } from './IconCheck.svelte';
+export { default as IconChevronDown } from './IconChevronDown.svelte';
+export { default as IconSearch } from './IconSearch.svelte';

package/dist/llms/accordion.md

@@ -2,7 +2,7 @@
 
 Collapsible accordion with single or multi-open support. Parts: Accordion, AccordionItem, AccordionTrigger, AccordionContent.
 
-Built on BitsUI Accordion primitive with full keyboard navigation.
+Accordion recipe — the canonical styled layer for the base design language. Built on the BitsUI Accordion primitive (root / item / header / trigger / content) with full keyboard navigation. The accordion is a multi-part component, so the recipe is SLOTTED: each visible part gets a named slot (root, item, header, trigger, chevron, content, body) that an app can target independently when extending with `tv({ extend: accordionRecipe, ... })`. Restyle-internals (the lighter rung): the per-component CSS vars below (--tera-accordion-*) let a theme/app retune the trigger's vertical rhythm, weight and the content's bottom padding with no code change; they default to global axis tokens in tera-ui-base.css. See docs/ARCHITECTURE.md for the worked extend example (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).
 
 ## Import
 
@@ -61,6 +61,7 @@ Built on BitsUI Accordion primitive with full keyboard navigation.
   Name                      Type                                    Required
   ──────────────────────────────────────────────────────────────────────────
   children                  Snippet                                 optional  
+  chevronIcon               Snippet                                 optional  Replace the default chevron with custom markup (structural seam).
   ref                       HTMLButtonElement                       optional  (bindable)
 
 ### Usage

package/dist/llms/alert.md

@@ -2,6 +2,8 @@
 
 Contextual alert banner for status messages.
 
+Alert recipe — the canonical styled layer for the base design language. Multi-part inline banner, so it is slotted: `root` (the banner wrapper, where the variant bg/border lives), `icon` (the leading status glyph), `title`, `description` (string/children body), and `close` (the dismiss button). The single `variant` axis (info/success/warning/error) drives the background, left border, and the icon/text colors across every slot. An app owns its look by extending this recipe with `tv({ extend: alertRecipe, ... })` in typed code. See docs/ARCHITECTURE.md for the worked example (kept out of this JSDoc so the llms doc generator doesn't grep its tokens). Restyle-internals (the lighter rung): the per-component CSS var below (--tera-alert-radius) lets a theme/app retune corner radius with no code change; it defaults to the global radius axis token.
+
 ## Import
 
   import { Alert } from 'tera-system-ui';
@@ -12,13 +14,15 @@ Contextual alert banner for status messages.
 
   Name                      Type                                    Required
   ──────────────────────────────────────────────────────────────────────────
-  variant                   AlertVariant                            optional  
+  variant                   info | success | warning | error        optional  (default: info)
   title                     string                                  optional  
   description               string | Snippet                        optional  
   closable                  boolean                                 optional  
-  icon                      boolean                                 optional  
+  icon                      boolean                                 optional  Show the leading status icon (default true).
   children                  Snippet                                 optional  
   class                     string                                  optional  
+  iconContent               Snippet                                 optional  Replace the default status glyph with custom markup (structural seam).
+  closeIcon                 Snippet                                 optional  Replace the default close (X) icon with custom markup (structural seam).
 
 ### Usage
 
@@ -27,3 +31,4 @@ Contextual alert banner for status messages.
   </script>
 
   <Alert>Content</Alert>
+  <Alert variant="success">Content</Alert>

package/dist/llms/avatar.md

@@ -2,6 +2,8 @@
 
 User avatar with image, initials fallback, and size variants.
 
+Avatar recipe — the canonical styled layer for the base design language. Two stylable parts: `root` (the circular frame holding the image or initials fallback) and `ring` (the overlay border drawn on top). An app owns its look by extending this recipe with `tv({ extend: avatarRecipe, ... })` in typed code — sizing and the fallback behavior are inherited. See docs/ARCHITECTURE.md for the worked example (kept out of this JSDoc so the llms doc generator doesn't grep its variant tokens). Restyle-internals (the lighter rung): the per-component CSS var below (--tera-avatar-radius) lets a theme/app retune the corner radius with no code change; it defaults to a full circle (9999px).
+
 ## Import
 
   import { Avatar } from 'tera-system-ui';
@@ -20,8 +22,6 @@ User avatar with image, initials fallback, and size variants.
   alt                       string                                  optional  
   src                       string                                  optional  
   ref                       HTMLDivElement                          optional  (bindable)
-  userUid                   string                                  optional  
-  apiUrl                    string                                  optional  
 
 ### Usage
 

package/dist/llms/badge.md

@@ -2,6 +2,8 @@
 
 Compact label for counts, status, or categories.
 
+Badge recipe — the canonical styled layer for the base design language. Primary customization surface: an app owns its look by extending this recipe with `tv({ extend: badgeRecipe, ... })` in typed code — base sizing and tones are inherited; only the design language changes. See docs/ARCHITECTURE.md for the worked example (kept out of this JSDoc so the llms doc generator doesn't grep its variant tokens). Restyle-internals (the lighter rung): the per-component CSS var below (--tera-badge-radius) lets a theme/app retune the corner radius with no code change; it defaults to a global axis token in tera-ui-base.css.
+
 ## Import
 
   import { Badge } from 'tera-system-ui';
@@ -19,6 +21,8 @@ Compact label for counts, status, or categories.
   dot                       boolean                                 optional  
   closable                  boolean                                 optional  
   onclose                   () => void                              optional  
+  dotIcon                   Snippet                                 optional  Replace the default leading dot indicator with custom markup (structural seam).
+  closeIcon                 Snippet                                 optional  Replace the default close button icon with custom markup (structural seam).
 
 ### Usage
 

package/dist/llms/bottom-sheet.md

@@ -0,0 +1,44 @@
+# BottomSheet
+
+Draggable iOS-style bottom sheet with snap points, gesture dragging, container-scale effect, and stacking. Exports BottomSheet + bottomSheetStore.
+
+BottomSheet recipe — the canonical styled layer for the draggable sheet. An iOS-style bottom sheet with snap points, gesture dragging, container-scale effect, and stacking (custom behavior — not bits-ui). The recipe is slotted by role — backdrop / sheet / handle / handleBar / header / closeButton / content — so an app can restyle any part independently. Only the *themeable, static* surface lives here; the per-frame transforms (translate / scale / opacity) are driven imperatively from the component and the runtime transition duration is passed through the `--transition-duration` CSS var. The `constrained` variant switches fixed → absolute positioning when the sheet is bounded inside a container; `dragging` carries the grabbing cursor. Primary customization surface: extend with `tv({ extend: bottomSheetRecipe, ... })` in typed code. Lighter rung: the per-component CSS var (--tera-bottom-sheet-radius) retunes the top corner radius with no code change; it defaults to the prior literal value inline.
+
+## Import
+
+  import { BottomSheet } from 'tera-system-ui';
+  import { BottomSheet } from 'tera-system-ui/bottom-sheet';  // subpath
+
+## BottomSheet
+
+### Props
+
+  Name                      Type                                    Required
+  ──────────────────────────────────────────────────────────────────────────
+  constrained               boolean                                 optional  
+  dragging                  boolean                                 optional  
+  id                        string                                  required  Unique identifier for this sheet (drives stacking/z-index registry).
+  open                      boolean                                 optional  Whether the sheet is open. Bindable.
+  snapPoints                number[]                                optional  Snap positions as viewport fractions (0–1), e.g. [0.25, 0.5, 0.9].
+  defaultSnapPoint          number                                  optional  Index into `snapPoints` to settle at when opening.
+  containerRef              HTMLElement                             optional  Container element to constrain the sheet within (constrained mode).
+  scaleTargetRef            HTMLElement                             optional  Element to apply the background scale effect to (defaults to containerRef).
+  constrainToContainer      boolean                                 optional  Constrain the sheet inside `containerRef` (absolute positioning).
+  scaleBackground           boolean                                 optional  Scale/round the background target as the sheet opens (iOS effect).
+  dragToClose               boolean                                 optional  Allow dragging down past the lowest snap point to close.
+  closeOnBackdrop           boolean                                 optional  Close when the backdrop is tapped.
+  showCloseButton           boolean                                 optional  Show a close (X) button in the header (requires the `header` snippet).
+  onClose                   () => void                              optional  Called after the sheet finishes closing.
+  onOpenChange              (open: boolean) => void                 optional  Called whenever the open state changes.
+  children                  Snippet                                 optional  Main body content.
+  header                    Snippet                                 optional  Header content; renders the header bar when set.
+
+### Usage
+
+  <script>
+    import { BottomSheet } from 'tera-system-ui';
+  </script>
+
+  <BottomSheet>Content</BottomSheet>
+  <BottomSheet constrained>Content</BottomSheet>
+  <BottomSheet dragging>Content</BottomSheet>

package/dist/llms/button.md

@@ -2,6 +2,8 @@
 
 Interactive button with variants, sizes, loading state, danger mode, and wave animation.
 
+Button recipe — the canonical styled layer for the base design language. Primary customization surface: an app owns its look by extending this recipe with `tv({ extend: buttonRecipe, ... })` in typed code — base sizing and states are inherited; only the design language changes. See docs/ARCHITECTURE.md for the worked example (kept out of this JSDoc so the llms doc generator doesn't grep its variant tokens). Restyle-internals (the lighter rung): the per-component CSS vars below (--tera-button-*) let a theme/app retune radius, weight and press feel with no code change; they default to global axis tokens in tera-ui-base.css.
+
 ## Import
 
   import { Button } from 'tera-system-ui';
@@ -22,8 +24,12 @@ Interactive button with variants, sizes, loading state, danger mode, and wave an
   danger                    boolean                                 optional  
   block                     boolean                                 optional  
   children                  Snippet                                 optional  
+  spinner                   Snippet                                 optional  Replace the default loading spinner with custom markup (structural seam).
+  href                      HTMLAnchorAttributes['href']            optional  When set, the button renders as an `<a>` (button-as-link) without forking.
+  target                    HTMLAnchorAttributes['target']          optional  
+  rel                       HTMLAnchorAttributes['rel']             optional  
   class                     string                                  optional  
-  ref                       HTMLButtonElement                       optional  (bindable)
+  ref                       HTMLElement                             optional  (bindable)
 
 ### Usage
 

package/dist/llms/card.md

@@ -2,6 +2,8 @@
 
 Content container with elevation, border, and padding variants.
 
+Card recipe — the canonical styled layer for the base design language. Primary customization surface: an app owns its look by extending this recipe with `tv({ extend: cardRecipe, ... })` in typed code — surface, variant and padding scales are inherited; only the design language changes. See docs/ARCHITECTURE.md for the worked example (kept out of this JSDoc so the llms doc generator doesn't grep its variant tokens). Restyle-internals (the lighter rung): the per-component CSS var below (--tera-card-radius) lets a theme/app retune the corner radius with no code change; it defaults to the global container-radius token in tera-ui-base.css.
+
 ## Import
 
   import { Card } from 'tera-system-ui';

package/dist/llms/checkbox.md

@@ -2,7 +2,7 @@
 
 Checkbox input with label and indeterminate support.
 
-Built on BitsUI Checkbox primitive.
+Checkbox recipe — the canonical styled layer for the base design language. Built on the bits-ui Checkbox primitive: a box (root) plus a centered indicator that renders the check / indeterminate glyph. Primary customization surface: an app owns its look by extending this recipe with `tv({ extend: checkboxRecipe, ... })` in typed code — the box sizing, focus and state styles are inherited; only the design language changes. See docs/ARCHITECTURE.md for the worked example. Restyle-internals (the lighter rung): the per-component CSS var below (--tera-checkbox-radius) lets a theme/app retune the box corner radius with no code change; it defaults to a global axis token in tera-ui-base.css.
 
 ## Import
 
@@ -24,6 +24,7 @@ Built on BitsUI Checkbox primitive.
   value                     string                                  optional  Value sent with the form when checked.
   onCheckedChange           (checked: boolean) => void              optional  Called when the checked state changes.
   children                  Snippet                                 optional  Additional content rendered next to the checkbox indicator.
+  checkIcon                 Snippet<[{ checked: boolean; indete...  optional  Replace the default indicator glyph (structural seam). Receives the current `checked` / `indeterminate` state so a custom mark can react.
   ref                       HTMLButtonElement                       optional  Bindable reference to the root button element.
 
 ### Usage

package/dist/llms/colors.md

@@ -23,11 +23,11 @@ Always use semantic tokens in components — never primitive shades.
 
   Tailwind utility      CSS variable               Primitive     Role
   ─────────────────────────────────────────────────────────────────────────
-  bg-surface            --color-surface            #090909   Page / app background
-  bg-surface-raised     --color-surface-raised     #141414   Cards, panels
-  bg-surface-sunken     --color-surface-sunken     #202020   Inputs (filled), disabled areas
-  bg-surface-hover      --color-surface-hover      #303030   Hover / pressed neutral bg
-  bg-surface-control    --color-surface-control    #090909   Interactive controls (button, input outlined, checkbox, select, slider)
+  bg-surface            --color-surface            neutral-token-1   Page / app background
+  bg-surface-raised     --color-surface-raised     neutral-token-2   Cards, panels
+  bg-surface-sunken     --color-surface-sunken     neutral-token-3   Inputs (filled), disabled areas
+  bg-surface-hover      --color-surface-hover      neutral-token-4   Hover / pressed neutral bg
+  bg-surface-control    --color-surface-control    neutral-token-1   Interactive controls (button, input outlined, checkbox, select, slider)
                                                              Light: same as page (white). Dark: elevated gray — sits above both page and dialogs.
                                                              Use this instead of bg-surface for any interactive control background.
 
@@ -35,17 +35,17 @@ Always use semantic tokens in components — never primitive shades.
 
   Tailwind utility      CSS variable               Primitive     Role
   ─────────────────────────────────────────────────────────────────────────
-  border-border-default --color-border-default     #464646   Default border
-  border-border-strong  --color-border-strong      #5F5F5F   Focus ring, separator
+  border-border-default --color-border-default     neutral-token-5   Default border
+  border-border-strong  --color-border-strong      neutral-token-6   Focus ring, separator
 
 ## Semantic Tokens — Text
 
   Tailwind utility      CSS variable               Primitive     Role
   ─────────────────────────────────────────────────────────────────────────
-  text-text-primary     --color-text-primary       #FFFFFF   Body text, headings
-  text-text-secondary   --color-text-secondary     #BFBFBF   Supporting / label text
-  text-text-tertiary    --color-text-tertiary      #8C8C8C   Placeholders, hints
-  text-text-disabled    --color-text-disabled      #5F5F5F   Disabled labels
+  text-text-primary     --color-text-primary       #F7F9FB   Body text, headings
+  text-text-secondary   --color-text-secondary     #9AA4B4   Supporting / label text
+  text-text-tertiary    --color-text-tertiary      #6B7689   Placeholders, hints
+  text-text-disabled    --color-text-disabled      neutral-token-6   Disabled labels
 
 ## Semantic Tokens — Interactive (primary action)
 
@@ -102,15 +102,15 @@ Always use semantic tokens in components — never primitive shades.
 
   ### Neutral scale (inverts in dark mode)
 
-  neutral-token-1  = #090909  (white — page background)
-  neutral-token-2  = #141414
-  neutral-token-3  = #202020  (input / disabled bg)
-  neutral-token-4  = #303030  (hover state bg)
-  neutral-token-5  = #464646  (default border)
-  neutral-token-6  = #5F5F5F  (focus border / disabled text)
-  neutral-token-7  = #8C8C8C  (placeholder / hint)
-  neutral-token-8  = #BFBFBF  (secondary text)
-  neutral-token-13 = #FFFFFF  (primary text)
+  neutral-token-1  = neutral-token-1  (white — page background)
+  neutral-token-2  = neutral-token-2
+  neutral-token-3  = neutral-token-3  (input / disabled bg)
+  neutral-token-4  = neutral-token-4  (hover state bg)
+  neutral-token-5  = neutral-token-5  (default border)
+  neutral-token-6  = neutral-token-6  (focus border / disabled text)
+  neutral-token-7  = #6B7689  (placeholder / hint)
+  neutral-token-8  = #9AA4B4  (secondary text)
+  neutral-token-13 = #F7F9FB  (primary text)
 
   ### Primary (brand blue — changes per theme)
 

package/dist/llms/combobox.md

@@ -2,7 +2,7 @@
 
 Searchable combo-box with autocomplete.
 
-Built on BitsUI Combobox primitive with client-side filtering.
+Combobox recipe — the canonical styled layer for the searchable dropdown. Multi-part component (built on bits-ui Combobox): the recipe is slotted by role — root / input / clear / trigger / chevron / content / viewport / item / empty / chip / chipRemove — so an app can restyle any part independently. The root wrapper carries the open/disabled visual states; the dropdown parts are static base strings. Primary customization surface: extend with `tv({ extend: comboboxRecipe, ... })` in typed code. Lighter rung: the per-component CSS vars (--tera-combobox-*) let a theme retune corner radius with no code change; each reads through an inline fallback to the prior global token, so the recipe is self-sufficient. See docs/ARCHITECTURE.md for worked examples (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).
 
 ## Import
 
@@ -15,11 +15,12 @@ Built on BitsUI Combobox primitive with client-side filtering.
 
   Name                      Type                                    Required
   ──────────────────────────────────────────────────────────────────────────
+  open                      boolean                                 optional  
+  disabled                  boolean                                 optional  
   type                      'single' | 'multiple'                   required  Whether one or many items can be selected at once.
   items                     ComboboxItem[]                          required  List of selectable options.
   value                     string | string[]                       optional  Currently selected value(s). Bindable.
   placeholder               string                                  optional  Placeholder shown in the search input when nothing is selected.
-  disabled                  boolean                                 optional  Prevents all interaction.
   loop                      boolean                                 optional  Whether keyboard navigation wraps at the list boundaries.
   allowDeselect             boolean                                 optional  Allow deselecting the current value by clicking it again (single mode only).
   onchange                  (value: string | string[]) => void      optional  Called when the selection changes.
@@ -29,6 +30,9 @@ Built on BitsUI Combobox primitive with client-side filtering.
   required                  boolean                                 optional  Marks the field as required for form validation.
   scrollAlignment           'nearest' | 'center'                    optional  Scroll alignment for the highlighted item.
   freeInput                 boolean                                 optional  When true (single mode only), whatever the user types becomes the combobox value directly — like a text input with suggestions. Selecting an item from the list still sets its item.value as normal.
+  checkIcon                 Snippet                                 optional  Replace the default selected-item check mark with custom markup.
+  chevronIcon               Snippet                                 optional  Replace the default trigger chevron with custom markup.
+  clearIcon                 Snippet                                 optional  Replace the default clear (×) icon with custom markup.
 
 ### Usage
 
@@ -37,4 +41,6 @@ Built on BitsUI Combobox primitive with client-side filtering.
   </script>
 
   <Combobox />
+  <Combobox open />
+  <Combobox disabled />
   <Combobox onchange={(v) => console.log(v)} />

package/dist/llms/command.md

@@ -2,6 +2,8 @@
 
 Command palette. Parts: Command, CommandInput, CommandList, CommandItem, CommandGroup, CommandEmpty, CommandSeparator, CommandShortcut.
 
+Command recipe — the canonical styled layer for the base design language. Multi-part component (built on bits-ui Command): the recipe is slotted by role — root / list / item / linkItem / group / groupHeading / separator / shortcut / empty — so an app can restyle any part independently. Most of the visual treatment for the list surface, items, groups and empty state lives in the companion `command.scss` (data-cmdk-* attribute selectors); these slots carry the Tailwind utility strings that were previously inlined per sub-component. Primary customization surface: extend with `tv({ extend: commandRecipe, ... })` in typed code. Lighter rung: the per-component CSS var (--tera-command-radius) lets a theme retune the list/menu surface corner radius with no code change; it defaults to 0 (square — the prior look) via an inline fallback. See docs/ARCHITECTURE.md for worked examples (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).
+
 ## Import
 
   import {  } from 'tera-system-ui';

package/dist/llms/date-range-picker.md

@@ -2,7 +2,7 @@
 
 Date range picker with quick-select presets, optional time support, and popover/drawer UI.
 
-Built on BitsUI RangeCalendar and Popover primitives.
+DateRangePicker recipe — the canonical styled layer for the base design language. Composite component (built on bits-ui RangeCalendar + Popover + DateRangeField, with the mobile branch wrapped in the Tera Dialog). The recipe is slotted by role so an app can restyle any region independently: trigger / field / segment / iconBtn — the input row; panel — the popover surface; navBtn / monthLabel / weekday / cell / day — the calendar grid; presetSidebar / presetHeading / presetItem / presetPill — quick-select; timeBar / timeLabel / timeArrow / timeInput — the optional time pickers; footer / footerReset / footerApply — the action row; dialogHeader / dialogTitle / pillBar — the mobile sheet chrome. The hardcoded glyphs are exposed as snippet seams on the component (calendarIcon / clearIcon / prevIcon / nextIcon / closeIcon). Primary customization surface: extend with `tv({ extend: dateRangePickerRecipe, ... })` in typed code. Lighter rung: the per-component CSS vars (--tera-date-range-picker-radius on the trigger, --tera-date-range-picker-panel-radius on the panel) let a theme retune corner radius with no code change; they default to global axis tokens via inline fallbacks. See docs/ARCHITECTURE.md for worked examples (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).
 
 ## Import
 
@@ -14,17 +14,24 @@ Built on BitsUI RangeCalendar and Popover primitives.
 
   Name                      Type                                    Required
   ──────────────────────────────────────────────────────────────────────────
+  presetActive              boolean                                 optional  
+  pillActive                boolean                                 optional  
+  disabled                  boolean                                 optional  
   dateRange                 Date[]                                  optional  The currently selected date range as a two-element array [start, end]. Bindable.
   onchange                  (date: Date[]) => void                  optional  Called when the user applies a new date range.
   enableTime                boolean                                 optional  When true, shows hour and minute pickers alongside the calendar.
   placeholder               string                                  optional  Placeholder text shown in the trigger when no range is selected.
-  disabled                  boolean                                 optional  Prevents all interaction.
   class                     string                                  optional  Additional CSS classes for the trigger button.
   minValue                  CalendarDate                            optional  Earliest selectable date. Use `import { CalendarDate } from '@internationalized/date'` to construct values.
   maxValue                  CalendarDate                            optional  Latest selectable date. Use `import { CalendarDate } from '@internationalized/date'` to construct values.
   isDateDisabled            (date: CalendarDate) => boolean         optional  Returns true for dates that should be shown as disabled and unselectable.
   numberOfMonths            1 | 2                                   optional  Number of calendar months shown side-by-side (desktop only). Defaults to 2.
   weekStartsOn              0 | 1 | 2 | 3 | 4 | 5 | 6               optional  Day of the week the calendar grid starts on. 0 = Sunday, 1 = Monday, … 6 = Saturday.
+  calendarIcon              Snippet                                 optional  Replace the calendar (trigger) icon with custom markup (structural seam).
+  clearIcon                 Snippet                                 optional  Replace the clear (×) icon with custom markup (structural seam).
+  prevIcon                  Snippet                                 optional  Replace the previous-month chevron with custom markup (structural seam).
+  nextIcon                  Snippet                                 optional  Replace the next-month chevron with custom markup (structural seam).
+  closeIcon                 Snippet                                 optional  Replace the mobile dialog close (×) icon with custom markup (structural seam).
 
 ### Usage
 
@@ -33,4 +40,7 @@ Built on BitsUI RangeCalendar and Popover primitives.
   </script>
 
   <DateRangePicker />
+  <DateRangePicker presetActive />
+  <DateRangePicker pillActive />
+  <DateRangePicker disabled />
   <DateRangePicker onchange={(v) => console.log(v)} />

package/dist/llms/dialog.md

@@ -2,7 +2,7 @@
 
 Modal dialog with header/footer snippet slots, size variants, and focus management.
 
-Built on BitsUI Dialog primitive.
+Dialog recipe — the canonical styled layer for the base design language. Multi-part component (built on bits-ui Dialog): the recipe is slotted by role — overlay / content / close / header / body / footer — so an app can restyle any region independently. The `content` slot carries the visual variants (size, position, full-screen layout); `padding` tunes the container/body insets. The hardcoded close glyph is exposed as a `closeIcon` snippet seam. Primary customization surface: extend with `tv({ extend: dialogRecipe, ... })` in typed code. Lighter rung: the per-component CSS var (--tera-dialog-radius) lets a theme retune corner radius with no code change; it defaults to the global container-radius token via an inline fallback. See docs/ARCHITECTURE.md for worked examples (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).
 
 ## Import
 
@@ -15,17 +15,19 @@ Built on BitsUI Dialog primitive.
 
   Name                      Type                                    Required
   ──────────────────────────────────────────────────────────────────────────
+  size                      xs | sm | md | lg | full | auto         optional  (default: sm)
+  position                  top | center                            optional  (default: center)
+  full                      content                                 optional  
+  padding                   none | normal                           optional  (default: normal)
   children                  Snippet                                 optional  
   header                    Snippet                                 optional  Snippet rendered in the dialog header area.
   footer                    Snippet                                 optional  Snippet rendered in the dialog footer area.
   open                      boolean                                 optional  Whether the dialog is open. Bindable.
   class                     string                                  optional  Additional CSS classes for the dialog content panel.
-  size                      'xs' | 'sm' | 'md' | 'lg' | 'full' ...  optional  Controls the maximum width of the dialog panel.
-  position                  'top' | 'center'                        optional  Vertical alignment of the dialog on screen.
-  padding                   'none'                                  optional  Set to 'none' to remove internal padding.
   closeOnClickOutside       boolean                                 optional  Whether clicking the backdrop closes the dialog.
   closeOnNavigateBack       boolean                                 optional  Whether pressing the browser Back button closes the dialog. Default true.
   closeButton               boolean                                 optional  Whether to render a close (×) button in the header.
+  closeIcon                 Snippet                                 optional  Replace the default close (×) icon with custom markup (structural seam).
   staticRender              boolean                                 optional  When true the dialog DOM is kept alive after close — children preserve internal state between open/close cycles.
   preventScroll             boolean                                 optional  Prevent the page from scrolling while the dialog is open.
   onOpenChangeComplete      (open: boolean) => void                 optional  Called after the open or close animation has fully completed. Note: This callback only fires when the internal component mutates the open state, not when the state is changed by outside)
@@ -44,3 +46,6 @@ Built on BitsUI Dialog primitive.
   </script>
 
   <Dialog>Content</Dialog>
+  <Dialog size="xs">Content</Dialog>
+  <Dialog position="top">Content</Dialog>
+  <Dialog full="content">Content</Dialog>

package/dist/llms/drawer.md

@@ -2,6 +2,8 @@
 
 Side drawer that slides in from the screen edge.
 
+Drawer recipe — the canonical styled layer for the base design language. Multi-part slide-in panel (vaul-style sheet, custom behavior — not bits-ui): the recipe is slotted by role — overlay / content / header / headerClose / body / footer — so an app can restyle any part independently. The `side` variant carries the edge it slides from (left / right / bottom) and its slide-in animation; the `size` variant carries the panel width for the vertical (left / right) edges. Primary customization surface: extend with `tv({ extend: drawerRecipe, ... })` in typed code. Lighter rung: the per-component CSS var (--tera-drawer-radius) lets a theme retune the bottom-sheet corner radius with no code change; it defaults to the prior literal value inline. See docs/ARCHITECTURE.md for worked examples (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).
+
 ## Import
 
   import { Drawer } from 'tera-system-ui';
@@ -12,14 +14,15 @@ Side drawer that slides in from the screen edge.
 
   Name                      Type                                    Required
   ──────────────────────────────────────────────────────────────────────────
-  open                      boolean                                 optional  
-  side                      DrawerSide                              optional  
-  size                      DrawerSize                              optional  
-  closeOnClickOutside       boolean                                 optional  
-  header                    Snippet                                 optional  
-  footer                    Snippet                                 optional  
-  children                  Snippet                                 optional  
-  onclose                   () => void                              optional  
+  side                      left | right | bottom                   optional  (default: right)
+  size                      sm | md | lg | full                     optional  (default: md)
+  open                      boolean                                 optional  Whether the drawer is open. Bindable.
+  closeOnClickOutside       boolean                                 optional  Close the drawer when the backdrop is clicked or Escape is pressed.
+  header                    Snippet                                 optional  Header content; renders the header bar with a close button when set.
+  footer                    Snippet                                 optional  Footer content; renders the footer bar when set.
+  children                  Snippet                                 optional  Main body content.
+  closeIcon                 Snippet                                 optional  Replace the default close (X) icon with custom markup (structural seam).
+  onclose                   () => void                              optional  Called after the drawer closes.
 
 ### Usage
 
@@ -28,3 +31,5 @@ Side drawer that slides in from the screen edge.
   </script>
 
   <Drawer>Content</Drawer>
+  <Drawer side="left">Content</Drawer>
+  <Drawer size="sm">Content</Drawer>

package/dist/llms/dropdown-menu.md

@@ -2,7 +2,7 @@
 
 Contextual menu. Parts: DropdownMenu, DropdownMenuItem, DropdownMenuGroup, DropdownMenuHeader, DropdownMenuSeparator.
 
-Parts: DropdownMenu, DropdownMenuItem, DropdownMenuGroup, DropdownMenuHeader, DropdownMenuSeparator. Built on BitsUI DropdownMenu primitive.
+DropdownMenu recipe — the canonical styled layer for the base design language. Multi-part component (built on bits-ui DropdownMenu): the recipe is slotted by role — content (the popup panel), item (a selectable row), group (a section wrapper), header (a section label), separator (the divider rule). The item slot carries the destructive `danger` look as a variant so an app can restyle it independently. Primary customization surface: extend with `tv({ extend: dropdownMenuRecipe, ... })` in typed code. Lighter rung: the per-component CSS var (--tera-dropdown-radius) lets a theme retune the panel corner radius with no code change; it defaults to the global container radius token. See docs/ARCHITECTURE.md for worked examples (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).
 
 ## Import
 
@@ -15,6 +15,7 @@ Parts: DropdownMenu, DropdownMenuItem, DropdownMenuGroup, DropdownMenuHeader, Dr
 
   Name                      Type                                    Required
   ──────────────────────────────────────────────────────────────────────────
+  danger                    boolean                                 optional  
   children                  Snippet                                 optional  
   trigger                   Snippet                                 optional  Snippet used as the clickable trigger that opens the menu.
   class                     string                                  optional  Additional CSS classes for the menu content panel.
@@ -33,6 +34,7 @@ Parts: DropdownMenu, DropdownMenuItem, DropdownMenuGroup, DropdownMenuHeader, Dr
   </script>
 
   <DropdownMenu>Content</DropdownMenu>
+  <DropdownMenu danger>Content</DropdownMenu>
 
 ## DropdownMenuItem
 
@@ -40,9 +42,9 @@ Parts: DropdownMenu, DropdownMenuItem, DropdownMenuGroup, DropdownMenuHeader, Dr
 
   Name                      Type                                    Required
   ──────────────────────────────────────────────────────────────────────────
+  danger                    boolean                                 optional  
   children                  Snippet                                 optional  
   class                     string                                  optional  Additional CSS classes for the item.
-  danger                    boolean                                 optional  Renders the item in a destructive/danger visual style.
   disabled                  boolean                                 optional  Prevents selecting this item.
   href                      string                                  optional  When set, renders the item as an anchor link instead of a button.
   onclick                   (e: MouseEvent) => void                 optional  Called when the item is clicked.
@@ -57,6 +59,7 @@ Parts: DropdownMenu, DropdownMenuItem, DropdownMenuGroup, DropdownMenuHeader, Dr
   </script>
 
   <DropdownMenuItem>Content</DropdownMenuItem>
+  <DropdownMenuItem danger>Content</DropdownMenuItem>
 
 ## DropdownMenuGroup
 
@@ -64,6 +67,7 @@ Parts: DropdownMenu, DropdownMenuItem, DropdownMenuGroup, DropdownMenuHeader, Dr
 
   Name                      Type                                    Required
   ──────────────────────────────────────────────────────────────────────────
+  danger                    boolean                                 optional  
   children                  Snippet                                 optional  
   class                     string                                  optional  Additional CSS classes for the group wrapper.
   ref                       HTMLElement                             optional  (bindable)
@@ -75,6 +79,7 @@ Parts: DropdownMenu, DropdownMenuItem, DropdownMenuGroup, DropdownMenuHeader, Dr
   </script>
 
   <DropdownMenuGroup>Content</DropdownMenuGroup>
+  <DropdownMenuGroup danger>Content</DropdownMenuGroup>
 
 ## DropdownMenuHeader
 
@@ -82,6 +87,7 @@ Parts: DropdownMenu, DropdownMenuItem, DropdownMenuGroup, DropdownMenuHeader, Dr
 
   Name                      Type                                    Required
   ──────────────────────────────────────────────────────────────────────────
+  danger                    boolean                                 optional  
   children                  Snippet                                 optional  
   class                     string                                  optional  Additional CSS classes for the header.
   ref                       HTMLElement                             optional  (bindable)
@@ -93,6 +99,7 @@ Parts: DropdownMenu, DropdownMenuItem, DropdownMenuGroup, DropdownMenuHeader, Dr
   </script>
 
   <DropdownMenuHeader>Content</DropdownMenuHeader>
+  <DropdownMenuHeader danger>Content</DropdownMenuHeader>
 
 ## DropdownMenuSeparator
 
@@ -100,6 +107,7 @@ Parts: DropdownMenu, DropdownMenuItem, DropdownMenuGroup, DropdownMenuHeader, Dr
 
   Name                      Type                                    Required
   ──────────────────────────────────────────────────────────────────────────
+  danger                    boolean                                 optional  
   class                     string                                  optional  Additional CSS classes for the separator line.
   ref                       HTMLElement                             optional  (bindable)
 
@@ -110,3 +118,4 @@ Parts: DropdownMenu, DropdownMenuItem, DropdownMenuGroup, DropdownMenuHeader, Dr
   </script>
 
   <DropdownMenuSeparator />
+  <DropdownMenuSeparator danger />

package/dist/llms/index.md

@@ -11,9 +11,6 @@
   // Add base theme CSS once in your app entry
   import 'tera-system-ui/themes/tera-ui-base';
 
-  // Wrap your app in the context provider
-  import { TeraUiContext } from 'tera-system-ui';
-
 ## Basic Usage
 
   import { Button, Input, Card } from 'tera-system-ui';
@@ -25,11 +22,10 @@ Read a component file for its props, variants, and usage examples.
 
   Colors                         ./colors.md
   Accordion                      ./accordion.md
-  Ai                             ./ai.md
   Alert                          ./alert.md
   Avatar                         ./avatar.md
   Badge                          ./badge.md
-  BrandLogo                      ./brand-logo.md
+  BottomSheet                    ./bottom-sheet.md
   Button                         ./button.md
   Card                           ./card.md
   Checkbox                       ./checkbox.md
@@ -40,17 +36,11 @@ Read a component file for its props, variants, and usage examples.
   Drawer                         ./drawer.md
   DropdownMenu                   ./dropdown-menu.md
   Fonts                          ./fonts.md
-  Header                         ./header.md
-  Icons                          ./icons.md
   Input                          ./input.md
   Label                          ./label.md
-  LanguagePickerButton           ./language-picker-button.md
-  LightDarkToggle                ./light-dark-toggle.md
-  Marketing                      ./marketing.md
   Popover                        ./popover.md
   PopoverResponsive              ./popover-responsive.md
   Select                         ./select.md
-  SideNavigation                 ./side-navigation.md
   Skeleton                       ./skeleton.md
   Slider                         ./slider.md
   Spinner                        ./spinner.md
@@ -58,8 +48,6 @@ Read a component file for its props, variants, and usage examples.
   Switch                         ./switch.md
   Table                          ./table.md
   Tabs                           ./tabs.md
-  TeraUiContext                  ./tera-ui-context.md
   TextArea                       ./text-area.md
   Toast                          ./toast.md
   Tooltip                        ./tooltip.md
-  UserAvatarWithMenu             ./user-avatar-with-menu.md