@scalewing/react 1.31.0 → 1.33.0

package/dist/css/css-select.js

@@ -1,6 +1,7 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { chevronStroke } from './chevron.js';
 import { zIndex } from './stacking.js';
+import { quietFill } from './quiet-fill.js';
 const caption = typographyVariants.caption;
 const label = typographyVariants.label;
 export function cssSelectClasses() {
@@ -172,7 +173,7 @@ export function cssSelectClasses() {
 }
 
 .sw-select-option[data-active='true'] {
-  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+  background: ${quietFill};
 }
 
 .sw-select-xs .sw-select-option {

package/dist/css/css-split.js

@@ -1,3 +1,4 @@
+import { quietFill } from './quiet-fill.js';
 export function cssSplitClasses() {
     return `.sw-split {
   align-items: stretch;
@@ -39,7 +40,7 @@ export function cssSplitClasses() {
 
 .sw-split-handle:hover,
 .sw-split-handle:focus-visible {
-  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+  background: ${quietFill};
 }
 
 .sw-split-handle:focus-visible {

package/dist/css/css-stepper.js

@@ -25,6 +25,12 @@ function stateRules() {
   background-image: ${changedTintLayer};
 }
 
+/* A plain limit: − at min and + at max keep their look, still disabled. */
+.sw-stepper-limit-plain .sw-stepper-button:disabled {
+  cursor: default;
+  opacity: 1;
+}
+
 /* Read-only: the buttons keep their room, so the count lines up with an editable one. */
 .sw-stepper-readonly .sw-stepper-button { visibility: hidden; }
 
@@ -122,5 +128,6 @@ export function stepperClassCatalog() {
         'sw-stepper-invalid',
         'sw-stepper-changed',
         'sw-stepper-readonly',
+        'sw-stepper-limit-plain',
     ];
 }

package/dist/css/quiet-fill.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The quiet grey fill: the muted color at 16 % over whatever is beneath
+ * (about #E8E8E9 on white). An open menu or list row, a held separator,
+ * today's calendar ring fill, a neutral button and a banded dialog's close
+ * button all take it, so they read as one grey.
+ */
+export declare const quietFill = "color-mix(in srgb, var(--sw-color-muted) 16%, transparent)";

package/dist/css/quiet-fill.js

@@ -0,0 +1,7 @@
+/**
+ * The quiet grey fill: the muted color at 16 % over whatever is beneath
+ * (about #E8E8E9 on white). An open menu or list row, a held separator,
+ * today's calendar ring fill, a neutral button and a banded dialog's close
+ * button all take it, so they read as one grey.
+ */
+export const quietFill = 'color-mix(in srgb, var(--sw-color-muted) 16%, transparent)';

package/dist/css/stacking.js

@@ -13,7 +13,8 @@
  *    its popup can only paint as high as the surface does; lifting the surface
  *    over the ActionBar keeps an open list tappable where the bar would cover
  *    it, and over the next surface in the flow.
- * 5. `topChrome`: the sticky AppHeader or sticky Tabs strip, over a lifted
+ * 5. `topChrome`: the sticky AppHeader or sticky Tabs strip (and a banded
+ *    Dialog's title band, inside its dialog), over a lifted
  *    surface that scrolls up under it (the header is the page's way back, the
  *    strip its way between sections, and a popup opens downward).
  * 6. `popup`: a popup outside any lifted surface (Select list, ActionMenu

package/dist/css/stylesheet.js

@@ -27,6 +27,7 @@ import { fieldClassCatalog } from './css-field.js';
 import { stepperClassCatalog } from './css-stepper.js';
 import { stepsClassCatalog } from './css-steps.js';
 import { boxBorderClassCatalog } from './css-box-border.js';
+import { boxLinkClassCatalog } from './css-box-link.js';
 import { cssComponentClasses } from './css-components.js';
 import { buttonClassCatalog } from './css-button.js';
 import { chartClassCatalog } from './css-chart.js';
@@ -36,6 +37,7 @@ import { tableClassCatalog } from './css-table.js';
 import { chromeClassCatalog } from './css-chrome.js';
 import { sectionNavClassCatalog } from './css-section-nav.js';
 import { dialogClassCatalog } from './css-dialog.js';
+import { dialogBandedClassCatalog } from './css-dialog-banded.js';
 import { dialogFrameClassCatalog } from './css-dialog-frame.js';
 import { selectClassCatalog } from './css-select.js';
 import { multiSelectClassCatalog } from './css-multi-select.js';
@@ -71,6 +73,7 @@ export function utilityClassCatalog() {
         ...sectionNavClassCatalog(),
         ...dialogClassCatalog(),
         ...dialogFrameClassCatalog(),
+        ...dialogBandedClassCatalog(),
         ...accordionClassCatalog(),
         ...selectClassCatalog(),
         ...actionMenuClassCatalog(),
@@ -104,6 +107,7 @@ export function utilityClassCatalog() {
         ...toastCardClassCatalog(),
         ...responsiveClassCatalog(),
         ...boxBorderClassCatalog(),
+        ...boxLinkClassCatalog(),
     ];
 }
 export { generatePaletteStylesheet, paletteStylesheetIds, } from './css-palettes.js';

package/dist/css/tone-tint.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The semantic colors a tinted mark can be drawn from: a note's tone or a
+ * single count's.
+ */
+export type TintColor = 'accent' | 'success' | 'warning' | 'danger';
+/**
+ * How much of a tone's color a tint mixes into the surface. The accent uses
+ * the derived accent tint instead (ADR 0011), which already keeps the accent
+ * readable on every palette.
+ */
+export declare const toneTintShare = 0.1;
+/**
+ * How far a tint's words move from the tone's color toward the text color,
+ * so they read darker than the tone on a light fill (lighter on a dark one)
+ * and keep 4.5:1 on the tint (`notice.test.tsx`).
+ */
+export declare const toneInkTextShare = 0.3;
+/** A tone's quiet fill: the tone mixed into the surface. */
+export declare function toneTintFill(color: TintColor): string;
+/** The words on that fill: the tone moved toward the text color. */
+export declare function toneTintInk(color: TintColor): string;

package/dist/css/tone-tint.js

@@ -0,0 +1,23 @@
+/**
+ * How much of a tone's color a tint mixes into the surface. The accent uses
+ * the derived accent tint instead (ADR 0011), which already keeps the accent
+ * readable on every palette.
+ */
+export const toneTintShare = 0.1;
+/**
+ * How far a tint's words move from the tone's color toward the text color,
+ * so they read darker than the tone on a light fill (lighter on a dark one)
+ * and keep 4.5:1 on the tint (`notice.test.tsx`).
+ */
+export const toneInkTextShare = 0.3;
+/** A tone's quiet fill: the tone mixed into the surface. */
+export function toneTintFill(color) {
+    if (color === 'accent')
+        return 'var(--sw-color-accentSubtle)';
+    return `color-mix(in srgb, var(--sw-color-${color}) ${toneTintShare * 100}%, var(--sw-color-surface))`;
+}
+/** The words on that fill: the tone moved toward the text color. */
+export function toneTintInk(color) {
+    const toneShare = Math.round((1 - toneInkTextShare) * 100);
+    return `color-mix(in srgb, var(--sw-color-${color}) ${toneShare}%, var(--sw-color-text))`;
+}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { ActionMenu, type ActionMenuAlign, type ActionMenuItem, type ActionMenuProps, } from './components/ActionMenu.js';
+export { ActionMenu, type ActionMenuAlign, type ActionMenuItem, type ActionMenuProps, actionMenuTriggerAppearances, type ActionMenuTriggerAppearance, } from './components/ActionMenu.js';
 export { ActionBar, type ActionBarProps, type ActionBarSummary, type ActionBarSummaryTone, } from './components/ActionBar.js';
 export { Accordion } from './components/Accordion.js';
 export type { AccordionProps, AccordionSize } from './components/Accordion.js';
@@ -13,25 +13,28 @@ export { Progress, progressTones, type ProgressProps, type ProgressTone, } from
 export { Tooltip, type TooltipProps, type TooltipRelationship, } from './components/Tooltip.js';
 export { InfoTip, type InfoTipProps } from './components/InfoTip.js';
 export { RadioGroup, type RadioGroupOption, type RadioGroupProps, } from './components/RadioGroup.js';
-export { AppHeader, type AppHeaderProps } from './components/AppHeader.js';
+export { AppHeader, appHeaderAppearances, type AppHeaderAppearance, type AppHeaderProps, } from './components/AppHeader.js';
 export { Badge, type BadgeProps, type BadgeSize, type BadgeTone, badgeSizes, badgeTones, } from './components/Badge.js';
 export { BarChart, type BarChartItem, type BarChartProps, type BarChartTone, barChartTones, } from './components/BarChart.js';
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, } from './components/Button.js';
-export { Box, type BoxBorder, type BoxElement, type BoxProps, } from './components/Box.js';
-export { ButtonGroup, type ButtonGroupJustify, type ButtonGroupProps, } from './components/ButtonGroup.js';
+export { Button, type ButtonDisabledAppearance, type ButtonProps, type ButtonSize, type ButtonVariant, } from './components/Button.js';
+export { buttonDisabledAppearances, webButtonVariants, } from './css/css-button.js';
+export { Box, type BoxBorder, type BoxElement, type BoxLink, type BoxProps, } from './components/Box.js';
+export { boxLinkAppearances } from './css/css-box-link.js';
+export { ButtonGroup, buttonGroupAppearances, type ButtonGroupAppearance, type ButtonGroupJustify, type ButtonGroupProps, } from './components/ButtonGroup.js';
 export { Card, type CardProps, type CardVariant } from './components/Card.js';
-export { Dialog, dialogSizes, type DialogProps, type DialogRole, type DialogSize, type DialogTitleLevel, } from './components/Dialog.js';
+export { Dialog, dialogAppearances, dialogSizes, type DialogAppearance, type DialogProps, type DialogRole, type DialogSize, type DialogTitleLevel, } from './components/Dialog.js';
 export { StatTile, type StatTileEmphasis, type StatTileProps, type StatTileTone, statTileTones, } from './components/StatTile.js';
 export { TabPanel, type TabItem, type TabPanelProps, Tabs, type TabsProps, tabId, tabPanelId, } from './components/Tabs.js';
 export { Toast, toastPlacements, toastTones, type ToastAction, type ToastPlacement, } from './components/Toast.js';
 export type { ToastProps, ToastTone } from './components/Toast.js';
 export { Field, fieldVariants, type FieldProps, type FieldSize, type FieldVariant, } from './components/Field.js';
+export { requiredMarks, type RequiredMark, } from './components/FieldLabelText.js';
 export { Step, type StepHeadingLevel, type StepProps, Steps, type StepsLabels, type StepsProps, type StepStatus, } from './components/Steps.js';
-export { Stepper, type StepperProps, type StepperWidth, } from './components/Stepper.js';
+export { Stepper, stepperLimitAppearances, type StepperLimitAppearance, type StepperProps, type StepperWidth, } from './components/Stepper.js';
 export { Inline, type InlineProps } from './components/Inline.js';
 export { Split } from './components/Split.js';
 export type { SplitProps } from './components/Split.js';
-export { Nav, type NavProps } from './components/Nav.js';
+export { Nav, navAppearances, type NavAppearance, type NavProps, } from './components/Nav.js';
 export { SectionNav, sectionNavAppearances, type SectionNavAppearance, type SectionNavItem, type SectionNavProps, } from './components/SectionNav.js';
 export { SegmentedControl, type SegmentedControlProps, type SegmentedControlVariant, type SegmentedItem, } from './components/SegmentedControl.js';
 export { Combobox, comboboxSizes, type ComboboxAction, type ComboboxBadge, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type ComboboxSize, } from './components/Combobox.js';
@@ -54,7 +57,7 @@ export { Grid } from './components/Grid.js';
 export type { GridColumns, GridProps } from './components/Grid.js';
 export type { GridColumnSpan } from './css/css-grid-span.js';
 export type { ColumnSpanProps } from './column-span-classes.js';
-export { DenominationGrid, denominationLabelAppearances, } from './components/DenominationGrid.js';
-export type { DenominationGridColumn, DenominationGridEntry, DenominationGridLayout, DenominationGridProps, DenominationGridRow, DenominationGridRowEmphasis, DenominationGridRowRole, DenominationGridTone, DenominationLabelAppearance, DenominationLabelWidth, } from './components/DenominationGrid.js';
+export { DenominationGrid, denominationCellToneAppearances, denominationGridFrames, denominationLabelAppearances, denominationTotalEmphases, } from './components/DenominationGrid.js';
+export type { DenominationCellToneAppearance, DenominationGridColumn, DenominationGridEntry, DenominationGridFrame, DenominationGridLayout, DenominationGridProps, DenominationGridRow, DenominationGridRowEmphasis, DenominationGridRowRole, DenominationGridTone, DenominationLabelAppearance, DenominationLabelWidth, DenominationTotalEmphasis, } from './components/DenominationGrid.js';
 export { FilterChips } from './components/FilterChips.js';
 export type { FilterChipOption, FilterChipsProps, } from './components/FilterChips.js';

package/dist/index.js

@@ -1,4 +1,4 @@
-export { ActionMenu, } from './components/ActionMenu.js';
+export { ActionMenu, actionMenuTriggerAppearances, } from './components/ActionMenu.js';
 export { ActionBar, } from './components/ActionBar.js';
 export { Accordion } from './components/Accordion.js';
 export { Switch } from './components/Switch.js';
@@ -12,23 +12,26 @@ export { Progress, progressTones, } from './components/Progress.js';
 export { Tooltip, } from './components/Tooltip.js';
 export { InfoTip } from './components/InfoTip.js';
 export { RadioGroup, } from './components/RadioGroup.js';
-export { AppHeader } from './components/AppHeader.js';
+export { AppHeader, appHeaderAppearances, } from './components/AppHeader.js';
 export { Badge, badgeSizes, badgeTones, } from './components/Badge.js';
 export { BarChart, barChartTones, } from './components/BarChart.js';
 export { Button, } from './components/Button.js';
+export { buttonDisabledAppearances, webButtonVariants, } from './css/css-button.js';
 export { Box, } from './components/Box.js';
-export { ButtonGroup, } from './components/ButtonGroup.js';
+export { boxLinkAppearances } from './css/css-box-link.js';
+export { ButtonGroup, buttonGroupAppearances, } from './components/ButtonGroup.js';
 export { Card } from './components/Card.js';
-export { Dialog, dialogSizes, } from './components/Dialog.js';
+export { Dialog, dialogAppearances, dialogSizes, } from './components/Dialog.js';
 export { StatTile, statTileTones, } from './components/StatTile.js';
 export { TabPanel, Tabs, tabId, tabPanelId, } from './components/Tabs.js';
 export { Toast, toastPlacements, toastTones, } from './components/Toast.js';
 export { Field, fieldVariants, } from './components/Field.js';
+export { requiredMarks, } from './components/FieldLabelText.js';
 export { Step, Steps, } from './components/Steps.js';
-export { Stepper, } from './components/Stepper.js';
+export { Stepper, stepperLimitAppearances, } from './components/Stepper.js';
 export { Inline } from './components/Inline.js';
 export { Split } from './components/Split.js';
-export { Nav } from './components/Nav.js';
+export { Nav, navAppearances, } from './components/Nav.js';
 export { SectionNav, sectionNavAppearances, } from './components/SectionNav.js';
 export { SegmentedControl, } from './components/SegmentedControl.js';
 export { Combobox, comboboxSizes, } from './components/Combobox.js';
@@ -43,5 +46,5 @@ export { breakpointQuery } from './css/breakpoints.js';
 export { Separator } from './components/Separator.js';
 export { DescriptionItem, DescriptionList, } from './components/DescriptionList.js';
 export { Grid } from './components/Grid.js';
-export { DenominationGrid, denominationLabelAppearances, } from './components/DenominationGrid.js';
+export { DenominationGrid, denominationCellToneAppearances, denominationGridFrames, denominationLabelAppearances, denominationTotalEmphases, } from './components/DenominationGrid.js';
 export { FilterChips } from './components/FilterChips.js';