@scalewing/react 1.30.0 → 1.32.0

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,11 +13,12 @@
  *    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
- *    list, MultiSelect panel, Tooltip, the DateField and CalendarButton
+ *    list, MultiSelect panel, Combobox list, Tooltip, the DateField and CalendarButton
  *    calendar) over everything in the page.
  *
  * Dialog and Toast sit on the browser's top layer, above all of these.
@@ -53,6 +54,9 @@ const openPopups = [
     // MultiSelect's panel. Rendered only while open; on the top layer where
     // the popover API exists.
     '.sw-multi-select-panel',
+    // Combobox's list. Rendered only while open; on the top layer where the
+    // popover API exists.
+    '.sw-combobox-popup',
     '.sw-tooltip:not([hidden])',
     // DateField and CalendarButton share it. Rendered only while open; on the
     // top layer where the popover API exists.

package/dist/css/stylesheet.js

@@ -36,9 +36,11 @@ 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';
+import { comboboxClassCatalog } from './css-combobox.js';
 import { splitClassCatalog } from './css-split.js';
 import { toastClassCatalog } from './css-toast.js';
 import { toastCardClassCatalog } from './css-toast-card.js';
@@ -70,10 +72,12 @@ export function utilityClassCatalog() {
         ...sectionNavClassCatalog(),
         ...dialogClassCatalog(),
         ...dialogFrameClassCatalog(),
+        ...dialogBandedClassCatalog(),
         ...accordionClassCatalog(),
         ...selectClassCatalog(),
         ...actionMenuClassCatalog(),
         ...multiSelectClassCatalog(),
+        ...comboboxClassCatalog(),
         ...actionBarClassCatalog(),
         ...switchClassCatalog(),
         ...dateFieldClassCatalog(),

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,27 +13,30 @@ 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 { 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 BoxProps, } from './components/Box.js';
-export { ButtonGroup, type ButtonGroupJustify, type ButtonGroupProps, } from './components/ButtonGroup.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, type FieldProps, type FieldSize } from './components/Field.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';
 export { Select } from './components/Select.js';
 export type { SelectAction, SelectOption, SelectProps, SelectWidth, } from './components/Select.js';
 export { MultiSelect, type MultiSelectAlign, type MultiSelectOption, type MultiSelectProps, } from './components/MultiSelect.js';
@@ -53,7 +56,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,25 +12,28 @@ 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 { 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 } from './components/Field.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';
 export { Select } from './components/Select.js';
 export { MultiSelect, } from './components/MultiSelect.js';
 export { Stack, } from './components/Stack.js';
@@ -42,5 +45,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';