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

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

@@ -0,0 +1,184 @@
+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",
+  "moon",
+  "more",
+  "move-horizontal",
+  "not-equal",
+  "play",
+  "plus",
+  "presentation",
+  "refresh-ccw-dot",
+  "refresh",
+  "regex",
+  "repeat",
+  "rss",
+  "runs-history",
+  "scroll-text",
+  "search-check",
+  "search",
+  "send",
+  "sparkles",
+  "sun",
+  "swatch-book",
+  "table-2",
+  "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"],
+  "table-2": ["table", "grid", "data", "spreadsheet", "rows", "columns"],
+  "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

@@ -1,65 +1,70 @@
-a-progress {
-  --progress-bg: hsla(300, 10%, 96%, 1);
-  --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);
-
-  display: block;
-  container-type: inline-size;
-  padding: 4px 8px;
-  min-height: 8px;
-  background: var(--progress-bg);
-  border: 0px solid var(--progress-border-color);
-  border-radius: 0;
-}
-
-.dark a-progress {
-  --progress-bg: hsla(278, 8%, 9%, 1);
-  --progress-border-color: hsla(278, 8%, 23%, 1);
-  --progress-indicator-bg: hsla(278, 8%, 15%, 1);
-  --progress-indicator-edge: linear-gradient(90deg, hsla(278, 8%, 23%, 0) 0%, hsla(278, 8%, 23%, 1) 100%);
-}
-
-a-progress[tone="info"] {
-  --progress-bg: #E7F4FF;
-  --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);
-}
-
-.dark a-progress[tone="info"] {
-  --progress-bg: #021A2D;
-  --progress-border-color: #062F4C;
-  --progress-indicator-bg: #05253F;
-  --progress-indicator-edge: linear-gradient(90deg, hsla(207, 85%, 16%, 0) 0%, hsla(207, 85%, 16%, 1) 100%);
-}
-
-a-progress-label {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.5ch;
-  font-variant-numeric: tabular-nums;
-  font-feature-settings: 'ss02', 'ss05';
-  letter-spacing: 0.03em;
-  font-size: 13px;
-  line-height: 16px;
-}
-
-a-progress-number {
-  flex-shrink: 0;
-  color: var(--progress-label-color);
-}
-
-a-progress-text {
-  flex: 1 1 auto;
-  min-width: 0;
-  color: var(--fg-2);
-}
-
-a-progress-hint {
-  flex-shrink: 0;
-  margin-left: auto;
-  color: var(--fg-3);
+@layer anta {
+  a-progress {
+    --progress-bg: var(--bg-block);
+    --progress-border-color: var(--border-2);
+    --progress-indicator-bg: var(--bg-spot);
+    /* Right-edge fade: from the indicator's own bg to the border
+       colour, both opaque. Two opaque endpoints + `in oklch`
+       interpolation give a perceptually-uniform fade with no alpha
+       pre-multiplication artefacts. Tone variants automatically
+       re-tint because both endpoint tokens (`--progress-indicator-bg`,
+       `--progress-border-color`) get re-aliased per tone. */
+    --progress-indicator-edge: linear-gradient(
+      90deg in oklch,
+      var(--progress-indicator-bg) 0%,
+      var(--progress-border-color) 100%
+    );
+    --progress-text-color: var(--text-2);
+    --progress-hint-color: var(--text-3);
+  
+    display: block;
+    container-type: inline-size;
+    padding: 4px 8px;
+    min-height: 8px;
+    background: var(--progress-bg);
+    /* Per-component reset, same spirit as Tailwind preflight: declare
+       width / style / colour at a known state so a consumer only has
+       to change ONE property to opt in. Writing `border-width: 4px`
+       in your own CSS (or via the Anta playground's CSS tab) gives a
+       4px solid themed border immediately — no need to also specify
+       `border-style: solid` or `border-color`. */
+    border: 0px solid var(--progress-border-color);
+    border-radius: 0;
+  }
+  
+  a-progress[tone="info"] {
+    --progress-bg: var(--bg-block-info);
+    --progress-border-color: var(--border-2-info);
+    --progress-indicator-bg: var(--bg-spot-info);
+    --progress-text-color: var(--text-2-info);
+    --progress-hint-color: var(--text-3-info);
+  }
+  
+  a-progress-label {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5ch;
+    font-variant-numeric: tabular-nums;
+    font-feature-settings: 'ss02', 'ss05';
+    letter-spacing: 0.03em;
+    font-size: 13px;
+    line-height: 16px;
+  }
+  
+  a-progress-number {
+    flex-shrink: 0;
+    color: var(--progress-text-color);
+  }
+  
+  a-progress-text {
+    flex: 1 1 auto;
+    min-width: 0;
+    color: var(--progress-text-color);
+  }
+  
+  a-progress-hint {
+    flex-shrink: 0;
+    margin-left: auto;
+    color: var(--progress-hint-color);
+  }
 }

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,77 @@
+@layer anta {
+  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 reset.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
 };