@antadesign/anta 0.3.4 → 0.3.6

package/dist/components/Tabs.d.ts

@@ -41,6 +41,12 @@ export interface TabOption {
     /** Disable just this tab — skipped by keyboard nav and dropped from the tab order
      *  (a disabled-but-selected tab stays reachable, per the ARIA pattern). */
     disabled?: boolean;
+    /** Tooltip for this tab — a string or any node — shown **only when the tab's label
+     *  is truncated** (tabs ellipsize when the strip overflows), so a clipped tab reveals
+     *  its full text on hover while a tab that fits shows nothing. Rendered as a
+     *  `truncatedOnly` `<Tooltip>` anchored to the tab. For an always-visible tooltip or
+     *  other custom trigger content, use `children` with your own `<Tooltip>` instead. */
+    tooltip?: React.ReactNode;
 }
 /** Public props for `<Tabs>`. */
 export interface TabsProps extends Omit<BaseProps, "onChange"> {

package/dist/components/Tabs.js

@@ -1,6 +1,7 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useState } from "../jsx-runtime";
 import { nativeStateChange, toneStyle, roundStyle, wrapLabel } from "../anta_helpers";
+import { Tooltip } from "./Tooltip";
 const Tabs = ({
   children,
   options,
@@ -88,7 +89,8 @@ const Tabs = ({
             children: [
               p.icon && /* @__PURE__ */ jsx("a-icon", { shape: p.icon, "aria-hidden": "true" }),
               wrapLabel(p.label != null ? p.label : p.children, "a-tab-label"),
-              p.iconTrailing && /* @__PURE__ */ jsx("a-icon", { shape: p.iconTrailing, "aria-hidden": "true" })
+              p.iconTrailing && /* @__PURE__ */ jsx("a-icon", { shape: p.iconTrailing, "aria-hidden": "true" }),
+              p.tooltip != null && p.tooltip !== "" ? /* @__PURE__ */ jsx(Tooltip, { truncatedOnly: true, children: p.tooltip }) : null
             ]
           },
           p.value

package/dist/components/select-options.d.ts

@@ -0,0 +1,14 @@
+import type { SelectOption } from './Select';
+/** Coerce a bare string option to `{ value, label }`; pass an object through. */
+export declare const normalizeOpt: (o: string | SelectOption) => SelectOption;
+/** The built-in filter regex: case-insensitive, with each run of whitespace in the
+ *  query matching any gap (`\s+`). Returns null for an empty query — the signal to
+ *  match everything and to skip match-highlighting. */
+export declare function matchQueryRegex(query: string): RegExp | null;
+/** Whether an option matches the built-in query regex, testing value / label /
+ *  hint. A null regex (empty query) matches everything. */
+export declare const matchesQuery: (o: SelectOption, queryRe: RegExp | null) => boolean;
+/** Bold the matched substring(s) of `text` for display (built-in matcher only).
+ *  A null regex returns the text unchanged. The regex is re-created global so
+ *  `exec` walks every match; the zero-width guard stops an empty match looping. */
+export declare const highlight: (text: string, queryRe: RegExp | null) => React.ReactNode;

package/dist/components/select-options.js

@@ -0,0 +1,31 @@
+import { jsx } from "@antadesign/anta/jsx-runtime";
+const normalizeOpt = (o) => typeof o === "string" ? { value: o, label: o } : o;
+function matchQueryRegex(query) {
+  const q = query.trim();
+  if (!q) return null;
+  const escape = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return new RegExp(q.split(/\s+/).map(escape).join("\\s+"), "i");
+}
+const matchesQuery = (o, queryRe) => !queryRe || [o.value, o.label ?? "", o.hint ?? ""].some((s) => queryRe.test(s));
+const highlight = (text, queryRe) => {
+  if (!queryRe) return text;
+  const re = new RegExp(queryRe.source, "gi");
+  const out = [];
+  let last = 0;
+  let m;
+  while ((m = re.exec(text)) !== null) {
+    if (m.index > last) out.push(text.slice(last, m.index));
+    out.push(/* @__PURE__ */ jsx("b", { children: m[0] }, out.length));
+    last = m.index + m[0].length;
+    if (m[0].length === 0) re.lastIndex++;
+  }
+  if (out.length === 0) return text;
+  if (last < text.length) out.push(text.slice(last));
+  return out;
+};
+export {
+  highlight,
+  matchQueryRegex,
+  matchesQuery,
+  normalizeOpt
+};

package/dist/elements/a-button.css

@@ -1 +1 @@
-@layer anta{a-button,a[role=button][data-anta]{--button-primary-fg: #ffffff;--bg-primary-disabled: #ece9ec;--bg-secondary-disabled: #f6f4f6;--fg-disabled-primary: #afa9b1;--fg-disabled: #afa9b1;--button-loading-stripe: 14px;--button-loading-stripe-gap: 16px;--button-loading-period: 30px;--button-loading-angle: 125deg;--button-loading-x-period: calc( var(--button-loading-period) / cos(var(--button-loading-angle) - 90deg) );--button-loading-opacity: .15;--button-loading-blur: 2.5px;--button-bg-primary-rest: #635b65;--button-bg-primary-hover: #534c57;--button-bg-primary-active: #49424c;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #45374c12;--button-bg-secondary-hover: #44374b1a;--button-bg-secondary-active: #44374b26;--button-fg-secondary-rest: #534c57;--button-fg-secondary-hover: #49424c;--button-fg-secondary-l-shift: .05;--button-fg-tertiary-rest: #635b65;--button-fg-tertiary-hover: #534c57;--button-bg-tertiary-hover: #44374b0d;--button-bg-tertiary-active: #44374b1a;--button-fg-quaternary-rest: #635b65;--button-fg-quaternary-hover: #49424c;--_fs: 15px;--_lh: 20px;--_pb: 1px;--button-padding-x: 9px;--button-padding-y: calc((8px - var(--_pb)) / 2);--button-max-width: 100%;--button-max-height: 100%;--button-timing-in: 75ms ease-in;--button-timing-active: 50ms linear;--button-timing-out: .15s ease-out;--button-loading-duration: .5s}a-button[round],a[role=button][data-anta][round]{--button-round: attr(round type(<length>), 999px);border-radius:var(--button-round, 999px)}a-button[tone=brand],a[role=button][data-anta][tone=brand]{--button-bg-primary-rest: #5f4bc3;--button-bg-primary-hover: #503cb4;--button-bg-primary-active: #483493;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #7460d71a;--button-bg-secondary-hover: #7460d726;--button-bg-secondary-active: #7460d733;--button-fg-secondary-rest: #5f4bc3;--button-fg-secondary-hover: #503cb4;--button-fg-tertiary-rest: #5f4bc3;--button-fg-tertiary-hover: #503cb4;--button-bg-tertiary-hover: #7460d71a;--button-bg-tertiary-active: #7460d726;--button-fg-quaternary-rest: #5f4bc3;--button-fg-quaternary-hover: #483493}a-button[tone=critical],a[role=button][data-anta][tone=critical]{--button-bg-primary-rest: #c9302c;--button-bg-primary-hover: #b02120;--button-bg-primary-active: #a01c1c;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #de45451a;--button-bg-secondary-hover: #de454526;--button-bg-secondary-active: #de454533;--button-fg-secondary-rest: #c9302c;--button-fg-secondary-hover: #b02120;--button-fg-tertiary-rest: #c9302c;--button-fg-tertiary-hover: #b02120;--button-bg-tertiary-hover: #de45451a;--button-bg-tertiary-active: #de454533;--button-fg-quaternary-rest: #c9302c;--button-fg-quaternary-hover: #a01c1c}a-button[tone=info],a[role=button][data-anta][tone=info]{--button-bg-primary-rest: #1f6eb2;--button-bg-primary-hover: #1a5b93;--button-bg-primary-active: #175082;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #2686d91a;--button-bg-secondary-hover: #2686d926;--button-bg-secondary-active: #2686d933;--button-fg-secondary-rest: #1f6eb2;--button-fg-secondary-hover: #1a5b93;--button-fg-tertiary-rest: #1f6eb2;--button-fg-tertiary-hover: #1a5b93;--button-bg-tertiary-hover: #2686d91a;--button-bg-tertiary-active: #2686d926;--button-fg-quaternary-rest: #1f6eb2;--button-fg-quaternary-hover: #175082}a-button[tone=success],a[role=button][data-anta][tone=success]{--button-bg-primary-rest: #2a7e43;--button-bg-primary-hover: #226737;--button-bg-primary-active: #1f5c31;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #3295501a;--button-bg-secondary-hover: #32955026;--button-bg-secondary-active: #32955033;--button-fg-secondary-rest: #2a7e43;--button-fg-secondary-hover: #226737;--button-fg-tertiary-rest: #2a7e43;--button-fg-tertiary-hover: #226737;--button-bg-tertiary-hover: #3295501a;--button-bg-tertiary-active: #32955026;--button-fg-quaternary-rest: #2a7e43;--button-fg-quaternary-hover: #1f5c31}a-button[tone=warning],a[role=button][data-anta][tone=warning]{--button-bg-primary-rest: #c37416;--button-bg-primary-hover: #ae6613;--button-bg-primary-active: #995200;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #c374161a;--button-bg-secondary-hover: #c3741626;--button-bg-secondary-active: #c3741633;--button-fg-secondary-rest: #c37416;--button-fg-secondary-hover: #ae6613;--button-fg-tertiary-rest: #c37416;--button-fg-tertiary-hover: #ae6613;--button-bg-tertiary-hover: #c374161a;--button-bg-tertiary-active: #c3741633;--button-fg-quaternary-rest: #c37416;--button-fg-quaternary-hover: #995200}.dark a-button,.dark a[role=button][data-anta]{--bg-primary-disabled: #272329;--bg-secondary-disabled: #1d1a1e;--fg-disabled-primary: #776e77;--fg-disabled: #635b65;--button-bg-primary-rest: #534c57;--button-bg-primary-hover: #635b65;--button-bg-primary-active: #938d96;--button-bg-secondary-rest: #e4d1ef1c;--button-bg-secondary-hover: #e4d1ef24;--button-bg-secondary-active: #e4d1ef2e;--button-fg-secondary-rest: #c1b9c1;--button-fg-secondary-hover: #d4ced4;--button-fg-secondary-l-shift: 0;--button-fg-tertiary-rest: #afa9b1;--button-fg-tertiary-hover: #afa9b1;--button-bg-tertiary-hover: #e4d1ef14;--button-bg-tertiary-active: #e4d1ef21;--button-fg-quaternary-rest: #afa9b1;--button-fg-quaternary-hover: #cac4ca}.dark a-button[tone=brand],.dark a[role=button][data-anta][tone=brand]{--button-bg-primary-rest: #503cb4;--button-bg-primary-hover: #5f4bc3;--button-bg-primary-active: #7460d7;--button-bg-secondary-rest: #7460d73b;--button-bg-secondary-hover: #7460d747;--button-bg-secondary-active: #7460d754;--button-fg-secondary-rest: #c5baff;--button-fg-secondary-hover: #d2cbf6;--button-fg-tertiary-rest: #ada0ee;--button-fg-tertiary-hover: #bcb1f1;--button-bg-tertiary-hover: #7460d73b;--button-bg-tertiary-active: #7460d747;--button-fg-quaternary-rest: #ada0ee;--button-fg-quaternary-hover: #c7bef4}.dark a-button[tone=critical],.dark a[role=button][data-anta][tone=critical]{--button-bg-primary-rest: #b02120;--button-bg-primary-hover: #c9302c;--button-bg-primary-active: #de4545;--button-bg-secondary-rest: #de45453b;--button-bg-secondary-hover: #de454547;--button-bg-secondary-active: #de454554;--button-fg-secondary-rest: #ffabac;--button-fg-secondary-hover: #f4c2c2;--button-fg-tertiary-rest: #e78e90;--button-fg-tertiary-hover: #efa4a4;--button-bg-tertiary-hover: #de45453b;--button-bg-tertiary-active: #de454547;--button-fg-quaternary-rest: #e78e90;--button-fg-quaternary-hover: #ffabac}.dark a-button[tone=info],.dark a[role=button][data-anta][tone=info]{--button-bg-primary-rest: #1a5b93;--button-bg-primary-hover: #1f6eb2;--button-bg-primary-active: #2686d9;--button-bg-secondary-rest: #2686d93b;--button-bg-secondary-hover: #2686d947;--button-bg-secondary-active: #2686d954;--button-fg-secondary-rest: #9ed2ff;--button-fg-secondary-hover: #bad6f3;--button-fg-tertiary-rest: #7db6e8;--button-fg-tertiary-hover: #93c5ec;--button-bg-tertiary-hover: #2686d93b;--button-bg-tertiary-active: #2686d947;--button-fg-quaternary-rest: #7db6e8;--button-fg-quaternary-hover: #a6cdef}.dark a-button[tone=success],.dark a[role=button][data-anta][tone=success]{--button-bg-primary-rest: #226737;--button-bg-primary-hover: #2a7e43;--button-bg-primary-active: #329550;--button-bg-secondary-rest: #3295503b;--button-bg-secondary-hover: #32955047;--button-bg-secondary-active: #32955054;--button-fg-secondary-rest: #8ceca9;--button-fg-secondary-hover: #b3e5c2;--button-fg-tertiary-rest: #74cd8e;--button-fg-tertiary-hover: #88d7a0;--button-bg-tertiary-hover: #3295503b;--button-bg-tertiary-active: #32955047;--button-fg-quaternary-rest: #74cd8e;--button-fg-quaternary-hover: #9ddeb1}.dark a-button[tone=warning],.dark a[role=button][data-anta][tone=warning]{--button-bg-primary-rest: #7f410b;--button-bg-primary-hover: #995200;--button-bg-primary-active: #ae6613;--button-bg-secondary-rest: #c374163b;--button-bg-secondary-hover: #c3741647;--button-bg-secondary-active: #c3741654;--button-fg-secondary-rest: #f7c06e;--button-fg-secondary-hover: #f3cc91;--button-fg-tertiary-rest: #e1a452;--button-fg-tertiary-hover: #edb25a;--button-bg-tertiary-hover: #c374163b;--button-bg-tertiary-active: #c3741647;--button-fg-quaternary-rest: #e1a452;--button-fg-quaternary-hover: #f0bf75}a-button,a[role=button][data-anta]{user-select:none;display:inline-flex;align-items:center;gap:.5ch;overflow:hidden;cursor:pointer;flex-shrink:0;color:var(--button-fg);background-color:var(--button-bg);border-radius:4px;text-decoration:none;box-shadow:inset 0 0 1px color-mix(in oklch,currentColor,transparent 90%);font-size:var(--_fs);font-family:var(--sans-serif);font-weight:450;font-variation-settings:"wdth" 88,"slnt" 0,"ital" 0;font-feature-settings:"ss02","ss05","tnum";line-height:var(--_lh);letter-spacing:.05ch;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;max-width:var(--button-max-width);max-height:var(--button-max-height);padding-inline:var(--button-padding-x);padding-block:var(--button-padding-y);min-height:28px;>a-button-label{display:inline-block;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;overflow:hidden;min-width:0;line-height:var(--_lh);padding-bottom:var(--_pb);&:has(>*){display:inline-flex;gap:.25ch}}>*{pointer-events:none}& a-icon{transition:color var(--button-timing-out)}transition:color var(--button-timing-out),background-color var(--button-timing-out);&:hover,&:focus-visible{transition:color var(--button-timing-in),background-color var(--button-timing-in);& a-icon{transition:color var(--button-timing-in)}}&:active,&[selected]{transition:color var(--button-timing-active),background-color var(--button-timing-active);& a-icon{transition:color var(--button-timing-active)}}&[disabled]{pointer-events:none;cursor:not-allowed;transition:none;& a-icon{transition:none}}&:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}&[priority=quaternary]{--button-timing-in: 0s;--button-timing-active: 0s;--button-timing-out: 0s}&[size=small]{--button-padding-x: 7px;--_fs: 13px;--_lh: 16px;--_pb: .5px;min-height:24px;& a-icon{--icon-size: 14px}}&[size=large]{--button-padding-x: 13px;--_fs: 17px;--_lh: 24px;--_pb: 1.5px;min-height:32px;& a-icon{--icon-size: 18px}}&[priority=tertiary],&[priority=quaternary]{&[underline=solid]{text-decoration:underline solid}&[underline=dashed]{text-decoration:underline dashed}&[underline=dotted]{text-decoration:underline dotted}&[underline]{text-decoration-color:color-mix(in srgb,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;&[selected]{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}@media(hover:hover)and (pointer:fine){&:hover{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}}}}&[priority=quaternary][paddingless]{--button-padding-x: 0;--button-padding-y: 0;min-height:0}&:has(>a-icon):not(:has(>a-icon~a-icon)):not(:has(>:not(a-icon):not(a-tooltip))){--button-padding-y: 5px;--button-padding-x: 5px;min-width:28px;justify-content:center;&[size=small]{--button-padding-y: 3px;--button-padding-x: 3px;min-width:24px}&[size=large]{--button-padding-y: 7px;--button-padding-x: 7px;min-width:32px}}&:is(:has(>a-icon:first-child),:has(>a-tooltip:first-child+a-icon)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip))){padding-inline-start:max(0px,var(--button-padding-x) - 2px)}&:is(:has(>a-icon:last-child),:has(>a-icon+a-tooltip:last-child)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip))){padding-inline-end:max(0px,var(--button-padding-x) - 2px)}&[loading]{position:relative;pointer-events:none;cursor:wait;&:before{content:"";position:absolute;top:0;bottom:0;left:calc(0px - var(--button-loading-x-period));right:0;pointer-events:none;background:repeating-linear-gradient(var(--button-loading-angle),transparent 0,transparent var(--button-loading-stripe-gap),currentColor var(--button-loading-stripe-gap),currentColor calc(var(--button-loading-stripe-gap) + var(--button-loading-stripe)));opacity:var(--button-loading-opacity);filter:blur(var(--button-loading-blur));will-change:transform;animation:btn-loading-slide var(--button-loading-duration) linear infinite;animation-delay:-9999s}}&[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=critical],[tone=info],[tone=success],[tone=warning]){--button-tone-source: attr(tone type(<color>), transparent);--_tone-fg-l: .46;--_tone-fg-strong-l: .4;--_tone-fg-c: .17;--_tone-bg-l: .54;--_tone-bg-c: .16;--_tone-bg-a-rest: .1;--_tone-bg-a-hover: .15;--_tone-bg-a-active: .2;--_tone-primary-l-rest: .5;--_tone-primary-l-hover: .45;--_tone-primary-l-active: .4;--button-bg-primary-rest: oklch(from var(--button-tone-source) var(--_tone-primary-l-rest) c h);--button-bg-primary-hover: oklch(from var(--button-tone-source) var(--_tone-primary-l-hover) c h);--button-bg-primary-active: oklch(from var(--button-tone-source) var(--_tone-primary-l-active) c h);--button-fg-primary-rest: var(--button-primary-fg);--button-fg-secondary-rest: oklch(from var(--button-tone-source) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-secondary-hover: oklch(from var(--button-tone-source) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-fg-tertiary-rest: oklch(from var(--button-tone-source) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-tertiary-hover: oklch(from var(--button-tone-source) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-fg-quaternary-rest: oklch(from var(--button-tone-source) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-quaternary-hover: oklch(from var(--button-tone-source) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-bg-secondary-rest: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-rest));--button-bg-secondary-hover: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-hover));--button-bg-secondary-active: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-active));--button-bg-tertiary-hover: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-rest));--button-bg-tertiary-active: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-hover))}.dark &[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=critical],[tone=info],[tone=success],[tone=warning]){--_tone-fg-l: .78;--_tone-fg-strong-l: .85;--_tone-fg-c: .11;--_tone-bg-l: .58;--_tone-bg-a-rest: .23;--_tone-bg-a-hover: .28;--_tone-bg-a-active: .33;--_tone-primary-l-rest: .45;--_tone-primary-l-hover: .5;--_tone-primary-l-active: .57}--button-fg: oklch(from var(--button-fg-secondary-rest) calc(l - var(--button-fg-secondary-l-shift)) c h);--button-bg: var(--button-bg-secondary-rest);@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}}&:active,&[selected]{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-active)}&[priority=primary]{--button-fg: var(--button-fg-primary-rest);--button-bg: var(--button-bg-primary-rest);box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-bg: var(--button-bg-primary-hover)}}&:active,&[selected]{--button-bg: var(--button-bg-primary-active)}}&[priority=tertiary]{--button-fg: var(--button-fg-tertiary-rest);--button-bg: transparent;box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&:active,&[selected]{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-active)}}&[priority=quaternary]{--button-fg: var(--button-fg-quaternary-rest);--button-bg: transparent;box-shadow:none;font-weight:400;letter-spacing:.06ch;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-quaternary-hover)}}&[selected]{--button-fg: var(--button-fg-quaternary-hover)}&:active{--button-fg: oklch(from var(--button-fg-quaternary-rest) calc(l + .05) c h)}.dark &:active{--button-fg: var(--button-fg-quaternary-rest)}}&[selected]{box-shadow:inset 0 0 0 1px currentColor}&[disabled]{background-color:var(--bg-secondary-disabled);color:var(--fg-disabled);&[priority=primary]{background-color:var(--bg-primary-disabled);color:var(--fg-disabled-primary)}&[priority=tertiary],&[priority=quaternary]{background-color:transparent;color:var(--fg-disabled)}}}}@keyframes btn-loading-slide{to{transform:translate(var(--button-loading-x-period))}}
+@layer anta{a-button,a[role=button][data-anta]{--button-primary-fg: #ffffff;--bg-primary-disabled: #ece9ec;--bg-secondary-disabled: #f6f4f6;--fg-disabled-primary: #afa9b1;--fg-disabled: #afa9b1;--button-loading-stripe: 14px;--button-loading-stripe-gap: 16px;--button-loading-period: 30px;--button-loading-angle: 125deg;--button-loading-x-period: calc( var(--button-loading-period) / cos(var(--button-loading-angle) - 90deg) );--button-loading-opacity: .15;--button-loading-blur: 2.5px;--button-bg-primary-rest: #635b65;--button-bg-primary-hover: #534c57;--button-bg-primary-active: #49424c;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #45374c12;--button-bg-secondary-hover: #44374b1a;--button-bg-secondary-active: #44374b26;--button-fg-secondary-rest: #534c57;--button-fg-secondary-hover: #49424c;--button-fg-secondary-l-shift: .05;--button-fg-tertiary-rest: #635b65;--button-fg-tertiary-hover: #534c57;--button-bg-tertiary-hover: #44374b0d;--button-bg-tertiary-active: #44374b1a;--button-fg-quaternary-rest: #635b65;--button-fg-quaternary-hover: #49424c;--_fs: 15px;--_lh: 20px;--_pb: 1px;--button-padding-x: 9px;--button-padding-y: calc((8px - var(--_pb)) / 2);--button-max-width: 100%;--button-max-height: 100%;--button-timing-in: 75ms ease-in;--button-timing-active: 50ms linear;--button-timing-out: .15s ease-out;--button-loading-duration: .5s}a-button[round],a[role=button][data-anta][round]{--button-round: attr(round type(<length>), 999px);border-radius:var(--button-round, 999px)}a-button[tone=brand],a[role=button][data-anta][tone=brand]{--button-bg-primary-rest: #5f4bc3;--button-bg-primary-hover: #503cb4;--button-bg-primary-active: #483493;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #7460d71a;--button-bg-secondary-hover: #7460d726;--button-bg-secondary-active: #7460d733;--button-fg-secondary-rest: #5f4bc3;--button-fg-secondary-hover: #503cb4;--button-fg-tertiary-rest: #5f4bc3;--button-fg-tertiary-hover: #503cb4;--button-bg-tertiary-hover: #7460d71a;--button-bg-tertiary-active: #7460d726;--button-fg-quaternary-rest: #5f4bc3;--button-fg-quaternary-hover: #483493}a-button[tone=critical],a[role=button][data-anta][tone=critical]{--button-bg-primary-rest: #c9302c;--button-bg-primary-hover: #b02120;--button-bg-primary-active: #a01c1c;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #de45451a;--button-bg-secondary-hover: #de454526;--button-bg-secondary-active: #de454533;--button-fg-secondary-rest: #c9302c;--button-fg-secondary-hover: #b02120;--button-fg-tertiary-rest: #c9302c;--button-fg-tertiary-hover: #b02120;--button-bg-tertiary-hover: #de45451a;--button-bg-tertiary-active: #de454533;--button-fg-quaternary-rest: #c9302c;--button-fg-quaternary-hover: #a01c1c}a-button[tone=info],a[role=button][data-anta][tone=info]{--button-bg-primary-rest: #1f6eb2;--button-bg-primary-hover: #1a5b93;--button-bg-primary-active: #175082;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #2686d91a;--button-bg-secondary-hover: #2686d926;--button-bg-secondary-active: #2686d933;--button-fg-secondary-rest: #1f6eb2;--button-fg-secondary-hover: #1a5b93;--button-fg-tertiary-rest: #1f6eb2;--button-fg-tertiary-hover: #1a5b93;--button-bg-tertiary-hover: #2686d91a;--button-bg-tertiary-active: #2686d926;--button-fg-quaternary-rest: #1f6eb2;--button-fg-quaternary-hover: #175082}a-button[tone=success],a[role=button][data-anta][tone=success]{--button-bg-primary-rest: #2a7e43;--button-bg-primary-hover: #226737;--button-bg-primary-active: #1f5c31;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #3295501a;--button-bg-secondary-hover: #32955026;--button-bg-secondary-active: #32955033;--button-fg-secondary-rest: #2a7e43;--button-fg-secondary-hover: #226737;--button-fg-tertiary-rest: #2a7e43;--button-fg-tertiary-hover: #226737;--button-bg-tertiary-hover: #3295501a;--button-bg-tertiary-active: #32955026;--button-fg-quaternary-rest: #2a7e43;--button-fg-quaternary-hover: #1f5c31}a-button[tone=warning],a[role=button][data-anta][tone=warning]{--button-bg-primary-rest: #c37416;--button-bg-primary-hover: #ae6613;--button-bg-primary-active: #995200;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #c374161a;--button-bg-secondary-hover: #c3741626;--button-bg-secondary-active: #c3741633;--button-fg-secondary-rest: #c37416;--button-fg-secondary-hover: #ae6613;--button-fg-tertiary-rest: #c37416;--button-fg-tertiary-hover: #ae6613;--button-bg-tertiary-hover: #c374161a;--button-bg-tertiary-active: #c3741633;--button-fg-quaternary-rest: #c37416;--button-fg-quaternary-hover: #995200}.dark a-button,.dark a[role=button][data-anta]{--bg-primary-disabled: #272329;--bg-secondary-disabled: #1d1a1e;--fg-disabled-primary: #776e77;--fg-disabled: #635b65;--button-bg-primary-rest: #534c57;--button-bg-primary-hover: #635b65;--button-bg-primary-active: #938d96;--button-bg-secondary-rest: #e4d1ef1c;--button-bg-secondary-hover: #e4d1ef24;--button-bg-secondary-active: #e4d1ef2e;--button-fg-secondary-rest: #c1b9c1;--button-fg-secondary-hover: #d4ced4;--button-fg-secondary-l-shift: 0;--button-fg-tertiary-rest: #afa9b1;--button-fg-tertiary-hover: #afa9b1;--button-bg-tertiary-hover: #e4d1ef14;--button-bg-tertiary-active: #e4d1ef21;--button-fg-quaternary-rest: #afa9b1;--button-fg-quaternary-hover: #cac4ca}.dark a-button[tone=brand],.dark a[role=button][data-anta][tone=brand]{--button-bg-primary-rest: #503cb4;--button-bg-primary-hover: #5f4bc3;--button-bg-primary-active: #7460d7;--button-bg-secondary-rest: #7460d73b;--button-bg-secondary-hover: #7460d747;--button-bg-secondary-active: #7460d754;--button-fg-secondary-rest: #c5baff;--button-fg-secondary-hover: #d2cbf6;--button-fg-tertiary-rest: #ada0ee;--button-fg-tertiary-hover: #bcb1f1;--button-bg-tertiary-hover: #7460d73b;--button-bg-tertiary-active: #7460d747;--button-fg-quaternary-rest: #ada0ee;--button-fg-quaternary-hover: #c7bef4}.dark a-button[tone=critical],.dark a[role=button][data-anta][tone=critical]{--button-bg-primary-rest: #b02120;--button-bg-primary-hover: #c9302c;--button-bg-primary-active: #de4545;--button-bg-secondary-rest: #de45453b;--button-bg-secondary-hover: #de454547;--button-bg-secondary-active: #de454554;--button-fg-secondary-rest: #ffabac;--button-fg-secondary-hover: #f4c2c2;--button-fg-tertiary-rest: #e78e90;--button-fg-tertiary-hover: #efa4a4;--button-bg-tertiary-hover: #de45453b;--button-bg-tertiary-active: #de454547;--button-fg-quaternary-rest: #e78e90;--button-fg-quaternary-hover: #ffabac}.dark a-button[tone=info],.dark a[role=button][data-anta][tone=info]{--button-bg-primary-rest: #1a5b93;--button-bg-primary-hover: #1f6eb2;--button-bg-primary-active: #2686d9;--button-bg-secondary-rest: #2686d93b;--button-bg-secondary-hover: #2686d947;--button-bg-secondary-active: #2686d954;--button-fg-secondary-rest: #9ed2ff;--button-fg-secondary-hover: #bad6f3;--button-fg-tertiary-rest: #7db6e8;--button-fg-tertiary-hover: #93c5ec;--button-bg-tertiary-hover: #2686d93b;--button-bg-tertiary-active: #2686d947;--button-fg-quaternary-rest: #7db6e8;--button-fg-quaternary-hover: #a6cdef}.dark a-button[tone=success],.dark a[role=button][data-anta][tone=success]{--button-bg-primary-rest: #226737;--button-bg-primary-hover: #2a7e43;--button-bg-primary-active: #329550;--button-bg-secondary-rest: #3295503b;--button-bg-secondary-hover: #32955047;--button-bg-secondary-active: #32955054;--button-fg-secondary-rest: #8ceca9;--button-fg-secondary-hover: #b3e5c2;--button-fg-tertiary-rest: #74cd8e;--button-fg-tertiary-hover: #88d7a0;--button-bg-tertiary-hover: #3295503b;--button-bg-tertiary-active: #32955047;--button-fg-quaternary-rest: #74cd8e;--button-fg-quaternary-hover: #9ddeb1}.dark a-button[tone=warning],.dark a[role=button][data-anta][tone=warning]{--button-bg-primary-rest: #7f410b;--button-bg-primary-hover: #995200;--button-bg-primary-active: #ae6613;--button-bg-secondary-rest: #c374163b;--button-bg-secondary-hover: #c3741647;--button-bg-secondary-active: #c3741654;--button-fg-secondary-rest: #f7c06e;--button-fg-secondary-hover: #f3cc91;--button-fg-tertiary-rest: #e1a452;--button-fg-tertiary-hover: #edb25a;--button-bg-tertiary-hover: #c374163b;--button-bg-tertiary-active: #c3741647;--button-fg-quaternary-rest: #e1a452;--button-fg-quaternary-hover: #f0bf75}a-button,a[role=button][data-anta]{user-select:none;display:inline-flex;align-items:center;gap:.5ch;overflow:hidden;cursor:pointer;flex-shrink:0;color:var(--button-fg);background-color:var(--button-bg);border-radius:4px;text-decoration:none;box-shadow:inset 0 0 1px color-mix(in oklch,currentColor,transparent 90%);font-size:var(--_fs);font-family:var(--sans-serif);font-weight:450;font-variation-settings:"wdth" 88,"slnt" 0,"ital" 0;font-feature-settings:"ss02","ss05","tnum";line-height:var(--_lh);letter-spacing:.05ch;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;max-width:var(--button-max-width);max-height:var(--button-max-height);padding-inline:var(--button-padding-x);padding-block:var(--button-padding-y);min-height:28px;>a-button-label{display:inline-block;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;overflow:hidden;min-width:0;line-height:var(--_lh);padding-bottom:var(--_pb);&:has(>*){display:inline-flex;gap:.25ch}}>*{pointer-events:none}& a-icon{transition:color var(--button-timing-out)}transition:color var(--button-timing-out),background-color var(--button-timing-out);&:hover,&:focus-visible{transition:color var(--button-timing-in),background-color var(--button-timing-in);& a-icon{transition:color var(--button-timing-in)}}&:active,&[selected]{transition:color var(--button-timing-active),background-color var(--button-timing-active);& a-icon{transition:color var(--button-timing-active)}}&[disabled]{pointer-events:none;cursor:not-allowed;transition:none;& a-icon{transition:none}}&:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}&[priority=quaternary]{--button-timing-in: 0s;--button-timing-active: 0s;--button-timing-out: 0s}&[size=small]{--button-padding-x: 7px;--_fs: 13px;--_lh: 16px;--_pb: .5px;min-height:24px;& a-icon{--icon-size: 14px}}&[size=large]{--button-padding-x: 13px;--_fs: 17px;--_lh: 24px;--_pb: 1.5px;min-height:32px;& a-icon{--icon-size: 18px}}&[priority=tertiary],&[priority=quaternary]{&[underline=solid]{text-decoration:underline solid}&[underline=dashed]{text-decoration:underline dashed}&[underline=dotted]{text-decoration:underline dotted}&[underline]{text-decoration-color:color-mix(in srgb,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;&[selected]{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}@media(hover:hover)and (pointer:fine){&:hover{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}}}}&[priority=quaternary][paddingless]{--button-padding-x: 0;--button-padding-y: 0;min-height:0}&:has(>a-icon):not(:has(>a-icon~a-icon)):not(:has(>:not(a-icon):not(a-tooltip))){--button-padding-y: 5px;--button-padding-x: 5px;min-width:28px;justify-content:center;&[size=small]{--button-padding-y: 3px;--button-padding-x: 3px;min-width:24px}&[size=large]{--button-padding-y: 7px;--button-padding-x: 7px;min-width:32px}}&:is(:has(>a-icon:first-child),:has(>a-tooltip:first-child+a-icon)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip))){padding-inline-start:max(0px,var(--button-padding-x) - 2px)}&:is(:has(>a-icon:last-child),:has(>a-icon+a-tooltip:last-child)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip))){padding-inline-end:max(0px,var(--button-padding-x) - 2px)}&[loading]{position:relative;pointer-events:none;cursor:wait;&:before{content:"";position:absolute;top:0;bottom:0;left:calc(0px - var(--button-loading-x-period));right:0;pointer-events:none;background:repeating-linear-gradient(var(--button-loading-angle),transparent 0,transparent var(--button-loading-stripe-gap),currentColor var(--button-loading-stripe-gap),currentColor calc(var(--button-loading-stripe-gap) + var(--button-loading-stripe)));opacity:var(--button-loading-opacity);filter:blur(var(--button-loading-blur));will-change:transform;animation:btn-loading-slide var(--button-loading-duration) linear infinite;animation-delay:-9999s}}&[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=critical],[tone=info],[tone=success],[tone=warning]){--button-tone-source: attr(tone type(<color>), transparent);--_tone-fg-l: .46;--_tone-fg-strong-l: .4;--_tone-fg-c: .17;--_tone-bg-l: .54;--_tone-bg-c: .16;--_tone-bg-a-rest: .1;--_tone-bg-a-hover: .15;--_tone-bg-a-active: .2;--_tone-primary-l-rest: .5;--_tone-primary-l-hover: .45;--_tone-primary-l-active: .4;--button-bg-primary-rest: oklch(from var(--button-tone-source) var(--_tone-primary-l-rest) c h);--button-bg-primary-hover: oklch(from var(--button-tone-source) var(--_tone-primary-l-hover) c h);--button-bg-primary-active: oklch(from var(--button-tone-source) var(--_tone-primary-l-active) c h);--button-fg-primary-rest: var(--button-primary-fg);--button-fg-secondary-rest: oklch(from var(--button-tone-source) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-secondary-hover: oklch(from var(--button-tone-source) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-fg-tertiary-rest: oklch(from var(--button-tone-source) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-tertiary-hover: oklch(from var(--button-tone-source) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-fg-quaternary-rest: oklch(from var(--button-tone-source) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-quaternary-hover: oklch(from var(--button-tone-source) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-bg-secondary-rest: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-rest));--button-bg-secondary-hover: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-hover));--button-bg-secondary-active: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-active));--button-bg-tertiary-hover: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-rest));--button-bg-tertiary-active: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-hover))}.dark &[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=critical],[tone=info],[tone=success],[tone=warning]){--_tone-fg-l: .78;--_tone-fg-strong-l: .85;--_tone-fg-c: .11;--_tone-bg-l: .58;--_tone-bg-a-rest: .23;--_tone-bg-a-hover: .28;--_tone-bg-a-active: .33;--_tone-primary-l-rest: .45;--_tone-primary-l-hover: .5;--_tone-primary-l-active: .57}--button-fg: oklch(from var(--button-fg-secondary-rest) calc(l - var(--button-fg-secondary-l-shift)) c h);--button-bg: var(--button-bg-secondary-rest);@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}}&:active{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-active)}&[selected]{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}&[priority=primary]{--button-fg: var(--button-fg-primary-rest);--button-bg: var(--button-bg-primary-rest);box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-bg: var(--button-bg-primary-hover)}}&:active{--button-bg: var(--button-bg-primary-active)}&[selected]{--button-bg: var(--button-bg-primary-hover)}}&[priority=tertiary]{--button-fg: var(--button-fg-tertiary-rest);--button-bg: transparent;box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&:active{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-active)}&[selected]{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&[priority=quaternary]{--button-fg: var(--button-fg-quaternary-rest);--button-bg: transparent;box-shadow:none;font-weight:400;letter-spacing:.06ch;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-quaternary-hover)}}&[selected]{--button-fg: var(--button-fg-quaternary-hover)}&:active{--button-fg: oklch(from var(--button-fg-quaternary-rest) calc(l + .05) c h)}.dark &:active{--button-fg: var(--button-fg-quaternary-rest)}}&[selected]{box-shadow:inset 0 0 0 .5px currentColor}&[disabled]{background-color:var(--bg-secondary-disabled);color:var(--fg-disabled);&[priority=primary]{background-color:var(--bg-primary-disabled);color:var(--fg-disabled-primary)}&[priority=tertiary],&[priority=quaternary]{background-color:transparent;color:var(--fg-disabled)}}}}@keyframes btn-loading-slide{to{transform:translate(var(--button-loading-x-period))}}

package/dist/elements/a-calendar.css

@@ -1 +1 @@
-@layer anta{.anta-calendar{--calendar-cell-width: 32px;--calendar-cell-height: 28px;display:inline-flex;flex-direction:column;gap:6px}.anta-calendar [data-part=header]{display:flex;align-items:center;gap:0}.anta-calendar [data-part=heading]{flex:1 1 auto;justify-content:center;white-space:nowrap}.anta-calendar .year-dot{flex:none;inline-size:6px;block-size:6px;border-radius:999px;background:currentColor}.anta-calendar[data-size=small]{--calendar-cell-width: 28px;--calendar-cell-height: 24px}.anta-calendar[data-size=large]{--calendar-cell-width: 36px;--calendar-cell-height: 32px}.anta-calendar[data-size=small] [data-part=weekday]{font-size:13px;line-height:16px}.anta-calendar[data-size=large] [data-part=weekday]{font-size:17px;line-height:24px}a-calendar{display:inline-grid;grid-template-columns:repeat(7,var(--calendar-cell-width, 32px));gap:1px;font-family:var(--sans-serif)}a-calendar [data-part=weekday]{display:flex;align-items:center;justify-content:center;height:24px;font-size:15px;line-height:20px;font-weight:400;color:var(--text-4);user-select:none}a-calendar [data-part=weekday][data-weekend]{color:var(--text-5)}a-calendar a-button[data-part=day-cell]{padding-inline:0;min-width:var(--calendar-cell-width, 32px);min-height:var(--calendar-cell-height, 28px);justify-content:center}a-calendar a-button[data-part=day-cell] a-button-label{padding-bottom:0}a-calendar a-button[data-part=day-cell]:focus-visible{outline-offset:0}a-calendar a-button[data-part=day-cell][data-today]:not([selected]){font-weight:600}a-calendar a-button[data-part=day-cell][data-outside]:not([selected]){opacity:.5}}
+@layer anta{.anta-calendar{--calendar-cell-width: 32px;--calendar-cell-height: 28px;display:inline-flex;flex-direction:column;gap:6px}.anta-calendar [data-part=header]{display:flex;align-items:center;gap:0}.anta-calendar [data-part=heading]{flex:1 1 auto;justify-content:center;white-space:nowrap}.anta-calendar .jump-dot{flex:none;inline-size:6px;block-size:6px;border-radius:999px;background:currentColor}.anta-calendar[data-size=small]{--calendar-cell-width: 28px;--calendar-cell-height: 24px}.anta-calendar[data-size=large]{--calendar-cell-width: 36px;--calendar-cell-height: 32px}.anta-calendar[data-size=small] [data-part=weekday]{font-size:13px;line-height:16px}.anta-calendar[data-size=large] [data-part=weekday]{font-size:17px;line-height:24px}a-calendar{display:inline-grid;grid-template-columns:repeat(7,var(--calendar-cell-width, 32px));gap:1px;font-family:var(--sans-serif)}a-calendar [data-part=weekday]{display:flex;align-items:center;justify-content:center;height:24px;font-size:15px;line-height:20px;font-weight:400;color:var(--text-4);user-select:none}a-calendar [data-part=weekday][data-weekend]{color:var(--text-5)}a-calendar a-button[data-part=day-cell]{padding-inline:0;min-width:var(--calendar-cell-width, 32px);min-height:var(--calendar-cell-height, 28px);justify-content:center}a-calendar a-button[data-part=day-cell] a-button-label{padding-bottom:0}a-calendar a-button[data-part=day-cell]:focus-visible{outline-offset:0}a-calendar a-button[data-part=day-cell][data-today]:not([selected]){font-weight:600}a-calendar a-button[data-part=day-cell][data-outside]:not([selected]){opacity:.5}}

package/dist/elements/a-dialog.css

@@ -0,0 +1 @@
+@layer anta{a-dialog{--dialog-bg: var(--bg-1);--dialog-text: var(--text-2);--dialog-border: color-mix(in oklch, black 9%, transparent);--dialog-radius: 10px;--dialog-shadow: inset 0 0 0 1px var(--dialog-border), 0 1px 3px color-mix(in oklch, black 10%, transparent), 0 12px 32px color-mix(in oklch, black 22%, transparent), 0 28px 64px color-mix(in oklch, black 14%, transparent);--dialog-overlay: color-mix(in oklch, black 42%, transparent);display:contents}a-dialog[round]{--dialog-round: attr(round type(<length>), var(--dialog-radius, 10px))}a-dialog:not(:defined){display:none}.dark a-dialog{--dialog-border: color-mix(in oklch, white 14%, transparent);--dialog-shadow: inset 0 0 0 1px var(--dialog-border), 0 1px 3px color-mix(in oklch, black 40%, transparent), 0 12px 32px color-mix(in oklch, black 55%, transparent), 0 28px 64px color-mix(in oklch, black 40%, transparent);--dialog-overlay: color-mix(in oklch, black 62%, transparent)}}

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

@@ -0,0 +1,26 @@
+import { HTMLElementBase } from '../anta_helpers';
+import './a-dialog.css';
+export declare class ADialogElement extends HTMLElementBase {
+    #private;
+    static observedAttributes: string[];
+    private dialog;
+    private headerSlot;
+    private footerSlot;
+    private closeSlot;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    /** Public imperative API — mirrors `<dialog>`. `show()` requests open,
+     *  `close()` requests close; both honor the state contract. */
+    show(): void;
+    close(): void;
+    get open(): boolean;
+    /** Announce a requested OPEN (cancelable, before applying), then — uncontrolled
+     *  and un-vetoed — apply it. Controlled: never self-apply. */
+    requestOpen(): void;
+    /** Announce a requested CLOSE (cancelable, before applying), then — uncontrolled
+     *  and un-vetoed — apply it. Controlled: never self-apply. */
+    requestClose(): void;
+}
+export declare function register_a_dialog(): void;

package/dist/elements/a-dialog.js

@@ -0,0 +1,386 @@
+import { HTMLElementBase, parseOpenState } from "../anta_helpers";
+import "./a-dialog.css";
+const CLOSE_TRIGGER = "closerequest";
+const ANIM_MS = 200;
+const SHADOW_STYLE = `
+  :host { display: contents; }
+
+  dialog {
+    --_dur: ${ANIM_MS}ms;
+    --_r: var(--dialog-round, var(--dialog-radius, 10px));
+
+    position: fixed;
+    box-sizing: border-box;
+    padding: 0;
+    border: none;
+    max-width: calc(100vw - 2 * var(--dialog-margin, 32px));
+    max-height: calc(100dvh - 2 * var(--dialog-margin, 32px));
+    width: var(--dialog-width, 480px);
+    height: var(--dialog-height, fit-content);
+    overflow: visible;
+    color: var(--dialog-text, inherit);
+    background: var(--dialog-bg, #fff);
+    border-radius: var(--_r);
+    box-shadow: var(--dialog-shadow, inset 0 0 0 1px color-mix(in oklch, black 8%, transparent), 0 10px 38px color-mix(in oklch, black 28%, transparent));
+
+    flex-direction: column;
+  }
+
+  dialog[open] {
+    display: flex;
+  }
+
+  dialog:focus, dialog:focus-visible { outline: none; }
+
+  dialog::backdrop {
+    background: var(--dialog-overlay, color-mix(in oklch, black 40%, transparent));
+  }
+
+  :host { --_enter-from: scale(0.97); }
+  :host([position="left"]) { --_enter-from: translateX(-100%); }
+  :host([position="right"]) { --_enter-from: translateX(100%); }
+  :host([position="top"]) { --_enter-from: translateY(-100%); }
+  :host([position="bottom"]) { --_enter-from: translateY(100%); }
+
+  @media (prefers-reduced-motion: no-preference) {
+    dialog {
+      opacity: 0;
+      transform: var(--_enter-from);
+      transition:
+        opacity var(--_dur) ease,
+        transform var(--_dur) ease,
+        overlay var(--_dur) ease allow-discrete,
+        display var(--_dur) ease allow-discrete;
+    }
+    dialog[open] {
+      opacity: 1;
+      transform: none;
+    }
+    @starting-style {
+      dialog[open] { opacity: 0; transform: var(--_enter-from); }
+    }
+
+    dialog::backdrop {
+      background: transparent;
+      transition:
+        background var(--_dur) ease,
+        overlay var(--_dur) ease allow-discrete,
+        display var(--_dur) ease allow-discrete;
+    }
+    dialog[open]::backdrop { background: var(--dialog-overlay, color-mix(in oklch, black 40%, transparent)); }
+    @starting-style {
+      dialog[open]::backdrop { background: transparent; }
+    }
+  }
+
+  :host([position="left"]) dialog,
+  :host([position="right"]) dialog {
+    width: var(--dialog-width, 380px);
+    max-width: calc(100vw - var(--dialog-margin, 32px));
+    height: 100dvh;
+    max-height: 100dvh;
+    border-radius: 0;
+  }
+  :host([position="left"]) dialog { margin: 0 auto 0 0; }
+  :host([position="right"]) dialog { margin: 0 0 0 auto; }
+
+  :host([position="top"]) dialog,
+  :host([position="bottom"]) dialog {
+    width: 100vw;
+    max-width: 100vw;
+    height: var(--dialog-height, fit-content);
+    max-height: calc(100dvh - var(--dialog-margin, 32px));
+    border-radius: 0;
+  }
+  :host([position="top"]) dialog { margin: 0 auto auto auto; }
+  :host([position="bottom"]) dialog { margin: auto auto 0 auto; }
+
+  :host([position="fullscreen"]) dialog {
+    width: 100vw;
+    max-width: 100vw;
+    height: 100dvh;
+    max-height: 100dvh;
+    margin: 0;
+    border-radius: 0;
+  }
+
+  :host([round]) dialog { border-radius: var(--_r); }
+  :host([round="top"]) dialog { border-radius: var(--_r) var(--_r) 0 0; }
+  :host([round="bottom"]) dialog { border-radius: 0 0 var(--_r) var(--_r); }
+  :host([round="left"]) dialog { border-radius: var(--_r) 0 0 var(--_r); }
+  :host([round="right"]) dialog { border-radius: 0 var(--_r) var(--_r) 0; }
+
+  slot[name="header"] {
+    display: none;
+    flex: 0 0 auto;
+    padding: var(--dialog-header-padding, 18px 20px 8px);
+    font-size: 17px;
+    font-weight: 560;
+    line-height: 24px;
+  }
+  slot[name="header"].has-content { display: block; }
+  dialog.has-close slot[name="header"] { padding-inline-end: 52px; }
+
+  slot[part="body"] {
+    display: block;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    padding: var(--dialog-body-padding, 8px 20px 12px);
+  }
+  /* With a close button but no header, the body is the top zone, so it takes the
+     \u2715 clearance instead of the header (which is display:none when empty). */
+  dialog.has-close slot[name="header"]:not(.has-content) ~ slot[part="body"] {
+    padding-inline-end: 52px;
+  }
+
+  slot[name="footer"] {
+    display: none;
+    flex: 0 0 auto;
+    padding: var(--dialog-footer-padding, 8px 20px 18px);
+  }
+  slot[name="footer"].has-content {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  slot[name="close"] { display: none; }
+  slot[name="close"].has-content {
+    display: block;
+    position: absolute;
+    inset-block-start: 10px;
+    inset-inline-end: 10px;
+    z-index: 1;
+  }
+`;
+class ADialogElement extends HTMLElementBase {
+  static observedAttributes = ["state", "name"];
+  dialog;
+  headerSlot;
+  footerSlot;
+  closeSlot;
+  // Counts `dialog.close()` calls WE initiate whose async `close` event is still
+  // pending, and is decremented as each arrives. The native `close` event fires
+  // from a queued task, so a synchronous guard can't span it, and a boolean
+  // can't span a BURST (two re-parents in one tick queue two closes; the first
+  // event would clear the flag and the second would be misread as out-of-band).
+  // The counter lets the `close` handler tell our own closes (ignore) from an
+  // out-of-band one (`<form method="dialog">`, a consumer calling the shadow
+  // dialog's close(), bfcache), which it must reconcile.
+  #programmaticCloses = 0;
+  // The intended (uncontrolled) open state, held in JS so it survives a
+  // disconnect → reconnect (a DOM move / re-parent). disconnectedCallback
+  // force-closes the native dialog to free the top layer, but must not lose
+  // whether the user had it open — otherwise a re-parented open dialog would
+  // vanish (trigger-opened) or a re-parented closed one would pop back (a stale
+  // `default-state="open"` re-seeding). Only ever reflects genuine open/close
+  // intent, never the disconnect teardown.
+  #wantOpen = false;
+  // default-state is read ONCE (the first connect), never again — re-seeding on
+  // every connect would reopen a dialog the user has since closed.
+  #seeded = false;
+  // Whether the current pointer press began on the backdrop (the dialog element
+  // itself), so a press-inside → release-on-backdrop drag (text selection) is
+  // NOT read as a backdrop dismiss.
+  #pressedBackdrop = false;
+  // The document click listener wired for the `name`-trigger convenience, kept so
+  // it can be torn down (and re-wired when `name` / controlled-ness changes).
+  #triggerListener;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = SHADOW_STYLE;
+    this.dialog = document.createElement("dialog");
+    this.dialog.setAttribute("part", "dialog");
+    this.dialog.tabIndex = -1;
+    this.closeSlot = document.createElement("slot");
+    this.closeSlot.name = "close";
+    this.closeSlot.setAttribute("part", "close");
+    this.headerSlot = document.createElement("slot");
+    this.headerSlot.name = "header";
+    this.headerSlot.setAttribute("part", "header");
+    const bodySlot = document.createElement("slot");
+    bodySlot.setAttribute("part", "body");
+    this.footerSlot = document.createElement("slot");
+    this.footerSlot.name = "footer";
+    this.footerSlot.setAttribute("part", "footer");
+    for (const slot of [this.headerSlot, this.footerSlot, this.closeSlot]) {
+      slot.addEventListener("slotchange", () => {
+        const has = slot.assignedNodes().length > 0;
+        slot.classList.toggle("has-content", has);
+        if (slot === this.closeSlot) this.dialog.classList.toggle("has-close", has);
+      });
+    }
+    this.headerSlot.addEventListener("slotchange", () => this.#syncAccessibleName());
+    this.dialog.append(this.headerSlot, bodySlot, this.footerSlot, this.closeSlot);
+    shadow.append(style, this.dialog);
+    this.dialog.addEventListener("cancel", (e) => {
+      e.preventDefault();
+      if (!this.#persistent) this.requestClose();
+    });
+    this.dialog.addEventListener("pointerdown", (e) => {
+      this.#pressedBackdrop = e.target === this.dialog;
+    });
+    this.dialog.addEventListener("click", (e) => {
+      if (this.#persistent) return;
+      if (this.#pressedBackdrop && e.target === this.dialog) this.requestClose();
+    });
+    this.dialog.addEventListener("close", () => {
+      if (this.#programmaticCloses > 0) {
+        this.#programmaticCloses--;
+        return;
+      }
+      if (this.#controlled) this.#reflect(parseOpenState(this.getAttribute("state")));
+      else this.#wantOpen = false;
+    });
+    this.addEventListener(CLOSE_TRIGGER, () => this.requestClose());
+  }
+  connectedCallback() {
+    if (this.#controlled) {
+      this.#reflect(parseOpenState(this.getAttribute("state")));
+    } else {
+      if (!this.#seeded) {
+        if (parseOpenState(this.getAttribute("default-state")) === "open") this.#wantOpen = true;
+        this.#seeded = true;
+      }
+      if (this.#wantOpen) this.#open();
+    }
+    this.#syncTriggerListener();
+    this.#syncAccessibleName();
+  }
+  disconnectedCallback() {
+    this.#teardownTriggerListener();
+    if (this.dialog.open) {
+      this.#programmaticCloses++;
+      this.dialog.close();
+    }
+  }
+  attributeChangedCallback(name) {
+    if (name === "state") {
+      if (this.#controlled) this.#reflect(parseOpenState(this.getAttribute("state")));
+      this.#syncTriggerListener();
+    } else if (name === "name") {
+      this.#syncTriggerListener();
+    }
+  }
+  /** Controlled mode: the `state` attribute is present and owns the open state. */
+  get #controlled() {
+    return this.hasAttribute("state");
+  }
+  /** Light-dismiss (Esc + backdrop) disabled — the dialog closes only via
+   *  explicit controls (close button / programmatic). */
+  get #persistent() {
+    return this.hasAttribute("persistent");
+  }
+  /** The currently *applied* open state (read from the native dialog — the
+   *  source of truth for what's painted). */
+  get #current() {
+    return this.dialog.open ? "open" : "closed";
+  }
+  /** Public imperative API — mirrors `<dialog>`. `show()` requests open,
+   *  `close()` requests close; both honor the state contract. */
+  show() {
+    this.requestOpen();
+  }
+  close() {
+    this.requestClose();
+  }
+  get open() {
+    return this.dialog.open;
+  }
+  /** Announce a requested OPEN (cancelable, before applying), then — uncontrolled
+   *  and un-vetoed — apply it. Controlled: never self-apply. */
+  requestOpen() {
+    if (this.#current === "open") return;
+    const ok = this.#announce("open");
+    if (this.#controlled) return;
+    if (ok) this.#open();
+  }
+  /** Announce a requested CLOSE (cancelable, before applying), then — uncontrolled
+   *  and un-vetoed — apply it. Controlled: never self-apply. */
+  requestClose() {
+    if (this.#current === "closed") return;
+    const ok = this.#announce("closed");
+    if (this.#controlled) return;
+    if (ok) this.#close();
+  }
+  /** Dispatch the cancelable `statechange` for a requested transition. Returns
+   *  false if a handler vetoed it. */
+  #announce(next) {
+    return this.dispatchEvent(
+      new CustomEvent("statechange", {
+        cancelable: true,
+        detail: { next, prev: this.#current }
+      })
+    );
+  }
+  /** Reflect a controlled `state` onto the native dialog (idempotent). No
+   *  `statechange` — this is the consumer's own command, not a user gesture. */
+  #reflect(state) {
+    if (state === "open") this.#open();
+    else this.#close();
+  }
+  /** Raw open: show the modal dialog. Records the open intent (survives a
+   *  disconnect). Guarded against a not-connected / already-open native element
+   *  (both throw / no-op). */
+  #open() {
+    this.#wantOpen = true;
+    if (this.dialog.open || !this.isConnected) return;
+    this.dialog.showModal();
+    if (!this.querySelector("[autofocus]")) this.dialog.focus();
+  }
+  /** Raw close. Records the closed intent and counts the pending `close` event as
+   *  ours so the listener doesn't reconcile it. (The disconnect teardown closes
+   *  the native dialog directly, NOT through here, to preserve `#wantOpen`.) */
+  #close() {
+    this.#wantOpen = false;
+    if (!this.dialog.open) return;
+    this.#programmaticCloses++;
+    this.dialog.close();
+  }
+  /** Publish the header text as the shadow dialog's accessible name (a-input's
+   *  label-mirror pattern). Shadow-internal — not a host / light-DOM write. */
+  #syncAccessibleName() {
+    const text = this.headerSlot.assignedNodes().map((n) => n.textContent ?? "").join(" ").trim();
+    if (text) this.dialog.setAttribute("aria-label", text);
+    else this.dialog.removeAttribute("aria-label");
+  }
+  // --- `name`-trigger convenience (uncontrolled only) ---
+  #syncTriggerListener() {
+    const wanted = !this.#controlled && !!this.getAttribute("name");
+    if (wanted && !this.#triggerListener) this.#wireTriggerListener();
+    else if (!wanted && this.#triggerListener) this.#teardownTriggerListener();
+  }
+  #wireTriggerListener() {
+    this.#triggerListener = (e) => {
+      const name = this.getAttribute("name");
+      if (!name) return;
+      const t = e.target;
+      if (!(t instanceof Element)) return;
+      if (t.closest(`[data-dialog-open="${CSS.escape(name)}"]`)) this.requestOpen();
+      else if (t.closest(`[data-dialog-close="${CSS.escape(name)}"]`)) this.requestClose();
+    };
+    this.doc.addEventListener("click", this.#triggerListener);
+  }
+  #teardownTriggerListener() {
+    if (this.#triggerListener) {
+      this.doc.removeEventListener("click", this.#triggerListener);
+      this.#triggerListener = void 0;
+    }
+  }
+}
+function register_a_dialog() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-dialog")) {
+    customElements.define("a-dialog", ADialogElement);
+  }
+}
+register_a_dialog();
+export {
+  ADialogElement,
+  register_a_dialog
+};

package/dist/elements/a-expander.js

@@ -1,4 +1,4 @@
-import { HTMLElementBase } from "../anta_helpers";
+import { HTMLElementBase, parseOpenState } from "../anta_helpers";
 import "./a-expander.css";
 const ANIM_MS = 200;
 const SUMMARY_TYPE_SCALE = {
@@ -139,7 +139,7 @@ const SHADOW_STYLE = `
     transition-behavior: allow-discrete;
   }
 `;
-const parseState = (v) => v === "open" ? "open" : "closed";
+const parseState = parseOpenState;
 class AExpanderElement extends HTMLElementBase {
   static observedAttributes = ["state", "disabled", "round"];
   summary;

package/dist/elements/a-input-time.css

@@ -0,0 +1 @@
+@layer anta{a-input-time:not(:defined){display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px}a-input-time:not(:defined)>[slot=leading],a-input-time:not(:defined)>[slot=trailing],a-input-time:not(:defined)>[slot=clear],a-input-time:not(:defined)>[slot=hint]{display:none!important}a-input-time:not(:defined)>[slot=label]{display:block;color:var(--input-time-label);font-family:var(--sans-serif);font-size:15px;line-height:20px;font-weight:500}a-input-time[size=small]:not(:defined)>[slot=label]{font-size:13px;line-height:16px}a-input-time[size=large]:not(:defined)>[slot=label]{font-size:17px;line-height:22px}a-input-time:not(:defined):after{content:"\2013\2013:\2013\2013";display:block;min-height:28px;line-height:28px;padding-inline:8px;border-radius:4px;box-shadow:inset 0 0 0 .5px var(--input-time-border);color:var(--input-time-placeholder);font-family:var(--sans-serif);font-size:15px;font-weight:400;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;white-space:nowrap}a-input-time[size=small]:not(:defined):after{min-height:24px;line-height:24px;font-size:13px}a-input-time[size=large]:not(:defined):after{min-height:32px;line-height:32px;font-size:17px}a-input-time[round]:not(:defined):after{border-radius:var(--input-time-round, 999px)}a-input-time{transition:opacity .28s ease-out 40ms}a-input-time:not(:defined){opacity:.5}@media(prefers-reduced-motion:reduce){a-input-time{transition:none}}a-input-time{--input-time-bg: var(--bg-1);--input-time-border: var(--border-2);--input-time-border-hover: var(--border-1);--input-time-text: var(--text-1);--input-time-label: var(--text-3);--input-time-placeholder: var(--text-3);--input-time-adornment: var(--text-3);--input-time-hint: var(--text-3);--input-time-seg-focus-bg: color-mix(in oklch, var(--focus-ring) 20%, transparent);--input-time-seg-focus-text: var(--text-1);width:fit-content;max-width:100%}a-input-time[round]{--input-time-round: attr(round type(<length>), 999px)}a-input-time[size=small] a-icon{--icon-size: 14px}a-input-time[size=large] a-icon{--icon-size: 18px}a-input-time[tone]:not([tone=""]){--input-time-tone-source: attr(tone type(<color>), var(--border-2));--input-time-border: oklch(from var(--input-time-tone-source) .7 calc(c*.8) h);--input-time-border-hover: oklch(from var(--input-time-tone-source) .6 c h);.dark &{--input-time-border: oklch(from var(--input-time-tone-source) .5 calc(c*.8) h);--input-time-border-hover: oklch(from var(--input-time-tone-source) .6 c h)}}a-input-time[status=critical]{--input-time-bg: #fefbfb;--input-time-border: #de4545;--input-time-border-hover: #de4545;--input-time-hint: #c9302c}a-input-time[status=warning]{--input-time-bg: #fefbf6;--input-time-border: #ae6613;--input-time-border-hover: #ae6613;--input-time-hint: #995200}a-input-time[status=success]{--input-time-bg: #f7fcf9;--input-time-border: #329550;--input-time-border-hover: #329550;--input-time-hint: #2a7e43}a-input-time[status=info]{--input-time-bg: #fbfcfe;--input-time-border: #2686d9;--input-time-border-hover: #2686d9;--input-time-hint: #175082}a-input-time[status=brand]{--input-time-bg: #fcfcfe;--input-time-border: #7460d7;--input-time-border-hover: #7460d7;--input-time-hint: #5f4bc3}.dark a-input-time[status=critical]{--input-time-bg: #1f0506;--input-time-border: #c9302c;--input-time-border-hover: #c9302c;--input-time-hint: #e25858}.dark a-input-time[status=warning]{--input-time-bg: #120a03;--input-time-border: #995200;--input-time-border-hover: #995200;--input-time-hint: #c37416}.dark a-input-time[status=success]{--input-time-bg: #041008;--input-time-border: var(--border-1-success);--input-time-border-hover: var(--border-1-success);--input-time-hint: #3aab5c}.dark a-input-time[status=info]{--input-time-bg: #040d18;--input-time-border: #1f6eb2;--input-time-border-hover: #1f6eb2;--input-time-hint: #3e93dd}.dark a-input-time[status=brand]{--input-time-bg: #0b0916;--input-time-border: #5f4bc3;--input-time-border-hover: #5f4bc3;--input-time-hint: #8270db}a-input-time:disabled{--input-time-bg: #44374b12;--input-time-border: #44374b26;--input-time-border-hover: #44374b26;--input-time-text: var(--text-4);--input-time-label: var(--text-4);--input-time-hint: var(--text-5);cursor:not-allowed}.dark a-input-time:disabled{--input-time-bg: #e4d1ef0d;--input-time-border: #e4d1ef1f;--input-time-border-hover: #e4d1ef1f}.dark a-input-time:not([status]){--input-time-border: #49424c;--input-time-border-hover: #635b65}.dark a-input-time{--input-time-seg-focus-bg: color-mix(in oklch, var(--focus-ring) 30%, transparent)}}

package/dist/elements/a-input-time.d.ts

@@ -0,0 +1,27 @@
+import { HTMLElementBase } from '../anta_helpers';
+import './a-input-time.css';
+export declare class AInputTimeElement extends HTMLElementBase {
+    #private;
+    static formAssociated: boolean;
+    static observedAttributes: string[];
+    constructor();
+    getAnchorRect(): DOMRect;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    /** The current time as 24-hour `"HH:mm"`, or `''` when incomplete. */
+    get value(): string;
+    set value(v: string);
+    /** Empty the field, refocus the first segment, and fire input + change. */
+    clear(): void;
+    get name(): string;
+    set name(v: string);
+    get validity(): ValidityState | undefined;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: string): void;
+}
+export declare function register_a_input_time(): void;