@exsto/ds 0.0.1-rc.5 → 0.0.1-rc.6

package/dist/styles.css

@@ -3,6 +3,9 @@
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     :root, :host {
       --shimmer-angle: 20deg;
+      --scroll-bar-size: 8px;
+      --scroll-bar-gap: 0px;
+      --scroll-bar-start: 0px;
     }
 
     *, :before, :after, ::backdrop {
@@ -758,14 +761,26 @@
     margin-block: auto;
   }
 
+  .ms-\(--scroll-bar-gap\) {
+    margin-inline-start: var(--scroll-bar-gap);
+  }
+
   .ms-auto {
     margin-inline-start: auto;
   }
 
+  .me-\(--scroll-bar-gap\) {
+    margin-inline-end: var(--scroll-bar-gap);
+  }
+
   .-mt-4 {
     margin-top: calc(var(--spacing) * -4);
   }
 
+  .mt-\(--scroll-bar-offset-top\) {
+    margin-top: var(--scroll-bar-offset-top);
+  }
+
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * .5);
   }
@@ -786,6 +801,10 @@
     margin-bottom: calc(var(--spacing) * -4);
   }
 
+  .mb-\(--scroll-bar-gap\) {
+    margin-bottom: var(--scroll-bar-gap);
+  }
+
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -975,10 +994,22 @@
     height: var(--positioner-height);
   }
 
+  .h-\(--scroll-bar-length\) {
+    height: var(--scroll-bar-length);
+  }
+
+  .h-\(--scroll-bar-size\) {
+    height: var(--scroll-bar-size);
+  }
+
   .h-0\.5 {
     height: calc(var(--spacing) * .5);
   }
 
+  .h-1 {
+    height: var(--spacing);
+  }
+
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
@@ -1123,6 +1154,10 @@
     width: var(--positioner-width);
   }
 
+  .w-\(--scroll-bar-size\) {
+    width: var(--scroll-bar-size);
+  }
+
   .w-\(--sidebar-width\) {
     width: var(--sidebar-width);
   }
@@ -1498,6 +1533,10 @@
     touch-action: none;
   }
 
+  .resize {
+    resize: both;
+  }
+
   .resize-none {
     resize: none;
   }
@@ -1942,16 +1981,6 @@
     }
   }
 
-  .bg-destructive\/20 {
-    background-color: var(--destructive);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-destructive\/20 {
-      background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
-    }
-  }
-
   .bg-foreground {
     background-color: var(--foreground);
   }
@@ -1970,16 +1999,6 @@
     }
   }
 
-  .bg-info\/20 {
-    background-color: var(--info);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-info\/20 {
-      background-color: color-mix(in oklab, var(--info) 20%, transparent);
-    }
-  }
-
   .bg-input\/30 {
     background-color: var(--input);
   }
@@ -2030,16 +2049,6 @@
     background-color: var(--primary-foreground);
   }
 
-  .bg-primary\/20 {
-    background-color: var(--primary);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-primary\/20 {
-      background-color: color-mix(in oklab, var(--primary) 20%, transparent);
-    }
-  }
-
   .bg-secondary {
     background-color: var(--secondary);
   }
@@ -2052,10 +2061,6 @@
     background-color: var(--sidebar-border);
   }
 
-  .bg-success {
-    background-color: var(--success);
-  }
-
   .bg-success-ring\/40 {
     background-color: var(--success-ring);
   }
@@ -2066,24 +2071,10 @@
     }
   }
 
-  .bg-success\/20 {
-    background-color: var(--success);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-success\/20 {
-      background-color: color-mix(in oklab, var(--success) 20%, transparent);
-    }
-  }
-
   .bg-transparent {
     background-color: #0000;
   }
 
-  .bg-warning {
-    background-color: var(--warning);
-  }
-
   .bg-warning-ring\/40 {
     background-color: var(--warning-ring);
   }
@@ -2094,16 +2085,6 @@
     }
   }
 
-  .bg-warning\/20 {
-    background-color: var(--warning);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-warning\/20 {
-      background-color: color-mix(in oklab, var(--warning) 20%, transparent);
-    }
-  }
-
   .bg-gradient-to-t {
     --tw-gradient-position: to top in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
@@ -7294,6 +7275,29 @@
   }
 }
 
+@property --scroll-bar-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 8px;
+}
+
+@property --scroll-bar-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0;
+}
+
+@property --scroll-bar-start {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0;
+}
+
+[data-slot="scroll-area-scrollbar"] {
+  --scroll-bar-offset-top: calc(var(--scroll-bar-gap) + var(--scroll-bar-start));
+  --scroll-bar-length: calc(100% - var(--scroll-bar-gap) * 2 - var(--scroll-bar-start));
+}
+
 :where(:root) {
   --focus-ring: var(--ring);
 }
@@ -7330,6 +7334,9 @@
   --motion-fade-in: .16s;
   --motion-fade-delay: 40ms;
   --motion-fade-out: .12s;
+}
+
+:where(:root) {
   --ease-expand: var(--ease-out, cubic-bezier(0, 0, .2, 1));
 }
 
@@ -7379,6 +7386,10 @@
   transition-duration: var(--motion-expand);
 }
 
+[data-slot="progress"][aria-hidden="true"] > span[role="presentation"] {
+  display: none;
+}
+
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;

package/dist/ui/src/components/edyn/date-range-picker/date-range-picker.d.ts

@@ -10,6 +10,12 @@ export interface IDateRangePickerProps {
     value: TDateRange;
     onValueChange: (value: TDateRange) => void;
     placeholder?: string;
+    /**
+     * What the trigger says once a range is set. `range` (default) writes the ends; `label` keeps the label, so a
+     * range the page shows elsewhere (as a removable chip, say) is not repeated here. In both, the trigger carries
+     * `data-set` while either end is set, for a look of its own.
+     */
+    summary?: 'range' | 'label';
     /** How the ends are written on the trigger (BCP 47); en-GB reads 05 Mar 2026. */
     locale?: string;
     /** An accessible name for the trigger, when there is no visible label to point at. */
@@ -17,4 +23,4 @@ export interface IDateRangePickerProps {
     className?: string;
 }
 /** A range of calendar days, either end optional; two months side by side, one on a phone. */
-export declare const DateRangePicker: ({ id, value, onValueChange, placeholder, locale, "aria-label": ariaLabel, className, }: IDateRangePickerProps) => import('react').JSX.Element;
+export declare const DateRangePicker: ({ id, value, onValueChange, placeholder, locale, summary, "aria-label": ariaLabel, className, }: IDateRangePickerProps) => import('react').JSX.Element;

package/dist/ui/src/components/edyn/multi-select/multi-select.d.ts

@@ -30,6 +30,12 @@ export interface IMultiSelectProps {
     options: readonly TMultiSelectOption[];
     value: readonly string[];
     onValueChange: (value: string[]) => void;
+    /**
+     * What the trigger says once something is chosen. `selection` (default) names the one chosen or counts several;
+     * `label` keeps the label and only counts, so a value the page shows elsewhere (as a removable chip, say) is
+     * not repeated here: nothing chosen reads `placeholder`, anything chosen reads `labels.selectedCount(n)`.
+     */
+    summary?: 'selection' | 'label';
     /** For a Label's htmlFor. */
     id?: string;
     'aria-label'?: string;
@@ -73,7 +79,9 @@ export interface IMultiSelectProps {
  */
 export declare const resolveChosen: (value: readonly string[], options: readonly TMultiSelectOption[], selectedOptions?: readonly TMultiSelectOption[]) => TMultiSelectOption[];
 /** What the trigger says: the placeholder, the one picked, or a count. */
-export declare const summarize: (chosen: readonly TMultiSelectOption[], placeholder: string, labels: IMultiSelectLabels) => string;
+export declare const summarize: (chosen: readonly TMultiSelectOption[], placeholder: string, labels: IMultiSelectLabels, summary?: "selection" | "label") => string;
+/** Every chosen name, for a tooltip on a trigger whose text is cut. With `label` the names are not shown, so it is the text itself. */
+export declare const fullSelection: (chosen: readonly TMultiSelectOption[], placeholder: string, labels: IMultiSelectLabels, summary?: "selection" | "label") => string;
 /**
  * A choice of several from a list: a trigger shaped like a Select that says what is picked
  * (the placeholder, the one picked, or a count), and a popup with a search field and checkbox
@@ -85,4 +93,4 @@ export declare const summarize: (chosen: readonly TMultiSelectOption[], placehol
  * server: the caller fetches the options for the typed text, and says when they are loading,
  * failed, or have another page.
  */
-export declare const MultiSelect: ({ placeholder, searchPlaceholder, options, value, onValueChange, id, disabled, className, onSearchChange, searchDelay, selectedOptions, loading, error, onRetry, hasMore, onLoadMore, loadingMore, labels: labelOverrides, ...rest }: IMultiSelectProps) => import('react').JSX.Element;
+export declare const MultiSelect: ({ placeholder, searchPlaceholder, options, value, onValueChange, id, disabled, className, onSearchChange, searchDelay, selectedOptions, loading, error, onRetry, hasMore, onLoadMore, loadingMore, labels: labelOverrides, summary, ...rest }: IMultiSelectProps) => import('react').JSX.Element;

package/dist/ui/src/components/ui/progress/progress.d.ts

@@ -1,13 +1,47 @@
 import { Progress as ProgressPrimitive } from '@base-ui/react/progress';
 import { VariantProps } from 'class-variance-authority';
-declare const progressIndicatorVariants: (props?: ({
-    tone?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
+/**
+ * The tones: a closed set of semantic colours rather than a class string, so a bar cannot carry a
+ * colour the theme does not define and dark mode and a re-theme keep working. Each is the theme token
+ * the fill uses; the track is a 20% tint of the same token.
+ */
+declare const TONE_TOKEN: {
+    readonly default: "var(--primary)";
+    readonly info: "var(--info)";
+    readonly success: "var(--success)";
+    readonly warning: "var(--warning)";
+    readonly destructive: "var(--destructive)";
+};
+export type TProgressTone = keyof typeof TONE_TOKEN;
+/**
+ * Colours an app can set without a class string. --progress-color replaces the fill (any colour, such as an
+ * app's own status tokens); --progress-track replaces the track, which does not follow the fill: an app
+ * that wants a neutral track sets it to var(--muted). Both are read where the bar is, so they follow the
+ * theme and can be set on :root or on any ancestor.
+ */
+export declare const progressFill: (tone: TProgressTone) => string;
+export declare const progressTrack: (tone: TProgressTone) => string;
+/**
+ * How the fill eases its width. The defaults are the 300ms ease-in-out it always had; an app retunes them
+ * with --progress-duration and --progress-ease, or turns the easing off with `animated={false}` when the
+ * number it shows is itself animated and the bar is driven from the same clock.
+ */
+export declare const PROGRESS_DURATION = "var(--progress-duration, 300ms)";
+export declare const PROGRESS_EASE = "var(--progress-ease, cubic-bezier(0.4, 0, 0.2, 1))";
+declare const progressTrackVariants: (props?: ({
+    size?: "default" | "sm" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export type TProgressTone = NonNullable<VariantProps<typeof progressIndicatorVariants>['tone']>;
 export interface IProgressProps extends Omit<ProgressPrimitive.Root.Props, 'value'> {
     value?: number | null;
     /** The bar's colour: a share of a total reads as `warning` when nearly used up, `success` when done. */
     tone?: TProgressTone;
+    /** 4px (`sm`) or 8px (default) tall. */
+    size?: VariantProps<typeof progressTrackVariants>['size'];
+    /**
+     * Whether the fill eases when `value` changes. Turn it off when the value already moves smoothly
+     * (driven from an animated number's clock), or the bar eases a second time behind it.
+     */
+    animated?: boolean;
 }
-export declare const Progress: ({ value, tone, className, ...props }: IProgressProps) => import('react').JSX.Element;
+export declare const Progress: ({ value, tone, size, animated, className, ...props }: IProgressProps) => import('react').JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exsto/ds",
-  "version": "0.0.1-rc.5",
+  "version": "0.0.1-rc.6",
   "description": "The eDynamix design system: React components and design tokens.",
   "license": "Apache-2.0",
   "keywords": [