@molecule/app-ui 1.3.7 → 1.3.9

package/README.md

@@ -3,7 +3,7 @@ AUTO-GENERATED — DO NOT EDIT THIS FILE.
 Generated by `mlcl sync-docs` from the package's src/index.ts JSDoc + mlcl/registry.json.
 Edits here are overwritten on the next commit (molecule's pre-commit hook regenerates).
 To change this document, edit the module-level JSDoc in src/index.ts.
-Generated: 2026-10-18T09:34:41.440Z
+Generated: 2026-11-04T14:09:11.762Z
 -->
 
 # @molecule/app-ui
@@ -1979,13 +1979,8 @@ is active.
 
 ```typescript
 interface UIClassMap {
-  /**
-   * Merges class names with library-specific conflict resolution
-   * (e.g. tailwind-merge for Tailwind).
-   */
   cn(...classes: ClassMapValue[]): string
 
-  // ---- Component resolvers (functions) ----
 
   button(opts?: ButtonClassOptions): string
   input(opts?: InputClassOptions): string
@@ -2017,34 +2012,14 @@ interface UIClassMap {
   flex(opts?: FlexClassOptions): string
   grid(opts?: GridClassOptions): string
 
-  // ---- Variant resolvers (parameterized sub-component classes) ----
 
-  /**
-   * Returns card padding class for the given size ('none' removes padding).
-   */
   cardPadding(size?: Size | 'none'): string
-  /**
-   * Returns progress bar height class for the given size.
-   */
   progressHeight(size?: Size): string
-  /**
-   * Returns progress bar fill color class for the given color variant.
-   */
   progressColor(color?: ColorVariant): string
-  /**
-   * Returns toast container positioning class for the given position.
-   */
   toastContainer(opts?: { position?: ToastPosition }): string
-  /**
-   * Returns radio group layout class for horizontal or vertical direction.
-   */
   radioGroupLayout(direction?: 'horizontal' | 'vertical'): string
-  /**
-   * Returns spacer element class (block or inline with configurable size).
-   */
   spacer(opts?: { size?: Size; horizontal?: boolean }): string
 
-  // ---- Static class strings (sub-components without variants) ----
 
   formError: string
   formHint: string
@@ -2053,26 +2028,8 @@ interface UIClassMap {
   cardDescription: string
   cardContent: string
   cardFooter: string
-  /**
-   * Left-accent strip classes for Alert variant="left-accent", keyed by the
-   * alert's status (Alert calls `cm.alertLeftAccent({ variant })`). Renders
-   * the same inset bar as {@link UIClassMap.accentCard}.
-   */
   alertLeftAccent(opts?: { variant?: 'default' | 'info' | 'success' | 'warning' | 'error' }): string
-  /**
-   * A block with a colored bar down its leading edge: the bar sits INSIDE the
-   * block (inset from the edge, clear of rounded corners, rounded ends) rather
-   * than as a hard border-left. The block's own padding, background and border
-   * come from the caller (a card, a list row, a note). `tone: 'custom'` reads
-   * the color from the `--mol-accent` CSS variable the caller sets inline, for
-   * data-driven colors (a chart series, a provider). Pair the heading with
-   * {@link UIClassMap.accentCardLabel} in the same tone so it matches the bar.
-   */
   accentCard(opts?: { tone?: AccentTone }): string
-  /**
-   * The small uppercase heading of an {@link UIClassMap.accentCard} block, in
-   * the bar's color. Same tones as the card.
-   */
   accentCardLabel(opts?: { tone?: AccentTone }): string
   alertTitle: string
   alertDescription: string
@@ -2084,19 +2041,10 @@ interface UIClassMap {
   dialogTitle: string
   dialogDescription: string
   dialogClose: string
-  /**
-   * Floating close button for title-less dialogs: overlays the top-right
-   * corner of the dialog box instead of occupying a full-width header row
-   * that pushes the body down.
-   */
   dialogCloseFloating: string
-  /** Modal centering wrapper: fixed full-screen flex container for centering content. */
   dialogWrapper: string
-  /** Modal scrollable body area with padding. */
   dialogBody: string
-  /** Bottom-anchored sheet panel for pickers and action menus (mobile pattern). */
   actionSheet: string
-  /** Header section of an action sheet with bottom border. */
   actionSheetHeader: string
   dropdownContent: string
   dropdownItem: string
@@ -2130,98 +2078,297 @@ interface UIClassMap {
   srOnly: string
   notSrOnly: string
 
-  // ---- Icon size tokens ----
 
-  /** Extra-small icon (e.g. 12×12). */
   iconXs: string
-  /** Small icon (e.g. 16×16). Used for close buttons, sort indicators. */
   iconSm: string
-  /** Medium icon (e.g. 20×20). Used for status icons, alerts, toasts. */
   iconMd: string
 
-  // ---- Button sub-element tokens ----
 
-  /** Left icon spacing inside buttons. */
   buttonIconLeft: string
-  /** Right icon spacing inside buttons. */
   buttonIconRight: string
-  /** Inline spinner inside loading buttons. */
   buttonSpinner: string
 
-  // ---- Card sub-element tokens ----
 
-  /** Interactive card hover/cursor behavior. */
   cardInteractive: string
 
-  // ---- Alert sub-element tokens ----
 
-  /** Alert icon wrapper (prevents shrinking). */
   alertIconWrapper: string
-  /** Alert content area (fills remaining space). */
   alertContent: string
-  /** Alert dismiss button styling. */
   alertDismiss: string
 
-  // ---- Theme toggle tokens ----
 
-  /** Theme toggle button (icon-only, transparent). */
   themeToggleButton: string
 
-  // ---- OAuth tokens ----
 
-  /** OAuth section "or continue with" divider container. */
   oauthDivider: string
-  /** OAuth divider horizontal line. */
   oauthDividerLine: string
-  /** OAuth divider text span (with background to mask line). */
   oauthDividerText: string
-  /** OAuth button group (flex wrap container). */
   oauthButtonGroup: string
-  /** Individual OAuth provider button. */
   oauthButton: string
-  /** OAuth button icon wrapper (opacity transition). */
   oauthButtonIcon: string
 
-  // ---- Auth page tokens ----
 
-  /** Auth form error message. */
   authFormError: string
-  /** Forgot password link button. */
   forgotPasswordLink: string
 
-  // ---- Floating input sub-element tokens ----
 
-  /** Floating input wrapper (relative inline-block). */
   floatingInputWrapper: string
-  /** Floating input field class (sibling-selector hook for floating label). */
   floatingInput: string
-  /** Floating input label/placeholder (absolute positioned). */
   floatingLabel: string
 
-  // ---- Input sub-element tokens ----
 
-  /** Input outer wrapper (full-width block). */
   inputWrapper: string
-  /** Input inner wrapper (relative positioning for icons). */
   inputInner: string
-  /** Left icon/element container inside input. */
   inputLeftElement: string
-  /** Right icon/element container inside input. */
   inputRightElement: string
-  /** Clear button inside input. */
   inputClearButton: string
-  /** Input left padding when left element is present. */
   inputPadLeft: string
-  /** Input right padding when right element is present. */
   inputPadRight: string
 
-  // ---- Select sub-element tokens ----
 
-  /** Native select arrow area. */
   selectNative: string
-// … truncated — the full declaration is in node_modules/@molecule/app-ui/dist/types.d.ts
+
+
+  labelBlock: string
+  formFieldset: string
+  formFieldsetContents: string
+  formField: string
+  formFieldWrapper: string
+
+
+  controlLabel: string
+  controlContainer: string
+  controlText: string
+  controlDisabled: string
+
+
+  radioGroupLabel: string
+
+
+  accordionChevron: string
+  accordionTriggerBase: string
+
+
+  tabsFitted: string
+  tabTriggerFitted: string
+  tabTriggerIcon: string
+
+
+  paginationInteractive: string
+
+
+  progressWrapper: string
+  progressLabelContainer: string
+  progressLabelText: string
+  progressIndeterminate: string
+
+
+  tableWrapper: string
+  tableLoadingOverlay: string
+  tableEmptyCell: string
+  tableSortWrapper: string
+  tableSortIcon: string
+  tableRowStriped: string
+  tableRowHoverable: string
+  tableRowClickable: string
+  tableHeadSortable: string
+  tableBordered: string
+
+
+  toastIconWrapper: string
+  toastContentWrapper: string
+
+
+  dropdownTrigger: string
+  dropdownItemIcon: string
+  dropdownItemLabel: string
+  dropdownItemShortcut: string
+  dropdownItemDisabled: string
+
+
+  tooltipTrigger: string
+
+
+  avatarInitials: string
+  avatarFallbackIcon: string
+  avatarSquare: string
+
+
+  badgeSquare: string
+
+
+  skeletonTextContainer: string
+  skeletonCircle: string
+  skeletonWave: string
+  skeletonNone: string
+
+
+  textRight: string
+
+
+  page: string
+  surface: string
+  surfaceSecondary: string
+  headerBar: string
+  drawer: string
+
+
+  textMuted: string
+  textSubtle: string
+  textPrimary: string
+  textOnPrimaryContainer: string
+  textSuccess: string
+  textWarning: string
+  textError: string
+
+
+  borderB: string
+  borderT: string
+  borderR: string
+  borderL: string
+  borderAll: string
+  borderBPrimary: string
+  borderTPrimary: string
+
+
+  bgErrorSubtle: string
+  bgBorder: string
+  bgPrimarySubtle: string
+  bgPrimaryContainer: string
+  bgPrimary: string
+  bgWhite: string
+
+
+  italic: string
+  uppercase: string
+  trackingWide: string
+
+
+  gradientPrimary: string
+  shadowLifted: string
+
+
+  sectionHeading: string
+  formLabel: string
+  formLabelSmall: string
+  link: string
+  prose: string
+  dividerLine: string
+  overlay: string
+  footerBar: string
+  footerLink: string
+  footerButton: string
+
+
+  languageGrid: string
+  languageOption: string
+  languageActive: string
+  languagePickerTrigger: string
+
+
+  sp(property: SpacingProperty, scale: SpacingScale): string
+  sp(overrides: SpacingOverrides): Record<string, string>
+  stack(scale: SpacingScale): string
+
+
+  textSize(size: TextScale): string
+  fontWeight(weight: FontWeightScale): string
+  textCenter: string
+
+
+  w(value: WidthValue | number): string
+  h(value: HeightValue | number): string
+  minH(value: HeightValue): string
+  maxW(value: MaxWidthScale): string
+  shrink0: string
+
+
+  touchTarget: string
+
+  touchTargetCompact: string
+
+
+
+  displayBlock: string
+  displayInlineBlock: string
+  displayContents: string
+  hiddenBelow(breakpoint: ResponsiveBreakpoint): string
+  hiddenFrom(breakpoint: ResponsiveBreakpoint): string
+
+
+  mxAuto: string
+  cursorPointer: string
+  roundedFull: string
+
+
+  gridRows(rows: number): string
+
+
+  position(value: 'relative' | 'absolute' | 'fixed' | 'sticky'): string
+  inset0: string
+
+
+  logoText: string
+  logoIcon: string
+
+
+  headerFixed: string
+  headerInner: string
+
+
+  authHeaderInner: string
+  authPageBody: string
+  authFormWrapper: string
+  authField: string
+  authAfterSubmit: string
+
+
+  authButtonRow: string
+  authBackButton: string
+  authSubmitButton: string
+  authLoginSignup: string
+  authLoginSubmit: string
+  authLoginSubmitFull: string
+  authHidden: string
+  authArrowIcon: string
+
+
+  appLayout: string
+
+  flex1: string
+
+
+  oauthProviderLabel: string
+
+
+  pageShell: string
+  pageShellSidebar: string
+  pageShellSidebarCollapsed: string
+  pageShellTopbar: string
+  pageShellContent: string
+  pageShellSidebarToggle: string
+  emptyState: string
+  emptyStateIcon: string
+  emptyStateTitle: string
+  emptyStateDescription: string
+  emptyStateAction: string
+  pageHeader: string
+  pageHeaderTitle: string
+  pageHeaderDescription: string
+  pageHeaderActions: string
+  pageHeaderBreadcrumbs: string
+  pageHeaderBreadcrumbItem: string
+  pageHeaderBreadcrumbSeparator: string
+
+
+  searchField: string
+  searchFieldIcon: string
+  searchFieldInput: string
+// … truncated — 19 more members: searchFieldActions, searchFieldClear, searchStatusRow, searchTips, kbd, filterChip, filterChipNegated, filterChipRemove, resultList, resultItem, resultItemActive, resultBody, resultTitle, resultTitleMono, resultMeta, resultDescription, resultMark, resultAction, resultEmpty; the full declaration is in node_modules/@molecule/app-ui/dist/types.d.ts
 ```
 
+_(Member comments are left out to fit; the full declaration is in `node_modules/@molecule/app-ui/dist/types.d.ts`.)_
+
 ### Types
 
 #### `Children`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@molecule/app-ui",
-  "version": "1.3.7",
+  "version": "1.3.9",
   "description": "UI component interfaces for molecule.dev",
   "type": "module",
   "main": "dist/index.js",
@@ -32,10 +32,10 @@
     "@molecule/app-i18n": "^1.0.1"
   },
   "devDependencies": {
-    "@molecule/app-bond": "1.0.3",
-    "@types/node": "26.1.2",
+    "@molecule/app-bond": "1.0.5",
+    "@types/node": "26.6.5",
     "typescript": "6.0.3",
-    "vitest": "4.1.11"
+    "vitest": "4.1.12"
   },
   "repository": {
     "type": "git",