@alleninstitute/cortex-ui 0.2.0 → 0.3.0

package/README.md

@@ -2,7 +2,16 @@
 
 A reusable web components library built with [Stencil.js](https://stenciljs.com/), documented with [Storybook](https://storybook.js.org/).
 
-## Getting Started
+- **Using the library in your app?** Start with
+  [Getting Started](https://alleninstitute.github.io/cortex-ui/?path=/docs/getting-started--docs) in the deployed
+  Storybook — React, HTML/other frameworks, CDN, and AI-agent setup.
+- **Contributing a component or a fix?** See [CONTRIBUTING.md](CONTRIBUTING.md). AI agents working in this repo should
+  read [AGENTS.md](AGENTS.md).
+
+## Development Setup
+
+Working on the library itself starts here; [CONTRIBUTING.md](CONTRIBUTING.md) covers the rest of the flow — adding a
+component, the Definition of Done, commit conventions, and opening a PR.
 
 ### Prerequisites
 
@@ -100,11 +109,26 @@ component's maturity is also included in the machine-readable docs below so agen
 
 ## Using the Library
 
-### Script tag
+### Script tag (CDN, no build step)
 
-Add the following to your HTML:
+The package is on the public npm registry, so unpkg and jsDelivr already mirror it. One module script registers every
+component:
 
-TBD process
+```html
+<script
+    type="module"
+    src="https://unpkg.com/@alleninstitute/cortex-ui/dist/cortex-ui/cortex-ui.esm.js"
+></script>
+<link
+    rel="stylesheet"
+    href="https://unpkg.com/@alleninstitute/cortex-ui/dist/fonts.css"
+/>
+```
+
+The stylesheet registers the Allen Institute typefaces — see [Fonts](#fonts).
+
+Pin a version in production (`.../cortex-ui@0.2.0/dist/...`) — an unpinned URL follows the latest release. jsDelivr
+serves the same file from `https://cdn.jsdelivr.net/npm/@alleninstitute/cortex-ui/dist/cortex-ui/cortex-ui.esm.js`.
 
 Then use the components anywhere in your HTML:
 
@@ -128,6 +152,19 @@ import { defineCustomElements } from '@alleninstitute/cortex-ui/loader';
 defineCustomElements();
 ```
 
+#### Fonts
+
+The package bundles the Allen Institute typefaces as WOFF2 — both families, weights 300–700, with italics. Register
+them once, wherever the app imports its global CSS:
+
+```js
+import '@alleninstitute/cortex-ui/fonts.css';
+```
+
+This has to happen at the document level, because a `@font-face` rule declared inside a component's shadow DOM is
+ignored. Once it has, every component picks the font up, since `--cui-font-family-base` already names it (with
+`--cui-font-family-headline` available for titles). Skip the import and the tokens fall back to a system font stack.
+
 #### TypeScript support
 
 The package ships with full type definitions. Import the generated types:
@@ -189,11 +226,18 @@ server by hand with the MCP inspector.
 
 ### Machine-readable docs
 
-Every build regenerates agent-consumable docs, which are also served from the deployed Storybook site root:
+Every build regenerates agent-consumable docs, which are also served from the deployed Storybook site root — so an
+agent with no MCP client can just fetch them:
+
+| File                                                                          | What it is                                                                   |
+| ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
+| [llms.txt](https://alleninstitute.github.io/cortex-ui/llms.txt)               | [llms.txt](https://llmstxt.org) index: one line per component, with maturity |
+| [llms-full.txt](https://alleninstitute.github.io/cortex-ui/llms-full.txt)     | Complete plain-text component API and token reference                        |
+| [components.json](https://alleninstitute.github.io/cortex-ui/components.json) | Stencil docs-json component manifest                                         |
+| [tokens.json](https://alleninstitute.github.io/cortex-ui/tokens.json)         | Structured `--cui-*` design tokens with light/dark values                    |
 
-- `docs/llms.txt` / `docs/llms-full.txt` — [llms.txt](https://llmstxt.org) index and full plain-text API reference
-- `docs/components.json` — Stencil docs-json component manifest
-- `docs/tokens.json` — structured `--cui-*` design tokens with light/dark values
+Pointing an agent at the `llms.txt` URL from your project's `AGENTS.md` / `CLAUDE.md` is usually enough to keep it from
+inventing props.
 
 ### Storybook MCP addon
 

package/dist/cjs/cortex-ui.cjs.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-CJFDVa2g.js');
+var index = require('./index-RBrlguTk.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
- 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 = () => {
@@ -18,7 +18,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await index.globalScripts();
-  return index.bootstrapLazy([["cui-progress.cjs",[[1,"cui-progress",{"label":[1],"value":[2],"max":[2],"indeterminate":[4],"size":[1],"showValue":[4,"show-value"]}]]],["cui-tag.cjs",[[1,"cui-tag",{"label":[1],"variant":[1],"size":[1]}]]]], options);
+  return index.bootstrapLazy([["cui-divider.cjs",[[1,"cui-divider",{"orientation":[513],"spacing":[513],"variant":[1],"importance":[1]}]]],["cui-icon.cjs",[[257,"cui-icon",{"icon":[1],"variant":[1],"importance":[1],"size":[1],"label":[1]},null,{"icon":[{"onIconChange":0}],"label":[{"onLabelChange":0}]}]]],["cui-progress.cjs",[[1,"cui-progress",{"label":[1],"value":[2],"max":[2],"indeterminate":[4],"size":[1],"showValue":[4,"show-value"]}]]],["cui-tag.cjs",[[1,"cui-tag",{"label":[1],"variant":[1],"size":[1]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -0,0 +1,49 @@
+'use strict';
+
+var index = require('./index-RBrlguTk.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) {
+        index.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".
+        index.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();
+
+exports.cui_divider = CuiDivider;

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

@@ -0,0 +1,100 @@
+'use strict';
+
+var index = require('./index-RBrlguTk.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) {
+        index.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 (index.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,
+            } }, index.h("slot", { key: '8c4d13ffa3b1cfe3e4d7d47c29127784d62381ff' })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "icon": [{
+                "onIconChange": 0
+            }],
+        "label": [{
+                "onLabelChange": 0
+            }]
+    }; }
+};
+CuiIcon.style = cuiIconCss();
+
+exports.cui_icon = CuiIcon;

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-CJFDVa2g.js');
+var index = require('./index-RBrlguTk.js');
 
-const cuiProgressCss = () => `:host{display:block;--cui-progress-track-color:var(--cui-base-bg-lvl-1);--cui-progress-indicator-color:var(--cui-accent)}:host([hidden]){display:none}.cui-progress{font-family:var(--cui-font-family-base);display:flex;align-items:center;gap:var(--cui-spacing-sm)}.cui-progress__bar{flex:1 1 auto;display:block;width:100%;border:none;-webkit-appearance:none;appearance:none;border-radius:var(--cui-radius-full);background-color:var(--cui-progress-track-color);box-shadow:inset 0 0 0 var(--cui-border-width-sm) var(--cui-base-border)}.cui-progress__bar::-webkit-progress-bar{border-radius:var(--cui-radius-full);background-color:var(--cui-progress-track-color);box-shadow:inset 0 0 0 var(--cui-border-width-sm) var(--cui-base-border)}.cui-progress__bar::-webkit-progress-value{border-radius:var(--cui-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-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-sm);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-sm)}.cui-progress--large .cui-progress__bar{height:var(--cui-spacing-md)}@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 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) {
@@ -35,10 +35,10 @@ const CuiProgress = class {
     }
     render() {
         const { indeterminate, showValue } = this;
-        return (index.h("div", { key: '8d0c5db599704bd96ef2703f9c76dc428be453b7', part: "base", class: {
+        return (index.h("div", { key: '546c0fb27b6e91a1d153d01ae154c272be633b14', part: "base", class: {
                 'cui-progress': true,
                 [`cui-progress--${this.size}`]: true,
-            } }, index.h("progress", { key: '03ec475e5913e56a0e19ba40d5d5e4982e5494df', part: "bar", class: "cui-progress__bar", "aria-label": this.label, max: this.resolvedMax, value: indeterminate ? undefined : this.clampedValue }), showValue && !indeterminate && (index.h("span", { key: '87d7519bcc458407389b34eb112acc49485e450c', part: "value", class: "cui-progress__value" }, Math.round(this.percent), "%"))));
+            } }, index.h("progress", { key: '313a769b9ea6c2059816e40c744a74749a55c07b', part: "bar", class: "cui-progress__bar", "aria-label": this.label, max: this.resolvedMax, value: indeterminate ? undefined : this.clampedValue }), showValue && !indeterminate && (index.h("span", { key: '1a2edab01738734b397b426d826cfa2dcd4cf89b', part: "value", class: "cui-progress__value" }, Math.round(this.percent), "%"))));
     }
 };
 CuiProgress.style = cuiProgressCss();

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

@@ -1,18 +1,18 @@
 'use strict';
 
-var index = require('./index-CJFDVa2g.js');
+var index = require('./index-RBrlguTk.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) {
         index.registerInstance(this, hostRef);
         this.label = '';
-        this.variant = 'default';
+        this.variant = 'neutral';
         this.size = 'medium';
     }
     render() {
-        return (index.h("span", { key: '4766498cc28770f682c732522ec571c5b2335cf3', class: {
+        return (index.h("span", { key: '35b8ea2176d1923abcda801fee775a9cd46a2fec', class: {
                 'cui-tag': true,
                 [`cui-tag--${this.variant}`]: true,
                 [`cui-tag--${this.size}`]: true,