@mcp-b/web-components 0.2.0

package/dist/progress-DzVk260j.js

@@ -0,0 +1,494 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { clamp } from "@mcp-b/wc-support/utilities/math";
+//#region src/components/progress/progress.styles.ts
+var progress_styles_default = css`
+  :host {
+    --track-color: var(--sigvelo-color-neutral-bg-subtle);
+    --track-size: 1.5em;
+    --indicator-color: var(--sigvelo-color-primary-bg);
+    --diameter: 10em;
+
+    /* Private */
+    --percentage: 0;
+
+    display: block;
+  }
+
+  /* Bar */
+  :host([variant="bar"]) #track {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: var(--track-size);
+    overflow: hidden;
+    border-radius: var(--sigvelo-radius-full);
+    background-color: var(--track-color);
+    box-shadow: inset 0 0.25rem 0.25rem -0.25rem
+      color-mix(in oklab, var(--sigvelo-color-shadow), transparent 85%);
+    font-size: 0.875em;
+  }
+
+  :host([variant="bar"]) #indicator {
+    display: grid;
+    place-content: center;
+    width: calc(var(--percentage) * 1%);
+    height: 100%;
+    border-radius: inherit;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    background-color: var(--indicator-color);
+    color: var(--sigvelo-color-primary-text-on-bg);
+    font-weight: var(--sigvelo-font-weight-semibold);
+    transition: 0.3s width ease;
+  }
+
+  :host([variant="bar"]) #content {
+    display: block;
+    margin-inline: 1em;
+    overflow: hidden;
+    translate: 0 -0.0625em; /* better vertical alignment */
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Indeterminate */
+  :host([variant="bar"][indeterminate]) #indicator {
+    width: 50%;
+    border-radius: inherit;
+    animation: 2.5s bar-indeterminate infinite var(--sigvelo-ease-standard);
+
+    &:dir(rtl) {
+      animation-name: bar-indeterminate-rtl;
+    }
+  }
+
+  @keyframes bar-indeterminate {
+    0% {
+      translate: -100%;
+    }
+    20% {
+      translate: -100%;
+    }
+
+    100% {
+      translate: 200%;
+    }
+  }
+
+  @keyframes bar-indeterminate-rtl {
+    0% {
+      translate: 100%;
+    }
+    20% {
+      translate: 100%;
+    }
+
+    100% {
+      translate: -200%;
+    }
+  }
+
+  /* Ring */
+  :host([variant="ring"]) {
+    --track-size: 1em;
+
+    /* Private */
+    --circumference: calc((var(--diameter) / 2 - var(--track-size) * 0.5) * 2 * 3.141592654);
+
+    display: inline-flex;
+    position: relative;
+    width: var(--diameter) !important;
+    height: var(--diameter) !important;
+    font-size: 0.875em;
+  }
+
+  :host([variant="ring"]) svg {
+    flex: 1 1 auto;
+  }
+
+  :host([variant="ring"]) #track,
+  :host([variant="ring"]) #indicator {
+    fill: none;
+    r: calc(var(--diameter) / 2 - var(--track-size) * 0.5);
+    cx: calc(var(--diameter) / 2);
+    cy: calc(var(--diameter) / 2);
+    transform-origin: 50% 50%;
+    rotate: -90deg;
+  }
+
+  :host([variant="ring"]) #track {
+    stroke: var(--track-color);
+    stroke-width: var(--track-size);
+  }
+
+  :host([variant="ring"]) #indicator {
+    stroke: var(--indicator-color);
+    stroke-width: var(--track-size);
+    stroke-linecap: round;
+    transition: var(--sigvelo-motion-duration-presence) stroke-dasharray ease;
+    stroke-dasharray: calc((var(--circumference) * var(--percentage)) / 100) var(--circumference);
+  }
+
+  :host([variant="ring"]:dir(rtl)) #indicator {
+    --circumference-rtl: calc(var(--circumference) * -1);
+    --percentage-rtl: calc(var(--percentage) * -1);
+    stroke-dasharray: 0 calc((var(--circumference) * (100 - var(--percentage))) / 100)
+      var(--circumference);
+  }
+
+  :host([variant="ring"][indeterminate]) #indicator {
+    animation: 2.5s ring-indeterminate infinite linear;
+    stroke-dasharray: calc((var(--circumference) * 50) / 100) var(--circumference);
+  }
+
+  :host([variant="ring"][indeterminate]:dir(rtl)) #indicator {
+    animation-name: ring-indeterminate-rtl;
+  }
+
+  :host([variant="ring"]) #content {
+    display: flex;
+    position: absolute;
+    align-items: center;
+    justify-content: center;
+    width: var(--diameter);
+    height: var(--diameter);
+    padding: var(--track-size);
+    text-align: center;
+  }
+
+  @keyframes ring-indeterminate {
+    0% {
+      rotate: -360deg;
+    }
+    100% {
+      rotate: 360deg;
+    }
+  }
+
+  @keyframes ring-indeterminate-rtl {
+    0% {
+      rotate: 360deg;
+    }
+    100% {
+      rotate: -360deg;
+    }
+  }
+
+  /* Pie */
+  :host([variant="pie"]) {
+    /* Private - smaller radius so stroke fits within bounds */
+    --circumference: calc(var(--diameter) / 4 * 2 * 3.141592654);
+
+    display: inline-flex;
+    position: relative;
+    width: var(--diameter) !important;
+    height: var(--diameter) !important;
+    font-size: 0.875em;
+  }
+
+  :host([variant="pie"]) svg {
+    flex: 1 1 auto;
+    overflow: hidden;
+    border-radius: 50%;
+  }
+
+  :host([variant="pie"]) #track,
+  :host([variant="pie"]) #indicator {
+    fill: none;
+    r: calc(var(--diameter) / 4);
+    cx: calc(var(--diameter) / 2);
+    cy: calc(var(--diameter) / 2);
+    transform-origin: 50% 50%;
+    rotate: -90deg;
+  }
+
+  :host([variant="pie"]) #track {
+    fill: var(--track-color);
+    r: calc(var(--diameter) / 2);
+    stroke: none;
+  }
+
+  :host([variant="pie"]) #indicator {
+    fill: none;
+    stroke: var(--indicator-color);
+    stroke-width: calc(var(--diameter) / 2);
+    stroke-linecap: butt;
+    transition: var(--sigvelo-motion-duration-layout) stroke-dasharray ease;
+    stroke-dasharray: calc((var(--circumference) * var(--percentage)) / 100) var(--circumference);
+  }
+
+  /* RTL support */
+  :host([variant="pie"]:dir(rtl)) #indicator {
+    stroke-dasharray: 0 calc((var(--circumference) * (100 - var(--percentage))) / 100)
+      var(--circumference);
+  }
+
+  /* Indeterminate pie */
+  :host([variant="pie"][indeterminate]) #indicator {
+    animation: 2.5s pie-indeterminate infinite ease-in-out;
+    stroke-dasharray: calc((var(--circumference) * 50) / 100) var(--circumference);
+  }
+
+  :host([variant="pie"][indeterminate]:dir(rtl)) #indicator {
+    animation-name: pie-indeterminate-rtl;
+  }
+
+  :host([variant="pie"]) #content {
+    display: flex;
+    z-index: 1;
+    position: absolute;
+    align-items: center;
+    justify-content: center;
+    width: var(--diameter);
+    height: var(--diameter);
+    padding: var(--track-size);
+    color: var(--sigvelo-color-primary-text-on-bg);
+  }
+
+  @keyframes pie-indeterminate {
+    0% {
+      stroke-dasharray: 0 var(--circumference);
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: var(--circumference) 0;
+      stroke-dashoffset: 0;
+    }
+    100% {
+      stroke-dasharray: 0 var(--circumference);
+      stroke-dashoffset: 0;
+    }
+  }
+
+  @keyframes pie-indeterminate-rtl {
+    0% {
+      stroke-dasharray: 0 var(--circumference);
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: var(--circumference) 0;
+      stroke-dashoffset: 0;
+    }
+    100% {
+      stroke-dasharray: 0 var(--circumference);
+      stroke-dashoffset: 0;
+    }
+  }
+`;
+//#endregion
+//#region src/components/progress/progress.ts
+/**
+* <sigvelo-progress>
+*
+* @summary Visually represents the progress of a request or task.
+* @tag sigvelo-progress
+* @documentation https://design-system.sigvelo.com/docs/components/progress
+* @status stable
+* @since 1.0
+*
+* @slot - Text to render inside the progress bar.
+*
+* @cssproperty [--track-color=var(--sigvelo-color-neutral-bg-subtle)] - The color of the progress bar's track.
+* @cssproperty [--track-size=1.5em | 1em] - The height or thickness of the track, depending on the type of progress bar.
+* @cssproperty [--indicator-color=var(--sigvelo-color-primary-bg)] - The color of the progress bar's value indicator.
+* @cssproperty [--diameter=10em] - For progress rings, the diameter of the ring.
+*
+* @csspart track - The progress bar's track, a `<div>` for progress bars and a `<circle>` for progress rings.
+* @csspart indicator - The progress bar's current value indicator, a `<div>` for progress bars and an SVG `<circle>`
+*  for progress rings.
+* @csspart content - The container that holds any content that's been slotted in.
+*
+* @example Default
+* ```html
+* <sigvelo-progress label="Downloading" value="50">
+*   50%
+* </sigvelo-progress>
+* ```
+*
+* @example Adding a label
+* Labels aren't displayed in the progress bar, but they're required for assistive devices such as screen readers. You can add a label using the `label` attribute.
+*
+* ```html
+* <sigvelo-progress label="Progress" value="50"></sigvelo-progress>
+* ```
+*
+* @example Showing content
+* Slot in some text to show content in the progress bar's indicator.
+*
+* ```html
+* <sigvelo-progress label="Progress" value="75">75%</sigvelo-progress>
+* ```
+*
+* @example Progress rings
+* Set the `variant` attribute to `ring` to show progress in the shape of a ring.
+*
+* ```html
+* <sigvelo-progress label="Completion" variant="ring" value="50">
+*   50%
+* </sigvelo-progress>
+* ```
+*
+* @example Progress pie charts
+* Set the `variant` attribute to `pie` to show progress in the shape of a filled pie chart.
+*
+* ```html
+* <sigvelo-progress label="Completion" variant="pie" value="66"></sigvelo-progress>
+* ```
+*
+* @example Indeterminate progress
+* When the completion status can't be determined, the progress bar is considered indeterminate. Add the `indeterminate` attribute for tasks whose progress can't be reported.
+*
+* ```html
+* <sigvelo-progress label="Waiting for response" indeterminate></sigvelo-progress>
+*
+* <br>
+*
+* <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
+*   <sigvelo-progress label="Waiting for response" variant="ring" indeterminate></sigvelo-progress>
+*   <sigvelo-progress label="Waiting for response" variant="pie" indeterminate></sigvelo-progress>
+* </div>
+* ```
+*
+* @example Changing the size
+* Use `--track-size` property to change the track size for bars and rings. For rings and pie charts, use the `--diameter` custom property to change the size.
+*
+* ```html
+* <sigvelo-progress
+*   label="Progress"
+*   value="75"
+*   style="--track-size: 10px;"
+* >
+* </sigvelo-progress>
+*
+* <br>
+*
+* <sigvelo-progress
+*   label="Progress"
+*   value="75"
+*   style="--track-size: 60px; font-size: 1.5rem;"
+* >
+*   Loading
+* </sigvelo-progress>
+*
+* <br>
+*
+* <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
+*   <sigvelo-progress
+*     variant="ring"
+*     value="75"
+*     style="--track-size: 4px; --diameter: 100px;"
+*   >
+*     75%
+*   </sigvelo-progress>
+*
+*   <sigvelo-progress
+*     variant="pie"
+*     value="75"
+*     style="--diameter: 100px;"
+*   >
+*   </sigvelo-progress>
+* </div>
+* ```
+*
+* @example Changing the colors
+* Use the `--track-color` custom property to change the progress bar's track color. Use the `--indicator-color` custom property to change the color of the progress indicator.
+*
+* ```html
+* <sigvelo-progress
+*   style="--track-color: mistyrose; --indicator-color: deeppink; color: white;"
+*   label="Progress"
+*   value="75"
+* >
+*   Almost there!
+* </sigvelo-progress>
+*
+* <br>
+*
+* <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
+*   <sigvelo-progress
+*     style="--track-color: mistyrose; --indicator-color: deeppink;"
+*     variant="ring"
+*     label="Progress"
+*     value="75"
+*   >
+*     75%
+*   </sigvelo-progress>
+*
+*   <sigvelo-progress
+*     style="--track-color: mistyrose; --indicator-color: deeppink;"
+*     variant="pie"
+*     label="Progress"
+*     value="75"
+*   >
+*   </sigvelo-progress>
+* </div>
+* ```
+*/
+var SigveloProgress = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "bar";
+		this.min = 0;
+		this.max = 100;
+		this.value = 0;
+		this.indeterminate = false;
+	}
+	static {
+		this.styles = [hostStyles, progress_styles_default];
+	}
+	/** The progress bar's current value as a percentage. This is a readonly property. */
+	get percentage() {
+		return (this.value - this.min) / (this.max - this.min) * 100;
+	}
+	firstUpdated() {
+		this.setAttribute("role", "progressbar");
+		if (!this.label) this.setAttribute("aria-label", "Progress");
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("label")) this.setAttribute("aria-label", this.label || "Progress");
+		if (changedProperties.has("min") || changedProperties.has("max") || changedProperties.has("value") || changedProperties.has("indeterminate")) {
+			this.style.setProperty("--percentage", `${clamp(this.percentage, 0, 100)}`);
+			this.setAttribute("aria-valuemin", String(this.min));
+			this.setAttribute("aria-valuemax", String(this.max));
+			if (this.indeterminate) this.removeAttribute("aria-valuenow");
+			else this.setAttribute("aria-valuenow", String(this.value));
+		}
+	}
+	render() {
+		if (this.variant === "ring" || this.variant === "pie") return html`
+        <svg>
+          <circle id="track" part="track"></circle>
+          <circle id="indicator" part="indicator"></circle>
+        </svg>
+
+        <div id="content" part="content">
+          <slot></slot>
+        </div>
+      `;
+		return html`
+      <div id="track" part="track">
+        <div id="indicator" part="indicator">
+          <div id="content" part="content">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+};
+__decorate([property()], SigveloProgress.prototype, "label", void 0);
+__decorate([property({ reflect: true })], SigveloProgress.prototype, "variant", void 0);
+__decorate([property({ type: Number })], SigveloProgress.prototype, "min", void 0);
+__decorate([property({ type: Number })], SigveloProgress.prototype, "max", void 0);
+__decorate([property({ type: Number })], SigveloProgress.prototype, "value", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloProgress.prototype, "indeterminate", void 0);
+customElements.define("sigvelo-progress", SigveloProgress);
+//#endregion
+export { SigveloProgress as t };