@alleninstitute/cortex-ui 0.1.0 → 0.3.0

package/dist/esm/cortex-ui.js

@@ -1,8 +1,8 @@
-import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-C70YK15K.js';
-export { s as setNonce } from './index-C70YK15K.js';
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-BZmInLSX.js';
+export { s as setNonce } from './index-BZmInLSX.js';
 
 /*
- Stencil Client Patch Browser v4.43.5 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.44.0 | MIT Licensed | https://stenciljs.com
  */
 
 var patchBrowser = () => {
@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["cui-tag",[[1,"cui-tag",{"label":[1],"variant":[1],"size":[1]}]]]], options);
+  return bootstrapLazy([["cui-divider",[[1,"cui-divider",{"orientation":[513],"spacing":[513],"variant":[1],"importance":[1]}]]],["cui-icon",[[257,"cui-icon",{"icon":[1],"variant":[1],"importance":[1],"size":[1],"label":[1]},null,{"icon":[{"onIconChange":0}],"label":[{"onLabelChange":0}]}]]],["cui-progress",[[1,"cui-progress",{"label":[1],"value":[2],"max":[2],"indeterminate":[4],"size":[1],"showValue":[4,"show-value"]}]]],["cui-tag",[[1,"cui-tag",{"label":[1],"variant":[1],"size":[1]}]]]], options);
 });

package/dist/esm/cui-divider.entry.js

@@ -0,0 +1,47 @@
+import { r as registerInstance, h } from './index-BZmInLSX.js';
+
+const cuiDividerCss = () => `: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)}`;
+
+const CuiDivider = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        // `orientation` and `spacing` are reflected because they size and space the host's own
+        // box, and only an attribute can reach `:host()` from the stylesheet. `variant` and
+        // `importance` are not: they only colour the rule, which the modifier classes handle.
+        /**
+         * Which way the rule runs. A vertical divider stretches to the height of the flex row
+         * it sits in.
+         */
+        this.orientation = 'horizontal';
+        /** Space reserved on either side of the rule, along the axis it separates. */
+        this.spacing = 'medium';
+        /**
+         * Which intent's `divider` colour the rule is drawn in. `base` is the intent-free rule for
+         * ordinary page chrome; the seven intents tint a divider that sits inside a component
+         * already carrying that intent, such as a rule between rows of a negative-intent alert.
+         */
+        this.variant = 'base';
+        /**
+         * Which of the two `divider` importances the rule is drawn from. Match it to the importance of
+         * the surface the divider sits on — `secondary` on a quiet tint, `primary` on a saturated fill —
+         * rather than treating it as a loudness control: on a secondary surface the primary rule is the
+         * *less* perceivable of the two. For `base`, whose surface is the page itself, `primary` is
+         * simply the stronger of the two rules.
+         */
+        this.importance = 'primary';
+    }
+    render() {
+        return (
+        // A native <hr> carries the separator role to assistive technology for free, and
+        // is the one element that means "boundary" rather than "a box that looks like one".
+        h("hr", { key: 'd33f3260a5f708f379428a7d338e6329248f23ff', part: "base", class: {
+                'cui-divider': true,
+                [`cui-divider--${this.orientation}`]: true,
+                [`cui-divider--${this.variant}`]: true,
+                [`cui-divider--${this.importance}`]: true,
+            }, "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }));
+    }
+};
+CuiDivider.style = cuiDividerCss();
+
+export { CuiDivider as cui_divider };

package/dist/esm/cui-icon.entry.js

@@ -0,0 +1,98 @@
+import { r as registerInstance, h, a as getElement } from './index-BZmInLSX.js';
+
+const cuiIconCss = () => `@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))}`;
+
+const CuiIcon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Semantic colour set. `base` is the intent-free choice for ordinary content and is correct on
+         * a plain page background; the intents are for an icon that sits on that intent's surface.
+         * This is styling, not semantics — never let colour be the only thing conveying meaning.
+         */
+        this.variant = 'base';
+        /**
+         * Which rung of the `text` token family to use. It tracks the surface the icon sits on:
+         * `primary` belongs on that variant's primary surface, `secondary` on its secondary surface or
+         * on a plain background. Pairing an intent's `primary` text with a plain page background is
+         * outside the token system's design and will not be legible.
+         */
+        this.importance = 'secondary';
+        /** Size of the glyph, from the font-size token scale. */
+        this.size = 'm';
+    }
+    connectedCallback() {
+        // Both the glyph and the host's ARIA are applied here rather than from render(): the
+        // glyph has to live in the light DOM for the consumer's document-level Font Awesome CSS
+        // to match it (selectors do not cross a shadow boundary, though @font-face and custom
+        // properties do), and setting the host's ARIA imperatively keeps it out of reach of the
+        // vdom, which on first render would otherwise overwrite a <Host> attribute with the
+        // same-named host *property* whenever a consumer also wrote that attribute in markup.
+        this.syncGlyph();
+        this.syncAria();
+    }
+    onIconChange() {
+        this.syncGlyph();
+    }
+    onLabelChange() {
+        this.syncAria();
+    }
+    /**
+     * Creates or updates the light-DOM glyph. Queries rather than caching a node reference, so it
+     * is idempotent: connectedCallback fires again every time the host is moved in the DOM, and a
+     * cached reference can also go stale (see below).
+     */
+    syncGlyph() {
+        var _a;
+        const existing = this.el.querySelector(':scope > [data-cui-icon-glyph]');
+        // Font Awesome's SVG-and-JS build rewrites our <i> into an <svg> that it owns, and
+        // rebuilds the class list while doing so. Rewriting that node's classes would do nothing,
+        // so drop it and let Font Awesome convert a fresh <i> instead.
+        if (existing && existing.tagName !== 'I') {
+            existing.remove();
+        }
+        let glyph = this.el.querySelector(':scope > i[data-cui-icon-glyph]');
+        if (!glyph) {
+            glyph = document.createElement('i');
+            glyph.setAttribute('data-cui-icon-glyph', '');
+            // The glyph is always hidden in its own right; the host carries the accessible name.
+            glyph.setAttribute('aria-hidden', 'true');
+            this.el.appendChild(glyph);
+        }
+        glyph.className = (_a = this.icon) !== null && _a !== void 0 ? _a : '';
+    }
+    /** An icon is either named or hidden — never both, and never named with an empty string. */
+    syncAria() {
+        var _a;
+        const name = (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim();
+        if (name) {
+            this.el.setAttribute('role', 'img');
+            this.el.setAttribute('aria-label', name);
+            this.el.removeAttribute('aria-hidden');
+            return;
+        }
+        this.el.setAttribute('aria-hidden', 'true');
+        this.el.removeAttribute('role');
+        this.el.removeAttribute('aria-label');
+    }
+    render() {
+        return (h("span", { key: '76b54ef28027419bfbb5500c5cf4a88a7d01131e', part: "base", class: {
+                'cui-icon': true,
+                [`cui-icon--${this.variant}`]: true,
+                [`cui-icon--${this.importance}`]: true,
+                [`cui-icon--${this.size}`]: true,
+            } }, h("slot", { key: '8c4d13ffa3b1cfe3e4d7d47c29127784d62381ff' })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "icon": [{
+                "onIconChange": 0
+            }],
+        "label": [{
+                "onLabelChange": 0
+            }]
+    }; }
+};
+CuiIcon.style = cuiIconCss();
+
+export { CuiIcon as cui_icon };

package/dist/esm/cui-progress.entry.js

@@ -0,0 +1,44 @@
+import { r as registerInstance, h } from './index-BZmInLSX.js';
+
+const cuiProgressCss = () => `: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}}`;
+
+const CuiProgress = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** 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), "%"))));
+    }
+};
+CuiProgress.style = cuiProgressCss();
+
+export { CuiProgress as cui_progress };

package/dist/esm/cui-tag.entry.js

@@ -1,16 +1,16 @@
-import { r as registerInstance, h } from './index-C70YK15K.js';
+import { r as registerInstance, h } from './index-BZmInLSX.js';
 
-const cuiTagCss = () => `: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)}`;
+const cuiTagCss = () => `: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)}`;
 
 const CuiTag = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         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,