@alleninstitute/cortex-ui 0.1.0 → 0.3.0

package/dist/collection/components/cui-progress/cui-progress.css

@@ -0,0 +1,102 @@
+/**
+ * Stencil reads the documented custom properties out of the stylesheet, not out of the
+ * component's JSDoc, so these are what reach readme.md and the generated AI docs.
+ *
+ * @prop --cui-progress-track-color: Colour of the unfilled track.
+ * @prop --cui-progress-indicator-color: Colour of the filled portion, for status bars in another intent.
+ */
+:host {
+  display: block;
+  --cui-progress-track-color: var(--cui-base-bg-level-2);
+  --cui-progress-indicator-color: var(--cui-accent-surface-primary-default);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.cui-progress {
+  font-family: var(--cui-font-family-base);
+  display: flex;
+  align-items: center;
+  gap: var(--cui-spacing-s);
+}
+.cui-progress__bar {
+  flex: 1 1 auto;
+  display: block;
+  width: 100%;
+  border: none;
+  -webkit-appearance: none;
+  appearance: none;
+  border-radius: var(--cui-border-radius-full);
+  background-color: var(--cui-progress-track-color);
+  box-shadow: inset 0 0 0 var(--cui-border-width-s) var(--cui-base-border-secondary);
+}
+.cui-progress__bar::-webkit-progress-bar {
+  border-radius: var(--cui-border-radius-full);
+  background-color: var(--cui-progress-track-color);
+  box-shadow: inset 0 0 0 var(--cui-border-width-s) var(--cui-base-border-secondary);
+}
+.cui-progress__bar::-webkit-progress-value {
+  border-radius: var(--cui-border-radius-full);
+  background-color: var(--cui-progress-indicator-color);
+  transition: width var(--cui-transition-base);
+}
+.cui-progress__bar::-moz-progress-bar {
+  border-radius: var(--cui-border-radius-full);
+  background-color: var(--cui-progress-indicator-color);
+}
+.cui-progress__bar:indeterminate {
+  background-image: linear-gradient(to right, var(--cui-progress-indicator-color), var(--cui-progress-indicator-color));
+  background-repeat: no-repeat;
+  background-size: 40% 100%;
+  animation: cui-progress-sweep 1.5s linear infinite;
+}
+.cui-progress__bar:indeterminate::-webkit-progress-bar {
+  background-image: linear-gradient(to right, var(--cui-progress-indicator-color), var(--cui-progress-indicator-color));
+  background-repeat: no-repeat;
+  background-size: 40% 100%;
+  animation: cui-progress-sweep 1.5s linear infinite;
+}
+.cui-progress__bar:indeterminate::-webkit-progress-value {
+  display: none;
+}
+.cui-progress__bar:indeterminate::-moz-progress-bar {
+  background-color: transparent;
+}
+.cui-progress__value {
+  flex: 0 0 auto;
+  color: var(--cui-base-text-secondary);
+  font-size: var(--cui-font-size-s);
+  font-weight: var(--cui-font-weight-medium);
+  font-variant-numeric: tabular-nums;
+}
+.cui-progress--small .cui-progress__bar {
+  height: var(--cui-spacing-xs);
+}
+.cui-progress--medium .cui-progress__bar {
+  height: var(--cui-spacing-s);
+}
+.cui-progress--large .cui-progress__bar {
+  height: var(--cui-spacing-m);
+}
+
+@keyframes cui-progress-sweep {
+  from {
+    background-position-x: -66.67%;
+  }
+  to {
+    background-position-x: 166.67%;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .cui-progress__bar::-webkit-progress-value {
+    transition: none;
+  }
+  .cui-progress__bar:indeterminate {
+    animation-duration: 3s;
+  }
+  .cui-progress__bar:indeterminate::-webkit-progress-bar {
+    animation-duration: 3s;
+  }
+}

package/dist/collection/components/cui-progress/cui-progress.js

@@ -0,0 +1,187 @@
+import { h } from "@stencil/core";
+/**
+ * A Progress component showing how far along a task is, as a bar with an accessible value.
+ *
+ * @example
+ * <cui-progress label="Uploading files" value="40" show-value="true"></cui-progress>
+ *
+ * @example
+ * <cui-progress label="Loading results" indeterminate="true"></cui-progress>
+ *
+ * @part base - The root element, for consumer-side style overrides.
+ * @part bar - The native progress element: the track, and the fill that grows across it.
+ * @part value - The percentage text rendered when `show-value` is set.
+ * @cssprop --cui-progress-track-color - Colour of the unfilled track.
+ * @cssprop --cui-progress-indicator-color - Colour of the filled portion, for status bars in another intent.
+ */
+export class CuiProgress {
+    constructor() {
+        /** How much of the task is done, clamped to the range `0`–`max`. */
+        this.value = 0;
+        /** The value that counts as complete. */
+        this.max = 100;
+        /**
+         * Animates continuously instead of showing a value. Use it only while the total amount
+         * of work is genuinely unknown — prefer a real `value` whenever the work reports one.
+         */
+        this.indeterminate = false;
+        /** Thickness of the bar. */
+        this.size = 'medium';
+        /** Renders the completed percentage as text beside the bar. Ignored when indeterminate. */
+        this.showValue = false;
+    }
+    /** `max` is only meaningful above zero; anything else falls back to a percentage scale. */
+    get resolvedMax() {
+        return Number.isFinite(this.max) && this.max > 0 ? this.max : 100;
+    }
+    get clampedValue() {
+        if (!Number.isFinite(this.value))
+            return 0;
+        return Math.min(Math.max(this.value, 0), this.resolvedMax);
+    }
+    get percent() {
+        return (this.clampedValue / this.resolvedMax) * 100;
+    }
+    render() {
+        const { indeterminate, showValue } = this;
+        return (h("div", { key: '546c0fb27b6e91a1d153d01ae154c272be633b14', part: "base", class: {
+                'cui-progress': true,
+                [`cui-progress--${this.size}`]: true,
+            } }, h("progress", { key: '313a769b9ea6c2059816e40c744a74749a55c07b', part: "bar", class: "cui-progress__bar", "aria-label": this.label, max: this.resolvedMax, value: indeterminate ? undefined : this.clampedValue }), showValue && !indeterminate && (h("span", { key: '1a2edab01738734b397b426d826cfa2dcd4cf89b', part: "value", class: "cui-progress__value" }, Math.round(this.percent), "%"))));
+    }
+    static get is() { return "cui-progress"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cui-progress.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cui-progress.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the bar, describing what is in progress (\"Uploading files\").\nRequired \u2014 a progress bar with no name fails the accessibility gate."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How much of the task is done, clamped to the range `0`\u2013`max`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value that counts as complete."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "100"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animates continuously instead of showing a value. Use it only while the total amount\nof work is genuinely unknown \u2014 prefer a real `value` whenever the work reports one."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indeterminate",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Thickness of the bar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            },
+            "showValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders the completed percentage as text beside the bar. Ignored when indeterminate."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-value",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/cui-tag/cui-tag.css

@@ -7,43 +7,43 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--cui-radius-sm);
+  border-radius: var(--cui-border-radius-m);
   font-weight: var(--cui-font-weight-semibold);
   white-space: nowrap;
 }
 .cui-tag--small {
-  padding: var(--cui-spacing-xxs) var(--cui-spacing-sm);
+  padding: var(--cui-spacing-xxs) var(--cui-spacing-s);
   font-size: var(--cui-font-size-xs);
 }
 .cui-tag--medium {
-  padding: var(--cui-spacing-xs) var(--cui-spacing-md);
-  font-size: var(--cui-font-size-sm);
+  padding: var(--cui-spacing-xs) var(--cui-spacing-m);
+  font-size: var(--cui-font-size-s);
 }
-.cui-tag--default {
-  background-color: var(--cui-accent-bg);
-  color: var(--cui-accent-text);
+.cui-tag--accent {
+  background-color: var(--cui-accent-surface-secondary-default);
+  color: var(--cui-accent-text-secondary-default);
 }
 .cui-tag--highlight {
-  background-color: var(--cui-highlight-bg);
-  color: var(--cui-highlight-text);
+  background-color: var(--cui-highlight-surface-secondary-default);
+  color: var(--cui-highlight-text-secondary-default);
 }
 .cui-tag--info {
-  background-color: var(--cui-info-bg);
-  color: var(--cui-info-text);
+  background-color: var(--cui-info-surface-secondary-default);
+  color: var(--cui-info-text-secondary-default);
 }
 .cui-tag--negative {
-  background-color: var(--cui-negative-bg);
-  color: var(--cui-negative-text);
+  background-color: var(--cui-negative-surface-secondary-default);
+  color: var(--cui-negative-text-secondary-default);
 }
 .cui-tag--neutral {
-  background-color: var(--cui-neutral-bg);
-  color: var(--cui-neutral-text);
+  background-color: var(--cui-neutral-surface-secondary-default);
+  color: var(--cui-neutral-text-secondary-default);
 }
 .cui-tag--positive {
-  background-color: var(--cui-positive-bg);
-  color: var(--cui-positive-text);
+  background-color: var(--cui-positive-surface-secondary-default);
+  color: var(--cui-positive-text-secondary-default);
 }
 .cui-tag--warning {
-  background-color: var(--cui-warning-bg);
-  color: var(--cui-warning-text);
+  background-color: var(--cui-warning-surface-secondary-default);
+  color: var(--cui-warning-text-secondary-default);
 }

package/dist/collection/components/cui-tag/cui-tag.js

@@ -8,11 +8,11 @@ import { h } from "@stencil/core";
 export class CuiTag {
     constructor() {
         this.label = '';
-        this.variant = 'default';
+        this.variant = 'neutral';
         this.size = 'medium';
     }
     render() {
-        return (h("span", { key: 'd2bab55fc1472bb8f004ef648103478070bb4723', class: {
+        return (h("span", { key: '35b8ea2176d1923abcda801fee775a9cd46a2fec', class: {
                 'cui-tag': true,
                 [`cui-tag--${this.variant}`]: true,
                 [`cui-tag--${this.size}`]: true,
@@ -56,8 +56,8 @@ export class CuiTag {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'highlight' | 'info' | 'negative' | 'neutral' | 'positive' | 'warning'",
-                    "resolved": "\"default\" | \"highlight\" | \"info\" | \"negative\" | \"neutral\" | \"positive\" | \"warning\"",
+                    "original": "'accent' | 'highlight' | 'info' | 'negative' | 'neutral' | 'positive' | 'warning'",
+                    "resolved": "\"accent\" | \"highlight\" | \"info\" | \"negative\" | \"neutral\" | \"positive\" | \"warning\"",
                     "references": {}
                 },
                 "required": false,
@@ -70,7 +70,7 @@ export class CuiTag {
                 "setter": false,
                 "reflect": false,
                 "attribute": "variant",
-                "defaultValue": "'default'"
+                "defaultValue": "'neutral'"
             },
             "size": {
                 "type": "string",

package/dist/components/cui-divider.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CuiDivider extends Components.CuiDivider, HTMLElement {}
+export const CuiDivider: {
+    prototype: CuiDivider;
+    new (): CuiDivider;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/cui-divider.js

@@ -0,0 +1 @@
+import{t as i,p as r,H as d,h as e}from"./index.js";const a=r(class extends d{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.orientation="horizontal",this.spacing="medium",this.variant="base",this.importance="primary"}render(){return e("hr",{key:"d33f3260a5f708f379428a7d338e6329248f23ff",part:"base",class:{"cui-divider":!0,["cui-divider--"+this.orientation]:!0,["cui-divider--"+this.variant]:!0,["cui-divider--"+this.importance]:!0},"aria-orientation":"vertical"===this.orientation?"vertical":void 0})}static get style(){return":host{display:block;--cui-divider-gap:var(--cui-spacing-m);margin-block:var(--cui-divider-gap)}:host([hidden]){display:none}:host([spacing=none]){--cui-divider-gap:0}:host([spacing=small]){--cui-divider-gap:var(--cui-spacing-s)}:host([spacing=large]){--cui-divider-gap:var(--cui-spacing-l)}:host([orientation=vertical]){display:inline-flex;align-self:stretch;min-height:var(--cui-spacing-l);margin-block:0;margin-inline:var(--cui-divider-gap)}.cui-divider{box-sizing:border-box;margin:0;border:none}.cui-divider--horizontal{width:100%;height:var(--cui-border-width-s)}.cui-divider--vertical{width:var(--cui-border-width-s);height:auto;align-self:stretch}.cui-divider--base{background-color:var(--cui-base-divider-primary)}.cui-divider--base.cui-divider--secondary{background-color:var(--cui-base-divider-secondary)}.cui-divider--accent{background-color:var(--cui-accent-divider-primary-default)}.cui-divider--accent.cui-divider--secondary{background-color:var(--cui-accent-divider-secondary-default)}.cui-divider--highlight{background-color:var(--cui-highlight-divider-primary-default)}.cui-divider--highlight.cui-divider--secondary{background-color:var(--cui-highlight-divider-secondary-default)}.cui-divider--info{background-color:var(--cui-info-divider-primary-default)}.cui-divider--info.cui-divider--secondary{background-color:var(--cui-info-divider-secondary-default)}.cui-divider--negative{background-color:var(--cui-negative-divider-primary-default)}.cui-divider--negative.cui-divider--secondary{background-color:var(--cui-negative-divider-secondary-default)}.cui-divider--neutral{background-color:var(--cui-neutral-divider-primary-default)}.cui-divider--neutral.cui-divider--secondary{background-color:var(--cui-neutral-divider-secondary-default)}.cui-divider--positive{background-color:var(--cui-positive-divider-primary-default)}.cui-divider--positive.cui-divider--secondary{background-color:var(--cui-positive-divider-secondary-default)}.cui-divider--warning{background-color:var(--cui-warning-divider-primary-default)}.cui-divider--warning.cui-divider--secondary{background-color:var(--cui-warning-divider-secondary-default)}"}},[1,"cui-divider",{orientation:[513],spacing:[513],variant:[1],importance:[1]}]);function c(){"undefined"!=typeof customElements&&["cui-divider"].forEach((r=>{"cui-divider"===r&&(customElements.get(i(r))||customElements.define(i(r),a))}))}c();const o=a,n=c;export{o as CuiDivider,n as defineCustomElement}

package/dist/components/cui-icon.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CuiIcon extends Components.CuiIcon, HTMLElement {}
+export const CuiIcon: {
+    prototype: CuiIcon;
+    new (): CuiIcon;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/cui-icon.js

@@ -0,0 +1 @@
+import{t as i,p as c,H as o,h as n}from"./index.js";const a=c(class extends o{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.variant="base",this.importance="secondary",this.size="m"}connectedCallback(){this.syncGlyph(),this.syncAria()}onIconChange(){this.syncGlyph()}onLabelChange(){this.syncAria()}syncGlyph(){var i;const c=this.el.querySelector(":scope > [data-cui-icon-glyph]");c&&"I"!==c.tagName&&c.remove();let o=this.el.querySelector(":scope > i[data-cui-icon-glyph]");o||(o=document.createElement("i"),o.setAttribute("data-cui-icon-glyph",""),o.setAttribute("aria-hidden","true"),this.el.appendChild(o)),o.className=null!==(i=this.icon)&&void 0!==i?i:""}syncAria(){var i;const c=null===(i=this.label)||void 0===i?void 0:i.trim();if(c)return this.el.setAttribute("role","img"),this.el.setAttribute("aria-label",c),void this.el.removeAttribute("aria-hidden");this.el.setAttribute("aria-hidden","true"),this.el.removeAttribute("role"),this.el.removeAttribute("aria-label")}render(){return n("span",{key:"76b54ef28027419bfbb5500c5cf4a88a7d01131e",part:"base",class:{"cui-icon":!0,["cui-icon--"+this.variant]:!0,["cui-icon--"+this.importance]:!0,["cui-icon--"+this.size]:!0}},n("slot",{key:"8c4d13ffa3b1cfe3e4d7d47c29127784d62381ff"}))}get el(){return this}static get watchers(){return{icon:[{onIconChange:0}],label:[{onLabelChange:0}]}}static get style(){return'@charset "UTF-8";:host{display:inline-flex}:host([hidden]){display:none}.cui-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1}::slotted(:not([data-cui-icon-glyph])){display:none}.cui-icon--xxs{font-size:var(--cui-icon-size, var(--cui-font-size-xxs))}.cui-icon--xs{font-size:var(--cui-icon-size, var(--cui-font-size-xs))}.cui-icon--s{font-size:var(--cui-icon-size, var(--cui-font-size-s))}.cui-icon--m{font-size:var(--cui-icon-size, var(--cui-font-size-m))}.cui-icon--l{font-size:var(--cui-icon-size, var(--cui-font-size-l))}.cui-icon--xl{font-size:var(--cui-icon-size, var(--cui-font-size-xl))}.cui-icon--xxl{font-size:var(--cui-icon-size, var(--cui-font-size-xxl))}.cui-icon--display-s{font-size:var(--cui-icon-size, var(--cui-font-size-display-s))}.cui-icon--display-m{font-size:var(--cui-icon-size, var(--cui-font-size-display-m))}.cui-icon--display-l{font-size:var(--cui-icon-size, var(--cui-font-size-display-l))}.cui-icon--base.cui-icon--primary{color:var(--cui-icon-color, var(--cui-base-text-primary))}.cui-icon--base.cui-icon--secondary{color:var(--cui-icon-color, var(--cui-base-text-secondary))}.cui-icon--accent.cui-icon--primary{color:var(--cui-icon-color, var(--cui-accent-text-primary-default))}.cui-icon--accent.cui-icon--secondary{color:var(--cui-icon-color, var(--cui-accent-text-secondary-default))}.cui-icon--highlight.cui-icon--primary{color:var(--cui-icon-color, var(--cui-highlight-text-primary-default))}.cui-icon--highlight.cui-icon--secondary{color:var(--cui-icon-color, var(--cui-highlight-text-secondary-default))}.cui-icon--info.cui-icon--primary{color:var(--cui-icon-color, var(--cui-info-text-primary-default))}.cui-icon--info.cui-icon--secondary{color:var(--cui-icon-color, var(--cui-info-text-secondary-default))}.cui-icon--negative.cui-icon--primary{color:var(--cui-icon-color, var(--cui-negative-text-primary-default))}.cui-icon--negative.cui-icon--secondary{color:var(--cui-icon-color, var(--cui-negative-text-secondary-default))}.cui-icon--neutral.cui-icon--primary{color:var(--cui-icon-color, var(--cui-neutral-text-primary-default))}.cui-icon--neutral.cui-icon--secondary{color:var(--cui-icon-color, var(--cui-neutral-text-secondary-default))}.cui-icon--positive.cui-icon--primary{color:var(--cui-icon-color, var(--cui-positive-text-primary-default))}.cui-icon--positive.cui-icon--secondary{color:var(--cui-icon-color, var(--cui-positive-text-secondary-default))}.cui-icon--warning.cui-icon--primary{color:var(--cui-icon-color, var(--cui-warning-text-primary-default))}.cui-icon--warning.cui-icon--secondary{color:var(--cui-icon-color, var(--cui-warning-text-secondary-default))}'}},[257,"cui-icon",{icon:[1],variant:[1],importance:[1],size:[1],label:[1]},void 0,{icon:[{onIconChange:0}],label:[{onLabelChange:0}]}]);function e(){"undefined"!=typeof customElements&&["cui-icon"].forEach((c=>{"cui-icon"===c&&(customElements.get(i(c))||customElements.define(i(c),a))}))}e();const r=a,t=e;export{r as CuiIcon,t as defineCustomElement}

package/dist/components/cui-progress.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CuiProgress extends Components.CuiProgress, HTMLElement {}
+export const CuiProgress: {
+    prototype: CuiProgress;
+    new (): CuiProgress;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/cui-progress.js

@@ -0,0 +1 @@
+import{t as r,p as e,H as s,h as i}from"./index.js";const a=e(class extends s{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.value=0,this.max=100,this.indeterminate=!1,this.size="medium",this.showValue=!1}get resolvedMax(){return Number.isFinite(this.max)&&this.max>0?this.max:100}get clampedValue(){return Number.isFinite(this.value)?Math.min(Math.max(this.value,0),this.resolvedMax):0}get percent(){return this.clampedValue/this.resolvedMax*100}render(){const{indeterminate:r,showValue:e}=this;return i("div",{key:"546c0fb27b6e91a1d153d01ae154c272be633b14",part:"base",class:{"cui-progress":!0,["cui-progress--"+this.size]:!0}},i("progress",{key:"313a769b9ea6c2059816e40c744a74749a55c07b",part:"bar",class:"cui-progress__bar","aria-label":this.label,max:this.resolvedMax,value:r?void 0:this.clampedValue}),e&&!r&&i("span",{key:"1a2edab01738734b397b426d826cfa2dcd4cf89b",part:"value",class:"cui-progress__value"},Math.round(this.percent),"%"))}static get style(){return":host{display:block;--cui-progress-track-color:var(--cui-base-bg-level-2);--cui-progress-indicator-color:var(--cui-accent-surface-primary-default)}:host([hidden]){display:none}.cui-progress{font-family:var(--cui-font-family-base);display:flex;align-items:center;gap:var(--cui-spacing-s)}.cui-progress__bar{flex:1 1 auto;display:block;width:100%;border:none;-webkit-appearance:none;appearance:none;border-radius:var(--cui-border-radius-full);background-color:var(--cui-progress-track-color);box-shadow:inset 0 0 0 var(--cui-border-width-s) var(--cui-base-border-secondary)}.cui-progress__bar::-webkit-progress-bar{border-radius:var(--cui-border-radius-full);background-color:var(--cui-progress-track-color);box-shadow:inset 0 0 0 var(--cui-border-width-s) var(--cui-base-border-secondary)}.cui-progress__bar::-webkit-progress-value{border-radius:var(--cui-border-radius-full);background-color:var(--cui-progress-indicator-color);transition:width var(--cui-transition-base)}.cui-progress__bar::-moz-progress-bar{border-radius:var(--cui-border-radius-full);background-color:var(--cui-progress-indicator-color)}.cui-progress__bar:indeterminate{background-image:linear-gradient(to right, var(--cui-progress-indicator-color), var(--cui-progress-indicator-color));background-repeat:no-repeat;background-size:40% 100%;animation:cui-progress-sweep 1.5s linear infinite}.cui-progress__bar:indeterminate::-webkit-progress-bar{background-image:linear-gradient(to right, var(--cui-progress-indicator-color), var(--cui-progress-indicator-color));background-repeat:no-repeat;background-size:40% 100%;animation:cui-progress-sweep 1.5s linear infinite}.cui-progress__bar:indeterminate::-webkit-progress-value{display:none}.cui-progress__bar:indeterminate::-moz-progress-bar{background-color:transparent}.cui-progress__value{flex:0 0 auto;color:var(--cui-base-text-secondary);font-size:var(--cui-font-size-s);font-weight:var(--cui-font-weight-medium);font-variant-numeric:tabular-nums}.cui-progress--small .cui-progress__bar{height:var(--cui-spacing-xs)}.cui-progress--medium .cui-progress__bar{height:var(--cui-spacing-s)}.cui-progress--large .cui-progress__bar{height:var(--cui-spacing-m)}@keyframes cui-progress-sweep{from{background-position-x:-66.67%}to{background-position-x:166.67%}}@media (prefers-reduced-motion: reduce){.cui-progress__bar::-webkit-progress-value{transition:none}.cui-progress__bar:indeterminate{animation-duration:3s}.cui-progress__bar:indeterminate::-webkit-progress-bar{animation-duration:3s}}"}},[1,"cui-progress",{label:[1],value:[2],max:[2],indeterminate:[4],size:[1],showValue:[4,"show-value"]}]);function o(){"undefined"!=typeof customElements&&["cui-progress"].forEach((e=>{"cui-progress"===e&&(customElements.get(r(e))||customElements.define(r(e),a))}))}o();const t=a,c=o;export{t as CuiProgress,c as defineCustomElement}

package/dist/components/cui-tag.js

@@ -1 +1 @@
-import{t as i,p as t,H as a,h as c}from"./index.js";const r=t(class extends a{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.label="",this.variant="default",this.size="medium"}render(){return c("span",{key:"d2bab55fc1472bb8f004ef648103478070bb4723",class:{"cui-tag":!0,["cui-tag--"+this.variant]:!0,["cui-tag--"+this.size]:!0}},this.label)}static get style(){return":host{display:inline-block}.cui-tag{font-family:var(--cui-font-family-base);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--cui-radius-sm);font-weight:var(--cui-font-weight-semibold);white-space:nowrap}.cui-tag--small{padding:var(--cui-spacing-xxs) var(--cui-spacing-sm);font-size:var(--cui-font-size-xs)}.cui-tag--medium{padding:var(--cui-spacing-xs) var(--cui-spacing-md);font-size:var(--cui-font-size-sm)}.cui-tag--default{background-color:var(--cui-accent-bg);color:var(--cui-accent-text)}.cui-tag--highlight{background-color:var(--cui-highlight-bg);color:var(--cui-highlight-text)}.cui-tag--info{background-color:var(--cui-info-bg);color:var(--cui-info-text)}.cui-tag--negative{background-color:var(--cui-negative-bg);color:var(--cui-negative-text)}.cui-tag--neutral{background-color:var(--cui-neutral-bg);color:var(--cui-neutral-text)}.cui-tag--positive{background-color:var(--cui-positive-bg);color:var(--cui-positive-text)}.cui-tag--warning{background-color:var(--cui-warning-bg);color:var(--cui-warning-text)}"}},[1,"cui-tag",{label:[1],variant:[1],size:[1]}]);function e(){"undefined"!=typeof customElements&&["cui-tag"].forEach((t=>{"cui-tag"===t&&(customElements.get(i(t))||customElements.define(i(t),r))}))}e();const o=r,n=e;export{o as CuiTag,n as defineCustomElement}
+import{t as a,p as c,H as t,h as e}from"./index.js";const i=c(class extends t{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.label="",this.variant="neutral",this.size="medium"}render(){return e("span",{key:"35b8ea2176d1923abcda801fee775a9cd46a2fec",class:{"cui-tag":!0,["cui-tag--"+this.variant]:!0,["cui-tag--"+this.size]:!0}},this.label)}static get style(){return":host{display:inline-block}.cui-tag{font-family:var(--cui-font-family-base);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--cui-border-radius-m);font-weight:var(--cui-font-weight-semibold);white-space:nowrap}.cui-tag--small{padding:var(--cui-spacing-xxs) var(--cui-spacing-s);font-size:var(--cui-font-size-xs)}.cui-tag--medium{padding:var(--cui-spacing-xs) var(--cui-spacing-m);font-size:var(--cui-font-size-s)}.cui-tag--accent{background-color:var(--cui-accent-surface-secondary-default);color:var(--cui-accent-text-secondary-default)}.cui-tag--highlight{background-color:var(--cui-highlight-surface-secondary-default);color:var(--cui-highlight-text-secondary-default)}.cui-tag--info{background-color:var(--cui-info-surface-secondary-default);color:var(--cui-info-text-secondary-default)}.cui-tag--negative{background-color:var(--cui-negative-surface-secondary-default);color:var(--cui-negative-text-secondary-default)}.cui-tag--neutral{background-color:var(--cui-neutral-surface-secondary-default);color:var(--cui-neutral-text-secondary-default)}.cui-tag--positive{background-color:var(--cui-positive-surface-secondary-default);color:var(--cui-positive-text-secondary-default)}.cui-tag--warning{background-color:var(--cui-warning-surface-secondary-default);color:var(--cui-warning-text-secondary-default)}"}},[1,"cui-tag",{label:[1],variant:[1],size:[1]}]);function r(){"undefined"!=typeof customElements&&["cui-tag"].forEach((c=>{"cui-tag"===c&&(customElements.get(a(c))||customElements.define(a(c),i))}))}r();const u=i,o=r;export{u as CuiTag,o as defineCustomElement}