@scalewing/react 1.42.0 → 1.44.0

package/dist/index.d.ts

@@ -67,13 +67,15 @@ export type { Breakpoint, BreakpointDirection, VisibilityBreakpoint, } from './c
 export { breakpointQuery } from './css/breakpoints.js';
 export { Separator } from './components/Separator.js';
 export type { SeparatorOrientation, SeparatorProps, } from './components/Separator.js';
-export { DescriptionItem, DescriptionList, } from './components/DescriptionList.js';
-export type { DescriptionItemProps, DescriptionListProps, } from './components/DescriptionList.js';
+export { DescriptionItem, DescriptionList, descriptionListLayouts, } from './components/DescriptionList.js';
+export type { DescriptionItemProps, DescriptionListLayout, DescriptionListProps, } from './components/DescriptionList.js';
 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, denominationCellToneAppearances, denominationGridFrames, denominationLabelAppearances, denominationNegativeAppearances, denominationTotalEmphases, denominationTransposeBreakpoints, } from './components/DenominationGrid.js';
 export type { DenominationCellToneAppearance, DenominationGridColumn, DenominationGridEntry, DenominationGridFrame, DenominationGridLayout, DenominationGridNegativeAppearance, DenominationGridProps, DenominationGridRow, DenominationGridRowEmphasis, DenominationGridRowRole, DenominationGridTone, DenominationGridValueRow, DenominationLabelAppearance, DenominationLabelWidth, DenominationTotalEmphasis, DenominationTransposeBreakpoint, } from './components/DenominationGrid.js';
-export { FilterChips, filterChipCountAppearances, filterChipsOverflows, } from './components/FilterChips.js';
-export type { FilterChipCountAppearance, FilterChipOption, FilterChipsOverflow, FilterChipsProps, } from './components/FilterChips.js';
+export { FilterChips, filterChipCountAppearances, filterChipsOverflows, filterChipTones, } from './components/FilterChips.js';
+export { FilterChipsRow } from './components/FilterChipsRow.js';
+export type { FilterChipsRowProps } from './components/FilterChipsRow.js';
+export type { FilterChipCountAppearance, FilterChipOption, FilterChipsOverflow, FilterChipsProps, FilterChipTone, } from './components/FilterChips.js';

package/dist/index.js

@@ -60,7 +60,8 @@ export { themeCanvases } from './css/css-canvas-grouped.js';
 export { utilityClassCatalog } from './css/stylesheet.js';
 export { breakpointQuery } from './css/breakpoints.js';
 export { Separator } from './components/Separator.js';
-export { DescriptionItem, DescriptionList, } from './components/DescriptionList.js';
+export { DescriptionItem, DescriptionList, descriptionListLayouts, } from './components/DescriptionList.js';
 export { Grid } from './components/Grid.js';
 export { DenominationGrid, denominationCellToneAppearances, denominationGridFrames, denominationLabelAppearances, denominationNegativeAppearances, denominationTotalEmphases, denominationTransposeBreakpoints, } from './components/DenominationGrid.js';
-export { FilterChips, filterChipCountAppearances, filterChipsOverflows, } from './components/FilterChips.js';
+export { FilterChips, filterChipCountAppearances, filterChipsOverflows, filterChipTones, } from './components/FilterChips.js';
+export { FilterChipsRow } from './components/FilterChipsRow.js';

package/dist/styles.css

@@ -829,6 +829,7 @@ body {
 .sw-grow { flex-grow: 1; }
 .sw-full-width { width: 100%; }
 .sw-container { width: 100%; max-width: var(--sw-container-max); margin-inline: auto; }
+.sw-container-reading { width: 100%; max-width: var(--sw-reading-max); margin-inline: auto; }
 .sw-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
 .sw-align-start { align-items: flex-start; }
 .sw-align-center { align-items: center; }
@@ -904,6 +905,11 @@ body {
   .sw-text-heading { font-size: 24px; line-height: 30px; letter-spacing: -0.4px; }
 }
 
+[data-theme] .sw-font-mono,
+[data-theme] :is(input[type='text'], input[type='email'], input[type='number'], input[type='search'], input[type='url'], input[type='password'], input:not([type]), textarea).sw-font-mono {
+  font-family: ui-monospace, monospace;
+}
+
 .sw-button {
   appearance: none;
   align-items: center;
@@ -2995,6 +3001,23 @@ body {
   }
 }
 
+.sw-list-row-truncate .sw-list-row-title {
+  align-items: center;
+  display: flex;
+  min-width: 0;
+}
+
+.sw-list-row-truncate .sw-list-row-unread { flex: none; }
+
+.sw-list-row-truncate .sw-list-row-title-text,
+.sw-list-row-truncate .sw-list-row-detail {
+  min-width: 0;
+  overflow: hidden;
+  overflow-wrap: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .sw-file-field-frame {
   border: 1px solid var(--sw-color-border);
   border-radius: var(--sw-radius-md);
@@ -3089,6 +3112,16 @@ body {
   flex: none;
 }
 
+.sw-file-field-preview {
+  background: var(--sw-color-subtle);
+  border-radius: var(--sw-radius-sm);
+  display: block;
+  flex: none;
+  height: var(--sw-space-6);
+  object-fit: cover;
+  width: var(--sw-space-8);
+}
+
 .sw-file-field-file {
   display: flex;
   flex: 1 1 calc(4 * var(--sw-space-8));
@@ -4873,6 +4906,43 @@ body {
   .sw-action-menu-trigger.sw-action-menu-trigger-text[aria-expanded='true'] { border-color: Highlight; }
 }
 
+.sw-action-menu-trigger.sw-action-menu-trigger-icon {
+  align-items: center;
+  background: transparent;
+  border-color: transparent;
+  border-radius: var(--sw-radius-pill);
+  color: var(--sw-color-muted);
+  display: inline-flex;
+  justify-content: center;
+  min-height: var(--sw-control-sm-min-height);
+  min-width: var(--sw-control-sm-min-height);
+  padding: 0;
+}
+
+.sw-action-menu-trigger.sw-action-menu-trigger-icon[aria-expanded='true'] {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+  color: var(--sw-color-text);
+}
+
+@media (hover: hover) {
+  .sw-action-menu-trigger.sw-action-menu-trigger-icon:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+    color: var(--sw-color-text);
+  }
+}
+
+@media (pointer: coarse) {
+  .sw-action-menu-trigger.sw-action-menu-trigger-icon {
+    min-height: var(--sw-control-md-min-height);
+    min-width: var(--sw-control-md-min-height);
+  }
+}
+
+@media (forced-colors: active) {
+  .sw-action-menu-trigger.sw-action-menu-trigger-icon { color: ButtonText; }
+  .sw-action-menu-trigger.sw-action-menu-trigger-icon[aria-expanded='true'] { border-color: Highlight; }
+}
+
 .sw-combobox {
   max-width: 100%;
   min-width: 0;
@@ -5745,6 +5815,18 @@ body {
   .sw-description-list { grid-template-columns: minmax(0, 1fr); }
 }
 
+.sw-description-list-spread { grid-template-columns: minmax(0, 1fr); }
+
+.sw-description-list-spread > .sw-description-item {
+  column-gap: var(--sw-space-4);
+  grid-template-columns: fit-content(50%) minmax(0, 1fr);
+}
+
+.sw-description-list-spread .sw-description-detail {
+  align-items: flex-end;
+  text-align: end;
+}
+
 @media (forced-colors: active) {
   .sw-description-item + .sw-description-item { border-top-color: CanvasText; }
 }
@@ -5972,6 +6054,69 @@ body {
   white-space: nowrap;
 }
 
+.sw-filter-chip-warning:not(.sw-filter-chip-quiet) .sw-filter-chip-input:not(:checked) + .sw-filter-chip-face {
+  background: color-mix(in srgb, var(--sw-color-warning) 10%, var(--sw-color-surface));
+  color: color-mix(in srgb, var(--sw-color-warning) 70%, var(--sw-color-text));
+}
+
+.sw-filter-chip-warning:not(.sw-filter-chip-quiet) .sw-filter-chip-input:not(:checked) + .sw-filter-chip-face .sw-filter-chip-count {
+  color: inherit;
+}
+
+@media (forced-colors: active) {
+  .sw-filter-chip-warning:not(.sw-filter-chip-quiet) .sw-filter-chip-input:not(:checked) + .sw-filter-chip-face { background: Canvas; color: CanvasText; }
+}
+
+.sw-filter-chips-row {
+  align-items: flex-end;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  max-width: 100%;
+  min-width: 0;
+}
+
+.sw-filter-chips-row-end {
+  display: flex;
+  margin-inline-start: auto;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.sw-filter-chips-row-scroll {
+  flex-wrap: nowrap;
+  margin: calc(-1 * calc(var(--sw-focus-ring-width) + var(--sw-focus-ring-offset)));
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  padding: calc(var(--sw-focus-ring-width) + var(--sw-focus-ring-offset));
+  position: relative;
+  scrollbar-width: thin;
+}
+
+.sw-filter-chips-row-scroll .sw-filter-chips,
+.sw-filter-chips-row-scroll > .sw-filter-chips-row-end {
+  flex: none;
+  max-width: none;
+}
+
+.sw-filter-chips-row-scroll .sw-filter-chips { width: min-content; }
+
+.sw-filter-chips-row-scroll .sw-filter-chips-options {
+  flex-wrap: nowrap;
+  margin: 0;
+  overflow: visible;
+  padding: 0;
+}
+
+.sw-filter-chips-row-scroll .sw-filter-chip {
+  flex: none;
+  max-width: none;
+}
+
+.sw-filter-chips-row-scroll .sw-filter-chip-face {
+  white-space: nowrap;
+}
+
 @media (forced-colors: active) {
   .sw-filter-chip-face { background: Canvas; border-color: CanvasText; color: CanvasText; }
   .sw-filter-chips-error { color: Mark; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "1.42.0",
+  "version": "1.44.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",

package/dist/components/list/row-slot.d.ts

@@ -1,8 +0,0 @@
-import { type ReactNode } from 'react';
-/**
- * Whether a row's slot (`leading`, `tag`, `action`) holds something to
- * draw. As React renders nothing for them, `undefined`, `null`, a boolean
- * (the `false` of `canArchive && <ActionMenu …/>`) and an empty string are
- * an empty slot, so they add no box and no gap.
- */
-export declare function hasSlot(node: ReactNode): boolean;

package/dist/components/list/row-slot.js

@@ -1,12 +0,0 @@
-/**
- * Whether a row's slot (`leading`, `tag`, `action`) holds something to
- * draw. As React renders nothing for them, `undefined`, `null`, a boolean
- * (the `false` of `canArchive && <ActionMenu …/>`) and an empty string are
- * an empty slot, so they add no box and no gap.
- */
-export function hasSlot(node) {
-    return (node !== undefined &&
-        node !== null &&
-        node !== '' &&
-        typeof node !== 'boolean');
-}