@molecule/app-ui 1.3.8 → 1.3.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +241 -94
  2. package/package.json +2 -2
package/README.md CHANGED
@@ -3,7 +3,7 @@ AUTO-GENERATED — DO NOT EDIT THIS FILE.
3
3
  Generated by `mlcl sync-docs` from the package's src/index.ts JSDoc + mlcl/registry.json.
4
4
  Edits here are overwritten on the next commit (molecule's pre-commit hook regenerates).
5
5
  To change this document, edit the module-level JSDoc in src/index.ts.
6
- Generated: 2026-10-18T09:34:41.440Z
6
+ Generated: 2026-11-04T14:09:11.762Z
7
7
  -->
8
8
 
9
9
  # @molecule/app-ui
@@ -1979,13 +1979,8 @@ is active.
1979
1979
 
1980
1980
  ```typescript
1981
1981
  interface UIClassMap {
1982
- /**
1983
- * Merges class names with library-specific conflict resolution
1984
- * (e.g. tailwind-merge for Tailwind).
1985
- */
1986
1982
  cn(...classes: ClassMapValue[]): string
1987
1983
 
1988
- // ---- Component resolvers (functions) ----
1989
1984
 
1990
1985
  button(opts?: ButtonClassOptions): string
1991
1986
  input(opts?: InputClassOptions): string
@@ -2017,34 +2012,14 @@ interface UIClassMap {
2017
2012
  flex(opts?: FlexClassOptions): string
2018
2013
  grid(opts?: GridClassOptions): string
2019
2014
 
2020
- // ---- Variant resolvers (parameterized sub-component classes) ----
2021
2015
 
2022
- /**
2023
- * Returns card padding class for the given size ('none' removes padding).
2024
- */
2025
2016
  cardPadding(size?: Size | 'none'): string
2026
- /**
2027
- * Returns progress bar height class for the given size.
2028
- */
2029
2017
  progressHeight(size?: Size): string
2030
- /**
2031
- * Returns progress bar fill color class for the given color variant.
2032
- */
2033
2018
  progressColor(color?: ColorVariant): string
2034
- /**
2035
- * Returns toast container positioning class for the given position.
2036
- */
2037
2019
  toastContainer(opts?: { position?: ToastPosition }): string
2038
- /**
2039
- * Returns radio group layout class for horizontal or vertical direction.
2040
- */
2041
2020
  radioGroupLayout(direction?: 'horizontal' | 'vertical'): string
2042
- /**
2043
- * Returns spacer element class (block or inline with configurable size).
2044
- */
2045
2021
  spacer(opts?: { size?: Size; horizontal?: boolean }): string
2046
2022
 
2047
- // ---- Static class strings (sub-components without variants) ----
2048
2023
 
2049
2024
  formError: string
2050
2025
  formHint: string
@@ -2053,26 +2028,8 @@ interface UIClassMap {
2053
2028
  cardDescription: string
2054
2029
  cardContent: string
2055
2030
  cardFooter: string
2056
- /**
2057
- * Left-accent strip classes for Alert variant="left-accent", keyed by the
2058
- * alert's status (Alert calls `cm.alertLeftAccent({ variant })`). Renders
2059
- * the same inset bar as {@link UIClassMap.accentCard}.
2060
- */
2061
2031
  alertLeftAccent(opts?: { variant?: 'default' | 'info' | 'success' | 'warning' | 'error' }): string
2062
- /**
2063
- * A block with a colored bar down its leading edge: the bar sits INSIDE the
2064
- * block (inset from the edge, clear of rounded corners, rounded ends) rather
2065
- * than as a hard border-left. The block's own padding, background and border
2066
- * come from the caller (a card, a list row, a note). `tone: 'custom'` reads
2067
- * the color from the `--mol-accent` CSS variable the caller sets inline, for
2068
- * data-driven colors (a chart series, a provider). Pair the heading with
2069
- * {@link UIClassMap.accentCardLabel} in the same tone so it matches the bar.
2070
- */
2071
2032
  accentCard(opts?: { tone?: AccentTone }): string
2072
- /**
2073
- * The small uppercase heading of an {@link UIClassMap.accentCard} block, in
2074
- * the bar's color. Same tones as the card.
2075
- */
2076
2033
  accentCardLabel(opts?: { tone?: AccentTone }): string
2077
2034
  alertTitle: string
2078
2035
  alertDescription: string
@@ -2084,19 +2041,10 @@ interface UIClassMap {
2084
2041
  dialogTitle: string
2085
2042
  dialogDescription: string
2086
2043
  dialogClose: string
2087
- /**
2088
- * Floating close button for title-less dialogs: overlays the top-right
2089
- * corner of the dialog box instead of occupying a full-width header row
2090
- * that pushes the body down.
2091
- */
2092
2044
  dialogCloseFloating: string
2093
- /** Modal centering wrapper: fixed full-screen flex container for centering content. */
2094
2045
  dialogWrapper: string
2095
- /** Modal scrollable body area with padding. */
2096
2046
  dialogBody: string
2097
- /** Bottom-anchored sheet panel for pickers and action menus (mobile pattern). */
2098
2047
  actionSheet: string
2099
- /** Header section of an action sheet with bottom border. */
2100
2048
  actionSheetHeader: string
2101
2049
  dropdownContent: string
2102
2050
  dropdownItem: string
@@ -2130,98 +2078,297 @@ interface UIClassMap {
2130
2078
  srOnly: string
2131
2079
  notSrOnly: string
2132
2080
 
2133
- // ---- Icon size tokens ----
2134
2081
 
2135
- /** Extra-small icon (e.g. 12×12). */
2136
2082
  iconXs: string
2137
- /** Small icon (e.g. 16×16). Used for close buttons, sort indicators. */
2138
2083
  iconSm: string
2139
- /** Medium icon (e.g. 20×20). Used for status icons, alerts, toasts. */
2140
2084
  iconMd: string
2141
2085
 
2142
- // ---- Button sub-element tokens ----
2143
2086
 
2144
- /** Left icon spacing inside buttons. */
2145
2087
  buttonIconLeft: string
2146
- /** Right icon spacing inside buttons. */
2147
2088
  buttonIconRight: string
2148
- /** Inline spinner inside loading buttons. */
2149
2089
  buttonSpinner: string
2150
2090
 
2151
- // ---- Card sub-element tokens ----
2152
2091
 
2153
- /** Interactive card hover/cursor behavior. */
2154
2092
  cardInteractive: string
2155
2093
 
2156
- // ---- Alert sub-element tokens ----
2157
2094
 
2158
- /** Alert icon wrapper (prevents shrinking). */
2159
2095
  alertIconWrapper: string
2160
- /** Alert content area (fills remaining space). */
2161
2096
  alertContent: string
2162
- /** Alert dismiss button styling. */
2163
2097
  alertDismiss: string
2164
2098
 
2165
- // ---- Theme toggle tokens ----
2166
2099
 
2167
- /** Theme toggle button (icon-only, transparent). */
2168
2100
  themeToggleButton: string
2169
2101
 
2170
- // ---- OAuth tokens ----
2171
2102
 
2172
- /** OAuth section "or continue with" divider container. */
2173
2103
  oauthDivider: string
2174
- /** OAuth divider horizontal line. */
2175
2104
  oauthDividerLine: string
2176
- /** OAuth divider text span (with background to mask line). */
2177
2105
  oauthDividerText: string
2178
- /** OAuth button group (flex wrap container). */
2179
2106
  oauthButtonGroup: string
2180
- /** Individual OAuth provider button. */
2181
2107
  oauthButton: string
2182
- /** OAuth button icon wrapper (opacity transition). */
2183
2108
  oauthButtonIcon: string
2184
2109
 
2185
- // ---- Auth page tokens ----
2186
2110
 
2187
- /** Auth form error message. */
2188
2111
  authFormError: string
2189
- /** Forgot password link button. */
2190
2112
  forgotPasswordLink: string
2191
2113
 
2192
- // ---- Floating input sub-element tokens ----
2193
2114
 
2194
- /** Floating input wrapper (relative inline-block). */
2195
2115
  floatingInputWrapper: string
2196
- /** Floating input field class (sibling-selector hook for floating label). */
2197
2116
  floatingInput: string
2198
- /** Floating input label/placeholder (absolute positioned). */
2199
2117
  floatingLabel: string
2200
2118
 
2201
- // ---- Input sub-element tokens ----
2202
2119
 
2203
- /** Input outer wrapper (full-width block). */
2204
2120
  inputWrapper: string
2205
- /** Input inner wrapper (relative positioning for icons). */
2206
2121
  inputInner: string
2207
- /** Left icon/element container inside input. */
2208
2122
  inputLeftElement: string
2209
- /** Right icon/element container inside input. */
2210
2123
  inputRightElement: string
2211
- /** Clear button inside input. */
2212
2124
  inputClearButton: string
2213
- /** Input left padding when left element is present. */
2214
2125
  inputPadLeft: string
2215
- /** Input right padding when right element is present. */
2216
2126
  inputPadRight: string
2217
2127
 
2218
- // ---- Select sub-element tokens ----
2219
2128
 
2220
- /** Native select arrow area. */
2221
2129
  selectNative: string
2222
- // … truncated — the full declaration is in node_modules/@molecule/app-ui/dist/types.d.ts
2130
+
2131
+
2132
+ labelBlock: string
2133
+ formFieldset: string
2134
+ formFieldsetContents: string
2135
+ formField: string
2136
+ formFieldWrapper: string
2137
+
2138
+
2139
+ controlLabel: string
2140
+ controlContainer: string
2141
+ controlText: string
2142
+ controlDisabled: string
2143
+
2144
+
2145
+ radioGroupLabel: string
2146
+
2147
+
2148
+ accordionChevron: string
2149
+ accordionTriggerBase: string
2150
+
2151
+
2152
+ tabsFitted: string
2153
+ tabTriggerFitted: string
2154
+ tabTriggerIcon: string
2155
+
2156
+
2157
+ paginationInteractive: string
2158
+
2159
+
2160
+ progressWrapper: string
2161
+ progressLabelContainer: string
2162
+ progressLabelText: string
2163
+ progressIndeterminate: string
2164
+
2165
+
2166
+ tableWrapper: string
2167
+ tableLoadingOverlay: string
2168
+ tableEmptyCell: string
2169
+ tableSortWrapper: string
2170
+ tableSortIcon: string
2171
+ tableRowStriped: string
2172
+ tableRowHoverable: string
2173
+ tableRowClickable: string
2174
+ tableHeadSortable: string
2175
+ tableBordered: string
2176
+
2177
+
2178
+ toastIconWrapper: string
2179
+ toastContentWrapper: string
2180
+
2181
+
2182
+ dropdownTrigger: string
2183
+ dropdownItemIcon: string
2184
+ dropdownItemLabel: string
2185
+ dropdownItemShortcut: string
2186
+ dropdownItemDisabled: string
2187
+
2188
+
2189
+ tooltipTrigger: string
2190
+
2191
+
2192
+ avatarInitials: string
2193
+ avatarFallbackIcon: string
2194
+ avatarSquare: string
2195
+
2196
+
2197
+ badgeSquare: string
2198
+
2199
+
2200
+ skeletonTextContainer: string
2201
+ skeletonCircle: string
2202
+ skeletonWave: string
2203
+ skeletonNone: string
2204
+
2205
+
2206
+ textRight: string
2207
+
2208
+
2209
+ page: string
2210
+ surface: string
2211
+ surfaceSecondary: string
2212
+ headerBar: string
2213
+ drawer: string
2214
+
2215
+
2216
+ textMuted: string
2217
+ textSubtle: string
2218
+ textPrimary: string
2219
+ textOnPrimaryContainer: string
2220
+ textSuccess: string
2221
+ textWarning: string
2222
+ textError: string
2223
+
2224
+
2225
+ borderB: string
2226
+ borderT: string
2227
+ borderR: string
2228
+ borderL: string
2229
+ borderAll: string
2230
+ borderBPrimary: string
2231
+ borderTPrimary: string
2232
+
2233
+
2234
+ bgErrorSubtle: string
2235
+ bgBorder: string
2236
+ bgPrimarySubtle: string
2237
+ bgPrimaryContainer: string
2238
+ bgPrimary: string
2239
+ bgWhite: string
2240
+
2241
+
2242
+ italic: string
2243
+ uppercase: string
2244
+ trackingWide: string
2245
+
2246
+
2247
+ gradientPrimary: string
2248
+ shadowLifted: string
2249
+
2250
+
2251
+ sectionHeading: string
2252
+ formLabel: string
2253
+ formLabelSmall: string
2254
+ link: string
2255
+ prose: string
2256
+ dividerLine: string
2257
+ overlay: string
2258
+ footerBar: string
2259
+ footerLink: string
2260
+ footerButton: string
2261
+
2262
+
2263
+ languageGrid: string
2264
+ languageOption: string
2265
+ languageActive: string
2266
+ languagePickerTrigger: string
2267
+
2268
+
2269
+ sp(property: SpacingProperty, scale: SpacingScale): string
2270
+ sp(overrides: SpacingOverrides): Record<string, string>
2271
+ stack(scale: SpacingScale): string
2272
+
2273
+
2274
+ textSize(size: TextScale): string
2275
+ fontWeight(weight: FontWeightScale): string
2276
+ textCenter: string
2277
+
2278
+
2279
+ w(value: WidthValue | number): string
2280
+ h(value: HeightValue | number): string
2281
+ minH(value: HeightValue): string
2282
+ maxW(value: MaxWidthScale): string
2283
+ shrink0: string
2284
+
2285
+
2286
+ touchTarget: string
2287
+
2288
+ touchTargetCompact: string
2289
+
2290
+
2291
+
2292
+ displayBlock: string
2293
+ displayInlineBlock: string
2294
+ displayContents: string
2295
+ hiddenBelow(breakpoint: ResponsiveBreakpoint): string
2296
+ hiddenFrom(breakpoint: ResponsiveBreakpoint): string
2297
+
2298
+
2299
+ mxAuto: string
2300
+ cursorPointer: string
2301
+ roundedFull: string
2302
+
2303
+
2304
+ gridRows(rows: number): string
2305
+
2306
+
2307
+ position(value: 'relative' | 'absolute' | 'fixed' | 'sticky'): string
2308
+ inset0: string
2309
+
2310
+
2311
+ logoText: string
2312
+ logoIcon: string
2313
+
2314
+
2315
+ headerFixed: string
2316
+ headerInner: string
2317
+
2318
+
2319
+ authHeaderInner: string
2320
+ authPageBody: string
2321
+ authFormWrapper: string
2322
+ authField: string
2323
+ authAfterSubmit: string
2324
+
2325
+
2326
+ authButtonRow: string
2327
+ authBackButton: string
2328
+ authSubmitButton: string
2329
+ authLoginSignup: string
2330
+ authLoginSubmit: string
2331
+ authLoginSubmitFull: string
2332
+ authHidden: string
2333
+ authArrowIcon: string
2334
+
2335
+
2336
+ appLayout: string
2337
+
2338
+ flex1: string
2339
+
2340
+
2341
+ oauthProviderLabel: string
2342
+
2343
+
2344
+ pageShell: string
2345
+ pageShellSidebar: string
2346
+ pageShellSidebarCollapsed: string
2347
+ pageShellTopbar: string
2348
+ pageShellContent: string
2349
+ pageShellSidebarToggle: string
2350
+ emptyState: string
2351
+ emptyStateIcon: string
2352
+ emptyStateTitle: string
2353
+ emptyStateDescription: string
2354
+ emptyStateAction: string
2355
+ pageHeader: string
2356
+ pageHeaderTitle: string
2357
+ pageHeaderDescription: string
2358
+ pageHeaderActions: string
2359
+ pageHeaderBreadcrumbs: string
2360
+ pageHeaderBreadcrumbItem: string
2361
+ pageHeaderBreadcrumbSeparator: string
2362
+
2363
+
2364
+ searchField: string
2365
+ searchFieldIcon: string
2366
+ searchFieldInput: string
2367
+ // … 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
2223
2368
  ```
2224
2369
 
2370
+ _(Member comments are left out to fit; the full declaration is in `node_modules/@molecule/app-ui/dist/types.d.ts`.)_
2371
+
2225
2372
  ### Types
2226
2373
 
2227
2374
  #### `Children`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@molecule/app-ui",
3
- "version": "1.3.8",
3
+ "version": "1.3.9",
4
4
  "description": "UI component interfaces for molecule.dev",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -32,7 +32,7 @@
32
32
  "@molecule/app-i18n": "^1.0.1"
33
33
  },
34
34
  "devDependencies": {
35
- "@molecule/app-bond": "1.0.3",
35
+ "@molecule/app-bond": "1.0.5",
36
36
  "@types/node": "26.6.5",
37
37
  "typescript": "6.0.3",
38
38
  "vitest": "4.1.12"