@pantool/components 1.0.0-alpha.4 → 1.0.0-alpha.5

package/dist/atoms/context-menu/context-menu.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu.module.js","names":[],"sources":["../../../src/atoms/context-menu/context-menu.module.css"],"sourcesContent":[".popup {\n  box-sizing: border-box;\n  font-family: var(--typography-typeface-ltr);\n  outline: none;\n  padding-block: var(--spacing-xs);\n  border: 1px solid var(--color-border-primary);\n  border-radius: var(--spacing-xs);\n  background-color: var(--color-surface-base);\n  color: var(--color-content-neutral-base);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n  transform-origin: var(--transform-origin);\n  transition:\n    transform 100ms ease-out,\n    opacity 100ms ease-out;\n\n  &[data-starting-style],\n  &[data-ending-style] {\n    opacity: 0;\n    transform: scale(0.98);\n  }\n}\n\n.item {\n  font-family: var(--typography-typeface-ltr);\n  outline: none;\n  cursor: default;\n  user-select: none;\n  padding-block: var(--spacing-sm);\n  padding-inline: var(--spacing-md);\n  display: flex;\n  justify-content: space-between;\n  font-size: 0.875rem;\n  line-height: 1.4;\n  border-radius: var(--spacing-xxs);\n  color: var(--color-content-neutral-base);\n\n  &[data-highlighted] {\n    position: relative;\n    z-index: 0;\n    color: var(--color-on-brand);\n  }\n\n  &[data-highlighted]::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    inset-inline: var(--spacing-xs);\n    z-index: -1;\n    border-radius: var(--spacing-xxs);\n    background-color: var(--color-action-brand-base);\n  }\n\n  &[data-disabled] {\n    color: var(--color-content-neutral-muted);\n    pointer-events: none;\n  }\n}\n\n.separator {\n  margin-block: var(--spacing-xs);\n  margin-inline: var(--spacing-sm);\n  height: 1px;\n  background-color: var(--color-border-tertiary);\n}\n\n.group-label {\n  font-family: var(--typography-typeface-ltr);\n  padding-block: var(--spacing-xxs);\n  padding-inline: var(--spacing-md);\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--color-content-neutral-tertiary);\n}\n\n.chevron {\n  width: 1rem;\n  height: 1rem;\n}\n"],"mappings":"AAUA,IAAA,EAAY,CAAA,QAAa,iBAAW,cAAO,qBAAA,KAAA,cAAA,MAAA,eAAA,UAAA,kBAAA"}
+{"version":3,"file":"context-menu.module.js","names":[],"sources":["../../../src/atoms/context-menu/context-menu.module.css"],"sourcesContent":[".popup {\n  box-sizing: border-box;\n  font-family: var(--typography-typeface-ltr);\n  outline: none;\n  padding-block: var(--spacing-xs);\n  border: 1px solid var(--color-border-primary);\n  border-radius: var(--spacing-xs);\n  background-color: var(--color-surface-base);\n  color: var(--color-content-neutral-base);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n  transform-origin: var(--transform-origin);\n  transition:\n    transform 100ms ease-out,\n    opacity 100ms ease-out;\n\n  &[data-starting-style],\n  &[data-ending-style] {\n    opacity: 0;\n    transform: scale(0.98);\n  }\n}\n\n.item {\n  font-family: var(--typography-typeface-ltr);\n  outline: none;\n  cursor: default;\n  user-select: none;\n  padding-block: var(--spacing-sm);\n  padding-inline: var(--spacing-md);\n  display: flex;\n  justify-content: space-between;\n  font-size: 0.875rem;\n  line-height: 1.4;\n  border-radius: var(--spacing-xxs);\n  color: var(--color-content-neutral-base);\n\n  &[data-highlighted] {\n    position: relative;\n    z-index: 0;\n    color: var(--color-on-brand);\n  }\n\n  &[data-highlighted]::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    inset-inline: var(--spacing-xs);\n    z-index: -1;\n    border-radius: var(--spacing-xxs);\n    background-color: var(--color-action-brand-base);\n  }\n\n  &[data-disabled] {\n    color: var(--color-content-neutral-muted);\n    pointer-events: none;\n  }\n}\n\n.separator {\n  margin-block: var(--spacing-xs);\n  margin-inline: var(--spacing-sm);\n  height: 1px;\n  background-color: var(--color-border-tertiary);\n}\n\n.group-label {\n  font-family: var(--typography-typeface-ltr);\n  padding-block: var(--spacing-xxs);\n  padding-inline: var(--spacing-md);\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--color-content-neutral-tertiary);\n}\n\n.chevron {\n  width: 1rem;\n  height: 1rem;\n}\n"],"mappings":""}

package/dist/atoms/icon-button/icon-button.css

@@ -1,12 +1 @@
-.fESXeq_root {
-  width: var(--btn-height);
-  padding: 0;
-}
-
-.fESXeq_icon {
-  width: var(--btn-icon-size);
-  height: var(--btn-icon-size);
-  justify-content: center;
-  align-items: center;
-  display: flex;
-}
+.fESXeq_root{width:var(--btn-height);padding:0}.fESXeq_icon{width:var(--btn-icon-size);height:var(--btn-icon-size);justify-content:center;align-items:center;display:flex}

package/dist/atoms/index.d.ts

@@ -1,11 +1,13 @@
 import { AlertDialog, AlertDialogProps } from "./alert-dialog/alert-dialog.js";
 import { Button, ButtonProps } from "./button/button.js";
 import { Checkbox, CheckboxProps } from "./checkbox/checkbox.js";
+import { Collapsible } from "./collapsible/collapsible.js";
 import { Combobox, ComboboxGroup, ComboboxProps } from "./combobox/combobox.js";
+import { ConditionGuard, ConditionGuardProps } from "./condition-guard/condition-guard.js";
 import { ContextMenu } from "./context-menu/context-menu.js";
 import { Dialog, DialogProps } from "./dialog/dialog.js";
-import { Icon, IconProps } from "./icon/icon.js";
 import { IconButton, IconButtonProps } from "./icon-button/icon-button.js";
+import { Icon, IconProps } from "./icon/icon.js";
 import { Input, InputProps } from "./input/input.js";
 import { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./radio/radio.js";
 import { Switch, SwitchProps } from "./switch/switch.js";
@@ -13,5 +15,4 @@ import { Tabs, TabsList, TabsListProps, TabsPanel, TabsPanelProps, TabsTab, Tabs
 import { TabsListState, TabsPanelState, TabsRootChangeEventDetails, TabsRootState, TabsTabState, TabsTabValue } from "./tabs/index.js";
 import { Text, TextColor, TextProps, TextVariant } from "./text/text.js";
 import { Toast, ToastData, ToastProps } from "./toast/toast.js";
-import { Tooltip, TooltipProps, TooltipProvider, TooltipProviderProps } from "./tooltip/tooltip.js";
-import { ConditionGuard, ConditionGuardProps } from "./condition-guard/condition-guard.js";
+import { Tooltip, TooltipProps, TooltipProvider, TooltipProviderProps } from "./tooltip/tooltip.js";

package/dist/atoms/index.js

@@ -1 +1 @@
-import"./button/button.js";import"./button/index.js";import"./text/text.js";import"./text/index.js";import"./alert-dialog/alert-dialog.js";import"./alert-dialog/index.js";import"./icon/icon.js";import"./icon/index.js";import"./checkbox/checkbox.js";import"./checkbox/index.js";import"./combobox/combobox.js";import"./combobox/index.js";import"./context-menu/context-menu.js";import"./context-menu/index.js";import"./dialog/dialog.js";import"./dialog/index.js";import"./icon-button/icon-button.js";import"./icon-button/index.js";import"./input/input.js";import"./input/index.js";import"./radio/radio.js";import"./radio/index.js";import"./switch/switch.js";import"./switch/index.js";import"./tabs/tabs.js";import"./tabs/index.js";import"./toast/toast.js";import"./toast/index.js";import"./tooltip/tooltip.js";import"./tooltip/index.js";import"./condition-guard/condition-guard.js";import"./condition-guard/index.js";
+import"./button/button.js";import"./button/index.js";import"./text/text.js";import"./text/index.js";import"./alert-dialog/alert-dialog.js";import"./alert-dialog/index.js";import"./icon/icon.js";import"./icon/index.js";import"./checkbox/checkbox.js";import"./checkbox/index.js";import"./collapsible/collapsible.js";import"./collapsible/index.js";import"./combobox/combobox.js";import"./combobox/index.js";import"./condition-guard/condition-guard.js";import"./condition-guard/index.js";import"./context-menu/context-menu.js";import"./context-menu/index.js";import"./dialog/dialog.js";import"./dialog/index.js";import"./icon-button/icon-button.js";import"./icon-button/index.js";import"./input/input.js";import"./input/index.js";import"./radio/radio.js";import"./radio/index.js";import"./switch/switch.js";import"./switch/index.js";import"./tabs/tabs.js";import"./tabs/index.js";import"./toast/toast.js";import"./toast/index.js";import"./tooltip/tooltip.js";import"./tooltip/index.js";

package/dist/atoms/input/input.css

@@ -1,29 +1 @@
-.uLevqq_control {
-  box-sizing: border-box;
-  padding: 0 var(--spacing-sm);
-  border-radius: var(--field-control-radius);
-  border: 1px solid var(--field-control-border-color);
-  width: 100%;
-  height: var(--field-control-height);
-  font-family: inherit;
-  font-size: var(--field-control-font-size, var(--typography-body-2-size));
-  line-height: var(--field-control-line-height, var(--typography-body-2-height));
-  font-weight: var(--field-control-font-weight, var(--typography-body-2-weight));
-  background-color: var(--field-control-bg-color);
-  color: var(--field-control-text-color);
-  font-family: var(--typography-typeface-ltr);
-  margin: 0;
-  transition: border-color .2s ease-in-out;
-
-  &::placeholder {
-    color: var(--field-control-placeholder-color);
-    font-family: var(--typography-typeface-ltr);
-  }
-
-  &:focus-visible {
-    outline-style: solid;
-    outline-width: var(--stroke-focus-ring);
-    outline-color: var(--color-action-info-base);
-    outline-offset: var(--spacing-xxs);
-  }
-}
+.uLevqq_control{box-sizing:border-box;padding:0 var(--spacing-sm);border-radius:var(--field-control-radius);border:1px solid var(--field-control-border-color);width:100%;height:var(--field-control-height);font-family:inherit;font-size:var(--field-control-font-size,var(--typography-body-2-size));line-height:var(--field-control-line-height,var(--typography-body-2-height));font-weight:var(--field-control-font-weight,var(--typography-body-2-weight));background-color:var(--field-control-bg-color);color:var(--field-control-text-color);font-family:var(--typography-typeface-ltr);margin:0;transition:border-color .2s ease-in-out;&::placeholder{color:var(--field-control-placeholder-color);font-family:var(--typography-typeface-ltr)}&:focus-visible{outline-style:solid;outline-width:var(--stroke-focus-ring);outline-color:var(--color-action-info-base);outline-offset:var(--spacing-xxs)}}

package/dist/atoms/input/input.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.module.js","names":[],"sources":["../../../src/atoms/input/input.module.css"],"sourcesContent":[".control {\n  box-sizing: border-box;\n  padding: 0 var(--spacing-sm);\n  margin: 0;\n  border-radius: var(--field-control-radius);\n  border: 1px solid var(--field-control-border-color);\n  width: 100%;\n  height: var(--field-control-height);\n  font-family: inherit;\n  font-size: var(--field-control-font-size, var(--typography-body-2-size));\n  line-height: var(\n    --field-control-line-height,\n    var(--typography-body-2-height)\n  );\n  font-weight: var(\n    --field-control-font-weight,\n    var(--typography-body-2-weight)\n  );\n  background-color: var(--field-control-bg-color);\n  color: var(--field-control-text-color);\n  transition: border-color 0.2s ease-in-out;\n  font-family: var(--typography-typeface-ltr);\n\n  &::placeholder {\n    color: var(--field-control-placeholder-color);\n    font-family: var(--typography-typeface-ltr);\n  }\n\n  &:focus-visible {\n    outline-style: solid;\n    outline-width: var(--stroke-focus-ring);\n    outline-color: var(--color-action-info-base);\n    outline-offset: var(--spacing-xxs);\n  }\n}\n"],"mappings":"AAEA,IAAA,EAAa,CAAG,QAAU,gBAAI"}
+{"version":3,"file":"input.module.js","names":[],"sources":["../../../src/atoms/input/input.module.css"],"sourcesContent":[".control {\n  box-sizing: border-box;\n  padding: 0 var(--spacing-sm);\n  margin: 0;\n  border-radius: var(--field-control-radius);\n  border: 1px solid var(--field-control-border-color);\n  width: 100%;\n  height: var(--field-control-height);\n  font-family: inherit;\n  font-size: var(--field-control-font-size, var(--typography-body-2-size));\n  line-height: var(\n    --field-control-line-height,\n    var(--typography-body-2-height)\n  );\n  font-weight: var(\n    --field-control-font-weight,\n    var(--typography-body-2-weight)\n  );\n  background-color: var(--field-control-bg-color);\n  color: var(--field-control-text-color);\n  transition: border-color 0.2s ease-in-out;\n  font-family: var(--typography-typeface-ltr);\n\n  &::placeholder {\n    color: var(--field-control-placeholder-color);\n    font-family: var(--typography-typeface-ltr);\n  }\n\n  &:focus-visible {\n    outline-style: solid;\n    outline-width: var(--stroke-focus-ring);\n    outline-color: var(--color-action-info-base);\n    outline-offset: var(--spacing-xxs);\n  }\n}\n"],"mappings":""}

package/dist/atoms/radio/radio.css

@@ -1,142 +1 @@
-.FLTLnW_group {
-  gap: var(--spacing-xs);
-  flex-direction: column;
-  display: flex;
-}
-
-.FLTLnW_group[data-disabled] {
-  cursor: not-allowed;
-  opacity: .5;
-
-  & * {
-    cursor: not-allowed;
-  }
-}
-
-.FLTLnW_root {
-  --radio-size: 1rem;
-  --radio-bg: transparent;
-  --radio-border: var(--color-border-primary);
-  --radio-dot-color: transparent;
-  --radio-gap: var(--spacing-xs);
-  --radio-label-color: var(--color-content-neutral-base);
-  font-family: var(--typography-typeface-ltr);
-  align-items: center;
-  gap: var(--radio-gap);
-  display: flex;
-  position: relative;
-}
-
-.FLTLnW_control {
-  box-sizing: border-box;
-  width: var(--radio-size);
-  height: var(--radio-size);
-  background-color: var(--radio-bg);
-  box-shadow: 0 0 0 1px var(--radio-border) inset;
-  cursor: pointer;
-  border: none;
-  border-radius: 9999px;
-  flex-shrink: 0;
-  justify-content: center;
-  align-items: center;
-  padding: 0;
-  transition: background-color .2s, box-shadow .2s;
-  display: flex;
-}
-
-.FLTLnW_root[data-size="sm"] {
-  --radio-size: .875rem;
-  --radio-gap: var(--spacing-xs);
-  --radio-label-font-size: var(--typography-body-2-size);
-  --radio-label-line-height: var(--typography-body-2-height);
-  --radio-label-font-weight: var(--typography-body-2-weight);
-}
-
-.FLTLnW_root[data-size="md"], .FLTLnW_root:not([data-size]) {
-  --radio-size: 1rem;
-  --radio-gap: var(--spacing-xs);
-  --radio-label-font-size: var(--typography-body-1-size);
-  --radio-label-line-height: var(--typography-body-1-height);
-  --radio-label-font-weight: var(--typography-body-1-weight);
-}
-
-.FLTLnW_root[data-size="lg"] {
-  --radio-size: 1.25rem;
-  --radio-gap: var(--spacing-sm);
-  --radio-label-font-size: var(--typography-body-1-size);
-  --radio-label-line-height: var(--typography-body-1-height);
-  --radio-label-font-weight: var(--typography-body-1-weight);
-}
-
-.FLTLnW_control[data-checked]:not([data-invalid]) {
-  --radio-bg: var(--color-action-neutral-base);
-  --radio-border: transparent;
-  --radio-dot-color: var(--color-on-neutral);
-}
-
-.FLTLnW_control:focus-visible {
-  outline-style: solid;
-  outline-width: var(--stroke-focus-ring);
-  outline-color: var(--color-action-info-base);
-  outline-offset: var(--spacing-xxs);
-}
-
-.FLTLnW_root[data-disabled] {
-  cursor: not-allowed;
-  opacity: .5;
-
-  & * {
-    cursor: not-allowed;
-  }
-}
-
-.FLTLnW_root[data-invalid] {
-  --radio-border: var(--color-negative);
-  --radio-label-color: var(--color-content-negative-base);
-}
-
-.FLTLnW_control[data-invalid][data-checked] {
-  --radio-bg: var(--color-negative);
-  --radio-dot-color: var(--color-on-negative);
-}
-
-.FLTLnW_indicator {
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  display: flex;
-}
-
-.FLTLnW_indicator[data-unchecked] {
-  display: none;
-}
-
-.FLTLnW_indicator:before {
-  content: "";
-  background-color: var(--radio-dot-color);
-  border-radius: 9999px;
-  width: 45%;
-  height: 45%;
-  transition: background-color .2s;
-  display: block;
-}
-
-.FLTLnW_label {
-  font-size: var(--radio-label-font-size, var(--typography-body-2-size));
-  line-height: var(--radio-label-line-height, var(--typography-body-2-height));
-  font-weight: var(--radio-label-font-weight, var(--typography-body-2-weight));
-  color: var(--radio-label-color);
-}
-
-.FLTLnW_label--hidden {
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  position: absolute;
-  overflow: hidden;
-}
+.FLTLnW_group{gap:var(--spacing-xs);flex-direction:column;display:flex}.FLTLnW_group[data-disabled]{cursor:not-allowed;opacity:.5;& *{cursor:not-allowed}}.FLTLnW_root{--radio-size:1rem;--radio-bg:transparent;--radio-border:var(--color-border-primary);--radio-dot-color:transparent;--radio-gap:var(--spacing-xs);--radio-label-color:var(--color-content-neutral-base);font-family:var(--typography-typeface-ltr);align-items:center;gap:var(--radio-gap);display:flex;position:relative}.FLTLnW_control{box-sizing:border-box;width:var(--radio-size);height:var(--radio-size);background-color:var(--radio-bg);box-shadow:0 0 0 1px var(--radio-border) inset;cursor:pointer;border:none;border-radius:9999px;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:background-color .2s,box-shadow .2s;display:flex}.FLTLnW_root[data-size=sm]{--radio-size:.875rem;--radio-gap:var(--spacing-xs);--radio-label-font-size:var(--typography-body-2-size);--radio-label-line-height:var(--typography-body-2-height);--radio-label-font-weight:var(--typography-body-2-weight)}.FLTLnW_root[data-size=md],.FLTLnW_root:not([data-size]){--radio-size:1rem;--radio-gap:var(--spacing-xs);--radio-label-font-size:var(--typography-body-1-size);--radio-label-line-height:var(--typography-body-1-height);--radio-label-font-weight:var(--typography-body-1-weight)}.FLTLnW_root[data-size=lg]{--radio-size:1.25rem;--radio-gap:var(--spacing-sm);--radio-label-font-size:var(--typography-body-1-size);--radio-label-line-height:var(--typography-body-1-height);--radio-label-font-weight:var(--typography-body-1-weight)}.FLTLnW_control[data-checked]:not([data-invalid]){--radio-bg:var(--color-action-neutral-base);--radio-border:transparent;--radio-dot-color:var(--color-on-neutral)}.FLTLnW_control:focus-visible{outline-style:solid;outline-width:var(--stroke-focus-ring);outline-color:var(--color-action-info-base);outline-offset:var(--spacing-xxs)}.FLTLnW_root[data-disabled]{cursor:not-allowed;opacity:.5;& *{cursor:not-allowed}}.FLTLnW_root[data-invalid]{--radio-border:var(--color-negative);--radio-label-color:var(--color-content-negative-base)}.FLTLnW_control[data-invalid][data-checked]{--radio-bg:var(--color-negative);--radio-dot-color:var(--color-on-negative)}.FLTLnW_indicator{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.FLTLnW_indicator[data-unchecked]{display:none}.FLTLnW_indicator:before{content:"";background-color:var(--radio-dot-color);border-radius:9999px;width:45%;height:45%;transition:background-color .2s;display:block}.FLTLnW_label{font-size:var(--radio-label-font-size,var(--typography-body-2-size));line-height:var(--radio-label-line-height,var(--typography-body-2-height));font-weight:var(--radio-label-font-weight,var(--typography-body-2-weight));color:var(--radio-label-color)}.FLTLnW_label--hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}

package/dist/atoms/radio/radio.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.module.js","names":[],"sources":["../../../src/atoms/radio/radio.module.css"],"sourcesContent":["/* ─── RadioGroup ─────────────────────────────────────────────────────────────── */\n\n.group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xs);\n}\n\n.group[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.5;\n  & * {\n    cursor: not-allowed;\n  }\n}\n\n/* ─── Radio Item ─────────────────────────────────────────────────────────────── */\n\n.root {\n  --radio-size: 1rem;\n  --radio-bg: transparent;\n  --radio-border: var(--color-border-primary);\n  --radio-dot-color: transparent;\n  --radio-gap: var(--spacing-xs);\n  --radio-label-color: var(--color-content-neutral-base);\n  font-family: var(--typography-typeface-ltr);\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: var(--radio-gap);\n}\n\n.control {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--radio-size);\n  height: var(--radio-size);\n  background-color: var(--radio-bg);\n  box-shadow: 0 0 0 1px var(--radio-border) inset;\n  border-radius: 9999px;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  transition:\n    background-color 0.2s,\n    box-shadow 0.2s;\n}\n\n/* Sizes — mirrors Checkbox sizing tokens */\n\n.root[data-size=\"sm\"] {\n  --radio-size: 0.875rem;\n  --radio-gap: var(--spacing-xs);\n  --radio-label-font-size: var(--typography-body-2-size);\n  --radio-label-line-height: var(--typography-body-2-height);\n  --radio-label-font-weight: var(--typography-body-2-weight);\n}\n\n.root[data-size=\"md\"],\n.root:not([data-size]) {\n  --radio-size: 1rem;\n  --radio-gap: var(--spacing-xs);\n  --radio-label-font-size: var(--typography-body-1-size);\n  --radio-label-line-height: var(--typography-body-1-height);\n  --radio-label-font-weight: var(--typography-body-1-weight);\n}\n\n.root[data-size=\"lg\"] {\n  --radio-size: 1.25rem;\n  --radio-gap: var(--spacing-sm);\n  --radio-label-font-size: var(--typography-body-1-size);\n  --radio-label-line-height: var(--typography-body-1-height);\n  --radio-label-font-weight: var(--typography-body-1-weight);\n}\n\n/* Checked state */\n\n.control[data-checked]:not([data-invalid]) {\n  --radio-bg: var(--color-action-neutral-base);\n  --radio-border: transparent;\n  --radio-dot-color: var(--color-on-neutral);\n}\n\n/* Focus */\n\n.control:focus-visible {\n  outline-style: solid;\n  outline-width: var(--stroke-focus-ring);\n  outline-color: var(--color-action-info-base);\n  outline-offset: var(--spacing-xxs);\n}\n\n/* Disabled — scoped to item root, mirrors group-level disabled */\n\n.root[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.5;\n  & * {\n    cursor: not-allowed;\n  }\n}\n\n/* Invalid */\n\n.root[data-invalid] {\n  --radio-border: var(--color-negative);\n  --radio-label-color: var(--color-content-negative-base);\n}\n\n.control[data-invalid][data-checked] {\n  --radio-bg: var(--color-negative);\n  --radio-dot-color: var(--color-on-negative);\n}\n\n/* ─── Indicator (CSS dot) ─────────────────────────────────────────────────────── */\n\n.indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n.indicator[data-unchecked] {\n  display: none;\n}\n\n.indicator::before {\n  content: \"\";\n  display: block;\n  width: 45%; /* proportional dot — scales with --radio-size */\n  height: 45%;\n  border-radius: 9999px;\n  background-color: var(--radio-dot-color);\n  transition: background-color 0.2s;\n}\n\n/* ─── Label ───────────────────────────────────────────────────────────────────── */\n\n.label {\n  font-size: var(--radio-label-font-size, var(--typography-body-2-size));\n  line-height: var(--radio-label-line-height, var(--typography-body-2-height));\n  font-weight: var(--radio-label-font-weight, var(--typography-body-2-weight));\n  color: var(--radio-label-color);\n}\n\n.label--hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n"],"mappings":"AAYA,IAAA,EAAE,CAAA,QAAA,iBAAA,MAAA,eAAA,UAAA,mBAAA,MAAA,eAAA,gBAAA,uBAAA,KAAA,aAAA"}
+{"version":3,"file":"radio.module.js","names":[],"sources":["../../../src/atoms/radio/radio.module.css"],"sourcesContent":["/* ─── RadioGroup ─────────────────────────────────────────────────────────────── */\n\n.group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xs);\n}\n\n.group[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.5;\n  & * {\n    cursor: not-allowed;\n  }\n}\n\n/* ─── Radio Item ─────────────────────────────────────────────────────────────── */\n\n.root {\n  --radio-size: 1rem;\n  --radio-bg: transparent;\n  --radio-border: var(--color-border-primary);\n  --radio-dot-color: transparent;\n  --radio-gap: var(--spacing-xs);\n  --radio-label-color: var(--color-content-neutral-base);\n  font-family: var(--typography-typeface-ltr);\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: var(--radio-gap);\n}\n\n.control {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--radio-size);\n  height: var(--radio-size);\n  background-color: var(--radio-bg);\n  box-shadow: 0 0 0 1px var(--radio-border) inset;\n  border-radius: 9999px;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  transition:\n    background-color 0.2s,\n    box-shadow 0.2s;\n}\n\n/* Sizes — mirrors Checkbox sizing tokens */\n\n.root[data-size=\"sm\"] {\n  --radio-size: 0.875rem;\n  --radio-gap: var(--spacing-xs);\n  --radio-label-font-size: var(--typography-body-2-size);\n  --radio-label-line-height: var(--typography-body-2-height);\n  --radio-label-font-weight: var(--typography-body-2-weight);\n}\n\n.root[data-size=\"md\"],\n.root:not([data-size]) {\n  --radio-size: 1rem;\n  --radio-gap: var(--spacing-xs);\n  --radio-label-font-size: var(--typography-body-1-size);\n  --radio-label-line-height: var(--typography-body-1-height);\n  --radio-label-font-weight: var(--typography-body-1-weight);\n}\n\n.root[data-size=\"lg\"] {\n  --radio-size: 1.25rem;\n  --radio-gap: var(--spacing-sm);\n  --radio-label-font-size: var(--typography-body-1-size);\n  --radio-label-line-height: var(--typography-body-1-height);\n  --radio-label-font-weight: var(--typography-body-1-weight);\n}\n\n/* Checked state */\n\n.control[data-checked]:not([data-invalid]) {\n  --radio-bg: var(--color-action-neutral-base);\n  --radio-border: transparent;\n  --radio-dot-color: var(--color-on-neutral);\n}\n\n/* Focus */\n\n.control:focus-visible {\n  outline-style: solid;\n  outline-width: var(--stroke-focus-ring);\n  outline-color: var(--color-action-info-base);\n  outline-offset: var(--spacing-xxs);\n}\n\n/* Disabled — scoped to item root, mirrors group-level disabled */\n\n.root[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.5;\n  & * {\n    cursor: not-allowed;\n  }\n}\n\n/* Invalid */\n\n.root[data-invalid] {\n  --radio-border: var(--color-negative);\n  --radio-label-color: var(--color-content-negative-base);\n}\n\n.control[data-invalid][data-checked] {\n  --radio-bg: var(--color-negative);\n  --radio-dot-color: var(--color-on-negative);\n}\n\n/* ─── Indicator (CSS dot) ─────────────────────────────────────────────────────── */\n\n.indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n.indicator[data-unchecked] {\n  display: none;\n}\n\n.indicator::before {\n  content: \"\";\n  display: block;\n  width: 45%; /* proportional dot — scales with --radio-size */\n  height: 45%;\n  border-radius: 9999px;\n  background-color: var(--radio-dot-color);\n  transition: background-color 0.2s;\n}\n\n/* ─── Label ───────────────────────────────────────────────────────────────────── */\n\n.label {\n  font-size: var(--radio-label-font-size, var(--typography-body-2-size));\n  line-height: var(--radio-label-line-height, var(--typography-body-2-height));\n  font-weight: var(--radio-label-font-weight, var(--typography-body-2-weight));\n  color: var(--radio-label-color);\n}\n\n.label--hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n"],"mappings":""}

package/dist/atoms/switch/switch.css

@@ -1,68 +1 @@
-.Ld_P-G_root {
-  box-sizing: border-box;
-  border-style: solid;
-  border-width: .0625rem;
-  border-color: var(--color-border-primary);
-  background-color: var(--color-surface-tertiary);
-  padding: var(--spacing-xxs);
-  height: var(--root-height);
-  width: var(--root-width);
-  cursor: pointer;
-  border-radius: var(--radius-full);
-  flex-shrink: 0;
-  align-items: center;
-  transition: background-color .15s, border-color .15s, opacity .15s;
-  display: inline-flex;
-}
-
-.Ld_P-G_root[data-size="sm"] {
-  --root-width: 2rem;
-  --root-height: 1.125rem;
-}
-
-.Ld_P-G_root[data-size="md"] {
-  --root-width: 2.25rem;
-  --root-height: 1.25rem;
-}
-
-.Ld_P-G_root[data-size="lg"] {
-  --root-width: 2.625rem;
-  --root-height: 1.5rem;
-}
-
-.Ld_P-G_root[data-checked] {
-  background-color: var(--color-action-brand-base);
-  border-color: var(--color-action-brand-base);
-}
-
-.Ld_P-G_root[data-disabled] {
-  cursor: not-allowed;
-  opacity: .6;
-}
-
-.Ld_P-G_root[data-readonly] {
-  cursor: default;
-}
-
-.Ld_P-G_root:focus-visible {
-  outline-style: solid;
-  outline-width: var(--stroke-focus-ring);
-  outline-color: var(--color-action-info-base);
-  outline-offset: var(--spacing-xxs);
-}
-
-.Ld_P-G_thumb {
-  --thumb-size: calc(var(--root-height) - var(--spacing-xs));
-  background-color: var(--color-on-brand);
-  border-radius: var(--radius-full);
-  height: var(--thumb-size);
-  width: var(--thumb-size);
-  translate: calc(-1 * var(--spacing-xxs) / 2) 0;
-  transition: translate .15s, background-color .15s;
-  display: block;
-}
-
-.Ld_P-G_root[data-checked] .Ld_P-G_thumb {
-  translate: calc(var(--root-width) - var(--thumb-size) - (2 * var(--spacing-xxs)))
-    0;
-}
+.Ld_P-G_root{box-sizing:border-box;border-style:solid;border-width:.0625rem;border-color:var(--color-border-primary);background-color:var(--color-surface-tertiary);padding:var(--spacing-xxs);height:var(--root-height);width:var(--root-width);cursor:pointer;border-radius:var(--radius-full);flex-shrink:0;align-items:center;transition:background-color .15s,border-color .15s,opacity .15s;display:inline-flex}.Ld_P-G_root[data-size=sm]{--root-width:2rem;--root-height:1.125rem}.Ld_P-G_root[data-size=md]{--root-width:2.25rem;--root-height:1.25rem}.Ld_P-G_root[data-size=lg]{--root-width:2.625rem;--root-height:1.5rem}.Ld_P-G_root[data-checked]{background-color:var(--color-action-brand-base);border-color:var(--color-action-brand-base)}.Ld_P-G_root[data-disabled]{cursor:not-allowed;opacity:.6}.Ld_P-G_root[data-readonly]{cursor:default}.Ld_P-G_root:focus-visible{outline-style:solid;outline-width:var(--stroke-focus-ring);outline-color:var(--color-action-info-base);outline-offset:var(--spacing-xxs)}.Ld_P-G_thumb{--thumb-size:calc(var(--root-height) - var(--spacing-xs));background-color:var(--color-on-brand);border-radius:var(--radius-full);height:var(--thumb-size);width:var(--thumb-size);translate:calc(-1 * var(--spacing-xxs) / 2) 0;transition:translate .15s,background-color .15s;display:block}.Ld_P-G_root[data-checked] .Ld_P-G_thumb{translate:calc(var(--root-width) - var(--thumb-size) - (2 * var(--spacing-xxs))) 0}

package/dist/atoms/switch/switch.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.module.js","names":[],"sources":["../../../src/atoms/switch/switch.module.css"],"sourcesContent":[".root {\n  /* Layout */\n  box-sizing: border-box;\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n\n  /* Track shape */\n  border-style: solid;\n  border-width: 0.0625rem; /* 1px */\n  border-color: var(--color-border-primary);\n  background-color: var(--color-surface-tertiary);\n  padding: var(--spacing-xxs); /* 0.125rem */\n\n  height: var(--root-height);\n  width: var(--root-width);\n\n  /* Interaction */\n  cursor: pointer;\n  border-radius: var(--radius-full);\n  transition:\n    background-color 150ms ease,\n    border-color 150ms ease,\n    opacity 150ms ease;\n}\n\n/* Sizes (track) */\n.root[data-size=\"sm\"] {\n  --root-width: 2rem; /* 32px */\n  --root-height: 1.125rem; /* 18px */\n}\n\n.root[data-size=\"md\"] {\n  --root-width: 2.25rem; /* 36px */\n  --root-height: 1.25rem; /* 20px */\n}\n\n.root[data-size=\"lg\"] {\n  --root-width: 2.625rem; /* 42px */\n  --root-height: 1.5rem; /* 24px */\n}\n\n/* Checked track */\n.root[data-checked] {\n  background-color: var(--color-action-brand-base);\n  border-color: var(--color-action-brand-base);\n}\n\n/* Disabled */\n.root[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Readonly */\n.root[data-readonly] {\n  cursor: default;\n}\n\n/* Focus ring\n   If you standardize on [data-focus-visible] later, swap selector accordingly. */\n.root:focus-visible {\n  outline-style: solid;\n  outline-width: var(--stroke-focus-ring);\n  outline-color: var(--color-action-info-base);\n  outline-offset: var(--spacing-xxs);\n}\n\n/* Thumb */\n.thumb {\n  --thumb-size: calc(var(--root-height) - var(--spacing-xs));\n  display: block;\n  background-color: var(--color-on-brand);\n  border-radius: var(--radius-full);\n  transition:\n    translate 150ms ease,\n    background-color 150ms ease;\n\n  height: var(--thumb-size);\n  width: var(--thumb-size);\n\n  translate: calc(-1 * var(--spacing-xxs) / 2) 0;\n}\n\n/* Thumb position when checked */\n.root[data-checked] .thumb {\n  translate: calc(\n      var(--root-width) - var(--thumb-size) - (2 * var(--spacing-xxs))\n    )\n    0;\n}\n"],"mappings":"AAIA,IAAA,EAAe,CAAC,KAAA,cAAA,MAAA,cAAA"}
+{"version":3,"file":"switch.module.js","names":[],"sources":["../../../src/atoms/switch/switch.module.css"],"sourcesContent":[".root {\n  /* Layout */\n  box-sizing: border-box;\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n\n  /* Track shape */\n  border-style: solid;\n  border-width: 0.0625rem; /* 1px */\n  border-color: var(--color-border-primary);\n  background-color: var(--color-surface-tertiary);\n  padding: var(--spacing-xxs); /* 0.125rem */\n\n  height: var(--root-height);\n  width: var(--root-width);\n\n  /* Interaction */\n  cursor: pointer;\n  border-radius: var(--radius-full);\n  transition:\n    background-color 150ms ease,\n    border-color 150ms ease,\n    opacity 150ms ease;\n}\n\n/* Sizes (track) */\n.root[data-size=\"sm\"] {\n  --root-width: 2rem; /* 32px */\n  --root-height: 1.125rem; /* 18px */\n}\n\n.root[data-size=\"md\"] {\n  --root-width: 2.25rem; /* 36px */\n  --root-height: 1.25rem; /* 20px */\n}\n\n.root[data-size=\"lg\"] {\n  --root-width: 2.625rem; /* 42px */\n  --root-height: 1.5rem; /* 24px */\n}\n\n/* Checked track */\n.root[data-checked] {\n  background-color: var(--color-action-brand-base);\n  border-color: var(--color-action-brand-base);\n}\n\n/* Disabled */\n.root[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Readonly */\n.root[data-readonly] {\n  cursor: default;\n}\n\n/* Focus ring\n   If you standardize on [data-focus-visible] later, swap selector accordingly. */\n.root:focus-visible {\n  outline-style: solid;\n  outline-width: var(--stroke-focus-ring);\n  outline-color: var(--color-action-info-base);\n  outline-offset: var(--spacing-xxs);\n}\n\n/* Thumb */\n.thumb {\n  --thumb-size: calc(var(--root-height) - var(--spacing-xs));\n  display: block;\n  background-color: var(--color-on-brand);\n  border-radius: var(--radius-full);\n  transition:\n    translate 150ms ease,\n    background-color 150ms ease;\n\n  height: var(--thumb-size);\n  width: var(--thumb-size);\n\n  translate: calc(-1 * var(--spacing-xxs) / 2) 0;\n}\n\n/* Thumb position when checked */\n.root[data-checked] .thumb {\n  translate: calc(\n      var(--root-width) - var(--thumb-size) - (2 * var(--spacing-xxs))\n    )\n    0;\n}\n"],"mappings":""}

package/dist/atoms/tabs/tabs.css

@@ -1,92 +1 @@
-._5jD7lW_root {
-  box-sizing: border-box;
-  width: 100%;
-}
-
-._5jD7lW_list {
-  z-index: 1;
-  gap: var(--spacing-sm);
-  border-bottom: .0625rem solid var(--color-border-primary);
-  display: flex;
-  position: relative;
-}
-
-._5jD7lW_tab {
-  box-sizing: border-box;
-  color: var(--color-content-neutral-tertiary);
-  font-family: var(--typography-typeface-ltr);
-  font-size: var(--typography-caption-base-size);
-  -webkit-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-  word-break: keep-all;
-  padding-inline: var(--spacing-md);
-  padding-block: var(--spacing-sm);
-  background: none;
-  border: none;
-  border-bottom: .125rem solid #0000;
-  outline: none;
-  justify-content: center;
-  align-items: center;
-  height: 2.5rem;
-  margin: 0;
-  font-weight: 400;
-  line-height: 1.4;
-  transition: color .15s ease-in-out, border .15s ease-in-out, background-color .15s ease-in-out;
-  display: flex;
-
-  @media (hover: hover) {
-    &:hover {
-      color: var(--color-content-neutral-strong);
-    }
-  }
-
-  &[data-active] {
-    color: var(--color-content-brand-base);
-    border-bottom-color: var(--color-brand-primary);
-  }
-
-  &:focus-visible {
-    outline: var(--stroke-focus-ring) solid var(--color-action-info-base);
-    outline-offset: -1px;
-  }
-}
-
-._5jD7lW_indicator {
-  box-sizing: border-box;
-  z-index: -1;
-  background-color: var(--color-border-primary);
-  border-radius: var(--spacing-xxs) var(--spacing-xxs) 0 0;
-  height: .125rem;
-  transition: translate, width, background-color .15s ease-in-out;
-  position: absolute;
-  bottom: -1px;
-  left: 0;
-}
-
-._5jD7lW_panel {
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 8rem;
-  padding: var(--spacing-lg);
-  color: var(--color-content-primary);
-  background-color: var(--color-surface-secondary);
-  border: .0625rem solid var(--color-border-secondary);
-  border-top: none;
-  border-end-end-radius: var(--spacing-sm);
-  border-end-start-radius: var(--spacing-sm);
-  grid-area: 1 / 1;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-
-  &:focus-visible {
-    outline: var(--stroke-focus-ring) solid var(--color-action-info-base);
-    outline-offset: -1px;
-    z-index: 1;
-  }
-
-  &[hidden] {
-    display: none;
-  }
-}
+._5jD7lW_root{box-sizing:border-box;width:100%}._5jD7lW_list{z-index:1;gap:var(--spacing-sm);border-bottom:.0625rem solid var(--color-border-primary);display:flex;position:relative}._5jD7lW_tab{box-sizing:border-box;color:var(--color-content-neutral-tertiary);font-family:var(--typography-typeface-ltr);font-size:var(--typography-caption-base-size);-webkit-user-select:none;user-select:none;white-space:nowrap;word-break:keep-all;padding-inline:var(--spacing-md);padding-block:var(--spacing-sm);background:0 0;border:none;border-bottom:.125rem solid #0000;outline:none;justify-content:center;align-items:center;height:2.5rem;margin:0;font-weight:400;line-height:1.4;transition:color .15s ease-in-out,border .15s ease-in-out,background-color .15s ease-in-out;display:flex;@media (hover:hover){&:hover{color:var(--color-content-neutral-strong)}}&[data-active]{color:var(--color-content-brand-base);border-bottom-color:var(--color-brand-primary)}&:focus-visible{outline:var(--stroke-focus-ring) solid var(--color-action-info-base);outline-offset:-1px}}._5jD7lW_indicator{box-sizing:border-box;z-index:-1;background-color:var(--color-border-primary);border-radius:var(--spacing-xxs) var(--spacing-xxs) 0 0;height:.125rem;transition:translate,width,background-color .15s ease-in-out;position:absolute;bottom:-1px;left:0}._5jD7lW_panel{box-sizing:border-box;width:100%;min-height:8rem;padding:var(--spacing-lg);color:var(--color-content-primary);background-color:var(--color-surface-secondary);border:.0625rem solid var(--color-border-secondary);border-top:none;border-end-end-radius:var(--spacing-sm);border-end-start-radius:var(--spacing-sm);grid-area:1/1;justify-content:center;align-items:center;display:flex;&:focus-visible{outline:var(--stroke-focus-ring) solid var(--color-action-info-base);outline-offset:-1px;z-index:1}&[hidden]{display:none}}

package/dist/atoms/tabs/tabs.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.module.js","names":[],"sources":["../../../src/atoms/tabs/tabs.module.css"],"sourcesContent":[".root {\n  box-sizing: border-box;\n  width: 100%;\n}\n\n.list {\n  display: flex;\n  position: relative;\n  z-index: 1;\n  gap: var(--spacing-sm);\n  border-bottom: 0.0625rem solid var(--color-border-primary);\n}\n\n.tab {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  border: none;\n  border-bottom-color: transparent;\n  border-bottom-width: 0.125rem;\n  border-bottom-style: solid;\n\n  margin: 0;\n  outline: none;\n  background: none;\n  color: var(--color-content-neutral-tertiary);\n  font-family: var(--typography-typeface-ltr);\n  font-size: var(--typography-caption-base-size);\n  line-height: 1.4;\n  font-weight: 400;\n  -webkit-user-select: none;\n  user-select: none;\n  white-space: nowrap;\n  word-break: keep-all;\n  padding-inline: var(--spacing-md);\n  padding-block: var(--spacing-sm);\n  height: 2.5rem;\n\n  transition:\n    color 150ms ease-in-out,\n    border 150ms ease-in-out,\n    background-color 150ms ease-in-out;\n\n  @media (hover: hover) {\n    &:hover {\n      color: var(--color-content-neutral-strong);\n    }\n  }\n\n  &[data-active] {\n    color: var(--color-content-brand-base);\n    border-bottom-color: var(--color-brand-primary);\n  }\n\n  &:focus-visible {\n    outline: var(--stroke-focus-ring) solid var(--color-action-info-base);\n    outline-offset: -1px;\n  }\n}\n\n.indicator {\n  box-sizing: border-box;\n  position: absolute;\n  z-index: -1;\n  bottom: -1px;\n  left: 0;\n  height: 0.125rem;\n  background-color: var(--color-border-primary);\n  transition:\n    translate,\n    width,\n    background-color 150ms ease-in-out;\n  border-radius: var(--spacing-xxs) var(--spacing-xxs) 0 0;\n}\n\n.panel {\n  box-sizing: border-box;\n  grid-area: 1 / 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  min-height: 8rem;\n  padding: var(--spacing-lg);\n  color: var(--color-content-primary);\n  background-color: var(--color-surface-secondary);\n  border: 0.0625rem solid var(--color-border-secondary);\n  border-top: none;\n  border-end-end-radius: var(--spacing-sm);\n  border-end-start-radius: var(--spacing-sm);\n\n  &:focus-visible {\n    outline: var(--stroke-focus-ring) solid var(--color-action-info-base);\n    outline-offset: -1px;\n    z-index: 1;\n  }\n\n  &[hidden] {\n    display: none;\n  }\n}\n"],"mappings":"AAUA,IAAA,EAAS,CAAA,UAAU,oBAAA,KAAA,eAAA,MAAA,gBAAA,KAAA,eAAA,IAAA,aAAA"}
+{"version":3,"file":"tabs.module.js","names":[],"sources":["../../../src/atoms/tabs/tabs.module.css"],"sourcesContent":[".root {\n  box-sizing: border-box;\n  width: 100%;\n}\n\n.list {\n  display: flex;\n  position: relative;\n  z-index: 1;\n  gap: var(--spacing-sm);\n  border-bottom: 0.0625rem solid var(--color-border-primary);\n}\n\n.tab {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  border: none;\n  border-bottom-color: transparent;\n  border-bottom-width: 0.125rem;\n  border-bottom-style: solid;\n\n  margin: 0;\n  outline: none;\n  background: none;\n  color: var(--color-content-neutral-tertiary);\n  font-family: var(--typography-typeface-ltr);\n  font-size: var(--typography-caption-base-size);\n  line-height: 1.4;\n  font-weight: 400;\n  -webkit-user-select: none;\n  user-select: none;\n  white-space: nowrap;\n  word-break: keep-all;\n  padding-inline: var(--spacing-md);\n  padding-block: var(--spacing-sm);\n  height: 2.5rem;\n\n  transition:\n    color 150ms ease-in-out,\n    border 150ms ease-in-out,\n    background-color 150ms ease-in-out;\n\n  @media (hover: hover) {\n    &:hover {\n      color: var(--color-content-neutral-strong);\n    }\n  }\n\n  &[data-active] {\n    color: var(--color-content-brand-base);\n    border-bottom-color: var(--color-brand-primary);\n  }\n\n  &:focus-visible {\n    outline: var(--stroke-focus-ring) solid var(--color-action-info-base);\n    outline-offset: -1px;\n  }\n}\n\n.indicator {\n  box-sizing: border-box;\n  position: absolute;\n  z-index: -1;\n  bottom: -1px;\n  left: 0;\n  height: 0.125rem;\n  background-color: var(--color-border-primary);\n  transition:\n    translate,\n    width,\n    background-color 150ms ease-in-out;\n  border-radius: var(--spacing-xxs) var(--spacing-xxs) 0 0;\n}\n\n.panel {\n  box-sizing: border-box;\n  grid-area: 1 / 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  min-height: 8rem;\n  padding: var(--spacing-lg);\n  color: var(--color-content-primary);\n  background-color: var(--color-surface-secondary);\n  border: 0.0625rem solid var(--color-border-secondary);\n  border-top: none;\n  border-end-end-radius: var(--spacing-sm);\n  border-end-start-radius: var(--spacing-sm);\n\n  &:focus-visible {\n    outline: var(--stroke-focus-ring) solid var(--color-action-info-base);\n    outline-offset: -1px;\n    z-index: 1;\n  }\n\n  &[hidden] {\n    display: none;\n  }\n}\n"],"mappings":""}