@rcarls/rc-theme-substrate 0.4.2 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @rcarls/rc-theme-substrate
 
+## 0.6.0
+
+### Minor Changes
+
+- a108336: Add shared-column `rc-list` and `rc-list-item` elements with standard and
+  segmented appearances, default content truncation, and native-backed single or
+  multiple selection coordination. Restore author-owned item state when native
+  selection coordination ends.
+- 509ee64: Add `rc-progress`, a native `<progress>` enhancer with a formatted value
+  display, a track and fill you can restyle with CSS custom properties, and a
+  built-in fix for the indeterminate/undefined-binding footgun.
+
+  Keep the native element as the uncontrolled source of truth, support releasing
+  a controlled value, and react to live native `value`/`max` changes. Preserve a
+  native determinate value while `indeterminate` temporarily removes its
+  attribute.
+
+  The bar renders at its intended height with no `display` attribute set,
+  matching its own documented default: previously the track/fill/native
+  `<progress>` are all absolutely positioned, contributing nothing to the
+  control's normal-flow height, so with no value-display text sharing its grid
+  row to give it one, the whole bar collapsed to 0px.
+
+## 0.5.0
+
 ## 0.4.2
 
 ## 0.4.1

package/bridge.css

@@ -154,6 +154,15 @@
     --rc-thumb-radius: 0.5625rem;
   }
 
+  .rc-theme-substrate rc-progress,
+  :host(.rc-theme-substrate) rc-progress {
+    --rc-progress-track-background: color-mix(in srgb, var(--rc-border-color) 70%, transparent);
+    --rc-progress-track-opacity: 1;
+    --rc-progress-track-radius: 999px;
+    --rc-progress-fill-background: var(--rc-accent);
+    --rc-progress-value-color: var(--substrate-on-surface-muted, GrayText);
+  }
+
   .rc-theme-substrate rc-bottom-sheet,
   :host(.rc-theme-substrate) rc-bottom-sheet {
     --rc-bottom-sheet-bg: var(--substrate-surface-raised, Canvas);

package/components/accordion.css

@@ -65,7 +65,10 @@
       translate var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
   }
 
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion details[open] > summary::after {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-accordion
+    details[open]
+    > summary::after {
     rotate: 135deg;
     translate: 0 -0.125rem;
   }
@@ -90,8 +93,7 @@
       opacity: 0;
       overflow: clip;
       transition:
-        block-size var(--substrate-motion-duration-slow, 240ms)
-          var(--substrate-motion-easing, ease),
+        block-size var(--substrate-motion-duration-slow, 240ms) var(--substrate-motion-easing, ease),
         content-visibility var(--substrate-motion-duration-slow, 240ms)
           var(--substrate-motion-easing, ease) allow-discrete,
         opacity var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);

package/components/app-bar.css

@@ -1,10 +1,6 @@
 @layer rc-theme-substrate.components {
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-app-bar {
-    --rc-app-bar-background: color-mix(
-      in srgb,
-      var(--substrate-surface, Canvas) 88%,
-      transparent
-    );
+    --rc-app-bar-background: color-mix(in srgb, var(--substrate-surface, Canvas) 88%, transparent);
     --rc-app-bar-color: var(--rc-field-text, CanvasText);
     --rc-app-bar-scroll-divider: var(--rc-border, 1px solid ButtonBorder);
     --rc-app-bar-shadow: none;

package/components/disclosure.css

@@ -46,10 +46,7 @@
     display: none;
   }
 
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
-    rc-disclosure
-    > details
-    > summary::after {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-disclosure > details > summary::after {
     content: '';
     inline-size: 0.5rem;
     block-size: 0.5rem;
@@ -69,17 +66,11 @@
     translate: 0 -0.125rem;
   }
 
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
-    rc-disclosure
-    > details
-    > summary:hover {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-disclosure > details > summary:hover {
     background: color-mix(in srgb, var(--rc-accent, Highlight) 8%, transparent);
   }
 
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
-    rc-disclosure
-    > details
-    > :not(summary) {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-disclosure > details > :not(summary) {
     display: flow-root;
     padding-inline: 0.875rem;
     opacity: 1;
@@ -101,8 +92,7 @@
       opacity: 0;
       overflow: clip;
       transition:
-        block-size var(--substrate-motion-duration-slow, 240ms)
-          var(--substrate-motion-easing, ease),
+        block-size var(--substrate-motion-duration-slow, 240ms) var(--substrate-motion-easing, ease),
         content-visibility var(--substrate-motion-duration-slow, 240ms)
           var(--substrate-motion-easing, ease) allow-discrete,
         opacity var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);

package/components/list-item.css

@@ -1,12 +1,11 @@
 @layer rc-theme-substrate.components {
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) {
+    /* Compatibility tokens retained for rc-listbox and embedded selectors. */
     --rc-list-item-gap: var(--substrate-item-gap, 0.5rem);
     --rc-list-item-min-block-size: 2.25rem;
     --rc-list-item-padding-block: var(--substrate-item-padding-block, 0.55rem);
     --rc-list-item-padding-inline: var(--substrate-item-padding-inline, 0.75rem);
-    --rc-list-item-divider: 0;
     --rc-list-item-bg: transparent;
-    --rc-list-item-color: var(--rc-field-text, FieldText);
     --rc-list-item-supporting-color: var(--substrate-on-surface-muted, GrayText);
     --rc-list-item-hover-bg: color-mix(in srgb, var(--rc-accent, Highlight) 10%, transparent);
     --rc-list-item-active-bg: color-mix(in srgb, var(--rc-accent, Highlight) 16%, transparent);
@@ -15,41 +14,47 @@
     --rc-list-item-disabled-opacity: var(--rc-disabled-opacity, 0.52);
   }
 
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) .rc-list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) .rc-list-item {
-    display: flex;
-    align-items: center;
-    gap: var(--rc-list-item-gap);
-    min-block-size: var(--rc-list-item-min-block-size);
-    padding: var(--rc-list-item-padding-block) var(--rc-list-item-padding-inline);
-    border-block-end: var(--rc-list-item-divider);
-    background: var(--rc-list-item-bg);
-    color: var(--rc-list-item-color);
-    box-sizing: border-box;
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-list {
+    --rc-list-padding-inline: var(--substrate-item-padding-inline, 0.75rem);
+    --rc-list-leading-gap: var(--substrate-item-gap, 0.5rem);
+    --rc-list-trailing-gap: var(--substrate-item-gap, 0.5rem);
+    --rc-list-row-gap: 0;
+    --rc-list-item-min-block-size: 2.25rem;
+    --rc-list-item-padding-block: var(--substrate-item-padding-block, 0.55rem);
+    --rc-list-item-color: var(--rc-field-text, FieldText);
+    --rc-list-item-background: transparent;
+    --rc-list-item-selected-color: var(--rc-highlight-text, HighlightText);
+    --rc-list-item-selected-background: var(--rc-highlight, Highlight);
+    --rc-list-item-divider: 1px solid var(--substrate-border, GrayText);
+    --rc-list-item-state-layer-color: var(--rc-accent, Highlight);
+    --rc-list-item-hover-state-layer-opacity: 0.1;
+    --rc-list-item-focus-state-layer-opacity: 0.12;
+    --rc-list-item-pressed-state-layer-opacity: 0.16;
+    --rc-list-item-disabled-opacity: var(--rc-disabled-opacity, 0.52);
+    --rc-list-item-transition-duration: 100ms;
   }
 
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) .rc-list-item__start,
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) .rc-list-item__trailing,
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) .rc-list-item__end {
-    display: inline-flex;
-    align-items: center;
-    flex-shrink: 0;
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-list[variant='segmented'] {
+    --rc-list-padding-inline: 0;
+    --rc-list-row-gap: 0.25rem;
+    --rc-list-item-background: var(--substrate-surface-raised, Field);
+    --rc-list-item-divider: 0;
+    --rc-list-item-border: 1px solid var(--substrate-border, GrayText);
+    --rc-list-item-border-radius: var(--substrate-radius-medium, 0.375rem);
   }
 
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) .rc-list-item__body {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    min-inline-size: 0;
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-list-item
+    > :where([data-rc-list-supporting], small) {
+    display: block;
+    color: var(--substrate-on-surface-muted, GrayText);
   }
 
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) .rc-list-item__supporting {
-    color: var(--rc-list-item-supporting-color);
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-list-item
+    > :is(input[type='checkbox'], input[type='radio'])[slot='leading'] {
+    margin: 0;
+    accent-color: var(--rc-accent, Highlight);
   }
 
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-listbox,

package/components/progress.css

@@ -0,0 +1,6 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-progress::part(value-display) {
+    color: var(--substrate-on-surface-muted, GrayText);
+    font-variant-numeric: tabular-nums;
+  }
+}

package/components/search-bar.css

@@ -22,7 +22,9 @@
     outline-offset: var(--rc-focus-ring-offset, 2px);
   }
 
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-search-bar > input[type='search']:focus-visible {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-search-bar
+    > input[type='search']:focus-visible {
     outline: none;
   }
 }

package/components/segmented-button.css

@@ -36,6 +36,7 @@
     --rc-segmented-button-selected-color: var(--rc-highlight-text, HighlightText);
     --rc-segmented-button-segment-min-block-size: var(--rc-control-block-size, 2.5rem);
     --rc-segmented-button-segment-padding-inline: var(--rc-control-padding-inline, 0.75rem);
+    --rc-segmented-button-segment-gap: 0.5em;
     --rc-segmented-button-focus-ring: var(--rc-focus-ring);
     --rc-segmented-button-focus-ring-offset: -2px;
     --rc-segmented-button-disabled-opacity: var(--rc-disabled-opacity);

package/components/splitter.css

@@ -1,14 +1,6 @@
 @layer rc-theme-substrate.components {
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-splitter {
-    --rc-splitter-separator-color: color-mix(
-      in srgb,
-      var(--rc-accent, Highlight) 8%,
-      Canvas
-    );
-    --rc-splitter-handle-color: color-mix(
-      in srgb,
-      var(--rc-accent, Highlight) 45%,
-      ButtonBorder
-    );
+    --rc-splitter-separator-color: color-mix(in srgb, var(--rc-accent, Highlight) 8%, Canvas);
+    --rc-splitter-handle-color: color-mix(in srgb, var(--rc-accent, Highlight) 45%, ButtonBorder);
   }
 }

package/components/toolbar.css

@@ -22,9 +22,7 @@
     background: color-mix(in srgb, var(--rc-accent, Highlight) 10%, transparent);
   }
 
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
-    rc-toolbar
-    > button[aria-pressed='true'] {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-toolbar > button[aria-pressed='true'] {
     background: var(--rc-highlight, Highlight);
     color: var(--rc-highlight-text, HighlightText);
   }

package/components.css

@@ -24,6 +24,7 @@
 @import './components/toolbar.css';
 @import './components/segmented-button.css';
 @import './components/slider.css';
+@import './components/progress.css';
 @import './components/snackbar.css';
 @import './components/range-slider.css';
 @import './components/splitter.css';

package/defaults.css

@@ -46,11 +46,11 @@
 
     --substrate-shadow-sm: 0 1px 2px var(--substrate-shadow-color);
     --substrate-shadow-md:
-      0 1px 2px var(--substrate-shadow-color), 0 10px 30px
-      color-mix(in oklch, var(--substrate-shadow-color) 65%, transparent);
+      0 1px 2px var(--substrate-shadow-color),
+      0 10px 30px color-mix(in oklch, var(--substrate-shadow-color) 65%, transparent);
     --substrate-shadow-lg:
-      0 1px 2px var(--substrate-shadow-color), 0 18px 48px
-      color-mix(in oklch, var(--substrate-shadow-color) 80%, transparent);
+      0 1px 2px var(--substrate-shadow-color),
+      0 18px 48px color-mix(in oklch, var(--substrate-shadow-color) 80%, transparent);
 
     --substrate-focus-ring: 2px solid var(--substrate-primary);
     --substrate-focus-ring-offset: 2px;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.4.2",
+  "version": "0.6.0",
   "description": "Lightweight CSS reference theme for app-oriented rc-webcomponents layouts.",
   "repository": {
     "type": "git",