@sia.soul/sia-react-ui 0.1.31 → 0.1.33

package/dist/core.css

@@ -2837,109 +2837,109 @@ fieldset:disabled .sia-input-number__floating-placeholder {
 .sia-tabs__icon {
   display: inline-flex;
 }
-.sia-tabs--line.sia-tabs--top .sia-tabs__header {
+.sia-tabs--line.sia-tabs--top > .sia-tabs__header {
   border-bottom: 1px solid var(--sia-color-border);
 }
-.sia-tabs--line.sia-tabs--bottom .sia-tabs__header {
+.sia-tabs--line.sia-tabs--bottom > .sia-tabs__header {
   border-top: 1px solid var(--sia-color-border);
 }
-.sia-tabs--line .sia-tabs__tab[aria-selected=true]::after {
+.sia-tabs--line > .sia-tabs__header .sia-tabs__tab[aria-selected=true]::after {
   position: absolute;
   content: "";
   background: var(--sia-color-primary);
 }
-.sia-tabs--line.sia-tabs--top .sia-tabs__tab[aria-selected=true]::after {
+.sia-tabs--line.sia-tabs--top > .sia-tabs__header .sia-tabs__tab[aria-selected=true]::after {
   right: 0;
   bottom: -1px;
   left: 0;
   height: 2px;
   border-radius: 2px 2px 0 0;
 }
-.sia-tabs--line.sia-tabs--bottom .sia-tabs__tab[aria-selected=true]::after {
+.sia-tabs--line.sia-tabs--bottom > .sia-tabs__header .sia-tabs__tab[aria-selected=true]::after {
   top: -1px;
   right: 0;
   left: 0;
   height: 2px;
   border-radius: 0 0 2px 2px;
 }
-.sia-tabs--card .sia-tabs__list {
+.sia-tabs--card > .sia-tabs__header .sia-tabs__list {
   gap: 4px;
 }
-.sia-tabs--card.sia-tabs--top .sia-tabs__list {
+.sia-tabs--card.sia-tabs--top > .sia-tabs__header .sia-tabs__list {
   align-items: end;
   border-bottom: 1px solid var(--sia-color-border);
 }
-.sia-tabs--card.sia-tabs--bottom .sia-tabs__list {
+.sia-tabs--card.sia-tabs--bottom > .sia-tabs__header .sia-tabs__list {
   align-items: start;
   border-top: 1px solid var(--sia-color-border);
 }
-.sia-tabs--card .sia-tabs__tab {
+.sia-tabs--card > .sia-tabs__header .sia-tabs__tab {
   height: 38px;
   padding-inline: 16px;
   border: 1px solid transparent;
 }
-.sia-tabs--card .sia-tabs__tab-wrap.is-closable .sia-tabs__tab {
+.sia-tabs--card > .sia-tabs__header .sia-tabs__tab-wrap.is-closable .sia-tabs__tab {
   padding-right: 34px;
 }
-.sia-tabs--card.sia-tabs--top .sia-tabs__tab {
+.sia-tabs--card.sia-tabs--top > .sia-tabs__header .sia-tabs__tab {
   border-bottom: 0;
   border-radius: var(--sia-radius) var(--sia-radius) 0 0;
 }
-.sia-tabs--card.sia-tabs--bottom .sia-tabs__tab {
+.sia-tabs--card.sia-tabs--bottom > .sia-tabs__header .sia-tabs__tab {
   border-top: 0;
   border-radius: 0 0 var(--sia-radius) var(--sia-radius);
 }
-.sia-tabs--card .sia-tabs__tab[aria-selected=true] {
+.sia-tabs--card > .sia-tabs__header .sia-tabs__tab[aria-selected=true] {
   background: var(--sia-color-surface);
   border-color: var(--sia-color-border);
 }
-.sia-tabs--card .sia-tabs__tab[aria-selected=true]::after {
+.sia-tabs--card > .sia-tabs__header .sia-tabs__tab[aria-selected=true]::after {
   position: absolute;
   content: "";
   background: var(--sia-color-surface);
   pointer-events: none;
 }
-.sia-tabs--card.sia-tabs--top .sia-tabs__tab[aria-selected=true]::after {
+.sia-tabs--card.sia-tabs--top > .sia-tabs__header .sia-tabs__tab[aria-selected=true]::after {
   right: -1px;
   bottom: -1px;
   left: -1px;
   height: 1px;
   border-inline: 1px solid var(--sia-color-border);
 }
-.sia-tabs--card.sia-tabs--bottom .sia-tabs__tab[aria-selected=true]::after {
+.sia-tabs--card.sia-tabs--bottom > .sia-tabs__header .sia-tabs__tab[aria-selected=true]::after {
   top: -1px;
   right: -1px;
   left: -1px;
   height: 1px;
   border-inline: 1px solid var(--sia-color-border);
 }
-.sia-tabs--card.sia-tabs--left .sia-tabs__tab[aria-selected=true]::after {
+.sia-tabs--card.sia-tabs--left > .sia-tabs__header .sia-tabs__tab[aria-selected=true]::after {
   top: -1px;
   right: -1px;
   bottom: -1px;
   width: 1px;
   border-block: 1px solid var(--sia-color-border);
 }
-.sia-tabs--card.sia-tabs--right .sia-tabs__tab[aria-selected=true]::after {
+.sia-tabs--card.sia-tabs--right > .sia-tabs__header .sia-tabs__tab[aria-selected=true]::after {
   top: -1px;
   bottom: -1px;
   left: -1px;
   width: 1px;
   border-block: 1px solid var(--sia-color-border);
 }
-.sia-tabs--pill .sia-tabs__list {
+.sia-tabs--pill > .sia-tabs__header .sia-tabs__list {
   flex: 0 1 auto;
   gap: 4px;
   padding: 4px;
   background: var(--sia-color-control-hover);
   border-radius: calc(var(--sia-radius) + 2px);
 }
-.sia-tabs--pill .sia-tabs__tab {
+.sia-tabs--pill > .sia-tabs__header .sia-tabs__tab {
   height: 34px;
   padding-inline: 14px;
   border-radius: var(--sia-radius);
 }
-.sia-tabs--pill .sia-tabs__tab[aria-selected=true] {
+.sia-tabs--pill > .sia-tabs__header .sia-tabs__tab[aria-selected=true] {
   background: var(--sia-color-surface);
   box-shadow: 0 1px 2px rgb(0 0 0 / 18%);
 }
@@ -2960,7 +2960,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   --sia-tabs-tech-selection: color-mix(in srgb, var(--sia-color-primary-light) 76%, var(--sia-color-surface));
   --sia-tabs-tech-text-active: color-mix(in srgb, var(--sia-color-primary-text) 36%, var(--sia-color-text));
 }
-.sia-tabs--tech .sia-tabs__header {
+.sia-tabs--tech > .sia-tabs__header {
   position: relative;
   isolation: isolate;
   gap: 12px;
@@ -2971,7 +2971,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   border: 1px solid var(--sia-tabs-tech-border);
   border-radius: 8px;
 }
-.sia-tabs--tech .sia-tabs__header::before {
+.sia-tabs--tech > .sia-tabs__header::before {
   position: absolute;
   z-index: -1;
   top: 0;
@@ -2988,7 +2988,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
       transparent 100%);
   pointer-events: none;
 }
-.sia-tabs--tech .sia-tabs__title {
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__title {
   position: relative;
   min-width: max-content;
   max-width: 32%;
@@ -2998,7 +2998,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   font-weight: 700;
   letter-spacing: 0.02em;
 }
-.sia-tabs--tech .sia-tabs__title::before {
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__title::before {
   position: absolute;
   right: 6px;
   bottom: 12px;
@@ -3013,7 +3013,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   background-clip: content-box;
   transform: skewX(-18deg);
 }
-.sia-tabs--tech .sia-tabs__title::after {
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__title::after {
   position: absolute;
   right: 0;
   bottom: 7px;
@@ -3022,15 +3022,15 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   content: "";
   background: var(--sia-tabs-tech-accent);
 }
-.sia-tabs--tech .sia-tabs__list {
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__list {
   align-items: stretch;
   gap: 6px;
 }
-.sia-tabs--tech .sia-tabs__tab-context-trigger,
-.sia-tabs--tech .sia-tabs__tab-wrap {
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__tab-context-trigger,
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__tab-wrap {
   flex: 1 1 0;
 }
-.sia-tabs--tech .sia-tabs__tab {
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__tab {
   z-index: 0;
   width: 100%;
   height: 40px;
@@ -3042,8 +3042,8 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   letter-spacing: 0.02em;
   transition: color 160ms ease;
 }
-.sia-tabs--tech .sia-tabs__tab::before,
-.sia-tabs--tech .sia-tabs__tab::after {
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__tab::before,
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__tab::after {
   position: absolute;
   z-index: -2;
   content: "";
@@ -3052,149 +3052,149 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
   transition: opacity 160ms ease, background 160ms ease;
 }
-.sia-tabs--tech .sia-tabs__tab::before {
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__tab::before {
   inset: 3px 1px;
   background: var(--sia-tabs-tech-accent-soft);
 }
-.sia-tabs--tech .sia-tabs__tab::after {
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__tab::after {
   z-index: -1;
   inset: 2px 1px;
   background: var(--sia-tabs-tech-selection);
 }
-.sia-tabs--tech .sia-tabs__tab:hover:not(:disabled) {
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__tab:hover:not(:disabled) {
   color: var(--sia-tabs-tech-text);
 }
-.sia-tabs--tech .sia-tabs__tab:not([aria-selected=true]):hover:not(:disabled)::before {
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__tab:not([aria-selected=true]):hover:not(:disabled)::before {
   opacity: 1;
 }
-.sia-tabs--tech .sia-tabs__tab:not([aria-selected=true]):hover:not(:disabled)::after {
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__tab:not([aria-selected=true]):hover:not(:disabled)::after {
   display: none;
 }
-.sia-tabs--tech .sia-tabs__tab[aria-selected=true],
-.sia-tabs--tech .sia-tabs__tab[aria-selected=true]:hover:not(:disabled) {
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__tab[aria-selected=true],
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__tab[aria-selected=true]:hover:not(:disabled) {
   color: var(--sia-tabs-tech-text-active);
 }
-.sia-tabs--tech .sia-tabs__tab[aria-selected=true]::before {
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__tab[aria-selected=true]::before {
   inset: 1px 0;
   background: var(--sia-tabs-tech-accent);
 }
-.sia-tabs--tech .sia-tabs__tab[aria-selected=true]::before,
-.sia-tabs--tech .sia-tabs__tab[aria-selected=true]::after {
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__tab[aria-selected=true]::before,
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__tab[aria-selected=true]::after {
   opacity: 1;
 }
-.sia-tabs--tech .sia-tabs__tab[aria-selected=true]::after {
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__tab[aria-selected=true]::after {
   display: block;
 }
-.sia-tabs--tech .sia-tabs__tab:focus-visible {
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__tab:focus-visible {
   border-radius: 0;
   outline: none;
 }
-.sia-tabs--tech .sia-tabs__close {
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__close {
   color: var(--sia-tabs-tech-text);
 }
-.sia-tabs--tech .sia-tabs__close:hover:not(:disabled) {
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__close:hover:not(:disabled) {
   color: var(--sia-tabs-tech-text-active);
   background: var(--sia-tabs-tech-accent-soft);
 }
-.sia-tabs--tech .sia-tabs__extra {
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__extra {
   color: var(--sia-tabs-tech-text);
 }
-.sia-tabs--small .sia-tabs__tab {
+.sia-tabs--small > .sia-tabs__header .sia-tabs__tab {
   height: 34px;
   font-size: var(--sia-font-size-small);
 }
-.sia-tabs--large .sia-tabs__tab {
+.sia-tabs--large > .sia-tabs__header .sia-tabs__tab {
   height: 52px;
   font-size: var(--sia-font-size-large);
 }
-.sia-tabs--centered .sia-tabs__list {
+.sia-tabs--centered > .sia-tabs__header .sia-tabs__list {
   justify-content: center;
 }
-.sia-tabs--bottom .sia-tabs__header,
-.sia-tabs--right .sia-tabs__header {
+.sia-tabs--bottom > .sia-tabs__header,
+.sia-tabs--right > .sia-tabs__header {
   order: 2;
 }
-.sia-tabs--bottom .sia-tabs__panels,
-.sia-tabs--right .sia-tabs__panels {
+.sia-tabs--bottom > .sia-tabs__panels,
+.sia-tabs--right > .sia-tabs__panels {
   order: 1;
 }
 .sia-tabs--vertical {
   align-items: stretch;
   flex-direction: row;
 }
-.sia-tabs--vertical .sia-tabs__header {
+.sia-tabs--vertical > .sia-tabs__header {
   flex-direction: column;
 }
-.sia-tabs--vertical .sia-tabs__list {
+.sia-tabs--vertical > .sia-tabs__header .sia-tabs__list {
   align-items: stretch;
   flex-direction: column;
   gap: 4px;
   flex: 0 0 auto;
 }
-.sia-tabs--vertical .sia-tabs__title {
+.sia-tabs--vertical > .sia-tabs__header .sia-tabs__title {
   padding: 0 14px 8px;
 }
-.sia-tabs--vertical .sia-tabs__tab-context-trigger,
-.sia-tabs--vertical .sia-tabs__tab-wrap {
+.sia-tabs--vertical > .sia-tabs__header .sia-tabs__tab-context-trigger,
+.sia-tabs--vertical > .sia-tabs__header .sia-tabs__tab-wrap {
   width: 100%;
 }
-.sia-tabs--vertical .sia-tabs__tab {
+.sia-tabs--vertical > .sia-tabs__header .sia-tabs__tab {
   justify-content: flex-start;
   min-width: 128px;
   padding-inline: 14px;
 }
-.sia-tabs--vertical .sia-tabs__tab-wrap .sia-tabs__tab {
+.sia-tabs--vertical > .sia-tabs__header .sia-tabs__tab-wrap .sia-tabs__tab {
   width: 100%;
 }
-.sia-tabs--vertical .sia-tabs__extra {
+.sia-tabs--vertical > .sia-tabs__header .sia-tabs__extra {
   margin: auto 0 0;
   padding: 16px 0 0;
 }
-.sia-tabs--left.sia-tabs--line .sia-tabs__list {
+.sia-tabs--left.sia-tabs--line > .sia-tabs__header .sia-tabs__list {
   border-right: 1px solid var(--sia-color-border);
 }
-.sia-tabs--right.sia-tabs--line .sia-tabs__list {
+.sia-tabs--right.sia-tabs--line > .sia-tabs__header .sia-tabs__list {
   border-left: 1px solid var(--sia-color-border);
 }
-.sia-tabs--left.sia-tabs--line .sia-tabs__tab[aria-selected=true]::after {
+.sia-tabs--left.sia-tabs--line > .sia-tabs__header .sia-tabs__tab[aria-selected=true]::after {
   inset: 0 -1px 0 auto;
   width: 2px;
 }
-.sia-tabs--right.sia-tabs--line .sia-tabs__tab[aria-selected=true]::after {
+.sia-tabs--right.sia-tabs--line > .sia-tabs__header .sia-tabs__tab[aria-selected=true]::after {
   inset: 0 auto 0 -1px;
   width: 2px;
 }
-.sia-tabs--vertical.sia-tabs--card .sia-tabs__list {
+.sia-tabs--vertical.sia-tabs--card > .sia-tabs__header .sia-tabs__list {
   gap: 4px;
 }
-.sia-tabs--left.sia-tabs--card .sia-tabs__list {
+.sia-tabs--left.sia-tabs--card > .sia-tabs__header .sia-tabs__list {
   border-right: 1px solid var(--sia-color-border);
 }
-.sia-tabs--right.sia-tabs--card .sia-tabs__list {
+.sia-tabs--right.sia-tabs--card > .sia-tabs__header .sia-tabs__list {
   border-left: 1px solid var(--sia-color-border);
 }
-.sia-tabs--left.sia-tabs--card .sia-tabs__tab {
+.sia-tabs--left.sia-tabs--card > .sia-tabs__header .sia-tabs__tab {
   border-right: 0;
   border-radius: var(--sia-radius) 0 0 var(--sia-radius);
 }
-.sia-tabs--right.sia-tabs--card .sia-tabs__tab {
+.sia-tabs--right.sia-tabs--card > .sia-tabs__header .sia-tabs__tab {
   border-left: 0;
   border-radius: 0 var(--sia-radius) var(--sia-radius) 0;
 }
 .sia-tabs__panels {
   padding-top: 16px;
 }
-.sia-tabs--bottom .sia-tabs__panels {
+.sia-tabs--bottom > .sia-tabs__panels {
   padding-top: 0;
   padding-bottom: 16px;
 }
-.sia-tabs--left .sia-tabs__panels {
+.sia-tabs--left > .sia-tabs__panels {
   min-width: 0;
   flex: 1;
   padding-top: 0;
   padding-left: 20px;
 }
-.sia-tabs--right .sia-tabs__panels {
+.sia-tabs--right > .sia-tabs__panels {
   min-width: 0;
   flex: 1;
   padding-top: 0;
@@ -3217,15 +3217,15 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   --sia-tabs-line-text: var(--sia-color-text-secondary);
   --sia-tabs-line-selected: var(--sia-color-text);
 }
-.sia-tabs--tech-line .sia-tabs__header {
+.sia-tabs--tech-line > .sia-tabs__header {
   min-height: 60px;
   padding: 0 28px;
   background: var(--sia-tabs-line-surface);
   gap: 28px;
 }
-.sia-tabs--tech-line .sia-tabs__title {
+.sia-tabs--tech-line > .sia-tabs__header .sia-tabs__title {
   position: relative;
-  flex: 1 1 auto;
+  flex: 0 0 auto;
   min-width: 0;
   align-items: flex-start;
   padding: 3px 34px 0 0;
@@ -3237,12 +3237,12 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   font-weight: 700;
   white-space: nowrap;
 }
-.sia-tabs--tech-line .sia-tabs__title::after {
+.sia-tabs--tech-line > .sia-tabs__header .sia-tabs__title::after {
   position: absolute;
   content: "";
   bottom: 0;
   left: 0;
-  right: 0;
+  right: 1px;
   height: 1.5px;
   background:
     linear-gradient(
@@ -3250,7 +3250,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
       transparent,
       var(--sia-tabs-line-accent));
 }
-.sia-tabs--tech-line .sia-tabs__title::before {
+.sia-tabs--tech-line > .sia-tabs__header .sia-tabs__title::before {
   position: absolute;
   content: "";
   right: 5px;
@@ -3261,7 +3261,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   opacity: .55;
   clip-path: polygon(0 100%, 35% 32%, 46% 32%, 12% 100%, 35% 100%, 80% 0, 93% 0, 49% 100%, 69% 100%, 100% 30%, 100% 54%, 82% 100%);
 }
-.sia-tabs--tech-line .sia-tabs__title-connector {
+.sia-tabs--tech-line > .sia-tabs__header .sia-tabs__title-connector {
   position: absolute;
   right: -31px;
   top: 6px;
@@ -3270,7 +3270,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   overflow: visible;
   color: var(--sia-tabs-line-accent);
 }
-.sia-tabs--tech-line .sia-tabs__list {
+.sia-tabs--tech-line > .sia-tabs__header .sia-tabs__list {
   position: relative;
   flex: 0 1 auto;
   gap: 0;
@@ -3278,7 +3278,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   padding-top: 13px;
   padding-right: 40px;
 }
-.sia-tabs--tech-line .sia-tabs__list::before {
+.sia-tabs--tech-line > .sia-tabs__header .sia-tabs__list::before {
   position: absolute;
   content: "";
   top: 7px;
@@ -3291,11 +3291,11 @@ fieldset:disabled .sia-input-number__floating-placeholder {
       var(--sia-tabs-line-accent),
       transparent);
 }
-.sia-tabs--tech-line .sia-tabs__tab-wrap,
-.sia-tabs--tech-line .sia-tabs__tab-context-trigger {
+.sia-tabs--tech-line > .sia-tabs__header .sia-tabs__tab-wrap,
+.sia-tabs--tech-line > .sia-tabs__header .sia-tabs__tab-context-trigger {
   flex: 0 0 auto;
 }
-.sia-tabs--tech-line .sia-tabs__tab {
+.sia-tabs--tech-line > .sia-tabs__header .sia-tabs__tab {
   isolation: isolate;
   height: 34px;
   min-width: 0;
@@ -3304,99 +3304,110 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   font-size: 18px;
   font-weight: 600;
 }
-.sia-tabs--tech-line .sia-tabs__tab-wrap.is-closable .sia-tabs__tab {
+.sia-tabs--tech-line > .sia-tabs__header .sia-tabs__tab-wrap.is-closable .sia-tabs__tab {
   padding-right: 44px;
 }
-.sia-tabs--tech-line .sia-tabs__close {
+.sia-tabs--tech-line > .sia-tabs__header .sia-tabs__close {
   right: 16px;
 }
-.sia-tabs--tech-line .sia-tabs__tab-shape {
+.sia-tabs--tech-line > .sia-tabs__header .sia-tabs__tab-shape,
+.sia-tabs--tech-line > .sia-tabs__header .sia-tabs__indicator-shape {
   position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-  pointer-events: none;
+  inset: 1px 11px;
+  box-sizing: border-box;
+  border: 1.5px solid currentColor;
+  border-radius: 5px;
+  transform: skewX(-30deg);
   color: var(--sia-tabs-line-accent);
+  background:
+    linear-gradient(
+      90deg,
+      var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill)),
+      var(--sia-tabs-line-fill-center, var(--sia-tabs-line-fill)) 53%,
+      var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill)));
+  pointer-events: none;
+}
+.sia-tabs--tech-line > .sia-tabs__header .sia-tabs__tab-shape {
+  z-index: -1;
   opacity: 0;
 }
-.sia-tabs--tech-line .sia-tabs__tab:hover:not(:disabled) {
+.sia-tabs--tech-line > .sia-tabs__header .sia-tabs__tab:hover:not(:disabled) {
   color: var(--sia-tabs-line-text);
 }
-.sia-tabs--tech-line .sia-tabs__tab:not([aria-selected=true]):hover:not(:disabled) .sia-tabs__tab-shape {
+.sia-tabs--tech-line > .sia-tabs__header .sia-tabs__tab:not([aria-selected=true]):hover:not(:disabled) .sia-tabs__tab-shape {
   opacity: .6;
 }
-.sia-tabs--tech-line .sia-tabs__tab:not([aria-selected=true]) .sia-tabs__tab-shape path {
-  stroke: transparent;
+.sia-tabs--tech-line > .sia-tabs__header .sia-tabs__tab:not([aria-selected=true]) .sia-tabs__tab-shape {
+  border-color: transparent;
 }
-.sia-tabs--tech-line .sia-tabs__tab[aria-selected=true],
-.sia-tabs--tech-line .sia-tabs__tab[aria-selected=true]:hover:not(:disabled) {
+.sia-tabs--tech-line > .sia-tabs__header .sia-tabs__tab[aria-selected=true],
+.sia-tabs--tech-line > .sia-tabs__header .sia-tabs__tab[aria-selected=true]:hover:not(:disabled) {
   color: var(--sia-tabs-line-selected);
 }
-.sia-tabs--tech-line .sia-tabs__tab[aria-selected=true] .sia-tabs__tab-shape {
+.sia-tabs--tech-line > .sia-tabs__header .sia-tabs__tab[aria-selected=true] .sia-tabs__tab-shape {
   opacity: 1;
 }
-[data-sia-theme=dark] .sia-tabs--tech-line .sia-tabs__tab[aria-selected=true] {
+[data-sia-theme=dark] .sia-tabs--tech-line > .sia-tabs__header .sia-tabs__tab[aria-selected=true] {
   --sia-tabs-line-fill-edge: var(--sia-tabs-line-surface);
   --sia-tabs-line-fill-center: var(--sia-color-primary);
 }
-.sia-tabs--tech-line .sia-tabs__tab:focus {
+.sia-tabs--tech-line > .sia-tabs__header .sia-tabs__tab:focus {
   outline: none;
 }
-.sia-tabs--tech-line .sia-tabs__tab:focus-visible .sia-tabs__tab-shape {
+.sia-tabs--tech-line > .sia-tabs__header .sia-tabs__tab:focus-visible .sia-tabs__tab-shape {
   color: var(--sia-color-primary-text-active);
   opacity: 1;
 }
-.sia-tabs--tech-line.sia-tabs--vertical .sia-tabs__header {
+.sia-tabs--tech-line.sia-tabs--vertical > .sia-tabs__header {
   gap: 12px;
 }
-.sia-tabs--tech-line.sia-tabs--vertical .sia-tabs__title {
+.sia-tabs--tech-line.sia-tabs--vertical > .sia-tabs__header .sia-tabs__title {
   flex: 0 0 46px;
 }
-.sia-tabs--tech-line.sia-tabs--vertical .sia-tabs__title-connector {
+.sia-tabs--tech-line.sia-tabs--vertical > .sia-tabs__header .sia-tabs__title-connector {
   display: none;
 }
-.sia-tabs--tech-line.sia-tabs--vertical .sia-tabs__list {
+.sia-tabs--tech-line.sia-tabs--vertical > .sia-tabs__header .sia-tabs__list {
   padding: 0;
 }
-.sia-tabs--tech-line.sia-tabs--vertical .sia-tabs__list::before {
+.sia-tabs--tech-line.sia-tabs--vertical > .sia-tabs__header .sia-tabs__list::before {
   display: none;
 }
 @media (max-width: 480px) {
-  .sia-tabs--tech-line.sia-tabs--horizontal .sia-tabs__header {
+  .sia-tabs--tech-line.sia-tabs--horizontal > .sia-tabs__header {
     flex-wrap: wrap;
     gap: 0;
     padding-inline: 16px;
   }
-  .sia-tabs--tech-line.sia-tabs--horizontal .sia-tabs__title {
+  .sia-tabs--tech-line.sia-tabs--horizontal > .sia-tabs__header .sia-tabs__title {
     flex-basis: 100%;
   }
-  .sia-tabs--tech-line.sia-tabs--horizontal .sia-tabs__title-connector {
+  .sia-tabs--tech-line.sia-tabs--horizontal > .sia-tabs__header .sia-tabs__title-connector {
     display: none;
   }
-  .sia-tabs--tech-line.sia-tabs--horizontal .sia-tabs__list {
+  .sia-tabs--tech-line.sia-tabs--horizontal > .sia-tabs__header .sia-tabs__list {
     max-width: 100%;
     overflow-x: auto;
     padding: 8px 0;
   }
-  .sia-tabs--tech-line.sia-tabs--horizontal .sia-tabs__list::before {
+  .sia-tabs--tech-line.sia-tabs--horizontal > .sia-tabs__header .sia-tabs__list::before {
     display: none;
   }
 }
 @media (max-width: 640px) {
-  .sia-tabs--tech.sia-tabs--horizontal .sia-tabs__header {
+  .sia-tabs--tech.sia-tabs--horizontal > .sia-tabs__header {
     flex-wrap: wrap;
     gap: 4px 8px;
   }
-  .sia-tabs--tech.sia-tabs--horizontal .sia-tabs__title {
+  .sia-tabs--tech.sia-tabs--horizontal > .sia-tabs__header .sia-tabs__title {
     width: 100%;
     max-width: none;
     min-height: 32px;
   }
-  .sia-tabs--tech.sia-tabs--horizontal .sia-tabs__list {
+  .sia-tabs--tech.sia-tabs--horizontal > .sia-tabs__header .sia-tabs__list {
     overflow-x: auto;
   }
-  .sia-tabs--tech.sia-tabs--horizontal .sia-tabs__tab-wrap {
+  .sia-tabs--tech.sia-tabs--horizontal > .sia-tabs__header .sia-tabs__tab-wrap {
     min-width: 96px;
   }
 }
@@ -4619,7 +4630,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   --sia-tabs-accent: var(--sia-color-primary);
   --sia-tabs-selection-bg: var(--sia-color-primary-light);
 }
-.sia-tabs--capsule .sia-tabs__list {
+.sia-tabs--capsule > .sia-tabs__header .sia-tabs__list {
   position: relative;
   isolation: isolate;
   flex: 0 1 auto;
@@ -4630,56 +4641,56 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   background: var(--sia-color-surface);
   box-shadow: 0 3px 7px -3px rgb(0 0 0 / 24%);
 }
-.sia-tabs--capsule .sia-tabs__tab {
+.sia-tabs--capsule > .sia-tabs__header .sia-tabs__tab {
   height: 34px;
   padding-inline: 22px;
   border-radius: 999px;
   transition: background-color 240ms ease, color 240ms ease;
 }
-.sia-tabs--capsule .sia-tabs__tab[aria-selected=true] {
+.sia-tabs--capsule > .sia-tabs__header .sia-tabs__tab[aria-selected=true] {
   color: var(--sia-tabs-accent);
   background: transparent;
   font-weight: 500;
 }
-.sia-tabs--capsule.sia-tabs--small .sia-tabs__tab {
+.sia-tabs--capsule.sia-tabs--small > .sia-tabs__header .sia-tabs__tab {
   height: 26px;
   padding-inline: 16px;
 }
-.sia-tabs--capsule.sia-tabs--large .sia-tabs__tab {
+.sia-tabs--capsule.sia-tabs--large > .sia-tabs__header .sia-tabs__tab {
   height: 42px;
   padding-inline: 26px;
 }
-.sia-tabs--capsule.sia-tabs--centered .sia-tabs__header {
+.sia-tabs--capsule.sia-tabs--centered > .sia-tabs__header {
   justify-content: center;
 }
-.sia-tabs--capsule.sia-tabs--vertical .sia-tabs__list {
+.sia-tabs--capsule.sia-tabs--vertical > .sia-tabs__header .sia-tabs__list {
   border-radius: 24px;
 }
-.sia-tabs--underline .sia-tabs__list {
+.sia-tabs--underline > .sia-tabs__header .sia-tabs__list {
   gap: 0;
 }
-.sia-tabs--underline .sia-tabs__tab {
+.sia-tabs--underline > .sia-tabs__header .sia-tabs__tab {
   padding-inline: 22px;
   transition: color 240ms ease;
 }
-.sia-tabs--underline .sia-tabs__tab[aria-selected=true] {
+.sia-tabs--underline > .sia-tabs__header .sia-tabs__tab[aria-selected=true] {
   color: var(--sia-tabs-accent);
   font-weight: 500;
 }
-.sia-tabs--underline .sia-tabs__tab[aria-selected=true]::after {
+.sia-tabs--underline > .sia-tabs__header .sia-tabs__tab[aria-selected=true]::after {
   background: var(--sia-tabs-accent);
 }
-.sia-tabs--underline .sia-tabs__tab .sia-badge {
+.sia-tabs--underline > .sia-tabs__header .sia-tabs__tab .sia-badge {
   margin-inline-end: 8px;
 }
-.sia-tabs--capsule .sia-tabs__tab:focus-visible,
-.sia-tabs--underline .sia-tabs__tab:focus-visible {
+.sia-tabs--capsule > .sia-tabs__header .sia-tabs__tab:focus-visible,
+.sia-tabs--underline > .sia-tabs__header .sia-tabs__tab:focus-visible {
   outline: 2px solid var(--sia-tabs-accent);
   outline-offset: -2px;
 }
 @media (prefers-reduced-motion: reduce) {
-  .sia-tabs--capsule .sia-tabs__tab,
-  .sia-tabs--underline .sia-tabs__tab {
+  .sia-tabs--capsule > .sia-tabs__header .sia-tabs__tab,
+  .sia-tabs--underline > .sia-tabs__header .sia-tabs__tab {
     transition: none;
   }
 }
@@ -4722,73 +4733,74 @@ fieldset:disabled .sia-input-number__floating-placeholder {
     width 240ms ease,
     height 240ms ease;
 }
-.sia-tabs--line .sia-tabs__tab[aria-selected=true]::after {
+.sia-tabs--tech-line > .sia-tabs__header .sia-tabs__indicator[data-ready=true] {
+  transition:
+    transform 300ms cubic-bezier(.4, 0, .2, 1),
+    width 300ms cubic-bezier(.4, 0, .2, 1),
+    height 300ms cubic-bezier(.4, 0, .2, 1);
+}
+.sia-tabs--line > .sia-tabs__header .sia-tabs__tab[aria-selected=true]::after {
   display: none;
 }
-.sia-tabs--line .sia-tabs__indicator::after {
+.sia-tabs--line > .sia-tabs__header .sia-tabs__indicator::after {
   position: absolute;
   content: "";
   background: var(--sia-tabs-accent, var(--sia-color-primary));
 }
-.sia-tabs--line.sia-tabs--top .sia-tabs__indicator::after {
+.sia-tabs--line.sia-tabs--top > .sia-tabs__header .sia-tabs__indicator::after {
   bottom: -1px;
   left: 0;
   right: 0;
   height: 2px;
   border-radius: 2px 2px 0 0;
 }
-.sia-tabs--line.sia-tabs--bottom .sia-tabs__indicator::after {
+.sia-tabs--line.sia-tabs--bottom > .sia-tabs__header .sia-tabs__indicator::after {
   top: -1px;
   left: 0;
   right: 0;
   height: 2px;
   border-radius: 0 0 2px 2px;
 }
-.sia-tabs--line.sia-tabs--left .sia-tabs__indicator::after {
+.sia-tabs--line.sia-tabs--left > .sia-tabs__header .sia-tabs__indicator::after {
   top: 0;
   bottom: 0;
   right: -1px;
   width: 2px;
 }
-.sia-tabs--line.sia-tabs--right .sia-tabs__indicator::after {
+.sia-tabs--line.sia-tabs--right > .sia-tabs__header .sia-tabs__indicator::after {
   top: 0;
   bottom: 0;
   left: -1px;
   width: 2px;
 }
-.sia-tabs--tech .sia-tabs__tab[aria-selected=true]::before,
-.sia-tabs--tech .sia-tabs__tab[aria-selected=true]::after {
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__tab[aria-selected=true]::before,
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__tab[aria-selected=true]::after {
   display: none;
 }
-.sia-tabs--tech .sia-tabs__indicator::before,
-.sia-tabs--tech .sia-tabs__indicator::after {
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__indicator::before,
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__indicator::after {
   position: absolute;
   content: "";
   clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
 }
-.sia-tabs--tech .sia-tabs__indicator::before {
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__indicator::before {
   inset: 1px 0;
   background: var(--sia-tabs-tech-accent);
 }
-.sia-tabs--tech .sia-tabs__indicator::after {
+.sia-tabs--tech > .sia-tabs__header .sia-tabs__indicator::after {
   inset: 2px 1px;
   background: var(--sia-tabs-tech-selection);
 }
-.sia-tabs--tech-line .sia-tabs__tab[aria-selected=true] .sia-tabs__tab-shape {
+.sia-tabs--tech-line > .sia-tabs__header .sia-tabs__tab[aria-selected=true] .sia-tabs__tab-shape {
   visibility: hidden;
 }
-.sia-tabs__indicator-shape {
-  display: block;
-  width: 100%;
-  height: 100%;
-  color: var(--sia-tabs-line-accent);
-}
-[data-sia-theme=dark] .sia-tabs--tech-line .sia-tabs__indicator {
+[data-sia-theme=dark] .sia-tabs--tech-line > .sia-tabs__header .sia-tabs__indicator {
   --sia-tabs-line-fill-edge: var(--sia-tabs-line-surface);
   --sia-tabs-line-fill-center: var(--sia-color-primary);
 }
 @media (prefers-reduced-motion: reduce) {
-  .sia-tabs__indicator[data-ready=true] {
+  .sia-tabs__indicator[data-ready=true],
+  .sia-tabs--tech-line > .sia-tabs__header .sia-tabs__indicator[data-ready=true] {
     transition: none;
   }
 }