@taprootio/espalier 2.3.0 → 2.3.1

package/dist/progress/esp-progress.js

@@ -1,6 +1,6 @@
-var a=function(n,e,s,t){var o=arguments.length,i=o<3?e:t===null?t=Object.getOwnPropertyDescriptor(e,s):t,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(n,e,s,t);else for(var h=n.length-1;h>=0;h--)(c=n[h])&&(i=(o<3?c(i):o>3?c(e,s,i):c(e,s))||i);return o>3&&i&&Object.defineProperty(e,s,i),i};import{css as x,html as m,nothing as p,svg as g}from"lit";import{customElement as y,property as l}from"lit/decorators.js";import{classMap as f}from"lit/directives/class-map.js";import{styleMap as b}from"lit/directives/style-map.js";import{EspalierElementBase as u}from"../shared/esp-element-base.js";const v=15.9155,d=2*Math.PI*v;let r=class extends u{constructor(){super(...arguments),this.value=null,this.max=100,this.label="",this.showValue=!1,this.size="medium",this.mode="bar"}get isIndeterminate(){return this.value===null||this.value===void 0}get clampedValue(){if(this.isIndeterminate)return 0;const e=Math.max(this.max,0);return Math.min(Math.max(this.value,0),e)}get percentage(){return this.isIndeterminate||this.max<=0?0:this.clampedValue/this.max*100}render(){return this.mode==="circle"?this.renderCircle():this.renderBar()}renderBar(){const e=this.isIndeterminate,s={track:!0,indeterminate:e},t=e?{}:{width:`${this.percentage}%`},o=this.showValue&&!e;return m`
+var a=function(n,e,s,t){var o=arguments.length,i=o<3?e:t===null?t=Object.getOwnPropertyDescriptor(e,s):t,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(n,e,s,t);else for(var h=n.length-1;h>=0;h--)(c=n[h])&&(i=(o<3?c(i):o>3?c(e,s,i):c(e,s))||i);return o>3&&i&&Object.defineProperty(e,s,i),i};import{css as x,html as m,nothing as p,svg as f}from"lit";import{customElement as y,property as l}from"lit/decorators.js";import{classMap as g}from"lit/directives/class-map.js";import{styleMap as b}from"lit/directives/style-map.js";import{EspalierElementBase as u}from"../shared/esp-element-base.js";const v=15.9155,d=2*Math.PI*v;let r=class extends u{constructor(){super(...arguments),this.value=null,this.max=100,this.label="",this.showValue=!1,this.size="medium",this.mode="bar"}get isIndeterminate(){return this.value===null||this.value===void 0}get clampedValue(){if(this.isIndeterminate)return 0;const e=Math.max(this.max,0);return Math.min(Math.max(this.value,0),e)}get percentage(){return this.isIndeterminate||this.max<=0?0:this.clampedValue/this.max*100}render(){return this.mode==="circle"?this.renderCircle():this.renderBar()}renderBar(){const e=this.isIndeterminate,s={track:!0,indeterminate:e},t=e?{}:{width:`${this.percentage}%`},o=this.showValue&&!e;return m`
       <div
-        class=${f(s)}
+        class=${g(s)}
         role="progressbar"
         aria-label=${this.label}
         aria-valuemin="0"
@@ -11,7 +11,7 @@ var a=function(n,e,s,t){var o=arguments.length,i=o<3?e:t===null?t=Object.getOwnP
       </div>
       ${o?m`<div class="value-text">${Math.round(this.percentage)}%</div>`:p}
     `}renderCircle(){const e=this.isIndeterminate,s=e?d*.75:d-this.percentage/100*d,t=this.showValue&&!e;return m`
-      <div class=${f({"circle-container":!0,indeterminate:e})}>
+      <div class=${g({"circle-container":!0,indeterminate:e})}>
         <svg
           viewBox="0 0 36 36"
           class="circle-svg"
@@ -21,7 +21,7 @@ var a=function(n,e,s,t){var o=arguments.length,i=o<3?e:t===null?t=Object.getOwnP
           aria-valuemax=${this.max}
           aria-valuenow=${e?p:this.clampedValue}
         >
-          ${g`
+          ${f`
             <circle
               class="circle-track"
               cx="18" cy="18" r="${v}"
@@ -37,7 +37,7 @@ var a=function(n,e,s,t){var o=arguments.length,i=o<3?e:t===null?t=Object.getOwnP
               stroke-dashoffset="${s}"
               stroke-linecap="round"
             />
-          `} ${t?g`
+          `} ${t?f`
               <text
                 x="18" y="18"
                 class="circle-text"
@@ -83,7 +83,10 @@ var a=function(n,e,s,t){var o=arguments.length,i=o<3?e:t===null?t=Object.getOwnP
 
       .fill {
         height: 100%;
-        background: var(--esp-progress-fill-color, var(--esp-color-action-background));
+        background: var(
+          --esp-progress-fill-color,
+          oklch(from var(--esp-color-action-background) var(--esp-l-muted) c h)
+        );
         transition: width 0.3s ease;
         min-width: 0;
       }
@@ -132,7 +135,10 @@ var a=function(n,e,s,t){var o=arguments.length,i=o<3?e:t===null?t=Object.getOwnP
       }
 
       .circle-fill {
-        stroke: var(--esp-progress-fill-color, var(--esp-color-action-background));
+        stroke: var(
+          --esp-progress-fill-color,
+          oklch(from var(--esp-color-action-background) var(--esp-l-muted) c h)
+        );
         transform: rotate(-90deg);
         transform-origin: 50% 50%;
         transition: stroke-dashoffset 0.3s ease;

package/espalier.token-manifest.json

@@ -123,7 +123,7 @@
       "name": "--esp-breadcrumb-separator-color",
       "category": "component",
       "component": "esp-breadcrumbs",
-      "description": "Set the color of the separator. It defaults to a bright complementary color."
+      "description": "Set the color of the separator. It defaults to the semantic heading color so navigation structure stays visible in light and dark themes."
     },
     {
       "name": "--esp-button-group-divider",
@@ -1379,7 +1379,7 @@
       "name": "--esp-progress-fill-color",
       "category": "component",
       "component": "esp-progress",
-      "description": "Color of the progress fill. Defaults to `var(--esp-color-action-background)`."
+      "description": "Color of the progress fill. Defaults to the active action hue at the semantic muted lightness so the filled and unfilled portions remain distinguishable in light and dark themes."
     },
     {
       "name": "--esp-progress-font-size",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taprootio/espalier",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "packageManager": "bun@1.3.12",
   "description": "Espalier — a themeable, accessible, framework-agnostic, enterprise-grade design system built on web standards and love.",
   "customElements": "custom-elements.json",