@alleninstitute/cortex-ui 0.1.0 → 0.2.0

package/README.md

@@ -266,90 +266,74 @@ pnpm install
 - **Types or components look stale / missing exports** — the `dist/` output is out of date. Re-run `pnpm build:all` in this repo (or use `pnpm dev:react` + `pnpm dev:stencil` to watch). Nothing works until `dist/` exists.
 - **Do not commit the `link:` lines** in the consuming app — they only make sense on your machine. Swap back to a normal version range before committing.
 
-## Releasing
-
-All three packages are versioned and published **in lockstep** under a single `v<semver>` git tag. They are not
-independently versioned: the React wrappers are generated from the Stencil build and the MCP server bundles a snapshot
-of the generated docs, so a component change ripples through all three. `@alleninstitute/cortex-ui-react` depends on
-`@alleninstitute/cortex-ui` via `workspace:*`, which pnpm rewrites to the exact matching version as it packs.
-
-Versions and release notes come from [git-cliff](https://git-cliff.org), driven by
-[conventional commit](https://www.conventionalcommits.org) messages, configured in [cliff.toml](cliff.toml).
+## Changelog
 
-### Cutting a release
-
-Releasing is a deliberate, manual step — merging to `main` does not publish.
+`CHANGELOG.md` is generated from [conventional commit](https://www.conventionalcommits.org) messages by
+[git-cliff](https://git-cliff.org), configured in [cliff.toml](cliff.toml). **Commit messages are the release notes**, so
+a sloppy subject line ships to consumers. `chore(release):` commits are skipped, and commits that aren't conventional
+are dropped from the changelog entirely.
 
-1. Run the **Release** workflow (`Actions` → `Release` → `Run workflow`) from `main`. Tick **dry-run** first if you want
-   to preview the version and changelog without touching anything.
-2. It derives the next version from the commits since the last tag, verifies the build and tests, bumps every
-   publishable `package.json`, regenerates `CHANGELOG.md`, then commits and pushes `chore(release): v<semver>` plus the
-   `v<semver>` tag.
-3. Pushing that tag triggers the **Publish to npm** workflow, which builds all three packages, publishes them to npm
-   (root first, since the others depend on it) with [provenance](https://docs.npmjs.com/generating-provenance-statements),
-   and opens a GitHub Release with the generated notes.
-
-To preview locally what the next release would be:
+Storybook renders the same file as a top-level **Release Notes** page (`src/docs/ReleaseNotes.mdx`), imported raw from
+`CHANGELOG.md` so the published docs can't drift from the repo.
 
 ```bash
-pnpm release:version      # the version git-cliff would pick
-pnpm changelog:unreleased # the notes for the unreleased commits
-pnpm changelog            # rewrite CHANGELOG.md in full
+pnpm release:version      # the version git-cliff would pick next
+pnpm changelog:unreleased # the notes for the commits since the last tag
+pnpm changelog            # regenerate CHANGELOG.md in full
 ```
 
-### Version numbers
+Versions stay pre-1.0 while components are still `experimental` / `beta`: `cliff.toml` sets
+`breaking_always_bump_major = false`, so while the major is `0` a breaking change bumps the **minor** (`0.1.0` → `0.2.0`)
+rather than jumping to `1.0.0`.
+
+### Prepublish safety
 
-The library is pre-1.0 while components are still tagged `experimental` / `beta`, so `cliff.toml` sets
-`breaking_always_bump_major = false`: while the major is `0`, a breaking change bumps the **minor** (`0.1.0` → `0.2.0`)
-rather than jumping to `1.0.0`. Cutting `1.0.0` is intentional — pass it via the workflow's `version` input.
+Every publishable package runs its own build in `prepack`, so `dist/`, the generated React source, and the MCP server's
+bundled docs snapshot can never be packed or published stale — including from a hand-run `pnpm publish`.
 
-### One-time setup
+## Releasing
 
-Publishing uses [npm trusted publishing](https://docs.npmjs.com/trusted-publishers): GitHub mints a short-lived OIDC
-token that npm exchanges for publish credentials, so **there is no `NPM_TOKEN` secret**. Requires npm >= 11.5.1 and
-Node >= 22.14.0, which the publish job asserts up front.
+All three packages are versioned and published **in lockstep** under a single `v<semver>` git tag. They are not
+independently versioned: the React wrappers are generated from the Stencil build and the MCP server bundles a snapshot
+of the generated docs, so a component change ripples through all three. `@alleninstitute/cortex-ui-react` depends on
+`@alleninstitute/cortex-ui` via `workspace:*`, which pnpm rewrites to the exact matching version as it packs.
 
-The catch is bootstrapping. npm's trusted-publisher config lives in a package's settings page, so the package has to
-exist before it can be configured — unlike PyPI, npm cannot pre-authorize a name that has never been published
-([npm/cli#8544](https://github.com/npm/cli/issues/8544)). Each of the three packages therefore needs one manual publish
-first:
+Both the version and the release notes are derived from conventional commits — see [Changelog](#changelog).
 
-```bash
-npm login                       # an account with publish rights on @alleninstitute
-pnpm build:all
-pnpm publish --access public --no-git-checks                              # @alleninstitute/cortex-ui
-pnpm --filter @alleninstitute/cortex-ui-react publish --access public --no-git-checks
-pnpm --filter @alleninstitute/cortex-ui-mcp   publish --access public --no-git-checks
-```
+### Cutting a release
 
-Then, for **each** of the three packages, on npmjs.com → package `Settings` → `Trusted Publisher`, select GitHub Actions
-and set:
+Releasing is a deliberate, manual step — merging to `main` does not publish.
 
-| Field             | Value            |
-| ----------------- | ---------------- |
-| Organization      | `AllenInstitute` |
-| Repository        | `cortex-ui`      |
-| Workflow filename | `publish.yml`    |
-| Environment       | _(leave blank)_  |
+1. Run the **Release** workflow (`Actions` → `Release` → `Run workflow`) from `main`. It takes no inputs — the version
+   is always derived from the commits.
+2. It works out the next version from the commits since the last tag, bumps every publishable `package.json`,
+   regenerates `CHANGELOG.md`, then commits and pushes `chore(release): v<semver>` plus the `v<semver>` tag.
+3. Pushing that tag triggers the **Publish to npm** workflow, which builds all three packages, publishes them to npm
+   (root first, since the others depend on it), and opens a GitHub Release with the generated notes.
 
-After that the Release → Publish pipeline runs unattended, and the manual step never has to happen again.
+Preview what a release would produce before running it with `pnpm release:version` and `pnpm changelog:unreleased`.
 
-The one secret that _is_ required:
+### How publishing is authenticated
 
-- **`SERVICE_ACCOUNT_SSH_KEY`** — an SSH deploy key with write access, so the release commit and tag can land on the
-  protected `main` branch. Same secret name and service account as the other Allen Institute repos.
+Already configured; here for when something needs rotating.
 
-### Provenance and repository visibility
+- **npm** — [trusted publishing](https://docs.npmjs.com/trusted-publishers). GitHub mints a short-lived OIDC token that
+  npm exchanges for publish credentials, so **there is no `NPM_TOKEN`**. Each of the three packages has a trusted
+  publisher pointing at `AllenInstitute/cortex-ui` + `publish.yml`, with no environment. Don't add a token.
+- **git** — `SERVICE_ACCOUNT_SSH_KEY` holds the private half of a **write-enabled deploy key** on this repo. Deploy keys
+  can't be shared between repos, so the team Bitwarden entry _"public github ssh keys for github service user"_ keeps
+  one keypair per repo named `<repo>_deploy_key`; `cortex-ui`'s lives there. It can't be `GITHUB_TOKEN` — see the
+  comment in `release.yml`.
+- **branch rules** — `main` requires pull requests, with `DeployKey` as a bypass actor so the release commit can land.
+  This intentionally differs from other repos that bypass via the admin role: scoping it to the deploy key means humans
+  still can't push to `main`.
 
-Trusted publishing works regardless of repository visibility, but
-[provenance attestations require a **public source repository**](https://github.blog/changelog/2023-07-26-publishing-with-npm-provenance-from-private-source-repositories-is-no-longer-supported/) —
-npm dropped support for private ones in 2023. `cortex-ui` is currently private, so the publish job sets
-`NPM_CONFIG_PROVENANCE=false` and ships without attestations.
+### Provenance
 
-This is derived from `github.event.repository.private` at run time, not hardcoded: **make the repo public and the next
-release gets provenance automatically**, with no change to the workflow. It is set explicitly in both directions on
-purpose — OIDC otherwise auto-enables provenance based on _package_ visibility, and since these packages are public
-while the repo is not, it would enable provenance and then fail the publish.
+We don't publish provenance attestations. The publish job sets `NPM_CONFIG_PROVENANCE=false`, which is load-bearing
+rather than cosmetic: trusted publishing **auto-enables** provenance, and
+[provenance requires a public source repository](https://github.blog/changelog/2023-07-26-publishing-with-npm-provenance-from-private-source-repositories-is-no-longer-supported/) —
+so on this private repo npm would turn it on and then fail the publish. Drop that line only when the repo goes public.
 
 ### If a publish fails partway
 
@@ -359,12 +343,6 @@ re-run Release**; that would only try to cut a second version. Fix the cause, th
 run. The publish step skips any package whose version is already on npm, so a re-run picks up exactly the packages that
 did not make it.
 
-### Prepublish safety
-
-Every package runs its own build in `prepack`, so `dist/`, the generated React source, and the MCP docs snapshot can
-never be published stale — including from a hand-run `pnpm publish`. The publish workflow additionally runs
-`pnpm build:all` up front so a build failure stops the release before any package reaches npm.
-
 ## Project Structure
 
 ```

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Rxdz0vyq.js');
+var index = require('./index-CJFDVa2g.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
@@ -18,7 +18,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await index.globalScripts();
-  return index.bootstrapLazy([["cui-tag.cjs",[[1,"cui-tag",{"label":[1],"variant":[1],"size":[1]}]]]], options);
+  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);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -0,0 +1,46 @@
+'use strict';
+
+var index = require('./index-CJFDVa2g.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 CuiProgress = class {
+    constructor(hostRef) {
+        index.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 (index.h("div", { key: '8d0c5db599704bd96ef2703f9c76dc428be453b7', 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), "%"))));
+    }
+};
+CuiProgress.style = cuiProgressCss();
+
+exports.cui_progress = CuiProgress;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Rxdz0vyq.js');
+var index = require('./index-CJFDVa2g.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)}`;
 
@@ -12,7 +12,7 @@ const CuiTag = class {
         this.size = 'medium';
     }
     render() {
-        return (index.h("span", { key: 'd2bab55fc1472bb8f004ef648103478070bb4723', class: {
+        return (index.h("span", { key: '4766498cc28770f682c732522ec571c5b2335cf3', class: {
                 'cui-tag': true,
                 [`cui-tag--${this.variant}`]: true,
                 [`cui-tag--${this.size}`]: true,

package/dist/cjs/{index-Rxdz0vyq.js → index-CJFDVa2g.js}

@@ -4,7 +4,7 @@ const NAMESPACE = 'cortex-ui';
 const BUILD = /* cortex-ui */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, prop: true, propChangeCallback: false, updatable: true};
 
 const globalScripts = () => {};
-const globalStyles = ":root{--cui-light-blue-100:#ededff;--cui-light-blue-200:#ddddfe;--cui-light-blue-300:#bcbcfe;--cui-light-blue-400:#9898fc;--cui-light-blue-500:#7070ff;--cui-light-blue-600:#4c4cd9;--cui-light-blue-700:#30309f;--cui-light-blue-800:#121265;--cui-light-blue-900:#070756;--cui-light-gray-50:#ffffff;--cui-light-gray-75:#fafafa;--cui-light-gray-100:#f3f3f3;--cui-light-gray-200:#e5e5e5;--cui-light-gray-300:#c3c3c3;--cui-light-gray-400:#a3a3a3;--cui-light-gray-500:#828282;--cui-light-gray-600:#5b5b5b;--cui-light-gray-700:#3b3b3b;--cui-light-gray-800:#1b1b1b;--cui-light-gray-900:#101010;--cui-light-green-100:#d1fbf8;--cui-light-green-200:#b1f5f1;--cui-light-green-300:#7de0d9;--cui-light-green-400:#39d0c6;--cui-light-green-500:#02b1a5;--cui-light-green-600:#01867e;--cui-light-green-700:#015751;--cui-light-green-800:#042825;--cui-light-green-900:#011917;--cui-light-purple-100:#f0e7fd;--cui-light-purple-200:#e4d7fa;--cui-light-purple-300:#ccb4f2;--cui-light-purple-400:#a980ec;--cui-light-purple-500:#874fe2;--cui-light-purple-600:#743fca;--cui-light-purple-700:#4e2294;--cui-light-purple-800:#260f4c;--cui-light-purple-900:#1d0544;--cui-light-red-100:#fee6f0;--cui-light-red-200:#fad1e2;--cui-light-red-300:#ecabc5;--cui-light-red-400:#dc709b;--cui-light-red-500:#e0387c;--cui-light-red-600:#cd2568;--cui-light-red-700:#9b0b44;--cui-light-red-800:#4c0521;--cui-light-red-900:#2f0214;--cui-light-yellow-100:#fdefca;--cui-light-yellow-200:#fce197;--cui-light-yellow-300:#f6cf62;--cui-light-yellow-400:#e1ac1c;--cui-light-yellow-500:#d39c00;--cui-light-yellow-600:#926c04;--cui-light-yellow-700:#594202;--cui-light-yellow-800:#402f02;--cui-light-yellow-900:#2f2200;--cui-dark-blue-100:#070756;--cui-dark-blue-200:#121265;--cui-dark-blue-300:#30309f;--cui-dark-blue-400:#4c4cd9;--cui-dark-blue-500:#7070ff;--cui-dark-blue-600:#9898fc;--cui-dark-blue-700:#bcbcfe;--cui-dark-blue-800:#ddddfe;--cui-dark-blue-900:#ededff;--cui-dark-gray-50:#101010;--cui-dark-gray-75:#1b1b1b;--cui-dark-gray-100:#3b3b3b;--cui-dark-gray-200:#5b5b5b;--cui-dark-gray-300:#828282;--cui-dark-gray-400:#a3a3a3;--cui-dark-gray-500:#c3c3c3;--cui-dark-gray-600:#e5e5e5;--cui-dark-gray-700:#f3f3f3;--cui-dark-gray-800:#fafafa;--cui-dark-gray-900:#ffffff;--cui-dark-green-100:#011917;--cui-dark-green-200:#042825;--cui-dark-green-300:#015751;--cui-dark-green-400:#01867e;--cui-dark-green-500:#02b1a5;--cui-dark-green-600:#39d0c6;--cui-dark-green-700:#7de0d9;--cui-dark-green-800:#b1f5f1;--cui-dark-green-900:#d1fbf8;--cui-dark-purple-100:#151530;--cui-dark-purple-200:#260f4c;--cui-dark-purple-300:#4e2294;--cui-dark-purple-400:#743fca;--cui-dark-purple-500:#874fe2;--cui-dark-purple-600:#a980ec;--cui-dark-purple-700:#ccb4f2;--cui-dark-purple-800:#e4d7fa;--cui-dark-purple-900:#f0e7fd;--cui-dark-red-100:#2f0214;--cui-dark-red-200:#4c0521;--cui-dark-red-300:#9b0b44;--cui-dark-red-400:#cd2568;--cui-dark-red-500:#e0387c;--cui-dark-red-600:#dc709b;--cui-dark-red-700:#ecabc5;--cui-dark-red-800:#fad1e2;--cui-dark-red-900:#fee6f0;--cui-dark-yellow-100:#2f2200;--cui-dark-yellow-200:#402f02;--cui-dark-yellow-300:#594202;--cui-dark-yellow-400:#926c04;--cui-dark-yellow-500:#d39c00;--cui-dark-yellow-600:#e1ac1c;--cui-dark-yellow-700:#f6cf62;--cui-dark-yellow-800:#fce197;--cui-dark-yellow-900:#fdefca;--cui-blue-100:var(--cui-light-blue-100);--cui-blue-200:var(--cui-light-blue-200);--cui-blue-300:var(--cui-light-blue-300);--cui-blue-400:var(--cui-light-blue-400);--cui-blue-500:var(--cui-light-blue-500);--cui-blue-600:var(--cui-light-blue-600);--cui-blue-700:var(--cui-light-blue-700);--cui-blue-800:var(--cui-light-blue-800);--cui-blue-900:var(--cui-light-blue-900);--cui-gray-50:var(--cui-light-gray-50);--cui-gray-75:var(--cui-light-gray-75);--cui-gray-100:var(--cui-light-gray-100);--cui-gray-200:var(--cui-light-gray-200);--cui-gray-300:var(--cui-light-gray-300);--cui-gray-400:var(--cui-light-gray-400);--cui-gray-500:var(--cui-light-gray-500);--cui-gray-600:var(--cui-light-gray-600);--cui-gray-700:var(--cui-light-gray-700);--cui-gray-800:var(--cui-light-gray-800);--cui-gray-900:var(--cui-light-gray-900);--cui-green-100:var(--cui-light-green-100);--cui-green-200:var(--cui-light-green-200);--cui-green-300:var(--cui-light-green-300);--cui-green-400:var(--cui-light-green-400);--cui-green-500:var(--cui-light-green-500);--cui-green-600:var(--cui-light-green-600);--cui-green-700:var(--cui-light-green-700);--cui-green-800:var(--cui-light-green-800);--cui-green-900:var(--cui-light-green-900);--cui-purple-100:var(--cui-light-purple-100);--cui-purple-200:var(--cui-light-purple-200);--cui-purple-300:var(--cui-light-purple-300);--cui-purple-400:var(--cui-light-purple-400);--cui-purple-500:var(--cui-light-purple-500);--cui-purple-600:var(--cui-light-purple-600);--cui-purple-700:var(--cui-light-purple-700);--cui-purple-800:var(--cui-light-purple-800);--cui-purple-900:var(--cui-light-purple-900);--cui-red-100:var(--cui-light-red-100);--cui-red-200:var(--cui-light-red-200);--cui-red-300:var(--cui-light-red-300);--cui-red-400:var(--cui-light-red-400);--cui-red-500:var(--cui-light-red-500);--cui-red-600:var(--cui-light-red-600);--cui-red-700:var(--cui-light-red-700);--cui-red-800:var(--cui-light-red-800);--cui-red-900:var(--cui-light-red-900);--cui-yellow-100:var(--cui-light-yellow-100);--cui-yellow-200:var(--cui-light-yellow-200);--cui-yellow-300:var(--cui-light-yellow-300);--cui-yellow-400:var(--cui-light-yellow-400);--cui-yellow-500:var(--cui-light-yellow-500);--cui-yellow-600:var(--cui-light-yellow-600);--cui-yellow-700:var(--cui-light-yellow-700);--cui-yellow-800:var(--cui-light-yellow-800);--cui-yellow-900:var(--cui-light-yellow-900);--cui-base-bg:var(--cui-gray-50);--cui-base-bg-lvl-1:var(--cui-gray-75);--cui-base-bg-lvl-2:var(--cui-gray-100);--cui-base-text-primary:var(--cui-gray-900);--cui-base-text-secondary:var(--cui-gray-700);--cui-base-text-inverted:var(--cui-gray-50);--cui-base-border:var(--cui-gray-200);--cui-accent:var(--cui-blue-500);--cui-accent-bg:var(--cui-blue-100);--cui-accent-border:var(--cui-blue-300);--cui-accent-text:var(--cui-blue-800);--cui-positive:var(--cui-green-500);--cui-positive-bg:var(--cui-green-100);--cui-positive-border:var(--cui-green-300);--cui-positive-text:var(--cui-green-800);--cui-warning:var(--cui-yellow-500);--cui-warning-bg:var(--cui-yellow-100);--cui-warning-border:var(--cui-yellow-300);--cui-warning-text:var(--cui-yellow-800);--cui-negative:var(--cui-red-500);--cui-negative-bg:var(--cui-red-100);--cui-negative-border:var(--cui-red-300);--cui-negative-text:var(--cui-red-800);--cui-neutral:var(--cui-gray-500);--cui-neutral-bg:var(--cui-gray-100);--cui-neutral-border:var(--cui-gray-300);--cui-neutral-text:var(--cui-gray-800);--cui-highlight:var(--cui-purple-500);--cui-highlight-bg:var(--cui-purple-100);--cui-highlight-border:var(--cui-purple-300);--cui-highlight-text:var(--cui-purple-800);--cui-info:var(--cui-blue-500);--cui-info-bg:var(--cui-blue-100);--cui-info-border:var(--cui-blue-300);--cui-info-text:var(--cui-blue-800);--cui-font-family-base:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;--cui-font-family-mono:'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace;--cui-font-size-xxs:10px;--cui-font-size-xs:12px;--cui-font-size-sm:14px;--cui-font-size-md:16px;--cui-font-size-lg:18px;--cui-font-size-xl:24px;--cui-font-weight-normal:400;--cui-font-weight-medium:500;--cui-font-weight-semibold:600;--cui-font-weight-bold:700;--cui-line-height-tight:1.2;--cui-line-height-base:1.4;--cui-spacing-xxs:2px;--cui-spacing-xs:4px;--cui-spacing-sm:8px;--cui-spacing-md:12px;--cui-spacing-lg:20px;--cui-spacing-xl:32px;--cui-spacing-xxl:48px;--cui-radius-sm:4px;--cui-radius-md:6px;--cui-radius-lg:8px;--cui-radius-full:9999px;--cui-shadow-sm:0 1px 2px rgba(0, 0, 0, 0.05);--cui-shadow-md:0 2px 4px rgba(0, 0, 0, 0.1);--cui-shadow-lg:0 4px 12px rgba(0, 0, 0, 0.15);--cui-transition-fast:160ms ease;--cui-transition-base:240ms ease;--cui-transition-slow:320ms ease}:root[data-theme=dark]{--cui-blue-100:var(--cui-dark-blue-100);--cui-blue-200:var(--cui-dark-blue-200);--cui-blue-300:var(--cui-dark-blue-300);--cui-blue-400:var(--cui-dark-blue-400);--cui-blue-500:var(--cui-dark-blue-500);--cui-blue-600:var(--cui-dark-blue-600);--cui-blue-700:var(--cui-dark-blue-700);--cui-blue-800:var(--cui-dark-blue-800);--cui-blue-900:var(--cui-dark-blue-900);--cui-gray-50:var(--cui-dark-gray-50);--cui-gray-75:var(--cui-dark-gray-75);--cui-gray-100:var(--cui-dark-gray-100);--cui-gray-200:var(--cui-dark-gray-200);--cui-gray-300:var(--cui-dark-gray-300);--cui-gray-400:var(--cui-dark-gray-400);--cui-gray-500:var(--cui-dark-gray-500);--cui-gray-600:var(--cui-dark-gray-600);--cui-gray-700:var(--cui-dark-gray-700);--cui-gray-800:var(--cui-dark-gray-800);--cui-gray-900:var(--cui-dark-gray-900);--cui-green-100:var(--cui-dark-green-100);--cui-green-200:var(--cui-dark-green-200);--cui-green-300:var(--cui-dark-green-300);--cui-green-400:var(--cui-dark-green-400);--cui-green-500:var(--cui-dark-green-500);--cui-green-600:var(--cui-dark-green-600);--cui-green-700:var(--cui-dark-green-700);--cui-green-800:var(--cui-dark-green-800);--cui-green-900:var(--cui-dark-green-900);--cui-purple-100:var(--cui-dark-purple-100);--cui-purple-200:var(--cui-dark-purple-200);--cui-purple-300:var(--cui-dark-purple-300);--cui-purple-400:var(--cui-dark-purple-400);--cui-purple-500:var(--cui-dark-purple-500);--cui-purple-600:var(--cui-dark-purple-600);--cui-purple-700:var(--cui-dark-purple-700);--cui-purple-800:var(--cui-dark-purple-800);--cui-purple-900:var(--cui-dark-purple-900);--cui-red-100:var(--cui-dark-red-100);--cui-red-200:var(--cui-dark-red-200);--cui-red-300:var(--cui-dark-red-300);--cui-red-400:var(--cui-dark-red-400);--cui-red-500:var(--cui-dark-red-500);--cui-red-600:var(--cui-dark-red-600);--cui-red-700:var(--cui-dark-red-700);--cui-red-800:var(--cui-dark-red-800);--cui-red-900:var(--cui-dark-red-900);--cui-yellow-100:var(--cui-dark-yellow-100);--cui-yellow-200:var(--cui-dark-yellow-200);--cui-yellow-300:var(--cui-dark-yellow-300);--cui-yellow-400:var(--cui-dark-yellow-400);--cui-yellow-500:var(--cui-dark-yellow-500);--cui-yellow-600:var(--cui-dark-yellow-600);--cui-yellow-700:var(--cui-dark-yellow-700);--cui-yellow-800:var(--cui-dark-yellow-800);--cui-yellow-900:var(--cui-dark-yellow-900);--cui-base-text-secondary:var(--cui-gray-600)}*,*::before,*::after{box-sizing:border-box}html{font-family:var(--cui-font-family-base);font-size:var(--cui-font-size-md);line-height:var(--cui-line-height-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;color:var(--cui-base-text-secondary);background:var(--cui-base-bg)}a{color:var(--cui-accent-text)}";
+const globalStyles = ":root{--cui-light-blue-100:#ededff;--cui-light-blue-200:#ddddfe;--cui-light-blue-300:#bcbcfe;--cui-light-blue-400:#9898fc;--cui-light-blue-500:#7070ff;--cui-light-blue-600:#4c4cd9;--cui-light-blue-700:#30309f;--cui-light-blue-800:#121265;--cui-light-blue-900:#070756;--cui-light-gray-50:#ffffff;--cui-light-gray-75:#fafafa;--cui-light-gray-100:#f3f3f3;--cui-light-gray-200:#e5e5e5;--cui-light-gray-300:#c3c3c3;--cui-light-gray-400:#a3a3a3;--cui-light-gray-500:#828282;--cui-light-gray-600:#5b5b5b;--cui-light-gray-700:#3b3b3b;--cui-light-gray-800:#1b1b1b;--cui-light-gray-900:#101010;--cui-light-green-100:#d1fbf8;--cui-light-green-200:#b1f5f1;--cui-light-green-300:#7de0d9;--cui-light-green-400:#39d0c6;--cui-light-green-500:#02b1a5;--cui-light-green-600:#01867e;--cui-light-green-700:#015751;--cui-light-green-800:#042825;--cui-light-green-900:#011917;--cui-light-purple-100:#f0e7fd;--cui-light-purple-200:#e4d7fa;--cui-light-purple-300:#ccb4f2;--cui-light-purple-400:#a980ec;--cui-light-purple-500:#874fe2;--cui-light-purple-600:#743fca;--cui-light-purple-700:#4e2294;--cui-light-purple-800:#260f4c;--cui-light-purple-900:#1d0544;--cui-light-red-100:#fee6f0;--cui-light-red-200:#fad1e2;--cui-light-red-300:#ecabc5;--cui-light-red-400:#dc709b;--cui-light-red-500:#e0387c;--cui-light-red-600:#cd2568;--cui-light-red-700:#9b0b44;--cui-light-red-800:#4c0521;--cui-light-red-900:#2f0214;--cui-light-yellow-100:#fdefca;--cui-light-yellow-200:#fce197;--cui-light-yellow-300:#f6cf62;--cui-light-yellow-400:#e1ac1c;--cui-light-yellow-500:#d39c00;--cui-light-yellow-600:#926c04;--cui-light-yellow-700:#594202;--cui-light-yellow-800:#402f02;--cui-light-yellow-900:#2f2200;--cui-light-shadow-100:rgba(16, 16, 16, 0.05);--cui-light-shadow-200:rgba(16, 16, 16, 0.1);--cui-light-shadow-300:rgba(16, 16, 16, 0.15);--cui-dark-blue-100:#070756;--cui-dark-blue-200:#121265;--cui-dark-blue-300:#30309f;--cui-dark-blue-400:#4c4cd9;--cui-dark-blue-500:#7070ff;--cui-dark-blue-600:#9898fc;--cui-dark-blue-700:#bcbcfe;--cui-dark-blue-800:#ddddfe;--cui-dark-blue-900:#ededff;--cui-dark-gray-50:#101010;--cui-dark-gray-75:#1b1b1b;--cui-dark-gray-100:#3b3b3b;--cui-dark-gray-200:#5b5b5b;--cui-dark-gray-300:#828282;--cui-dark-gray-400:#a3a3a3;--cui-dark-gray-500:#c3c3c3;--cui-dark-gray-600:#e5e5e5;--cui-dark-gray-700:#f3f3f3;--cui-dark-gray-800:#fafafa;--cui-dark-gray-900:#ffffff;--cui-dark-green-100:#011917;--cui-dark-green-200:#042825;--cui-dark-green-300:#015751;--cui-dark-green-400:#01867e;--cui-dark-green-500:#02b1a5;--cui-dark-green-600:#39d0c6;--cui-dark-green-700:#7de0d9;--cui-dark-green-800:#b1f5f1;--cui-dark-green-900:#d1fbf8;--cui-dark-purple-100:#151530;--cui-dark-purple-200:#260f4c;--cui-dark-purple-300:#4e2294;--cui-dark-purple-400:#743fca;--cui-dark-purple-500:#874fe2;--cui-dark-purple-600:#a980ec;--cui-dark-purple-700:#ccb4f2;--cui-dark-purple-800:#e4d7fa;--cui-dark-purple-900:#f0e7fd;--cui-dark-red-100:#2f0214;--cui-dark-red-200:#4c0521;--cui-dark-red-300:#9b0b44;--cui-dark-red-400:#cd2568;--cui-dark-red-500:#e0387c;--cui-dark-red-600:#dc709b;--cui-dark-red-700:#ecabc5;--cui-dark-red-800:#fad1e2;--cui-dark-red-900:#fee6f0;--cui-dark-yellow-100:#2f2200;--cui-dark-yellow-200:#402f02;--cui-dark-yellow-300:#594202;--cui-dark-yellow-400:#926c04;--cui-dark-yellow-500:#d39c00;--cui-dark-yellow-600:#e1ac1c;--cui-dark-yellow-700:#f6cf62;--cui-dark-yellow-800:#fce197;--cui-dark-yellow-900:#fdefca;--cui-dark-shadow-100:rgba(0, 0, 0, 0.4);--cui-dark-shadow-200:rgba(0, 0, 0, 0.5);--cui-dark-shadow-300:rgba(0, 0, 0, 0.6);--cui-blue-100:var(--cui-light-blue-100);--cui-blue-200:var(--cui-light-blue-200);--cui-blue-300:var(--cui-light-blue-300);--cui-blue-400:var(--cui-light-blue-400);--cui-blue-500:var(--cui-light-blue-500);--cui-blue-600:var(--cui-light-blue-600);--cui-blue-700:var(--cui-light-blue-700);--cui-blue-800:var(--cui-light-blue-800);--cui-blue-900:var(--cui-light-blue-900);--cui-gray-50:var(--cui-light-gray-50);--cui-gray-75:var(--cui-light-gray-75);--cui-gray-100:var(--cui-light-gray-100);--cui-gray-200:var(--cui-light-gray-200);--cui-gray-300:var(--cui-light-gray-300);--cui-gray-400:var(--cui-light-gray-400);--cui-gray-500:var(--cui-light-gray-500);--cui-gray-600:var(--cui-light-gray-600);--cui-gray-700:var(--cui-light-gray-700);--cui-gray-800:var(--cui-light-gray-800);--cui-gray-900:var(--cui-light-gray-900);--cui-green-100:var(--cui-light-green-100);--cui-green-200:var(--cui-light-green-200);--cui-green-300:var(--cui-light-green-300);--cui-green-400:var(--cui-light-green-400);--cui-green-500:var(--cui-light-green-500);--cui-green-600:var(--cui-light-green-600);--cui-green-700:var(--cui-light-green-700);--cui-green-800:var(--cui-light-green-800);--cui-green-900:var(--cui-light-green-900);--cui-purple-100:var(--cui-light-purple-100);--cui-purple-200:var(--cui-light-purple-200);--cui-purple-300:var(--cui-light-purple-300);--cui-purple-400:var(--cui-light-purple-400);--cui-purple-500:var(--cui-light-purple-500);--cui-purple-600:var(--cui-light-purple-600);--cui-purple-700:var(--cui-light-purple-700);--cui-purple-800:var(--cui-light-purple-800);--cui-purple-900:var(--cui-light-purple-900);--cui-red-100:var(--cui-light-red-100);--cui-red-200:var(--cui-light-red-200);--cui-red-300:var(--cui-light-red-300);--cui-red-400:var(--cui-light-red-400);--cui-red-500:var(--cui-light-red-500);--cui-red-600:var(--cui-light-red-600);--cui-red-700:var(--cui-light-red-700);--cui-red-800:var(--cui-light-red-800);--cui-red-900:var(--cui-light-red-900);--cui-yellow-100:var(--cui-light-yellow-100);--cui-yellow-200:var(--cui-light-yellow-200);--cui-yellow-300:var(--cui-light-yellow-300);--cui-yellow-400:var(--cui-light-yellow-400);--cui-yellow-500:var(--cui-light-yellow-500);--cui-yellow-600:var(--cui-light-yellow-600);--cui-yellow-700:var(--cui-light-yellow-700);--cui-yellow-800:var(--cui-light-yellow-800);--cui-yellow-900:var(--cui-light-yellow-900);--cui-shadow-color-100:var(--cui-light-shadow-100);--cui-shadow-color-200:var(--cui-light-shadow-200);--cui-shadow-color-300:var(--cui-light-shadow-300);--cui-base-bg:var(--cui-gray-50);--cui-base-bg-lvl-1:var(--cui-gray-75);--cui-base-bg-lvl-2:var(--cui-gray-100);--cui-base-bg-hover:var(--cui-gray-100);--cui-base-bg-active:var(--cui-gray-200);--cui-base-bg-selected:var(--cui-blue-100);--cui-base-text-primary:var(--cui-gray-900);--cui-base-text-secondary:var(--cui-gray-700);--cui-base-text-inverted:var(--cui-gray-50);--cui-base-border:var(--cui-gray-200);--cui-accent:var(--cui-blue-500);--cui-accent-hover:var(--cui-blue-600);--cui-accent-active:var(--cui-blue-700);--cui-accent-bg:var(--cui-blue-100);--cui-accent-bg-hover:var(--cui-blue-200);--cui-accent-bg-active:var(--cui-blue-300);--cui-accent-bg-selected:var(--cui-blue-200);--cui-accent-border:var(--cui-blue-300);--cui-accent-border-hover:var(--cui-blue-600);--cui-accent-text:var(--cui-blue-800);--cui-positive:var(--cui-green-500);--cui-positive-hover:var(--cui-green-600);--cui-positive-active:var(--cui-green-700);--cui-positive-bg:var(--cui-green-100);--cui-positive-bg-hover:var(--cui-green-200);--cui-positive-bg-active:var(--cui-green-300);--cui-positive-bg-selected:var(--cui-green-200);--cui-positive-border:var(--cui-green-300);--cui-positive-border-hover:var(--cui-green-600);--cui-positive-text:var(--cui-green-800);--cui-warning:var(--cui-yellow-500);--cui-warning-hover:var(--cui-yellow-600);--cui-warning-active:var(--cui-yellow-700);--cui-warning-bg:var(--cui-yellow-100);--cui-warning-bg-hover:var(--cui-yellow-200);--cui-warning-bg-active:var(--cui-yellow-300);--cui-warning-bg-selected:var(--cui-yellow-200);--cui-warning-border:var(--cui-yellow-300);--cui-warning-border-hover:var(--cui-yellow-600);--cui-warning-text:var(--cui-yellow-800);--cui-negative:var(--cui-red-500);--cui-negative-hover:var(--cui-red-600);--cui-negative-active:var(--cui-red-700);--cui-negative-bg:var(--cui-red-100);--cui-negative-bg-hover:var(--cui-red-200);--cui-negative-bg-active:var(--cui-red-300);--cui-negative-bg-selected:var(--cui-red-200);--cui-negative-border:var(--cui-red-300);--cui-negative-border-hover:var(--cui-red-600);--cui-negative-text:var(--cui-red-800);--cui-neutral:var(--cui-gray-500);--cui-neutral-hover:var(--cui-gray-600);--cui-neutral-active:var(--cui-gray-700);--cui-neutral-bg:var(--cui-gray-100);--cui-neutral-bg-hover:var(--cui-gray-200);--cui-neutral-bg-active:var(--cui-gray-300);--cui-neutral-bg-selected:var(--cui-gray-200);--cui-neutral-border:var(--cui-gray-300);--cui-neutral-border-hover:var(--cui-gray-600);--cui-neutral-text:var(--cui-gray-800);--cui-highlight:var(--cui-purple-500);--cui-highlight-hover:var(--cui-purple-600);--cui-highlight-active:var(--cui-purple-700);--cui-highlight-bg:var(--cui-purple-100);--cui-highlight-bg-hover:var(--cui-purple-200);--cui-highlight-bg-active:var(--cui-purple-300);--cui-highlight-bg-selected:var(--cui-purple-200);--cui-highlight-border:var(--cui-purple-300);--cui-highlight-border-hover:var(--cui-purple-600);--cui-highlight-text:var(--cui-purple-800);--cui-info:var(--cui-blue-500);--cui-info-hover:var(--cui-blue-600);--cui-info-active:var(--cui-blue-700);--cui-info-bg:var(--cui-blue-100);--cui-info-bg-hover:var(--cui-blue-200);--cui-info-bg-active:var(--cui-blue-300);--cui-info-bg-selected:var(--cui-blue-200);--cui-info-border:var(--cui-blue-300);--cui-info-border-hover:var(--cui-blue-600);--cui-info-text:var(--cui-blue-800);--cui-disabled-bg:var(--cui-gray-100);--cui-disabled-border:var(--cui-gray-300);--cui-disabled-text:var(--cui-gray-500);--cui-disabled-opacity:0.5;--cui-focus-ring:var(--cui-blue-600);--cui-focus-ring-width:2px;--cui-focus-ring-offset:2px;--cui-font-family-base:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;--cui-font-family-mono:'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace;--cui-font-size-xxs:10px;--cui-font-size-xs:12px;--cui-font-size-sm:14px;--cui-font-size-md:16px;--cui-font-size-lg:18px;--cui-font-size-xl:24px;--cui-font-size-xxl:32px;--cui-font-size-display-sm:40px;--cui-font-size-display-md:48px;--cui-font-size-display-lg:60px;--cui-font-weight-normal:400;--cui-font-weight-medium:500;--cui-font-weight-semibold:600;--cui-font-weight-bold:700;--cui-line-height-tight:1.2;--cui-line-height-base:1.4;--cui-line-height-loose:1.6;--cui-letter-spacing-tight:-0.02em;--cui-letter-spacing-base:0;--cui-letter-spacing-wide:0.04em;--cui-spacing-xxs:2px;--cui-spacing-xs:4px;--cui-spacing-sm:8px;--cui-spacing-md:12px;--cui-spacing-lg:20px;--cui-spacing-xl:32px;--cui-spacing-xxl:48px;--cui-radius-none:0;--cui-radius-xs:2px;--cui-radius-sm:4px;--cui-radius-md:6px;--cui-radius-lg:8px;--cui-radius-full:9999px;--cui-border-width-sm:1px;--cui-border-width-md:2px;--cui-border-width-lg:4px;--cui-control-height-sm:28px;--cui-control-height-md:36px;--cui-control-height-lg:44px;--cui-control-padding-sm:var(--cui-spacing-sm);--cui-control-padding-md:var(--cui-spacing-md);--cui-control-padding-lg:var(--cui-spacing-lg);--cui-shadow-sm:0 1px 2px var(--cui-shadow-color-100);--cui-shadow-md:0 2px 4px var(--cui-shadow-color-200);--cui-shadow-lg:0 4px 12px var(--cui-shadow-color-300);--cui-transition-fast:160ms ease;--cui-transition-base:240ms ease;--cui-transition-slow:320ms ease}:root[data-theme=dark]{--cui-blue-100:var(--cui-dark-blue-100);--cui-blue-200:var(--cui-dark-blue-200);--cui-blue-300:var(--cui-dark-blue-300);--cui-blue-400:var(--cui-dark-blue-400);--cui-blue-500:var(--cui-dark-blue-500);--cui-blue-600:var(--cui-dark-blue-600);--cui-blue-700:var(--cui-dark-blue-700);--cui-blue-800:var(--cui-dark-blue-800);--cui-blue-900:var(--cui-dark-blue-900);--cui-gray-50:var(--cui-dark-gray-50);--cui-gray-75:var(--cui-dark-gray-75);--cui-gray-100:var(--cui-dark-gray-100);--cui-gray-200:var(--cui-dark-gray-200);--cui-gray-300:var(--cui-dark-gray-300);--cui-gray-400:var(--cui-dark-gray-400);--cui-gray-500:var(--cui-dark-gray-500);--cui-gray-600:var(--cui-dark-gray-600);--cui-gray-700:var(--cui-dark-gray-700);--cui-gray-800:var(--cui-dark-gray-800);--cui-gray-900:var(--cui-dark-gray-900);--cui-green-100:var(--cui-dark-green-100);--cui-green-200:var(--cui-dark-green-200);--cui-green-300:var(--cui-dark-green-300);--cui-green-400:var(--cui-dark-green-400);--cui-green-500:var(--cui-dark-green-500);--cui-green-600:var(--cui-dark-green-600);--cui-green-700:var(--cui-dark-green-700);--cui-green-800:var(--cui-dark-green-800);--cui-green-900:var(--cui-dark-green-900);--cui-purple-100:var(--cui-dark-purple-100);--cui-purple-200:var(--cui-dark-purple-200);--cui-purple-300:var(--cui-dark-purple-300);--cui-purple-400:var(--cui-dark-purple-400);--cui-purple-500:var(--cui-dark-purple-500);--cui-purple-600:var(--cui-dark-purple-600);--cui-purple-700:var(--cui-dark-purple-700);--cui-purple-800:var(--cui-dark-purple-800);--cui-purple-900:var(--cui-dark-purple-900);--cui-red-100:var(--cui-dark-red-100);--cui-red-200:var(--cui-dark-red-200);--cui-red-300:var(--cui-dark-red-300);--cui-red-400:var(--cui-dark-red-400);--cui-red-500:var(--cui-dark-red-500);--cui-red-600:var(--cui-dark-red-600);--cui-red-700:var(--cui-dark-red-700);--cui-red-800:var(--cui-dark-red-800);--cui-red-900:var(--cui-dark-red-900);--cui-yellow-100:var(--cui-dark-yellow-100);--cui-yellow-200:var(--cui-dark-yellow-200);--cui-yellow-300:var(--cui-dark-yellow-300);--cui-yellow-400:var(--cui-dark-yellow-400);--cui-yellow-500:var(--cui-dark-yellow-500);--cui-yellow-600:var(--cui-dark-yellow-600);--cui-yellow-700:var(--cui-dark-yellow-700);--cui-yellow-800:var(--cui-dark-yellow-800);--cui-yellow-900:var(--cui-dark-yellow-900);--cui-shadow-color-100:var(--cui-dark-shadow-100);--cui-shadow-color-200:var(--cui-dark-shadow-200);--cui-shadow-color-300:var(--cui-dark-shadow-300);--cui-base-text-secondary:var(--cui-gray-600);--cui-shadow-sm:0 0 0 var(--cui-border-width-sm) var(--cui-gray-100), 0 1px 2px var(--cui-shadow-color-100);--cui-shadow-md:0 0 0 var(--cui-border-width-sm) var(--cui-gray-100), 0 2px 4px var(--cui-shadow-color-200);--cui-shadow-lg:0 0 0 var(--cui-border-width-sm) var(--cui-gray-100), 0 4px 12px var(--cui-shadow-color-300)}*,*::before,*::after{box-sizing:border-box}html{font-family:var(--cui-font-family-base);font-size:var(--cui-font-size-md);line-height:var(--cui-line-height-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;color:var(--cui-base-text-secondary);background:var(--cui-base-bg)}a{color:var(--cui-accent-text)}";
 
 /*
  Stencil Client Platform v4.43.5 | MIT Licensed | https://stenciljs.com
@@ -87,6 +87,7 @@ var registerHost = (hostElement, cmpMeta) => {
   hostElement.__stencil__getHostRef = () => ref;
   return ref;
 };
+var isMemberInElement = (elm, memberName) => memberName in elm;
 var consoleError = (e, el) => (0, console.error)(e, el);
 
 // src/client/client-load-module.ts
@@ -431,6 +432,14 @@ var isHost = (node) => node && node.$tag$ === Host;
 // src/runtime/parse-property-value.ts
 var parsePropertyValue = (propValue, propType, isFormAssociated) => {
   if (propValue != null && !isComplexType(propValue)) {
+    if (propType & 4 /* Boolean */) {
+      {
+        return propValue === "false" ? false : propValue === "" || !!propValue;
+      }
+    }
+    if (propType & 2 /* Number */) {
+      return typeof propValue === "string" ? parseFloat(propValue) : typeof propValue === "number" ? propValue : NaN;
+    }
     if (propType & 1 /* String */) {
       return String(propValue);
     }
@@ -447,6 +456,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
   if (oldValue === newValue) {
     return;
   }
+  let isProp = isMemberInElement(elm, memberName);
   memberName.toLowerCase();
   if (memberName === "class") {
     const classList = elm.classList;
@@ -456,6 +466,69 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
       classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
       classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
     }
+  } else if (memberName === "key") ; else if (memberName[0] === "a" && memberName.startsWith("attr:")) {
+    const propName = memberName.slice(5);
+    let attrName;
+    {
+      const hostRef = getHostRef(elm);
+      if (hostRef && hostRef.$cmpMeta$ && hostRef.$cmpMeta$.$members$) {
+        const memberMeta = hostRef.$cmpMeta$.$members$[propName];
+        if (memberMeta && memberMeta[1]) {
+          attrName = memberMeta[1];
+        }
+      }
+    }
+    if (!attrName) {
+      attrName = propName.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+    }
+    if (newValue == null || newValue === false) {
+      if (newValue !== false || elm.getAttribute(attrName) === "") {
+        elm.removeAttribute(attrName);
+      }
+    } else {
+      elm.setAttribute(attrName, newValue === true ? "" : newValue);
+    }
+    return;
+  } else if (memberName[0] === "p" && memberName.startsWith("prop:")) {
+    const propName = memberName.slice(5);
+    try {
+      elm[propName] = newValue;
+    } catch (e) {
+    }
+    return;
+  } else {
+    const isComplex = isComplexType(newValue);
+    if ((isProp || isComplex && newValue !== null) && !isSvg) {
+      try {
+        if (!elm.tagName.includes("-")) {
+          const n = newValue == null ? "" : newValue;
+          if (memberName === "list") {
+            isProp = false;
+          } else if (oldValue == null || elm[memberName] !== n) {
+            if (typeof elm.__lookupSetter__(memberName) === "function") {
+              elm[memberName] = n;
+            } else {
+              elm.setAttribute(memberName, n);
+            }
+          }
+        } else if (elm[memberName] !== newValue) {
+          elm[memberName] = newValue;
+        }
+      } catch (e) {
+      }
+    }
+    if (newValue == null || newValue === false) {
+      if (newValue !== false || elm.getAttribute(memberName) === "") {
+        {
+          elm.removeAttribute(memberName);
+        }
+      }
+    } else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex && elm.nodeType === 1 /* ElementNode */) {
+      newValue = newValue === true ? "" : newValue;
+      {
+        elm.setAttribute(memberName, newValue);
+      }
+    }
   }
 };
 var parseClassListRegex = /\s/;
@@ -481,7 +554,9 @@ var updateElement = (oldVnode, newVnode, isSvgMode2, isInitialRender) => {
           elm,
           memberName,
           oldVnodeAttrs[memberName],
-          void 0);
+          void 0,
+          isSvgMode2,
+          newVnode.$flags$);
       }
     }
   }
@@ -490,7 +565,9 @@ var updateElement = (oldVnode, newVnode, isSvgMode2, isInitialRender) => {
       elm,
       memberName,
       oldVnodeAttrs[memberName],
-      newVnodeAttrs[memberName]);
+      newVnodeAttrs[memberName],
+      isSvgMode2,
+      newVnode.$flags$);
   }
 };
 function sortedAttrNames(attrNames) {
@@ -503,6 +580,7 @@ function sortedAttrNames(attrNames) {
   );
 }
 var hostTagName;
+var isSvgMode = false;
 var createElm = (oldParentVNode, newParentVNode, childIndex) => {
   const newVNode2 = newParentVNode.$children$[childIndex];
   let i2 = 0;
@@ -518,7 +596,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
       newVNode2.$tag$
     );
     {
-      updateElement(null, newVNode2);
+      updateElement(null, newVNode2, isSvgMode);
     }
     if (newVNode2.$children$) {
       const appendTarget = newVNode2.$tag$ === "template" ? elm.content : elm;
@@ -667,7 +745,7 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const text = newVNode2.$text$;
   if (text == null) {
     {
-      updateElement(oldVNode, newVNode2);
+      updateElement(oldVNode, newVNode2, isSvgMode);
     }
     if (oldChildren !== null && newChildren !== null) {
       updateChildren(elm, oldChildren, newVNode2, newChildren, isInitialRender);

package/dist/cjs/loader.cjs.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-Rxdz0vyq.js');
+var index = require('./index-CJFDVa2g.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["cui-tag.cjs",[[1,"cui-tag",{"label":[1],"variant":[1],"size":[1]}]]]], options);
+  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);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -1,5 +1,6 @@
 {
   "entries": [
+    "components/cui-progress/cui-progress.js",
     "components/cui-tag/cui-tag.js"
   ],
   "mixins": [],

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-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;
+  }
+}