@antadesign/anta 0.1.1-dev.1 → 0.1.1-dev.2

package/dist/elements/a-icon.shapes.js

@@ -0,0 +1,179 @@
+const ICON_SHAPES = [
+  "arrow-left-to-line",
+  "arrow-left",
+  "arrow-narrow-down",
+  "arrow-narrow-up-down",
+  "arrow-narrow-up",
+  "arrow-right",
+  "arrow-top-right",
+  "asterisk",
+  "book-open",
+  "braces",
+  "bug",
+  "calendar",
+  "case-sensitive",
+  "chat",
+  "check",
+  "chevron-down",
+  "chevron-left",
+  "chevron-right",
+  "chevron-up",
+  "chevrons-right",
+  "circle-check",
+  "circle-large",
+  "circle",
+  "click",
+  "clock",
+  "cloud-upload",
+  "copy",
+  "corner-down-right",
+  "cube",
+  "dots-vertical",
+  "download",
+  "edit",
+  "education-disk",
+  "external-link",
+  "file-down",
+  "file",
+  "filter",
+  "folder-close",
+  "folder-open",
+  "folder-tree",
+  "github-logo",
+  "gitlab-logo",
+  "hat-glasses",
+  "heart-handshake",
+  "help-disk",
+  "history-tree",
+  "history",
+  "home",
+  "hourglass",
+  "info",
+  "jira-logo",
+  "linear-logo",
+  "link",
+  "list-detail-view",
+  "maximize",
+  "megaphone",
+  "menu",
+  "minimize",
+  "minus",
+  "more",
+  "move-horizontal",
+  "not-equal",
+  "play",
+  "plus",
+  "presentation",
+  "refresh",
+  "regex",
+  "repeat",
+  "rss",
+  "runs-history",
+  "scroll-text",
+  "search-check",
+  "search",
+  "send",
+  "sparkles",
+  "swatch-book",
+  "text-highlight",
+  "text-initial",
+  "timer",
+  "trash",
+  "trello-logo",
+  "view",
+  "warning-triangle",
+  "webhook",
+  "workflow",
+  "x"
+];
+const ICON_SYNONYMS = {
+  "swatch-book": ["palette", "color", "swatch", "paint", "design"],
+  "hat-glasses": ["accessibility", "vision", "disguise", "person"],
+  "heart-handshake": ["credits", "thanks", "agreement", "deal", "partnership"],
+  "hourglass": ["progress", "time", "wait", "loading", "timer"],
+  "text-initial": ["text", "typography", "letter", "a"],
+  "chevron-down": ["arrow", "expand", "open", "down"],
+  "chevron-up": ["arrow", "collapse", "close", "up"],
+  "chevron-left": ["arrow", "back", "previous"],
+  "chevron-right": ["arrow", "forward", "next"],
+  "chevrons-right": ["skip", "fast forward"],
+  "arrow-narrow-down": ["download", "fall", "down"],
+  "arrow-narrow-up": ["upload", "rise", "up"],
+  "arrow-left": ["back", "previous", "prev"],
+  "arrow-right": ["forward", "next"],
+  "arrow-narrow-up-down": ["sort", "swap", "transfer", "reorder"],
+  "arrow-top-right": ["external", "open", "leave"],
+  "arrow-left-to-line": ["dock", "snap", "align"],
+  "move-horizontal": ["resize", "swap", "horizontal"],
+  "external-link": ["open", "link", "share", "outbound"],
+  "check": ["tick", "ok", "done", "confirm", "approve"],
+  "circle-check": ["success", "ok", "done"],
+  "x": ["close", "cancel", "dismiss", "remove", "no"],
+  "plus": ["add", "new", "create"],
+  "minus": ["remove", "subtract"],
+  "menu": ["hamburger", "list", "more"],
+  "dots-vertical": ["more", "kebab", "options"],
+  "search": ["find", "magnify", "lookup"],
+  "search-check": ["found", "validated"],
+  "copy": ["duplicate", "clone"],
+  "trash": ["delete", "remove", "bin"],
+  "edit": ["pencil", "modify", "rename"],
+  "view": ["eye", "show", "display", "preview"],
+  "click": ["tap", "press", "touch"],
+  "send": ["submit", "share", "deliver"],
+  "play": ["start", "run", "execute"],
+  "refresh": ["reload", "sync", "update"],
+  "regex": ["pattern", "match"],
+  "repeat": ["loop", "retry", "rerun"],
+  "info": ["information", "about", "i"],
+  "warning-triangle": ["alert", "danger", "caution"],
+  "bug": ["defect", "issue", "error"],
+  "asterisk": ["star", "wildcard"],
+  "braces": ["code", "brackets", "json"],
+  "case-sensitive": ["aA", "capitalize", "case"],
+  "text-highlight": ["mark", "highlight"],
+  "list-detail-view": ["list", "items"],
+  "folder-open": ["directory", "browse"],
+  "folder-close": ["directory"],
+  "folder-tree": ["hierarchy", "structure", "tree"],
+  "file": ["document", "page"],
+  "file-down": ["download", "save"],
+  "calendar": ["date", "schedule"],
+  "clock": ["time"],
+  "timer": ["stopwatch", "countdown", "time"],
+  "history": ["log", "past"],
+  "history-tree": ["log", "past"],
+  "runs-history": ["log", "past"],
+  "github-logo": ["github", "git", "repo"],
+  "gitlab-logo": ["gitlab", "git", "repo"],
+  "trello-logo": ["trello", "board", "kanban"],
+  "jira-logo": ["jira", "ticket", "issue"],
+  "linear-logo": ["linear", "ticket", "issue"],
+  "chat": ["message", "comment", "discuss"],
+  "presentation": ["slides", "deck"],
+  "education-disk": ["learn", "school", "academic"],
+  "book-open": ["read", "docs", "documentation"],
+  "help-disk": ["question", "faq", "support", "help"],
+  "sparkles": ["ai", "magic", "generate"],
+  "cube": ["box", "package"],
+  "circle": ["dot", "point"],
+  "circle-large": ["dot", "marker"],
+  "not-equal": ["neq", "different"],
+  "corner-down-right": ["branch", "indent", "return"],
+  "rss": ["feed", "subscribe"],
+  "scroll-text": ["log", "output", "console"],
+  "workflow": ["pipeline", "process", "flow"],
+  "webhook": ["integration", "hook"],
+  "megaphone": ["announcement", "broadcast"],
+  "maximize": ["fullscreen", "expand"],
+  "minimize": ["collapse", "shrink"],
+  "filter": ["sort", "narrow"],
+  "download": ["save", "import"],
+  "cloud-upload": ["save", "sync", "upload", "send", "export"],
+  "link": ["url", "href", "anchor"],
+  "more": ["options", "extra"]
+};
+export {
+  ICON_SHAPES,
+  ICON_SYNONYMS
+};

package/dist/elements/a-progress.css

@@ -3,7 +3,7 @@ a-progress {
   --progress-border-color: hsla(300, 6%, 87%, 1);
   --progress-indicator-bg: hsla(300, 7%, 92%, 1);
   --progress-indicator-edge: linear-gradient(90deg, hsla(300, 6%, 87%, 0) 0%, hsla(300, 6%, 87%, 1) 100%);
-  --progress-label-color: var(--fg-1);
+  --progress-label-color: var(--text-1);
 
   display: block;
   container-type: inline-size;
@@ -26,7 +26,7 @@ a-progress[tone="info"] {
   --progress-border-color: #B8DCF6;
   --progress-indicator-bg: #DBEDFA;
   --progress-indicator-edge: linear-gradient(90deg, hsla(205, 79%, 85%, 0) 0%, hsla(205, 79%, 85%, 1) 100%);
-  --progress-label-color: var(--fg-1-blue);
+  --progress-label-color: var(--text-1-info);
 }
 
 .dark a-progress[tone="info"] {
@@ -55,11 +55,11 @@ a-progress-number {
 a-progress-text {
   flex: 1 1 auto;
   min-width: 0;
-  color: var(--fg-2);
+  color: var(--text-2);
 }
 
 a-progress-hint {
   flex-shrink: 0;
   margin-left: auto;
-  color: var(--fg-3);
+  color: var(--text-3);
 }

package/dist/elements/a-progress.d.ts

@@ -1,4 +1,5 @@
-export declare class AProgressElement extends HTMLElement {
+import { HTMLElementBase } from '../anta_helpers';
+export declare class AProgressElement extends HTMLElementBase {
     static observedAttributes: string[];
     indicator: HTMLDivElement;
     constructor();

package/dist/elements/a-progress.js

@@ -1,4 +1,5 @@
-class AProgressElement extends HTMLElement {
+import { HTMLElementBase } from "../anta_helpers";
+class AProgressElement extends HTMLElementBase {
   static observedAttributes = ["value", "max", "tone"];
   indicator;
   constructor() {
@@ -54,6 +55,7 @@ class AProgressElement extends HTMLElement {
   }
 }
 function register_a_progress() {
+  if (typeof customElements === "undefined") return;
   if (!customElements.get("a-progress")) {
     customElements.define("a-progress", AProgressElement);
   }

package/dist/elements/a-text.css

@@ -0,0 +1,75 @@
+a-text {
+  --text-color: var(--text-1);
+  --text-link-color: var(--link-color);
+  --text-link-hover: var(--link-color-hover);
+
+  display: block;
+  color: var(--text-color);
+}
+
+a-text[inline] {
+  display: inline-block;
+}
+
+/* Truncation, the expandable mask, the chevron button, and the
+   expanded-state toggle live in shadow DOM — see
+   src/elements/a-text.ts. The one external concern is `min-width: 0`:
+   the host needs it to shrink inside flex/grid parents so the inner
+   clamp can actually clip content. */
+a-text[truncate] {
+  min-width: 0;
+}
+
+/* Neutral priority overrides. Levels 1 & 2 keep the brand link color;
+   levels 3-5 mute the link to currentColor and step the hover up by one
+   level (3→2, 4→3, 5→4). */
+a-text[priority="secondary"]  { --text-color: var(--text-2); }
+a-text[priority="tertiary"]   { --text-color: var(--text-3); --text-link-color: currentColor; --text-link-hover: var(--text-2); }
+a-text[priority="quaternary"] { --text-color: var(--text-4); --text-link-color: currentColor; --text-link-hover: var(--text-3); }
+a-text[priority="quinary"]    { --text-color: var(--text-5); --text-link-color: currentColor; --text-link-hover: var(--text-4); }
+
+/* Tinted — text color uses --text-{N}-{tone} tokens; links are always
+   muted (currentColor) and hover steps up one level of the same tint.
+   Level 1 has no level above; hover keeps the color, only the underline
+   alpha changes. */
+a-text[tone="brand"]                              { --text-color: var(--text-1-brand); --text-link-color: currentColor; --text-link-hover: var(--text-1-brand); }
+a-text[tone="brand"][priority="secondary"]        { --text-color: var(--text-2-brand); --text-link-hover: var(--text-1-brand); }
+a-text[tone="brand"][priority="tertiary"]         { --text-color: var(--text-3-brand); --text-link-hover: var(--text-2-brand); }
+a-text[tone="brand"][priority="quaternary"]       { --text-color: var(--text-4-brand); --text-link-hover: var(--text-3-brand); }
+a-text[tone="brand"][priority="quinary"]          { --text-color: var(--text-5-brand); --text-link-hover: var(--text-4-brand); }
+
+a-text[tone="success"]                            { --text-color: var(--text-1-success); --text-link-color: currentColor; --text-link-hover: var(--text-1-success); }
+a-text[tone="success"][priority="secondary"]      { --text-color: var(--text-2-success); --text-link-hover: var(--text-1-success); }
+a-text[tone="success"][priority="tertiary"]       { --text-color: var(--text-3-success); --text-link-hover: var(--text-2-success); }
+a-text[tone="success"][priority="quaternary"]     { --text-color: var(--text-4-success); --text-link-hover: var(--text-3-success); }
+a-text[tone="success"][priority="quinary"]        { --text-color: var(--text-5-success); --text-link-hover: var(--text-4-success); }
+
+a-text[tone="critical"]                           { --text-color: var(--text-1-critical); --text-link-color: currentColor; --text-link-hover: var(--text-1-critical); }
+a-text[tone="critical"][priority="secondary"]     { --text-color: var(--text-2-critical); --text-link-hover: var(--text-1-critical); }
+a-text[tone="critical"][priority="tertiary"]      { --text-color: var(--text-3-critical); --text-link-hover: var(--text-2-critical); }
+a-text[tone="critical"][priority="quaternary"]    { --text-color: var(--text-4-critical); --text-link-hover: var(--text-3-critical); }
+a-text[tone="critical"][priority="quinary"]       { --text-color: var(--text-5-critical); --text-link-hover: var(--text-4-critical); }
+
+a-text[tone="warning"]                            { --text-color: var(--text-1-warning); --text-link-color: currentColor; --text-link-hover: var(--text-1-warning); }
+a-text[tone="warning"][priority="secondary"]      { --text-color: var(--text-2-warning); --text-link-hover: var(--text-1-warning); }
+a-text[tone="warning"][priority="tertiary"]       { --text-color: var(--text-3-warning); --text-link-hover: var(--text-2-warning); }
+a-text[tone="warning"][priority="quaternary"]     { --text-color: var(--text-4-warning); --text-link-hover: var(--text-3-warning); }
+a-text[tone="warning"][priority="quinary"]        { --text-color: var(--text-5-warning); --text-link-hover: var(--text-4-warning); }
+
+a-text[tone="info"]                               { --text-color: var(--text-1-info); --text-link-color: currentColor; --text-link-hover: var(--text-1-info); }
+a-text[tone="info"][priority="secondary"]         { --text-color: var(--text-2-info); --text-link-hover: var(--text-1-info); }
+a-text[tone="info"][priority="tertiary"]          { --text-color: var(--text-3-info); --text-link-hover: var(--text-2-info); }
+a-text[tone="info"][priority="quaternary"]        { --text-color: var(--text-4-info); --text-link-hover: var(--text-3-info); }
+a-text[tone="info"][priority="quinary"]           { --text-color: var(--text-5-info); --text-link-hover: var(--text-4-info); }
+
+/* Link colors layered on top of anta's global `a` defaults — only
+   overriding what the priority/tone cascade dictates (color and the
+   one-step-up hover color). Underline / thickness / offset / alpha
+   are inherited from the global rule in anta_global_tokens.css.
+   On hover the underline color is repeated so it tracks the priority
+   color rather than the global --link-color-hover. */
+a-text a, a-text a:link, a-text a:visited { color: var(--text-link-color); }
+a-text a:hover {
+  color: var(--text-link-hover);
+  text-decoration-color: var(--text-link-hover);
+}

package/dist/elements/a-text.d.ts

@@ -0,0 +1,10 @@
+import { HTMLElementBase } from '../anta_helpers';
+export declare class ATextElement extends HTMLElementBase {
+    static observedAttributes: string[];
+    private slotEl;
+    private expandBtn;
+    constructor();
+    attributeChangedCallback(): void;
+    private handleExpand;
+}
+export declare function register_a_text(): void;

package/dist/elements/a-text.js

@@ -0,0 +1,143 @@
+import { HTMLElementBase } from "../anta_helpers";
+const SHADOW_STYLE = `
+  :host {
+    display: block;
+    position: relative;
+  }
+  :host([inline]) {
+    display: inline-block;
+  }
+
+  /* Default: slot disappears from layout so slotted nodes flow as
+     direct children of the host. Truncation rules below give the slot
+     a real display so it becomes the wrapper that holds the clamp. */
+  slot {
+    display: contents;
+  }
+
+  :host([truncate]) slot {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--line-clamp, 1);
+    overflow: hidden;
+  }
+
+  /* Expandable \u2014 vertical fade for multi-line. */
+  :host([truncate][expandable]) slot:not(.expanded) {
+    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 2em), transparent 97%);
+            mask-image: linear-gradient(to bottom, black calc(100% - 2em), transparent 97%);
+  }
+
+  /* Expandable \u2014 horizontal right-edge fade for single-line. */
+  :host([truncate="1"][expandable]) slot:not(.expanded) {
+    -webkit-mask-image: linear-gradient(to right, black calc(100% - 7ch), transparent 97%);
+            mask-image: linear-gradient(to right, black calc(100% - 7ch), transparent 97%);
+  }
+
+  /* Expanded \u2014 drop truncation entirely. */
+  :host([truncate]) slot.expanded {
+    display: block;
+    -webkit-line-clamp: unset;
+    overflow: visible;
+  }
+
+  /* Expand button. The whole button is the click target; the chevron
+     icon is positioned absolutely in the button's bottom-right corner. */
+  .expand-btn {
+    appearance: none;
+    background: transparent;
+    border: none;
+    margin: 0;
+    padding: 0;
+    color: var(--text-3);
+    cursor: pointer;
+    font: inherit;
+    display: none;
+    position: absolute;
+    z-index: 1;
+    opacity: 0;
+    transition: opacity 150ms ease-out, color 150ms ease-out;
+  }
+  .expand-btn:hover {
+    color: var(--text-1);
+  }
+  .expand-btn::before {
+    content: '';
+    position: absolute;
+    right: -1px;
+    bottom: -1px;
+    width: 14px;
+    height: 14px;
+    background-color: currentColor;
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
+            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
+    -webkit-mask-position: center;
+            mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+    -webkit-mask-size: contain;
+            mask-size: contain;
+  }
+
+  /* Multi-line \u2014 full-width strip pinned to the bottom of the host. */
+  :host([truncate][expandable]) .expand-btn:not(.hidden) {
+    display: block;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 1.5em;
+  }
+
+  /* Single-line \u2014 narrow region pinned to the right side. */
+  :host([truncate="1"][expandable]) .expand-btn:not(.hidden) {
+    left: auto;
+    top: 0;
+    bottom: 0;
+    width: 3em;
+  }
+
+  :host([truncate][expandable]:hover) .expand-btn:not(.hidden),
+  :host([truncate][expandable]:focus-within) .expand-btn:not(.hidden) {
+    opacity: 1;
+  }
+`;
+class ATextElement extends HTMLElementBase {
+  static observedAttributes = ["expandable", "truncate"];
+  slotEl;
+  expandBtn;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = SHADOW_STYLE;
+    this.slotEl = document.createElement("slot");
+    this.expandBtn = document.createElement("button");
+    this.expandBtn.className = "expand-btn";
+    this.expandBtn.type = "button";
+    this.expandBtn.setAttribute("aria-label", "Show more");
+    this.expandBtn.setAttribute("aria-expanded", "false");
+    this.expandBtn.addEventListener("click", this.handleExpand);
+    shadow.append(style, this.slotEl, this.expandBtn);
+  }
+  attributeChangedCallback() {
+    this.slotEl.classList.remove("expanded");
+    this.expandBtn.classList.remove("hidden");
+    this.expandBtn.setAttribute("aria-expanded", "false");
+  }
+  handleExpand = () => {
+    if (this.slotEl.classList.contains("expanded")) return;
+    this.slotEl.classList.add("expanded");
+    this.expandBtn.classList.add("hidden");
+    this.expandBtn.setAttribute("aria-expanded", "true");
+  };
+}
+function register_a_text() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-text")) {
+    customElements.define("a-text", ATextElement);
+  }
+}
+export {
+  ATextElement,
+  register_a_text
+};

package/dist/elements/index.d.ts

@@ -1,2 +1,7 @@
 import './a-progress.css';
+import './a-text.css';
+import './a-icon.css';
+import './a-icon.shapes.css';
 export { AProgressElement, register_a_progress } from './a-progress';
+export { ATextElement, register_a_text } from './a-text';
+export { AIconElement, register_a_icon } from './a-icon';

package/dist/elements/index.js

@@ -1,10 +1,23 @@
 import { register_a_progress } from "./a-progress";
+import { register_a_text } from "./a-text";
+import { register_a_icon } from "./a-icon";
 import "./a-progress.css";
+import "./a-text.css";
+import "./a-icon.css";
+import "./a-icon.shapes.css";
 import { AProgressElement, register_a_progress as register_a_progress2 } from "./a-progress";
+import { ATextElement, register_a_text as register_a_text2 } from "./a-text";
+import { AIconElement, register_a_icon as register_a_icon2 } from "./a-icon";
 if (typeof customElements !== "undefined") {
   register_a_progress();
+  register_a_text();
+  register_a_icon();
 }
 export {
+  AIconElement,
   AProgressElement,
-  register_a_progress2 as register_a_progress
+  ATextElement,
+  register_a_icon2 as register_a_icon,
+  register_a_progress2 as register_a_progress,
+  register_a_text2 as register_a_text
 };

package/dist/general_types.d.ts

@@ -1,16 +1,90 @@
+/** Common props for JSX component wrappers. */
 export interface BaseProps {
+    /** CSS class name. Merged with any internal classes by the component. */
     className?: string;
+    /** Inline styles applied to the root element. */
     style?: React.CSSProperties;
+    /** Child elements. When provided, replaces the component's default label/content. */
     children?: React.ReactNode;
 }
+/** Attributes for intrinsic custom elements (`<a-*>` tags) in JSX. */
 export interface BaseAttributes {
+    /** HTML `class` attribute (standard DOM). */
     class?: string;
+    /** React/Preact-style class name. Alias for `class`. */
     className?: string;
+    /** Inline styles applied to the element. */
     style?: React.CSSProperties;
     children?: React.ReactNode;
+    /** Tab order. Set to `0` to make the element keyboard-focusable. */
+    tabIndex?: number;
+    /** ARIA role override. */
+    role?: string;
+    /** Keydown handler — used for keyboard-driven interactions. */
+    onKeyDown?: (e: any) => void;
+    /** Click handler — used for mouse / tap activation. */
+    onClick?: (e: any) => void;
 }
+/**
+ * Attributes for the `<a-progress>` custom element.
+ *
+ * These are the low-level web component attributes. For the JSX wrapper with
+ * typed props and computed labels, use `Progress` from `@antadesign/anta`.
+ */
 export interface AProgressAttributes extends BaseAttributes {
+    /** Current progress value. */
     value?: number | string;
+    /** Maximum value. Defaults to 100. */
     max?: number | string;
+    /** Color variant. `'neutral'` is the default gray; `'info'` is blue. */
     tone?: 'neutral' | 'info';
+    /** ARIA role — the JSX wrapper sets this to `'progressbar'`. */
+    role?: string;
+    /** ARIA value-now (current). */
+    'aria-valuenow'?: number | string;
+    /** ARIA value-max. */
+    'aria-valuemax'?: number | string;
+    /** ARIA value-min (defaults to 0). */
+    'aria-valuemin'?: number | string;
+    /** ARIA accessible name. */
+    'aria-label'?: string;
+}
+/**
+ * Attributes for the `<a-text>` custom element.
+ *
+ * Low-level web component attributes; for the JSX wrapper use `Text`
+ * from `@antadesign/anta`.
+ */
+export interface ATextAttributes extends BaseAttributes {
+    /** Visual priority. Maps to text-1..text-5. */
+    priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
+    /** Color tint. Applies the matching `--text-{N}-{tone}` palette. */
+    tone?: 'brand' | 'success' | 'critical' | 'warning' | 'info';
+    /** Render as inline-block instead of the default block. */
+    inline?: boolean | string;
+    /** Truncate to N lines with a trailing ellipsis. The attribute value
+     *  carries the line count (e.g. `"1"`, `"3"`); the count is also
+     *  available via the `--line-clamp` CSS custom property set inline. */
+    truncate?: boolean | string | number;
+    /** Marks the host as expandable when paired with `truncate`. Adds
+     *  the fade-out mask; the JSX wrapper renders the chevron and owns
+     *  the click/keyboard expansion logic. */
+    expandable?: boolean | string;
+    /** ARIA disclosure state, mirrors the JSX wrapper's `expanded` flag. */
+    'aria-expanded'?: boolean | 'true' | 'false';
+}
+/**
+ * Attributes for the `<a-icon>` custom element. The `shape` attribute
+ * value is typed as `string` here so the element accepts any consumer's
+ * generated shapes. The JSX wrapper (`Icon`) narrows it to `IconShape`.
+ */
+export interface AIconAttributes extends BaseAttributes {
+    /** Which icon to render. */
+    shape?: string;
+    /** ARIA role — the JSX wrapper sets `'img'` when a label is provided. */
+    role?: string;
+    /** ARIA accessible name when the icon carries meaning. */
+    'aria-label'?: string;
+    /** Hides decorative icons from screen readers. */
+    'aria-hidden'?: 'true' | 'false' | boolean;
 }