@c2n/progress 0.0.7

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @c2n/progress
+
+Progress built with Lit: a linear bar, indeterminate by default or filling to a value, with an optional label and count.
+
+```bash
+npm install @c2n/progress
+```
+
+```html
+<script type="module">
+  import '@c2n/progress'
+</script>
+
+<c2-progress></c2-progress>
+<c2-progress>Uploading files</c2-progress>
+<c2-progress value="65" show-value>Uploading files</c2-progress>
+<c2-progress value="3" max="5">Onboarding<span slot="value">Step 3 of 5</span></c2-progress>
+```
+
+- **Indeterminate**: a short indicator sweeps the track; `--c2-progress--animation-duration` sets one cycle.
+- **Determinate**: `value` (out of `max`, default 100) fills the track from the start edge and animates between values; clear it to sweep again.
+- **Label and count**: slotted text sits above the track and is the accessible name; without it, `label` (default "Loading") names the bar. `show-value` prints the percentage on the opposite side, and the `value` slot replaces that text for counts such as "3 of 5" or "1.2 / 4 MB". The label row is absent entirely when there is neither, so a bare bar is exactly `--c2-progress--height` tall.
+- **Accessibility**: the track is `role="progressbar"` with `aria-valuenow` when determinate. The printed count is presentational, so it is free to differ from the announced number.
+- **Reduced motion**: the sweep slows and drops its easing, and the determinate fill jumps instead of transitioning.
+
+Theme it with `--c2-progress--height`, `--c2-progress--width`, `--c2-progress--border-radius`, `--c2-progress__track--background-color`, `--c2-progress__indicator--background-color`, `--c2-progress--gap` and the `--c2-progress__label--*` / `--c2-progress__value--*` text variables. The full list is in `custom-elements.json` and on the docs site.
+
+Reach for [`@c2n/spinner`](../spinner) when the wait has no natural width to fill.

package/dist/progress.js

@@ -0,0 +1,99 @@
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { property, state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
+//#region src/progress.scss?inline
+var progress_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: block;\n  width: var(--c2-progress--width,100%);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.c2-progress {\n  display: flex;\n  flex-direction: column;\n  gap: var(--c2-progress--gap,8px);\n}\n\n.c2-progress-header {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 12px;\n  line-height: 1.4;\n}\n.c2-progress-header[hidden] {\n  display: none;\n}\n\n.c2-progress-label {\n  color: var(--c2-progress__label--color,#71717a);\n  font-size: var(--c2-progress__label--font-size,14px);\n  font-weight: var(--c2-progress__label--font-weight);\n  min-width: 0;\n}\n.c2-progress-label[hidden] {\n  display: none;\n}\n\n.c2-progress-value {\n  flex: none;\n  color: var(--c2-progress__value--color,#18181b);\n  font-size: var(--c2-progress__value--font-size,14px);\n  font-weight: var(--c2-progress__value--font-weight,500);\n  font-variant-numeric: tabular-nums;\n}\n.c2-progress-value[hidden] {\n  display: none;\n}\n\n.c2-progress-track {\n  position: relative;\n  overflow: hidden;\n  height: var(--c2-progress--height,8px);\n  border-radius: var(--c2-progress--border-radius,999px);\n  background-color: var(--c2-progress__track--background-color,#e4e4e7);\n}\n\n.c2-progress-indicator {\n  height: 100%;\n  border-radius: inherit;\n  background-color: var(--c2-progress__indicator--background-color,#0265dc);\n  width: 40%;\n  animation: c2-progress-slide var(--c2-progress--animation-duration,1.4s) cubic-bezier(0.4, 0, 0.2, 1) infinite;\n}\n\n.is-determinate .c2-progress-indicator {\n  animation: none;\n  transition: width calc(var(--c2-progress--animation-duration,1.4s) / 2) cubic-bezier(0.2, 0, 0, 1);\n}\n\n@keyframes c2-progress-slide {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(250%);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .c2-progress-indicator {\n    animation-duration: 3s;\n    animation-timing-function: linear;\n  }\n  .is-determinate .c2-progress-indicator {\n    transition: none;\n  }\n}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/progress.ts
+var Progress = class Progress extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = void 0;
+		this.max = 100;
+		this.label = "";
+		this.showValue = false;
+		this.hasLabel = false;
+		this.hasValueText = false;
+	}
+	static {
+		this.styles = unsafeCSS(progress_default);
+	}
+	/** Value that fills the track, guarding against a `max` of `0` or less. */
+	get effectiveMax() {
+		return this.max > 0 ? this.max : 100;
+	}
+	/** `value` clamped to `0`–`max`; `undefined` while indeterminate. Announced as-is, so it keeps the author's precision. */
+	get clampedValue() {
+		if (this.value === void 0 || Number.isNaN(this.value)) return void 0;
+		return Math.min(this.effectiveMax, Math.max(0, this.value));
+	}
+	/** Completed fraction, `0` to `1`; `undefined` while indeterminate. */
+	get fraction() {
+		const value = this.clampedValue;
+		return value === void 0 ? void 0 : value / this.effectiveMax;
+	}
+	handleSlotChange(event) {
+		const slot = event.target;
+		const filled = slot.assignedNodes({ flatten: true }).some((node) => node.nodeType === Node.ELEMENT_NODE || (node.textContent ?? "").trim() !== "");
+		if (slot.name === "value") this.hasValueText = filled;
+		else this.hasLabel = filled;
+	}
+	render() {
+		const value = this.clampedValue;
+		const fraction = this.fraction;
+		const determinate = fraction !== void 0;
+		const percent = determinate ? Math.round(fraction * 100) : 0;
+		const showValue = this.showValue || this.hasValueText;
+		return html`
+      <div class=${classMap({
+			"c2-progress": true,
+			"is-determinate": determinate
+		})}>
+        <div class="c2-progress-header" part="header" ?hidden=${!this.hasLabel && !showValue}>
+          <span id="label" class="c2-progress-label" part="label" ?hidden=${!this.hasLabel}>
+            <slot @slotchange=${this.handleSlotChange}></slot>
+          </span>
+          <span class="c2-progress-value" part="value" ?hidden=${!showValue}>
+            <slot name="value" @slotchange=${this.handleSlotChange}>${determinate ? `${percent}%` : nothing}</slot>
+          </span>
+        </div>
+        <div
+          class="c2-progress-track"
+          part="track"
+          role="progressbar"
+          aria-label=${this.hasLabel ? nothing : ifDefined(this.label || "Loading")}
+          aria-labelledby=${this.hasLabel ? "label" : nothing}
+          aria-valuemin=${determinate ? "0" : nothing}
+          aria-valuemax=${determinate ? String(this.effectiveMax) : nothing}
+          aria-valuenow=${value !== void 0 ? String(value) : nothing}
+        >
+          <div class="c2-progress-indicator" part="indicator" style=${determinate ? styleMap({ width: `${fraction * 100}%` }) : nothing}></div>
+        </div>
+      </div>
+    `;
+	}
+};
+__decorate([property({ type: Number })], Progress.prototype, "value", void 0);
+__decorate([property({ type: Number })], Progress.prototype, "max", void 0);
+__decorate([property()], Progress.prototype, "label", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "show-value",
+	reflect: true
+})], Progress.prototype, "showValue", void 0);
+__decorate([state()], Progress.prototype, "hasLabel", void 0);
+__decorate([state()], Progress.prototype, "hasValueText", void 0);
+Progress = __decorate([customElement("c2-progress")], Progress);
+//#endregion
+export { Progress };

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@c2n/progress",
+  "version": "0.0.7",
+  "type": "module",
+  "main": "dist/progress.js",
+  "exports": {
+    ".": {
+      "types": "./types/src/progress.d.ts",
+      "default": "./dist/progress.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
+  ],
+  "keywords": [
+    "progress",
+    "web component",
+    "lit"
+  ],
+  "license": "MIT",
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "build:only": "vite build",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.7",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "c8db398a27f7cd417d665fdf5da455fee2d4e910"
+}

package/react.d.ts

@@ -0,0 +1,24 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/progress. Import once, anywhere in the program:
+//
+//     import '@c2n/progress/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { Progress } from '@c2n/progress'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-progress': C2Props<Progress>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/progress.d.ts

@@ -0,0 +1,54 @@
+import { LitElement } from 'lit';
+/**
+ * Linear progress bar. Without a `value` the indicator slides across the track indefinitely; with one it fills the
+ * track from the start edge and animates between values. Text in the default slot labels the bar and doubles as its
+ * accessible name, and `show-value` adds the percentage on the opposite side — override that text with the `value`
+ * slot to count something other than percent. Track and indicator are two plain boxes, so height, radius, colours
+ * and speed are all variables. Use `c2-spinner` when the wait has no natural width to fill.
+ *
+ * @tag c2-progress
+ *
+ * @slot - Label shown above the track (e.g. "Uploading files"). Also used as the accessible name.
+ * @slot value - Replaces the percentage shown next to the label, for counts such as "3 of 5" or "1.2 of 4 MB".
+ *
+ * @cssproperty {pixel} [--c2-progress--height=8px] - Thickness of the track and the indicator.
+ * @cssproperty {pixel} [--c2-progress--width=100%] - Width of the bar; the host is a block by default.
+ * @cssproperty {border-radius} [--c2-progress--border-radius=999px] - Rounding of both the track and the indicator.
+ * @cssproperty {color} [--c2-progress__track--background-color=#e4e4e7] - Colour of the unfilled track.
+ * @cssproperty {color} [--c2-progress__indicator--background-color=#0265dc] - Colour of the filled part.
+ * @cssproperty {time} [--c2-progress--animation-duration=1.4s] - One indeterminate cycle; the determinate fill takes half of it.
+ * @cssproperty {pixel} [--c2-progress--gap=8px] - Space between the label row and the track.
+ * @cssproperty {color} [--c2-progress__label--color=#71717a]
+ * @cssproperty {font-size} [--c2-progress__label--font-size=14px]
+ * @cssproperty {font-weight} --c2-progress__label--font-weight
+ * @cssproperty {color} [--c2-progress__value--color=#18181b]
+ * @cssproperty {font-size} [--c2-progress__value--font-size=14px]
+ * @cssproperty {font-weight} [--c2-progress__value--font-weight=500]
+ */
+export declare class Progress extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Progress between `0` and `max`. Leave unset for an indeterminate bar. */
+    value: number | undefined;
+    /** Value that fills the whole track. */
+    max: number;
+    /** Accessible name when nothing is slotted. Defaults to "Loading". */
+    label: string;
+    /** Show the completed percentage beside the label. Always on when the `value` slot has content. */
+    showValue: boolean;
+    private hasLabel;
+    private hasValueText;
+    /** Value that fills the track, guarding against a `max` of `0` or less. */
+    private get effectiveMax();
+    /** `value` clamped to `0`–`max`; `undefined` while indeterminate. Announced as-is, so it keeps the author's precision. */
+    private get clampedValue();
+    /** Completed fraction, `0` to `1`; `undefined` while indeterminate. */
+    get fraction(): number | undefined;
+    private handleSlotChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-progress': Progress;
+    }
+}
+//# sourceMappingURL=progress.d.ts.map

package/types/src/progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAA;AAQ1D;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BAAoB;IAE1C,4EAA4E;IAChD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAY;IAEjE,wCAAwC;IACZ,GAAG,SAAM;IAErC,sEAAsE;IAC1D,KAAK,SAAK;IAEtB,mGAAmG;IAC9B,SAAS,UAAQ;IAE7E,OAAO,CAAC,QAAQ,CAAQ;IAExB,OAAO,CAAC,YAAY,CAAQ;IAErC,2EAA2E;IAC3E,OAAO,KAAK,YAAY,GAEvB;IAED,0HAA0H;IAC1H,OAAO,KAAK,YAAY,GAGvB;IAED,uEAAuE;IACvE,IAAI,QAAQ,IAAI,MAAM,GAAG,SAAS,CAGjC;IAGD,OAAO,CAAC,gBAAgB;IAOf,MAAM;CA+BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,QAAQ,CAAA;KACxB;CACF"}

package/vue.d.ts

@@ -0,0 +1,33 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/progress. Import once, anywhere in the program:
+//
+//     import '@c2n/progress/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { Progress } from '@c2n/progress'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-progress': DefineComponent<
+      C2Props<Progress> & {
+        'show-value'?: unknown
+      }
+    >
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}