@alleninstitute/cortex-ui 0.1.0 → 0.3.0

package/dist/esm/loader.js

@@ -1,10 +1,10 @@
-import { g as globalScripts, b as bootstrapLazy } from './index-C70YK15K.js';
-export { s as setNonce } from './index-C70YK15K.js';
+import { g as globalScripts, b as bootstrapLazy } from './index-BZmInLSX.js';
+export { s as setNonce } from './index-BZmInLSX.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   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);
 };
 
 export { defineCustomElements };

package/dist/fonts.css

@@ -0,0 +1,186 @@
+/* ============================================
+ * Allen Institute web fonts
+ * ============================================
+ *
+ * `@font-face` is document-scoped, so these rules cannot live in `global.scss`:
+ * Stencil only ever adopts the global style into a component's shadow root, and font
+ * faces declared inside a shadow tree are ignored. Loading this file at the document
+ * level registers the faces once for the whole page, shadow DOM included.
+ *
+ * Consumers import it from the package root:
+ *
+ *     import '@alleninstitute/cortex-ui/fonts.css';
+ *
+ * The `url()` paths are relative to this file, and the build copies this stylesheet and
+ * the `fonts/` directory beside it into `dist/` keeping that layout (see the `copy` tasks
+ * in stencil.config.ts), so the same paths resolve in this repo, through a consumer's
+ * bundler, and straight from a CDN.
+ *
+ * Only WOFF2 is shipped: every browser that can run these components supports it, and a
+ * WOFF fallback would double the payload for browsers nobody is targeting.
+ *
+ * The families are exposed as `--cui-font-family-base` (text) and
+ * `--cui-font-family-headline`; prefer those tokens over naming a family directly.
+ */
+
+/* Allen Institute Text */
+@font-face {
+    font-family: 'Allen Institute Text';
+    src: url('./fonts/AllenInstituteText-Light.woff2') format('woff2');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Allen Institute Text';
+    src: url('./fonts/AllenInstituteText-LightItalic.woff2') format('woff2');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Allen Institute Text';
+    src: url('./fonts/AllenInstituteText-Regular.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Allen Institute Text';
+    src: url('./fonts/AllenInstituteText-Italic.woff2') format('woff2');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Allen Institute Text';
+    src: url('./fonts/AllenInstituteText-Medium.woff2') format('woff2');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Allen Institute Text';
+    src: url('./fonts/AllenInstituteText-MediumItalic.woff2') format('woff2');
+    font-weight: 500;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Allen Institute Text';
+    src: url('./fonts/AllenInstituteText-Semibold.woff2') format('woff2');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Allen Institute Text';
+    src: url('./fonts/AllenInstituteText-SemiboldItalic.woff2') format('woff2');
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Allen Institute Text';
+    src: url('./fonts/AllenInstituteText-Bold.woff2') format('woff2');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Allen Institute Text';
+    src: url('./fonts/AllenInstituteText-BoldItalic.woff2') format('woff2');
+    font-weight: 700;
+    font-style: italic;
+    font-display: swap;
+}
+
+/* Allen Institute Headline */
+@font-face {
+    font-family: 'Allen Institute Headline';
+    src: url('./fonts/AllenInstituteHeadline-Light.woff2') format('woff2');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Allen Institute Headline';
+    src: url('./fonts/AllenInstituteHeadline-LightItalic.woff2') format('woff2');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Allen Institute Headline';
+    src: url('./fonts/AllenInstituteHeadline-Regular.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Allen Institute Headline';
+    src: url('./fonts/AllenInstituteHeadline-Italic.woff2') format('woff2');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Allen Institute Headline';
+    src: url('./fonts/AllenInstituteHeadline-Medium.woff2') format('woff2');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Allen Institute Headline';
+    src: url('./fonts/AllenInstituteHeadline-MediumItalic.woff2') format('woff2');
+    font-weight: 500;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Allen Institute Headline';
+    src: url('./fonts/AllenInstituteHeadline-Semibold.woff2') format('woff2');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Allen Institute Headline';
+    src: url('./fonts/AllenInstituteHeadline-SemiboldItalic.woff2') format('woff2');
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Allen Institute Headline';
+    src: url('./fonts/AllenInstituteHeadline-Bold.woff2') format('woff2');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Allen Institute Headline';
+    src: url('./fonts/AllenInstituteHeadline-BoldItalic.woff2') format('woff2');
+    font-weight: 700;
+    font-style: italic;
+    font-display: swap;
+}

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

@@ -0,0 +1,38 @@
+/**
+ * A Divider drawing a rule between sections of content, or between items in a row.
+ *
+ * @example
+ * <cui-divider></cui-divider>
+ *
+ * @example
+ * <cui-divider orientation="vertical" spacing="small"></cui-divider>
+ *
+ * @example
+ * <cui-divider variant="accent" importance="secondary"></cui-divider>
+ *
+ * @part base - The rule itself, for consumer-side style overrides.
+ */
+export declare class CuiDivider {
+    /**
+     * Which way the rule runs. A vertical divider stretches to the height of the flex row
+     * it sits in.
+     */
+    orientation: 'horizontal' | 'vertical';
+    /** Space reserved on either side of the rule, along the axis it separates. */
+    spacing: 'none' | 'small' | 'medium' | 'large';
+    /**
+     * 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.
+     */
+    variant: 'base' | 'accent' | 'highlight' | 'info' | 'negative' | 'neutral' | 'positive' | 'warning';
+    /**
+     * 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.
+     */
+    importance: 'primary' | 'secondary';
+    render(): any;
+}

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

@@ -0,0 +1,76 @@
+/**
+ * An Icon component that renders a Font Awesome glyph with cortex-ui's semantic colours and sizes.
+ *
+ * Font Awesome itself is **not** bundled — the consuming application loads a Font Awesome
+ * stylesheet (the free set, or a licensed pro build) and `icon` takes the raw Font Awesome
+ * classes. Any Font Awesome utility class can be passed along in the same string, so
+ * `icon="fa-solid fa-spinner fa-spin"` works without this component knowing about `fa-spin`.
+ *
+ * Loading that stylesheet is the human application owner's responsibility, never an agent's: an AI
+ * agent writing `cui-icon` markup must not install a Font Awesome package, add the stylesheet to
+ * the page, or invent a Pro Kit URL — it should write the markup and tell the person their page
+ * needs Font Awesome. Icons rendering as empty boxes in a page with no Font Awesome is the
+ * expected result, not a bug to code around.
+ *
+ * Icons are decorative by default and hidden from assistive technology. Set `label` only when the
+ * icon carries meaning that the surrounding text does not already convey.
+ *
+ * @example
+ * <cui-icon icon="fa-solid fa-user"></cui-icon>
+ *
+ * @example
+ * <cui-icon icon="fa-solid fa-triangle-exclamation" variant="warning" size="l"></cui-icon>
+ *
+ * @example
+ * <cui-icon icon="fa-solid fa-trash" label="Delete item"></cui-icon>
+ *
+ * @slot - The glyph element. This component creates and owns it, so do not place your own
+ * content in `cui-icon` — anything else you slot here is hidden.
+ * @part base - The root element, for consumer-side style overrides.
+ * @cssprop --cui-icon-color - Overrides the colour chosen by `variant` and `importance`. Set it to
+ * `currentColor` to make the icon follow the text colour of whatever surrounds it.
+ * @cssprop --cui-icon-size - Overrides the size chosen by `size`.
+ */
+export declare class CuiIcon {
+    private el;
+    /**
+     * The Font Awesome classes naming the icon, e.g. `fa-solid fa-user`. The style is part of the
+     * string, so `fa-regular`, `fa-brands` and licensed pro styles like `fa-duotone` all work.
+     * Required — there is no sensible fallback glyph.
+     */
+    icon: string;
+    /**
+     * 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.
+     */
+    variant: 'accent' | 'base' | 'highlight' | 'info' | 'negative' | 'neutral' | 'positive' | 'warning';
+    /**
+     * 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.
+     */
+    importance: 'primary' | 'secondary';
+    /** Size of the glyph, from the font-size token scale. */
+    size: 'display-l' | 'display-m' | 'display-s' | 'l' | 'm' | 's' | 'xl' | 'xs' | 'xxl' | 'xxs';
+    /**
+     * Accessible name, for an icon that carries meaning on its own — an icon-only button, or a
+     * status glyph with no adjacent text. Leave it unset for a decorative icon beside text, which
+     * is the common case; the icon is then hidden from assistive technology so screen readers do
+     * not announce it twice.
+     */
+    label?: string;
+    connectedCallback(): void;
+    onIconChange(): void;
+    onLabelChange(): void;
+    /**
+     * 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).
+     */
+    private syncGlyph;
+    /** An icon is either named or hidden — never both, and never named with an empty string. */
+    private syncAria;
+    render(): any;
+}

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

@@ -0,0 +1,40 @@
+/**
+ * A Progress component showing how far along a task is, as a bar with an accessible value.
+ *
+ * @example
+ * <cui-progress label="Uploading files" value="40" show-value="true"></cui-progress>
+ *
+ * @example
+ * <cui-progress label="Loading results" indeterminate="true"></cui-progress>
+ *
+ * @part base - The root element, for consumer-side style overrides.
+ * @part bar - The native progress element: the track, and the fill that grows across it.
+ * @part value - The percentage text rendered when `show-value` is set.
+ * @cssprop --cui-progress-track-color - Colour of the unfilled track.
+ * @cssprop --cui-progress-indicator-color - Colour of the filled portion, for status bars in another intent.
+ */
+export declare class CuiProgress {
+    /**
+     * Accessible name for the bar, describing what is in progress ("Uploading files").
+     * Required — a progress bar with no name fails the accessibility gate.
+     */
+    label: string;
+    /** How much of the task is done, clamped to the range `0`–`max`. */
+    value: number;
+    /** The value that counts as complete. */
+    max: number;
+    /**
+     * 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.
+     */
+    indeterminate: boolean;
+    /** Thickness of the bar. */
+    size: 'small' | 'medium' | 'large';
+    /** Renders the completed percentage as text beside the bar. Ignored when indeterminate. */
+    showValue: boolean;
+    /** `max` is only meaningful above zero; anything else falls back to a percentage scale. */
+    private get resolvedMax();
+    private get clampedValue();
+    private get percent();
+    render(): any;
+}

package/dist/types/components/cui-tag/cui-tag.d.ts

@@ -6,7 +6,7 @@
  */
 export declare class CuiTag {
     label: string;
-    variant: 'default' | 'highlight' | 'info' | 'negative' | 'neutral' | 'positive' | 'warning';
+    variant: 'accent' | 'highlight' | 'info' | 'negative' | 'neutral' | 'positive' | 'warning';
     size: 'small' | 'medium';
     render(): any;
 }