@consumidor-positivo/aurora 0.11.1 → 1.0.0

package/dist/components/SpecialButton/index.es.js

@@ -0,0 +1,193 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { c as classNames } from "../../index-C6Q03EyZ.js";
+import { useRef, useState, useEffect } from "react";
+import "../Icon/index.es.js";
+import { IconArrowRight } from "../icons/IconArrowRight/index.es.js";
+import { IconCheck } from "../icons/IconCheck/index.es.js";
+import { IconLoader } from "../icons/IconLoader/index.es.js";
+import { IconSlash } from "../icons/IconSlash/index.es.js";
+import { Conditional } from "../Conditional/index.es.js";
+import './styles.css';const KNOB_SIZE = 40;
+const TRACK_PADDING = 4;
+const CONFIRM_THRESHOLD = 0.85;
+const _PressButton = ({
+  children = "Hold to confirm",
+  onConfirm,
+  holdDuration = 1500,
+  disabled = false,
+  loading = false,
+  success = false,
+  expand,
+  "data-testid": dataTestId
+}) => {
+  const [holding, setHolding] = useState(false);
+  const [confirmed, setConfirmed] = useState(false);
+  const timerRef = useRef();
+  const isSuccess = success || confirmed;
+  const isInteractive = !disabled && !loading && !isSuccess;
+  useEffect(() => () => window.clearTimeout(timerRef.current), []);
+  function _startHold() {
+    if (!isInteractive || holding) return;
+    setHolding(true);
+    timerRef.current = window.setTimeout(() => {
+      setHolding(false);
+      setConfirmed(true);
+      if (onConfirm) onConfirm();
+    }, holdDuration);
+  }
+  function _cancelHold() {
+    if (!holding) return;
+    window.clearTimeout(timerRef.current);
+    setHolding(false);
+  }
+  function handleKeyDown(event) {
+    if ((event.key === "Enter" || event.key === " ") && !event.repeat) {
+      event.preventDefault();
+      _startHold();
+    }
+  }
+  function handleKeyUp(event) {
+    if (event.key === "Enter" || event.key === " ") _cancelHold();
+  }
+  const classes = classNames("au-special-button", "au-special-button--type-press", {
+    "au-special-button--holding": holding,
+    "au-special-button--disabled": disabled,
+    "au-special-button--loading": loading,
+    "au-special-button--success": isSuccess,
+    [`au-special-button--expand-${expand}`]: !!expand
+  });
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      style: {
+        "--au-special-button-duration": `${holdDuration}ms`
+      },
+      disabled: disabled || loading,
+      "aria-busy": loading,
+      onPointerDown: _startHold,
+      onPointerUp: _cancelHold,
+      onPointerLeave: _cancelHold,
+      onPointerCancel: _cancelHold,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
+      "data-testid": dataTestId,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "au-special-button__fill", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(
+          Conditional,
+          {
+            condition: loading,
+            renderIf: /* @__PURE__ */ jsx(IconLoader, {}),
+            renderElse: /* @__PURE__ */ jsxs("span", { className: "au-special-button__label", children: [
+              disabled && /* @__PURE__ */ jsx(IconSlash, { "aria-hidden": "true" }),
+              children
+            ] })
+          }
+        )
+      ]
+    }
+  );
+};
+const _SliderButton = ({
+  children = "Slide to action",
+  onConfirm,
+  variant = "primary",
+  disabled = false,
+  loading = false,
+  success = false,
+  skeleton = false,
+  knobAriaLabel = "Arraste para confirmar",
+  "data-testid": dataTestId
+}) => {
+  const containerRef = useRef(null);
+  const startXRef = useRef(0);
+  const [dragging, setDragging] = useState(false);
+  const [dragX, setDragX] = useState(0);
+  const [confirmed, setConfirmed] = useState(false);
+  const isSuccess = success || confirmed;
+  const isInteractive = !disabled && !loading && !isSuccess && !skeleton;
+  function _maxDrag() {
+    const container = containerRef.current;
+    if (!container) return 0;
+    return container.clientWidth - KNOB_SIZE - TRACK_PADDING * 2;
+  }
+  function _confirm() {
+    setConfirmed(true);
+    if (onConfirm) onConfirm();
+  }
+  function handlePointerDown(event) {
+    var _a, _b;
+    if (!isInteractive) return;
+    setDragging(true);
+    startXRef.current = event.clientX;
+    (_b = (_a = event.currentTarget).setPointerCapture) == null ? void 0 : _b.call(_a, event.pointerId);
+  }
+  function handlePointerMove(event) {
+    if (!dragging) return;
+    const delta = event.clientX - startXRef.current;
+    setDragX(Math.min(Math.max(delta, 0), _maxDrag()));
+  }
+  function handlePointerEnd() {
+    if (!dragging) return;
+    setDragging(false);
+    const max = _maxDrag();
+    if (max > 0 && dragX >= max * CONFIRM_THRESHOLD) _confirm();
+    setDragX(0);
+  }
+  function handleKeyDown(event) {
+    if (!isInteractive) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      _confirm();
+    }
+  }
+  const classes = classNames(
+    "au-special-button",
+    "au-special-button--type-slider",
+    {
+      [`au-special-button--variant-${variant}`]: !!variant,
+      "au-special-button--dragging": dragging,
+      "au-special-button--disabled": disabled,
+      "au-special-button--loading": loading,
+      "au-special-button--success": isSuccess,
+      "au-special-button--skeleton": skeleton
+    }
+  );
+  function _renderKnobIcon() {
+    if (isSuccess) return /* @__PURE__ */ jsx(IconCheck, { "aria-hidden": "true" });
+    if (disabled) return /* @__PURE__ */ jsx(IconSlash, { "aria-hidden": "true" });
+    return /* @__PURE__ */ jsx(IconArrowRight, { "aria-hidden": "true" });
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: classes, "data-testid": dataTestId, children: [
+    loading && /* @__PURE__ */ jsx(IconLoader, {}),
+    !loading && !skeleton && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "au-special-button__label", children }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "au-special-button__knob",
+          "aria-label": knobAriaLabel,
+          disabled,
+          style: dragX > 0 ? { transform: `translateX(${dragX}px)` } : void 0,
+          onPointerDown: handlePointerDown,
+          onPointerMove: handlePointerMove,
+          onPointerUp: handlePointerEnd,
+          onPointerCancel: handlePointerEnd,
+          onKeyDown: handleKeyDown,
+          children: _renderKnobIcon()
+        }
+      )
+    ] })
+  ] });
+};
+const SpecialButton = ({ type = "press", ...props }) => {
+  if (type === "slider") return /* @__PURE__ */ jsx(_SliderButton, { ...props });
+  return /* @__PURE__ */ jsx(_PressButton, { ...props });
+};
+export {
+  SpecialButton
+};
+//# sourceMappingURL=index.es.js.map

package/dist/components/SpecialButton/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/SpecialButton/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport React, { ReactNode, useEffect, useRef, useState } from 'react'\nimport {\n  IconArrowRight,\n  IconCheck,\n  IconLoader,\n  IconSlash,\n} from '../icons/default'\nimport { Conditional } from '../misc/Conditional'\nimport './styles.scss'\n\nconst KNOB_SIZE = 40\nconst TRACK_PADDING = 4\nconst CONFIRM_THRESHOLD = 0.85\n\nexport type SpecialButtonProps = {\n  /**\n   * Interaction mode: 'press' is hold-to-confirm (Figma: Press Button),\n   * 'slider' is swipe-to-confirm (Figma: Swipe Button).\n   * @default 'press'\n   */\n  type?: 'press' | 'slider'\n  children?: ReactNode\n  /** Called once when the interaction completes (hold finished / knob dragged to the end). */\n  onConfirm?: () => void\n  disabled?: boolean\n  loading?: boolean\n  /**\n   * Controlled success state. The component also enters success on its own\n   * right after a completed interaction.\n   */\n  success?: boolean\n  /**\n   * Press only — time in milliseconds the user must keep pressing to confirm.\n   * @default 1500\n   */\n  holdDuration?: number\n  /** Press only — stretches the button to fill the container width. */\n  expand?: 'x'\n  /** Slider only — visual variant (Figma: Swipe Button, ◇ Type Primary | Secondary). */\n  variant?: 'primary' | 'secondary'\n  /** Slider only — renders an empty skeleton placeholder. */\n  skeleton?: boolean\n  /**\n   * Slider only — accessible label for the draggable knob. Pressing Enter or\n   * Space on the focused knob confirms directly (keyboard alternative to the\n   * swipe gesture).\n   */\n  knobAriaLabel?: string\n  'data-testid'?: string\n}\n\nconst _PressButton = ({\n  children = 'Hold to confirm',\n  onConfirm,\n  holdDuration = 1500,\n  disabled = false,\n  loading = false,\n  success = false,\n  expand,\n  'data-testid': dataTestId,\n}: SpecialButtonProps) => {\n  const [holding, setHolding] = useState(false)\n  const [confirmed, setConfirmed] = useState(false)\n  const timerRef = useRef<number>()\n\n  const isSuccess = success || confirmed\n  const isInteractive = !disabled && !loading && !isSuccess\n\n  useEffect(() => () => window.clearTimeout(timerRef.current), [])\n\n  function _startHold() {\n    if (!isInteractive || holding) return\n    setHolding(true)\n    timerRef.current = window.setTimeout(() => {\n      setHolding(false)\n      setConfirmed(true)\n      if (onConfirm) onConfirm()\n    }, holdDuration)\n  }\n\n  function _cancelHold() {\n    if (!holding) return\n    window.clearTimeout(timerRef.current)\n    setHolding(false)\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {\n    if ((event.key === 'Enter' || event.key === ' ') && !event.repeat) {\n      event.preventDefault()\n      _startHold()\n    }\n  }\n\n  function handleKeyUp(event: React.KeyboardEvent<HTMLButtonElement>) {\n    if (event.key === 'Enter' || event.key === ' ') _cancelHold()\n  }\n\n  const classes = classNames('au-special-button', 'au-special-button--type-press', {\n    'au-special-button--holding': holding,\n    'au-special-button--disabled': disabled,\n    'au-special-button--loading': loading,\n    'au-special-button--success': isSuccess,\n    [`au-special-button--expand-${expand}`]: !!expand,\n  })\n\n  return (\n    <button\n      type=\"button\"\n      className={classes}\n      style={\n        {\n          '--au-special-button-duration': `${holdDuration}ms`,\n        } as React.CSSProperties\n      }\n      disabled={disabled || loading}\n      aria-busy={loading}\n      onPointerDown={_startHold}\n      onPointerUp={_cancelHold}\n      onPointerLeave={_cancelHold}\n      onPointerCancel={_cancelHold}\n      onKeyDown={handleKeyDown}\n      onKeyUp={handleKeyUp}\n      data-testid={dataTestId}>\n      <span className=\"au-special-button__fill\" aria-hidden=\"true\" />\n      <Conditional\n        condition={loading}\n        renderIf={<IconLoader />}\n        renderElse={\n          <span className=\"au-special-button__label\">\n            {disabled && <IconSlash aria-hidden=\"true\" />}\n            {children}\n          </span>\n        }\n      />\n    </button>\n  )\n}\n\nconst _SliderButton = ({\n  children = 'Slide to action',\n  onConfirm,\n  variant = 'primary',\n  disabled = false,\n  loading = false,\n  success = false,\n  skeleton = false,\n  knobAriaLabel = 'Arraste para confirmar',\n  'data-testid': dataTestId,\n}: SpecialButtonProps) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const startXRef = useRef(0)\n  const [dragging, setDragging] = useState(false)\n  const [dragX, setDragX] = useState(0)\n  const [confirmed, setConfirmed] = useState(false)\n\n  const isSuccess = success || confirmed\n  const isInteractive = !disabled && !loading && !isSuccess && !skeleton\n\n  function _maxDrag() {\n    const container = containerRef.current\n    if (!container) return 0\n    return container.clientWidth - KNOB_SIZE - TRACK_PADDING * 2\n  }\n\n  function _confirm() {\n    setConfirmed(true)\n    if (onConfirm) onConfirm()\n  }\n\n  function handlePointerDown(event: React.PointerEvent<HTMLButtonElement>) {\n    if (!isInteractive) return\n    setDragging(true)\n    startXRef.current = event.clientX\n    event.currentTarget.setPointerCapture?.(event.pointerId)\n  }\n\n  function handlePointerMove(event: React.PointerEvent<HTMLButtonElement>) {\n    if (!dragging) return\n    const delta = event.clientX - startXRef.current\n    setDragX(Math.min(Math.max(delta, 0), _maxDrag()))\n  }\n\n  function handlePointerEnd() {\n    if (!dragging) return\n    setDragging(false)\n    const max = _maxDrag()\n    if (max > 0 && dragX >= max * CONFIRM_THRESHOLD) _confirm()\n    setDragX(0)\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {\n    if (!isInteractive) return\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      _confirm()\n    }\n  }\n\n  const classes = classNames(\n    'au-special-button',\n    'au-special-button--type-slider',\n    {\n      [`au-special-button--variant-${variant}`]: !!variant,\n      'au-special-button--dragging': dragging,\n      'au-special-button--disabled': disabled,\n      'au-special-button--loading': loading,\n      'au-special-button--success': isSuccess,\n      'au-special-button--skeleton': skeleton,\n    },\n  )\n\n  function _renderKnobIcon() {\n    if (isSuccess) return <IconCheck aria-hidden=\"true\" />\n    if (disabled) return <IconSlash aria-hidden=\"true\" />\n    return <IconArrowRight aria-hidden=\"true\" />\n  }\n\n  return (\n    <div ref={containerRef} className={classes} data-testid={dataTestId}>\n      {loading && <IconLoader />}\n      {!loading && !skeleton && (\n        <>\n          <span className=\"au-special-button__label\">{children}</span>\n          <button\n            type=\"button\"\n            className=\"au-special-button__knob\"\n            aria-label={knobAriaLabel}\n            disabled={disabled}\n            style={\n              dragX > 0 ? { transform: `translateX(${dragX}px)` } : undefined\n            }\n            onPointerDown={handlePointerDown}\n            onPointerMove={handlePointerMove}\n            onPointerUp={handlePointerEnd}\n            onPointerCancel={handlePointerEnd}\n            onKeyDown={handleKeyDown}>\n            {_renderKnobIcon()}\n          </button>\n        </>\n      )}\n    </div>\n  )\n}\n\nexport const SpecialButton = ({ type = 'press', ...props }: SpecialButtonProps) => {\n  if (type === 'slider') return <_SliderButton {...props} />\n  return <_PressButton {...props} />\n}\n"],"names":[],"mappings":"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"}

package/dist/components/SpecialButton/styles.css

@@ -0,0 +1 @@
+.au-special-button{position:relative;display:flex;align-items:center;justify-content:center;height:48px;border-radius:48px;overflow:hidden;background-color:#0048db;color:#fff;font-family:"Source Sans 3",sans-serif;font-size:16px;font-weight:600;-webkit-user-select:none;user-select:none}.au-special-button--type-press{display:inline-flex;gap:8px;padding:8px 16px;border:none;text-align:center;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}.au-special-button--type-press .au-icon,.au-special-button--type-press .au-icon>svg{width:20px;height:20px;color:#fff}.au-special-button__fill{position:absolute;top:0;left:0;bottom:0;width:0;background-color:#18256c;transition:width .2s ease}.au-special-button__label{position:relative;display:inline-flex;align-items:center;gap:8px}.au-special-button--holding .au-special-button__fill{width:100%;transition:width var(--au-special-button-duration, 1.5s) linear}.au-special-button--type-press.au-special-button--success .au-special-button__fill,.au-special-button--type-press.au-special-button--loading .au-special-button__fill{width:100%;transition:width .3s ease}.au-special-button--type-press.au-special-button--disabled{background-color:#e2e4e9;color:#c4c9d4;cursor:not-allowed}.au-special-button--type-press.au-special-button--disabled .au-icon,.au-special-button--type-press.au-special-button--disabled .au-icon>svg{width:16px;height:16px;color:#c4c9d4}.au-special-button--type-press.au-special-button--loading{cursor:progress}.au-special-button--type-press.au-special-button--loading .au-icon{position:relative;animation:au-special-button-spin 1s infinite linear}.au-special-button--expand-x{width:100%}.au-special-button__knob{position:absolute;top:4px;left:4px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;border-radius:50%;background-color:#fff;box-shadow:0 24px 56px #7686ad14,0 12px 12px #0048db0a;cursor:grab;touch-action:none;transition:transform .2s ease}.au-special-button__knob .au-icon,.au-special-button__knob .au-icon>svg{width:24px;height:24px;color:#0048db}.au-special-button--dragging .au-special-button__knob{cursor:grabbing;transition:none}.au-special-button--type-slider .au-special-button__label{padding:8px 48px}.au-special-button--variant-secondary{background-color:#fff;border:1px solid #0048db;color:#0048db}.au-special-button--type-slider.au-special-button--disabled{background-color:#f6f7fa;border:none;color:#c4c9d4}.au-special-button--type-slider.au-special-button--disabled .au-special-button__knob{background-color:#e2e4e9;box-shadow:none;cursor:not-allowed}.au-special-button--type-slider.au-special-button--disabled .au-special-button__knob .au-icon,.au-special-button--type-slider.au-special-button--disabled .au-special-button__knob .au-icon>svg{color:#c4c9d4}.au-special-button--type-slider.au-special-button--success{background-color:#138040;border:none;color:#fff}.au-special-button--type-slider.au-special-button--success .au-special-button__knob{left:auto;right:4px;cursor:default}.au-special-button--type-slider.au-special-button--success .au-special-button__knob .au-icon,.au-special-button--type-slider.au-special-button--success .au-special-button__knob .au-icon>svg{color:#138040}.au-special-button--variant-secondary.au-special-button--success{background-color:#fff;border:1px solid #10593b;color:#10593b}.au-special-button--variant-secondary.au-special-button--success .au-special-button__knob .au-icon,.au-special-button--variant-secondary.au-special-button--success .au-special-button__knob .au-icon>svg{color:#10593b}.au-special-button--type-slider.au-special-button--loading{background-color:#10593b;border:none;cursor:progress}.au-special-button--type-slider.au-special-button--loading .au-icon{animation:au-special-button-spin 1s infinite linear}.au-special-button--type-slider.au-special-button--loading .au-icon,.au-special-button--type-slider.au-special-button--loading .au-icon>svg{width:20px;height:20px;color:#fff}.au-special-button--skeleton{background-color:#f6f7fa;border:none;animation:au-special-button-pulse 1.5s ease-in-out infinite}@keyframes au-special-button-spin{to{transform:rotate(360deg)}}@keyframes au-special-button-pulse{0%,to{opacity:1}50%{opacity:.6}}

package/dist/components/Spinner/index.d.ts

@@ -1,6 +1,11 @@
-type SpinnerProps = {
-    size: number;
-    color: string;
+export type SpinnerProps = {
+    /**
+     * Token size (Figma: Spinner, ↕ Size). small = 16px, medium = 20px, large = 32px.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /** White spinner for colored backgrounds (Figma: Negative). */
+    negative?: boolean;
+    'data-testid'?: string;
 };
-export declare const Spinner: React.FC<SpinnerProps>;
-export {};
+export declare const Spinner: ({ size, negative, "data-testid": dataTestId, }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Spinner/index.es.js

@@ -1,27 +1,48 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import './styles.css';const Spinner = ({ size, color }) => {
+import { useId } from "react";
+import { c as classNames } from "../../index-C6Q03EyZ.js";
+import { i as COLOR_NEUTRAL_00, j as COLOR_BRAND_BLUE_40 } from "../../tokens-C4yCunfz.js";
+import './styles.css';const SIZE_MAP = {
+  small: 16,
+  medium: 20,
+  large: 32
+};
+const Spinner = ({
+  size = "medium",
+  negative = false,
+  "data-testid": dataTestId
+}) => {
+  const uid = useId().replace(/[^a-zA-Z0-9]/g, "");
+  const gradientId = `au-spinner-gradient-${uid}`;
+  const px = SIZE_MAP[size];
+  const color = negative ? COLOR_NEUTRAL_00 : COLOR_BRAND_BLUE_40;
+  const classes = classNames("au-spinner", {
+    [`au-spinner--size-${size}`]: !!size,
+    "au-spinner--negative": negative
+  });
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "au-spinner",
-      style: { width: size, height: size },
+      className: classes,
+      style: { width: px, height: px },
       role: "status",
       "aria-live": "polite",
       "aria-label": "Carregando",
+      "data-testid": dataTestId,
       children: /* @__PURE__ */ jsxs(
         "svg",
         {
           "aria-hidden": "true",
           xmlns: "http://www.w3.org/2000/svg",
           viewBox: "0 0 64 64",
-          width: size,
-          height: size,
+          width: px,
+          height: px,
           color,
           children: [
             /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
               "linearGradient",
               {
-                id: `au-loading-${color}`,
+                id: gradientId,
                 gradientUnits: "objectBoundingBox",
                 x1: "10%",
                 y1: "0%",
@@ -35,13 +56,7 @@ import './styles.css';const Spinner = ({ size, color }) => {
             ) }),
             /* @__PURE__ */ jsxs("g", { strokeWidth: "7", strokeLinecap: "round", fill: "none", children: [
               /* @__PURE__ */ jsx("path", { stroke: color, d: "M60,32 A28,28 0 1 1 4,32" }),
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  d: "M60,32 A28,28.5 0 1 0 4,32",
-                  stroke: `url(#au-loading-${color})`
-                }
-              )
+              /* @__PURE__ */ jsx("path", { d: "M60,32 A28,28.5 0 1 0 4,32", stroke: `url(#${gradientId})` })
             ] })
           ]
         }

package/dist/components/Spinner/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../lib/components/Spinner/index.tsx"],"sourcesContent":["import './styles.scss'\n\ntype SpinnerProps = {\n  size: number\n  color: string\n}\n\nexport const Spinner: React.FC<SpinnerProps> = ({ size, color }) => {\n  return (\n    <div\n      className=\"au-spinner\"\n      style={{ width: size, height: size }}\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label=\"Carregando\">\n      <svg\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 64 64\"\n        width={size}\n        height={size}\n        color={color}>\n        <defs>\n          <linearGradient\n            id={`au-loading-${color}`}\n            gradientUnits=\"objectBoundingBox\"\n            x1=\"10%\"\n            y1=\"0%\"\n            x2=\"90%\"\n            y2=\"10%\">\n            <stop offset=\"0\" stopColor={color} stopOpacity=\"1\" />\n            <stop offset=\"1\" stopColor={color} stopOpacity=\"0\" />\n          </linearGradient>\n        </defs>\n        <g strokeWidth=\"7\" strokeLinecap=\"round\" fill=\"none\">\n          <path stroke={color} d=\"M60,32 A28,28 0 1 1 4,32\" />\n\n          <path\n            d=\"M60,32 A28,28.5 0 1 0 4,32\"\n            stroke={`url(#au-loading-${color})`}\n          />\n        </g>\n      </svg>\n    </div>\n  )\n}\n"],"names":[],"mappings":";AAOO,MAAM,UAAkC,CAAC,EAAE,MAAM,YAAY;AAClE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,OAAO,MAAM,QAAQ,KAAA;AAAA,MAC9B,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAW;AAAA,MACX,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAY;AAAA,UACZ,OAAM;AAAA,UACN,SAAQ;AAAA,UACR,OAAO;AAAA,UACP,QAAQ;AAAA,UACR;AAAA,UACA,UAAA;AAAA,YAAA,oBAAC,QAAA,EACC,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,cAAc,KAAK;AAAA,gBACvB,eAAc;AAAA,gBACd,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,UAAA;AAAA,kBAAA,oBAAC,UAAK,QAAO,KAAI,WAAW,OAAO,aAAY,KAAI;AAAA,sCAClD,QAAA,EAAK,QAAO,KAAI,WAAW,OAAO,aAAY,IAAA,CAAI;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA,GAEvD;AAAA,iCACC,KAAA,EAAE,aAAY,KAAI,eAAc,SAAQ,MAAK,QAC5C,UAAA;AAAA,cAAA,oBAAC,QAAA,EAAK,QAAQ,OAAO,GAAE,4BAA2B;AAAA,cAElD;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,GAAE;AAAA,kBACF,QAAQ,mBAAmB,KAAK;AAAA,gBAAA;AAAA,cAAA;AAAA,YAClC,EAAA,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/Spinner/index.tsx"],"sourcesContent":["import { useId } from 'react'\nimport classNames from 'classnames'\nimport { COLOR_BRAND_BLUE_40, COLOR_NEUTRAL_00 } from '@core/tokens'\nimport './styles.scss'\n\nconst SIZE_MAP = {\n  small: 16,\n  medium: 20,\n  large: 32,\n}\n\nexport type SpinnerProps = {\n  /**\n   * Token size (Figma: Spinner, ↕ Size). small = 16px, medium = 20px, large = 32px.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large'\n  /** White spinner for colored backgrounds (Figma: Negative). */\n  negative?: boolean\n  'data-testid'?: string\n}\n\nexport const Spinner = ({\n  size = 'medium',\n  negative = false,\n  'data-testid': dataTestId,\n}: SpinnerProps) => {\n  const uid = useId().replace(/[^a-zA-Z0-9]/g, '')\n  const gradientId = `au-spinner-gradient-${uid}`\n  const px = SIZE_MAP[size]\n  const color = negative ? COLOR_NEUTRAL_00 : COLOR_BRAND_BLUE_40\n\n  const classes = classNames('au-spinner', {\n    [`au-spinner--size-${size}`]: !!size,\n    'au-spinner--negative': negative,\n  })\n\n  return (\n    <div\n      className={classes}\n      style={{ width: px, height: px }}\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label=\"Carregando\"\n      data-testid={dataTestId}>\n      <svg\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 64 64\"\n        width={px}\n        height={px}\n        color={color}>\n        <defs>\n          <linearGradient\n            id={gradientId}\n            gradientUnits=\"objectBoundingBox\"\n            x1=\"10%\"\n            y1=\"0%\"\n            x2=\"90%\"\n            y2=\"10%\">\n            <stop offset=\"0\" stopColor={color} stopOpacity=\"1\" />\n            <stop offset=\"1\" stopColor={color} stopOpacity=\"0\" />\n          </linearGradient>\n        </defs>\n        <g strokeWidth=\"7\" strokeLinecap=\"round\" fill=\"none\">\n          <path stroke={color} d=\"M60,32 A28,28 0 1 1 4,32\" />\n\n          <path d=\"M60,32 A28,28.5 0 1 0 4,32\" stroke={`url(#${gradientId})`} />\n        </g>\n      </svg>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;AAKA,MAAM,WAAW;AAAA,EACf,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAaO,MAAM,UAAU,CAAC;AAAA,EACtB,OAAO;AAAA,EACP,WAAW;AAAA,EACX,eAAe;AACjB,MAAoB;AAClB,QAAM,MAAM,MAAA,EAAQ,QAAQ,iBAAiB,EAAE;AAC/C,QAAM,aAAa,uBAAuB,GAAG;AAC7C,QAAM,KAAK,SAAS,IAAI;AACxB,QAAM,QAAQ,WAAW,mBAAmB;AAE5C,QAAM,UAAU,WAAW,cAAc;AAAA,IACvC,CAAC,oBAAoB,IAAI,EAAE,GAAG,CAAC,CAAC;AAAA,IAChC,wBAAwB;AAAA,EAAA,CACzB;AAED,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO,EAAE,OAAO,IAAI,QAAQ,GAAA;AAAA,MAC5B,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAW;AAAA,MACX,eAAa;AAAA,MACb,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAY;AAAA,UACZ,OAAM;AAAA,UACN,SAAQ;AAAA,UACR,OAAO;AAAA,UACP,QAAQ;AAAA,UACR;AAAA,UACA,UAAA;AAAA,YAAA,oBAAC,QAAA,EACC,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI;AAAA,gBACJ,eAAc;AAAA,gBACd,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,UAAA;AAAA,kBAAA,oBAAC,UAAK,QAAO,KAAI,WAAW,OAAO,aAAY,KAAI;AAAA,sCAClD,QAAA,EAAK,QAAO,KAAI,WAAW,OAAO,aAAY,IAAA,CAAI;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA,GAEvD;AAAA,iCACC,KAAA,EAAE,aAAY,KAAI,eAAc,SAAQ,MAAK,QAC5C,UAAA;AAAA,cAAA,oBAAC,QAAA,EAAK,QAAQ,OAAO,GAAE,4BAA2B;AAAA,kCAEjD,QAAA,EAAK,GAAE,8BAA6B,QAAQ,QAAQ,UAAU,IAAA,CAAK;AAAA,YAAA,EAAA,CACtE;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/components/SubHeader/index.d.ts

@@ -2,6 +2,7 @@ type SubHeaderProps = {
     title: string;
     handleReturn: () => void;
     handleHelpInfo?: () => void;
+    'data-testid'?: string;
 };
-export declare const SubHeader: ({ title, handleReturn, handleHelpInfo, }: SubHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SubHeader: ({ title, handleReturn, handleHelpInfo, "data-testid": dataTestId, }: SubHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SubHeader/index.es.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c as classNames } from "../../index-C6Q03EyZ.js";
+import "react";
 import "../Icon/index.es.js";
 import { IconChevronLeft } from "../icons/IconChevronLeft/index.es.js";
 import { IconHelpCircle } from "../icons/IconHelpCircle/index.es.js";
@@ -9,7 +10,8 @@ import { Button } from "../Button/index.es.js";
 import './styles.css';const SubHeader = ({
   title,
   handleReturn,
-  handleHelpInfo
+  handleHelpInfo,
+  "data-testid": dataTestId
 }) => {
   return /* @__PURE__ */ jsx(
     "div",
@@ -17,6 +19,7 @@ import './styles.css';const SubHeader = ({
       className: classNames("au-sub-header", {
         "au-sub-header--with-help": handleHelpInfo
       }),
+      "data-testid": dataTestId,
       children: /* @__PURE__ */ jsxs(Container, { customClass: "au-sub-header__container", children: [
         /* @__PURE__ */ jsx(
           Button,

package/dist/components/SubHeader/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../lib/components/SubHeader/index.tsx"],"sourcesContent":["import { IconChevronLeft, IconHelpCircle } from '../icons/default'\n\nimport { Container } from '@components/Container'\nimport { Text } from '@components/Text'\nimport { Button } from '@components/Button'\n\nimport classNames from 'classnames'\n\nimport './styles.scss'\n\ntype SubHeaderProps = {\n  title: string\n  handleReturn: () => void\n  handleHelpInfo?: () => void\n}\n\nexport const SubHeader = ({\n  title,\n  handleReturn,\n  handleHelpInfo,\n}: SubHeaderProps) => {\n  return (\n    <div\n      className={classNames('au-sub-header', {\n        'au-sub-header--with-help': handleHelpInfo,\n      })}>\n      <Container customClass=\"au-sub-header__container\">\n        <Button\n          className=\"au-sub-header__button\"\n          onClick={handleReturn}\n          type=\"ghost\"\n          aria-label=\"Voltar\">\n          <IconChevronLeft aria-hidden=\"true\" />\n        </Button>\n        <Text\n          className=\"au-sub-header__title\"\n          variant=\"heading-micro\"\n          variantDesk=\"heading-small\"\n          weight=\"bold\"\n          as=\"div\">\n          {title}\n        </Text>\n        {handleHelpInfo && (\n          <Button\n            className=\"au-sub-header__button\"\n            onClick={handleHelpInfo}\n            type=\"ghost\"\n            aria-label=\"Ajuda\">\n            <IconHelpCircle aria-hidden=\"true\" />\n          </Button>\n        )}\n      </Container>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;AAgBO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AACF,MAAsB;AACpB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,iBAAiB;AAAA,QACrC,4BAA4B;AAAA,MAAA,CAC7B;AAAA,MACD,UAAA,qBAAC,WAAA,EAAU,aAAY,4BACrB,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS;AAAA,YACT,MAAK;AAAA,YACL,cAAW;AAAA,YACX,UAAA,oBAAC,iBAAA,EAAgB,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAEtC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,aAAY;AAAA,YACZ,QAAO;AAAA,YACP,IAAG;AAAA,YACF,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,kBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS;AAAA,YACT,MAAK;AAAA,YACL,cAAW;AAAA,YACX,UAAA,oBAAC,gBAAA,EAAe,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MACrC,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/SubHeader/index.tsx"],"sourcesContent":["import { IconChevronLeft, IconHelpCircle } from '../icons/default'\n\nimport { Container } from '@components/Container'\nimport { Text } from '@components/Text'\nimport { Button } from '@components/Button'\n\nimport classNames from 'classnames'\n\nimport './styles.scss'\n\ntype SubHeaderProps = {\n  title: string\n  handleReturn: () => void\n  handleHelpInfo?: () => void\n  'data-testid'?: string\n}\n\nexport const SubHeader = ({\n  title,\n  handleReturn,\n  handleHelpInfo,\n  'data-testid': dataTestId,\n}: SubHeaderProps) => {\n  return (\n    <div\n      className={classNames('au-sub-header', {\n        'au-sub-header--with-help': handleHelpInfo,\n      })}\n      data-testid={dataTestId}>\n      <Container customClass=\"au-sub-header__container\">\n        <Button\n          className=\"au-sub-header__button\"\n          onClick={handleReturn}\n          type=\"ghost\"\n          aria-label=\"Voltar\">\n          <IconChevronLeft aria-hidden=\"true\" />\n        </Button>\n        <Text\n          className=\"au-sub-header__title\"\n          variant=\"heading-micro\"\n          variantDesk=\"heading-small\"\n          weight=\"bold\"\n          as=\"div\">\n          {title}\n        </Text>\n        {handleHelpInfo && (\n          <Button\n            className=\"au-sub-header__button\"\n            onClick={handleHelpInfo}\n            type=\"ghost\"\n            aria-label=\"Ajuda\">\n            <IconHelpCircle aria-hidden=\"true\" />\n          </Button>\n        )}\n      </Container>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;AAiBO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAsB;AACpB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,iBAAiB;AAAA,QACrC,4BAA4B;AAAA,MAAA,CAC7B;AAAA,MACD,eAAa;AAAA,MACb,UAAA,qBAAC,WAAA,EAAU,aAAY,4BACrB,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS;AAAA,YACT,MAAK;AAAA,YACL,cAAW;AAAA,YACX,UAAA,oBAAC,iBAAA,EAAgB,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAEtC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,aAAY;AAAA,YACZ,QAAO;AAAA,YACP,IAAG;AAAA,YACF,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,kBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS;AAAA,YACT,MAAK;AAAA,YACL,cAAW;AAAA,YACX,UAAA,oBAAC,gBAAA,EAAe,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MACrC,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Switch/Card/types.d.ts

@@ -7,4 +7,5 @@ export type CardSwitchProps = {
     deactivateCallBack?: () => void;
     shouldFadeOutAfterActivate?: boolean;
     fadeOutDelayInSeconds?: number;
+    'data-testid'?: string;
 };

package/dist/components/Switch/Pure/types.d.ts

@@ -5,4 +5,5 @@ export type SwitchProps = {
     disabled: boolean;
     activateCallBack: () => void;
     deactivateCallBack?: () => void;
+    'data-testid'?: string;
 };

package/dist/components/Tabs/index.d.ts

@@ -1,17 +1,17 @@
 export type TabsProps = {
     tabs: TabItemProps[];
-    type?: 1 | 2;
+    /** Hides the tab bar and renders only the active panel. Not mapped in Figma. */
     areTabsHidden?: boolean;
     initialTab?: string;
-    withLabel?: boolean;
+    /** Content rendered at the right side of the tab bar. Not mapped in Figma. */
     rightSlotChildren?: React.ReactNode;
     onClick?: (value: string) => void;
+    'data-testid'?: string;
 };
 export type TabItemProps = {
     tab: string;
     title: string;
     children?: React.ReactElement;
-    icon?: React.ReactNode;
 };
-export declare const Tabs: ({ tabs, type, initialTab, onClick, areTabsHidden, rightSlotChildren, withLabel, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ tabs, initialTab, onClick, areTabsHidden, rightSlotChildren, "data-testid": dataTestId, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 export default Tabs;

package/dist/components/Tabs/index.es.js

@@ -1,20 +1,16 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
-import { W as When, S as Switch, C as Case } from "../../react-if.esm-Cozt8l48.js";
-import { Text } from "../Text/index.es.js";
-import { Chip } from "../Chip/index.es.js";
+import { W as When } from "../../react-if.esm-Cozt8l48.js";
 import { c as classNames } from "../../index-C6Q03EyZ.js";
 import './styles.css';const Tabs = ({
   tabs,
-  type = 1,
   initialTab,
   onClick,
   areTabsHidden,
   rightSlotChildren,
-  withLabel = false
+  "data-testid": dataTestId
 }) => {
-  const [isClicked, setIsClicked] = useState(false);
-  const [currButton, setCurrButton] = useState(initialTab ?? "");
+  var _a;
   const [activeTab, setActiveTab] = useState(initialTab);
   const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 });
   const tabsRef = useRef(null);
@@ -22,96 +18,98 @@ import './styles.css';const Tabs = ({
     setActiveTab(initialTab);
   }, [initialTab]);
   useEffect(() => {
-    if (activeTab && type === 2) {
-      const container = tabsRef.current;
-      if (container) {
-        const activeElement = container.querySelector(
-          ".au-tabs__btns-option--active"
-        );
-        if (activeElement) {
-          setIndicatorStyle({
-            left: activeElement.offsetLeft,
-            width: activeElement.offsetWidth
-          });
-        }
+    const container = tabsRef.current;
+    if (activeTab && container) {
+      const activeElement = container.querySelector(
+        ".au-tabs__btns-option--active"
+      );
+      if (activeElement) {
+        setIndicatorStyle({
+          left: activeElement.offsetLeft,
+          width: activeElement.offsetWidth
+        });
       }
     }
-  }, [activeTab, tabs, type]);
+  }, [activeTab, tabs]);
   const handleClick = (item) => {
     onClick && onClick(item.tab);
-    setCurrButton(item.tab);
     setActiveTab(item.tab);
-    setIsClicked(true);
   };
+  const handleKeyDown = (event) => {
+    var _a2;
+    if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
+    const container = tabsRef.current;
+    if (!container) return;
+    const tabButtons = Array.from(
+      container.querySelectorAll('[role="tab"]')
+    );
+    const currentIndex = tabButtons.indexOf(
+      document.activeElement
+    );
+    if (currentIndex === -1) return;
+    event.preventDefault();
+    const lastIndex = tabButtons.length - 1;
+    const nextIndex = {
+      ArrowLeft: currentIndex === 0 ? lastIndex : currentIndex - 1,
+      ArrowRight: currentIndex === lastIndex ? 0 : currentIndex + 1,
+      Home: 0,
+      End: lastIndex
+    }[event.key];
+    (_a2 = tabButtons[nextIndex]) == null ? void 0 : _a2.focus();
+  };
+  const focusableTab = activeTab ?? ((_a = tabs[0]) == null ? void 0 : _a.tab);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(When, { condition: !areTabsHidden, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: classNames("au-tabs", {
-          [`au-tabs--type-${type}`]: !!type
-        }),
-        children: /* @__PURE__ */ jsxs("div", { className: "au-tabs__container", children: [
-          /* @__PURE__ */ jsxs("div", { className: "au-tabs__left-panel", children: [
-            /* @__PURE__ */ jsx(When, { condition: !!withLabel, children: /* @__PURE__ */ jsxs(
-              Text,
+    /* @__PURE__ */ jsx(When, { condition: !areTabsHidden, children: /* @__PURE__ */ jsx("div", { className: "au-tabs", "data-testid": dataTestId, children: /* @__PURE__ */ jsxs("div", { className: "au-tabs__container", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "au-tabs__btns",
+          role: "tablist",
+          ref: tabsRef,
+          onKeyDown: handleKeyDown,
+          children: [
+            tabs.map((item) => /* @__PURE__ */ jsx(
+              "button",
               {
-                color: "secondary",
-                variant: "body-small",
-                className: "au-tabs__label",
-                children: [
-                  "Filtrar por:",
-                  " "
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsxs("div", { className: "au-tabs__btns", ref: tabsRef, children: [
-              tabs.map((item) => {
-                return /* @__PURE__ */ jsxs(Switch, { children: [
-                  /* @__PURE__ */ jsx(Case, { condition: type === 1, children: /* @__PURE__ */ jsx(
-                    Chip,
-                    {
-                      label: item.title,
-                      icon: item.icon,
-                      isActive: isClicked && item.tab === currButton || activeTab === item.tab,
-                      onClick: () => handleClick(item)
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(Case, { condition: type === 2, children: /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      className: classNames("au-tabs__btns-option", {
-                        "au-tabs__btns-option--active": activeTab === item.tab
-                      }),
-                      onClick: () => handleClick(item),
-                      children: item.title
-                    }
-                  ) })
-                ] }, item.tab);
-              }),
-              /* @__PURE__ */ jsx(When, { condition: type === 2, children: /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "au-tabs__btns-indicator",
-                  "aria-hidden": "true",
-                  style: {
-                    left: `${indicatorStyle.left}px`,
-                    width: `${indicatorStyle.width}px`
-                  }
+                type: "button",
+                role: "tab",
+                id: `au-tab-${item.tab}`,
+                "aria-selected": activeTab === item.tab,
+                "aria-controls": `au-tabpanel-${item.tab}`,
+                tabIndex: item.tab === focusableTab ? 0 : -1,
+                className: classNames("au-tabs__btns-option", {
+                  "au-tabs__btns-option--active": activeTab === item.tab
+                }),
+                onClick: () => handleClick(item),
+                children: item.title
+              },
+              item.tab
+            )),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "au-tabs__btns-indicator",
+                "aria-hidden": "true",
+                style: {
+                  left: `${indicatorStyle.left}px`,
+                  width: `${indicatorStyle.width}px`
                 }
-              ) })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(When, { condition: !!rightSlotChildren, children: rightSlotChildren })
-        ] })
-      }
-    ) }),
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(When, { condition: !!rightSlotChildren, children: rightSlotChildren })
+    ] }) }) }),
     tabs.map(({ children, tab }) => {
       return /* @__PURE__ */ jsx(
         "div",
         {
+          role: "tabpanel",
+          id: `au-tabpanel-${tab}`,
+          "aria-labelledby": `au-tab-${tab}`,
           className: `au-tabs__children children-${tab}`,
-          children: /* @__PURE__ */ jsx(When, { condition: currButton === tab || activeTab === tab, children })
+          children: /* @__PURE__ */ jsx(When, { condition: activeTab === tab, children })
         },
         `au-tabs-${tab}`
       );