@ivds/core 0.1.1 → 1.0.0

package/lib/components/select/select.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/select/select.scss%23sass","../../../src/components/select/select.scss","../../../src/components/select/_select-mixin.scss","../../../src/base/_focus.scss"],"names":[],"mappings":"AAMA,qBCFA,YAAA,CCiDE,qBAAA,CD/CF,0BAAA,CC6CE,iBD5CF,CDGA,aCAA,gDAAA,CCFE,gDAAA,CACA,6CAAA,CACA,wCAAA,CACA,0DAAA,CACA,iBAAA,CAKA,uBAAA,CAAA,oBAAA,CAAA,eAAA,CAIA,wCAAA,CAWA,uRAAA,CAEA,wDAAA,CADA,2BAAA,CAEA,oBAAA,CAhBA,oCAAA,CACA,kCAAA,CAEA,kBAAA,CAJA,cAAA,CAJA,aAAA,CASA,0DAAA,CACA,mCAAA,CACA,wCAAA,CATA,4BAAA,CAUA,qDAAA,CACA,sCAAA,CACA,iOAAA,CAbA,UDoBF,CCEE,yCDAF,sDACA,CCGE,mBAGE,uRAAA,CDHJ,sCAAA,CCCI,YDCJ,CEtCE,2BAGE,eAAA,CAFA,iHAAA,CFwCJ,gDAEA,CErCE,uCAEE,eAAA,CADA,YFwCJ,CDtCE,oBAIE,0CAAA,CADA,oCAAA,CADA,qCAAA,CADA,kCC2CJ,CDrCE,oBAGE,qCAAA,CADA,oCAAA,CADA,iCCyCJ,CDnCE,sBEkCA,kDAAA,CADA,8CAAA,CADA,oCAAA,CAFA,kBAAA,CACA,WDWF,CCFE,8CACE,oDDOJ,CCJE,kCACE,qDDMJ,CD1CA,oBAGE,sCAAA,CAFA,oCAAA,CACA,0CC8CF,CD1CA,qBAEE,oCAAA,CADA,mCC8CF","file":"select.min.css","sourcesContent":["// Select component styles\n// Core styling for native and custom-looking select dropdowns\n/* stylelint-disable no-descending-specificity */\n\n@use '_select-mixin' as select;\n\n.ivds-select-wrapper {\n  @include select.select-wrapper;\n}\n\n.ivds-select {\n  @include select.select-base;\n  \n  // Sizes\n  &--small {\n    padding-top: var(--spacing-2, 0.5rem);\n    padding-bottom: var(--spacing-2, 0.5rem);\n    font-size: var(--fontSize-sm, 0.875rem);\n    border-radius: var(--ivds-radius-s, 0.125rem);\n  }\n  \n  &--large {\n    padding-top: var(--spacing-4, 1rem);\n    padding-bottom: var(--spacing-4, 1rem);\n    font-size: var(--fontSize-lg, 1.125rem);\n  }\n  \n  // States\n  &:disabled {\n    @include select.select-disabled;\n  }\n  \n  &--error {\n    @include select.select-error;\n  }\n}\n\n.ivds-select__label {\n  font-size: var(--fontSize-sm, 0.875rem);\n  font-weight: var(--fontWeight-semibold, 600);\n  color: var(--ivds-text-primary, #121a24);\n}\n\n.ivds-select__helper {\n  font-size: var(--fontSize-xs, 0.75rem);\n  color: var(--ivds-text-muted, #4d5968);\n}\n","// Select component styles\n// Core styling for native and custom-looking select dropdowns\n/* stylelint-disable no-descending-specificity */\n\n@use '_select-mixin' as select;\n\n.ivds-select-wrapper {\n  @include select.select-wrapper;\n}\n\n.ivds-select {\n  @include select.select-base;\n  \n  // Sizes\n  &--small {\n    padding-top: var(--spacing-2, 0.5rem);\n    padding-bottom: var(--spacing-2, 0.5rem);\n    font-size: var(--fontSize-sm, 0.875rem);\n    border-radius: var(--ivds-radius-s, 0.125rem);\n  }\n  \n  &--large {\n    padding-top: var(--spacing-4, 1rem);\n    padding-bottom: var(--spacing-4, 1rem);\n    font-size: var(--fontSize-lg, 1.125rem);\n  }\n  \n  // States\n  &:disabled {\n    @include select.select-disabled;\n  }\n  \n  &--error {\n    @include select.select-error;\n  }\n}\n\n.ivds-select__label {\n  font-size: var(--fontSize-sm, 0.875rem);\n  font-weight: var(--fontWeight-semibold, 600);\n  color: var(--ivds-text-primary, #121a24);\n}\n\n.ivds-select__helper {\n  font-size: var(--fontSize-xs, 0.75rem);\n  color: var(--ivds-text-muted, #4d5968);\n}\n","// Select component mixins and private styles\n/* stylelint-disable no-descending-specificity */\n\n@use '../../base/focus' as *;\n\n@mixin select-base {\n  // Per-component CSS variable API\n  --background-color: var(--ivds-surface-base, #fff);\n  --border-color: var(--ivds-border-strong, #a1adba);\n  --border-radius: var(--ivds-radius-s, 0.125rem);\n  --color: var(--ivds-text-primary, #121a24);\n  --focus-border-color: var(--color-brand-accent-600, #1058b8);\n  --min-height: 48px;\n\n  display: block;\n  width: 100%;\n  min-height: var(--min-height);\n  appearance: none;\n  cursor: pointer;\n  border: 2px solid var(--border-color);\n  border-radius: var(--border-radius);\n  background-color: var(--background-color);\n  color: var(--color);\n  font-family: var(--fontFamily-primary, system-ui, sans-serif);\n  font-size: var(--fontSize-base, 1rem);\n  line-height: var(--lineHeight-normal, 1.5);\n  padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);\n  padding-right: var(--spacing-10, 2.5rem);\n  transition:\n    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    box-shadow var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234d5968' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right var(--spacing-3, 0.75rem) center;\n  background-size: 1rem;\n\n  &:hover:not(:disabled, :focus) {\n    border-color: var(--color-semantic-neutral-600, #4d5968);\n  }\n\n  &:focus {\n    outline: none;\n    border-color: var(--focus-border-color);\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230050c8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");\n  }\n\n  @include focus-ring;\n}\n\n@mixin select-wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-2, 0.5rem);\n}\n\n@mixin select-disabled {\n  cursor: not-allowed;\n  opacity: 0.74;\n  color: var(--ivds-text-muted, #4d5968);\n  border-color: var(--ivds-border-subtle, #e2e7ec);\n  background-color: var(--ivds-surface-muted, #f1f3f5);\n}\n\n@mixin select-error {\n  border-color: var(--color-semantic-error-500, #d73a50);\n\n  &:focus {\n    border-color: var(--color-semantic-error-500, #d73a50);\n  }\n\n  &:focus-visible {\n    outline-color: var(--color-semantic-error-500, #d73a50);\n  }\n}\n","// Unified focus ring mixin\n// Uses outline instead of box-shadow to avoid conflicts with elevated components (Card, Modal).\n// Inspired by Helsinki Design System: 3px solid outline with 2px offset.\n\n@mixin focus-ring($offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {\n  &:focus-visible {\n    outline: #{$width} solid #{$color};\n    outline-offset: #{$offset};\n    box-shadow: none;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n    box-shadow: none;\n  }\n}\n\n// Variant for components where the focus indicator is on a sibling element\n// (e.g., checkbox input:focus-visible + .checkbox__box)\n@mixin focus-ring-on-sibling($selector, $offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {\n  &:focus-visible + #{$selector} {\n    outline: #{$width} solid #{$color};\n    outline-offset: #{$offset};\n    box-shadow: none;\n  }\n\n  &:focus:not(:focus-visible) + #{$selector} {\n    outline: none;\n    box-shadow: none;\n  }\n}\n"]}

package/lib/components/switch/_switch-mixin.scss

@@ -0,0 +1,71 @@
+// Switch (Toggle) component mixins and private styles
+/* stylelint-disable no-descending-specificity */
+
+@mixin switch-base {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-3, 0.75rem);
+  min-height: 48px;
+  cursor: pointer;
+  user-select: none;
+  font-family: var(--fontFamily-primary, system-ui, sans-serif);
+}
+
+@mixin switch-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+@mixin switch-track($width: 46px, $height: 26px) {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: $width;
+  height: $height;
+  padding: 2px;
+  border: 2px solid var(--ivds-border-strong, #a1adba);
+  border-radius: var(--borderRadius-full, 9999px);
+  background-color: var(--ivds-surface-muted, #f1f3f5);
+  transition:
+    background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),
+    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),
+    box-shadow var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+
+  &::after {
+    content: '';
+    width: calc($height - 6px);
+    height: calc($height - 6px);
+    border-radius: var(--borderRadius-full, 9999px);
+    background-color: #fff;
+    box-shadow: var(--ivds-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));
+    transition: transform var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+  }
+}
+
+@mixin switch-checked($bg-color: var(--color-brand-accent-600, #1058b8)) {
+  background-color: $bg-color;
+  border-color: $bg-color;
+
+  &::after {
+    transform: translateX(20px);
+  }
+}
+
+@mixin switch-focus {
+  outline: var(--ivds-focus-ring-width, 3px) solid var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8));
+  outline-offset: var(--ivds-focus-ring-offset, 2px);
+  box-shadow: none;
+}
+
+@mixin switch-disabled {
+  opacity: 0.62;
+  cursor: not-allowed;
+
+  .ivds-switch__track {
+    border-color: var(--ivds-border-subtle, #e2e7ec);
+    background-color: var(--ivds-surface-muted, #f1f3f5);
+  }
+}

package/lib/components/switch/switch.css

@@ -0,0 +1,117 @@
+/* stylelint-disable no-descending-specificity */
+/* stylelint-disable no-descending-specificity */
+.ivds-switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-3, 0.75rem);
+  min-height: 48px;
+  cursor: pointer;
+  -webkit-user-select: none;
+             -moz-user-select: none;
+          user-select: none;
+  font-family: var(--fontFamily-primary, system-ui, sans-serif);
+}
+.ivds-switch__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.ivds-switch__input:checked + .ivds-switch__track {
+  background-color: var(--color-brand-accent-600, #1058b8);
+  border-color: var(--color-brand-accent-600, #1058b8);
+}
+.ivds-switch__input:checked + .ivds-switch__track::after {
+  transform: translateX(20px);
+}
+.ivds-switch__input:focus-visible + .ivds-switch__track {
+  outline: var(--ivds-focus-ring-width, 3px) solid var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8));
+  outline-offset: var(--ivds-focus-ring-offset, 2px);
+  box-shadow: none;
+}
+.ivds-switch__input:disabled + .ivds-switch__track {
+  cursor: not-allowed;
+}
+.ivds-switch__track {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 46px;
+  height: 26px;
+  padding: 2px;
+  border: 2px solid var(--ivds-border-strong, #a1adba);
+  border-radius: var(--borderRadius-full, 9999px);
+  background-color: var(--ivds-surface-muted, #f1f3f5);
+  transition: background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease), border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease), box-shadow var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+}
+.ivds-switch__track::after {
+  content: "";
+  width: 20px;
+  height: 20px;
+  border-radius: var(--borderRadius-full, 9999px);
+  background-color: #fff;
+  box-shadow: var(--ivds-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));
+  transition: transform var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+}
+.ivds-switch__label {
+  font-size: var(--fontSize-base, 1rem);
+  font-weight: var(--fontWeight-medium, 500);
+  color: var(--ivds-text-secondary, #36414f);
+}
+.ivds-switch--small .ivds-switch__track {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 36px;
+  height: 20px;
+  padding: 2px;
+  border: 2px solid var(--ivds-border-strong, #a1adba);
+  border-radius: var(--borderRadius-full, 9999px);
+  background-color: var(--ivds-surface-muted, #f1f3f5);
+  transition: background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease), border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease), box-shadow var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+}
+.ivds-switch--small .ivds-switch__track::after {
+  content: "";
+  width: 14px;
+  height: 14px;
+  border-radius: var(--borderRadius-full, 9999px);
+  background-color: #fff;
+  box-shadow: var(--ivds-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));
+  transition: transform var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+}
+.ivds-switch--small .ivds-switch__input:checked + .ivds-switch__track::after {
+  transform: translateX(16px);
+}
+.ivds-switch--large .ivds-switch__track {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 52px;
+  height: 28px;
+  padding: 2px;
+  border: 2px solid var(--ivds-border-strong, #a1adba);
+  border-radius: var(--borderRadius-full, 9999px);
+  background-color: var(--ivds-surface-muted, #f1f3f5);
+  transition: background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease), border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease), box-shadow var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+}
+.ivds-switch--large .ivds-switch__track::after {
+  content: "";
+  width: 22px;
+  height: 22px;
+  border-radius: var(--borderRadius-full, 9999px);
+  background-color: #fff;
+  box-shadow: var(--ivds-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));
+  transition: transform var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+}
+.ivds-switch--large .ivds-switch__input:checked + .ivds-switch__track::after {
+  transform: translateX(24px);
+}
+.ivds-switch--disabled {
+  opacity: 0.62;
+  cursor: not-allowed;
+}
+.ivds-switch--disabled .ivds-switch__track {
+  border-color: var(--ivds-border-subtle, #e2e7ec);
+  background-color: var(--ivds-surface-muted, #f1f3f5);
+}

package/lib/components/switch/switch.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/switch/switch.scss%23sass","../../../src/components/switch/_switch-mixin.scss","../../../src/components/switch/switch.scss"],"names":[],"mappings":"AAEA,gDAAA;ACDA,gDAAA;ADKA;ECFE,kBAAA;ECAF,oBAAA;EDEE,mBAAA;ECAF,8BAAA;EDEE,gBAAA;EACA,eAAA;EACA,yBAAA;aAAA,sBAAA;UAAA,iBAAA;EACA,6DAAA;ACAF;AFDE;ECKA,kBAAA;EACA,UAAA;EACA,QAAA;EACA,SAAA;ACDF;AFJI;ECmCF,wDAAA;EACA,oDAF+B;AC1BjC;AD8BE;EACE,2BAAA;AC5BJ;AFPI;ECwCF,qHAAA;EACA,kDAAA;EACA,gBAAA;AC9BF;AFRI;EACE,mBAAA;AEUN;AFNE;ECJA,kBAAA;EACA,oBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,oDAAA;EACA,+CAAA;EACA,oDAAA;EACA,6OACE;ACYJ;ADRE;EACE,WAAA;EACA,WAAA;EACA,YAAA;EACA,+CAAA;EACA,sBAAA;EACA,mEAAA;EACA,kFAAA;ACUJ;AFvBE;EACE,qCAAA;EACA,0CAAA;EACA,0CAAA;AEyBJ;AFpBI;EChBF,kBAAA;ECuCF,oBAAA;EDrCE,mBAAA;EACA,WDc6B;ECb7B,YDamC;ECZnC,YAAA;EACA,oDAAA;EACA,+CAAA;EACA,oDAAA;EACA,6OACE;ACsCJ;ADlCE;EACE,WAAA;EACA,WAAA;EACA,YAAA;EACA,+CAAA;EACA,sBAAA;EACA,mEAAA;EACA,kFAAA;ACoCJ;AFrCI;EACE,2BAAA;AEuCN;AFlCI;EC1BF,kBAAA;EACA,oBAAA;EACA,mBAAA;EACA,WDwB6B;ECvB7B,YDuBmC;ECtBnC,YAAA;EACA,oDAAA;EACA,+CAAA;EACA,oDAAA;EACA,6OACE;AC8DJ;AD1DE;EACE,WAAA;EACA,WAAA;EACA,YAAA;EACA,+CAAA;EACA,sBAAA;EACA,mEAAA;EACA,kFAAA;AC4DJ;AFnDI;EACE,2BAAA;AEqDN;AFhDE;ECKA,aAAA;EACA,mBAAA;AC8CF;AD5CE;EACE,gDAAA;EACA,oDAAA;AC8CJ","file":"switch.css","sourcesContent":["// Switch (Toggle) component styles\n// Premium toggle switches for binary choices and settings\n/* stylelint-disable no-descending-specificity */\n\n@use '_switch-mixin' as sw;\n\n.ivds-switch {\n  @include sw.switch-base;\n  \n  // Elements\n  &__input {\n    @include sw.switch-input;\n    \n    &:checked + .ivds-switch__track {\n      @include sw.switch-checked;\n    }\n    \n    &:focus-visible + .ivds-switch__track {\n      @include sw.switch-focus;\n    }\n    \n    &:disabled + .ivds-switch__track {\n      cursor: not-allowed;\n    }\n  }\n  \n  &__track {\n    @include sw.switch-track;\n  }\n  \n  &__label {\n    font-size: var(--fontSize-base, 1rem);\n    font-weight: var(--fontWeight-medium, 500);\n    color: var(--ivds-text-secondary, #36414f);\n  }\n  \n  // Sizes\n  &--small {\n    .ivds-switch__track {\n      @include sw.switch-track(36px, 20px);\n    }\n    \n    .ivds-switch__input:checked + .ivds-switch__track::after {\n      transform: translateX(16px);\n    }\n  }\n  \n  &--large {\n    .ivds-switch__track {\n      @include sw.switch-track(52px, 28px);\n    }\n    \n    .ivds-switch__input:checked + .ivds-switch__track::after {\n      transform: translateX(24px);\n    }\n  }\n  \n  // States\n  &--disabled {\n    @include sw.switch-disabled;\n  }\n}\n","// Switch (Toggle) component mixins and private styles\n/* stylelint-disable no-descending-specificity */\n\n@mixin switch-base {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-3, 0.75rem);\n  min-height: 48px;\n  cursor: pointer;\n  user-select: none;\n  font-family: var(--fontFamily-primary, system-ui, sans-serif);\n}\n\n@mixin switch-input {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n@mixin switch-track($width: 46px, $height: 26px) {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  width: $width;\n  height: $height;\n  padding: 2px;\n  border: 2px solid var(--ivds-border-strong, #a1adba);\n  border-radius: var(--borderRadius-full, 9999px);\n  background-color: var(--ivds-surface-muted, #f1f3f5);\n  transition:\n    background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    box-shadow var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n  &::after {\n    content: '';\n    width: calc($height - 6px);\n    height: calc($height - 6px);\n    border-radius: var(--borderRadius-full, 9999px);\n    background-color: #fff;\n    box-shadow: var(--ivds-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));\n    transition: transform var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n  }\n}\n\n@mixin switch-checked($bg-color: var(--color-brand-accent-600, #1058b8)) {\n  background-color: $bg-color;\n  border-color: $bg-color;\n\n  &::after {\n    transform: translateX(20px);\n  }\n}\n\n@mixin switch-focus {\n  outline: var(--ivds-focus-ring-width, 3px) solid var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8));\n  outline-offset: var(--ivds-focus-ring-offset, 2px);\n  box-shadow: none;\n}\n\n@mixin switch-disabled {\n  opacity: 0.62;\n  cursor: not-allowed;\n\n  .ivds-switch__track {\n    border-color: var(--ivds-border-subtle, #e2e7ec);\n    background-color: var(--ivds-surface-muted, #f1f3f5);\n  }\n}\n","// Switch (Toggle) component styles\n// Premium toggle switches for binary choices and settings\n/* stylelint-disable no-descending-specificity */\n\n@use '_switch-mixin' as sw;\n\n.ivds-switch {\n  @include sw.switch-base;\n  \n  // Elements\n  &__input {\n    @include sw.switch-input;\n    \n    &:checked + .ivds-switch__track {\n      @include sw.switch-checked;\n    }\n    \n    &:focus-visible + .ivds-switch__track {\n      @include sw.switch-focus;\n    }\n    \n    &:disabled + .ivds-switch__track {\n      cursor: not-allowed;\n    }\n  }\n  \n  &__track {\n    @include sw.switch-track;\n  }\n  \n  &__label {\n    font-size: var(--fontSize-base, 1rem);\n    font-weight: var(--fontWeight-medium, 500);\n    color: var(--ivds-text-secondary, #36414f);\n  }\n  \n  // Sizes\n  &--small {\n    .ivds-switch__track {\n      @include sw.switch-track(36px, 20px);\n    }\n    \n    .ivds-switch__input:checked + .ivds-switch__track::after {\n      transform: translateX(16px);\n    }\n  }\n  \n  &--large {\n    .ivds-switch__track {\n      @include sw.switch-track(52px, 28px);\n    }\n    \n    .ivds-switch__input:checked + .ivds-switch__track::after {\n      transform: translateX(24px);\n    }\n  }\n  \n  // States\n  &--disabled {\n    @include sw.switch-disabled;\n  }\n}\n"]}

package/lib/components/switch/switch.min.css

@@ -0,0 +1 @@
+.ivds-switch{align-items:center;cursor:pointer;display:inline-flex;font-family:var(--fontFamily-primary,system-ui,sans-serif);gap:var(--spacing-3,.75rem);min-height:48px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ivds-switch__input{height:0;opacity:0;position:absolute;width:0}.ivds-switch__input:checked+.ivds-switch__track{background-color:var(--color-brand-accent-600,#1058b8);border-color:var(--color-brand-accent-600,#1058b8)}.ivds-switch__input:checked+.ivds-switch__track:after{transform:translateX(20px)}.ivds-switch__input:focus-visible+.ivds-switch__track{box-shadow:none;outline:var(--ivds-focus-ring-width,3px) solid var(--ivds-focus-ring-color,var(--color-brand-accent-600,#1058b8));outline-offset:var(--ivds-focus-ring-offset,2px)}.ivds-switch__input:disabled+.ivds-switch__track{cursor:not-allowed}.ivds-switch__track{align-items:center;background-color:var(--ivds-surface-muted,#f1f3f5);border:2px solid var(--ivds-border-strong,#a1adba);border-radius:var(--borderRadius-full,9999px);display:inline-flex;height:26px;padding:2px;position:relative;transition:background-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),border-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),box-shadow var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease);width:46px}.ivds-switch__track:after{background-color:#fff;border-radius:var(--borderRadius-full,9999px);box-shadow:var(--ivds-shadow-sm,0 1px 2px rgba(15,23,42,.08));content:"";height:20px;transition:transform var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease);width:20px}.ivds-switch__label{color:var(--ivds-text-secondary,#36414f);font-size:var(--fontSize-base,1rem);font-weight:var(--fontWeight-medium,500)}.ivds-switch--small .ivds-switch__track{align-items:center;background-color:var(--ivds-surface-muted,#f1f3f5);border:2px solid var(--ivds-border-strong,#a1adba);border-radius:var(--borderRadius-full,9999px);display:inline-flex;height:20px;padding:2px;position:relative;transition:background-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),border-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),box-shadow var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease);width:36px}.ivds-switch--small .ivds-switch__track:after{background-color:#fff;border-radius:var(--borderRadius-full,9999px);box-shadow:var(--ivds-shadow-sm,0 1px 2px rgba(15,23,42,.08));content:"";height:14px;transition:transform var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease);width:14px}.ivds-switch--small .ivds-switch__input:checked+.ivds-switch__track:after{transform:translateX(16px)}.ivds-switch--large .ivds-switch__track{align-items:center;background-color:var(--ivds-surface-muted,#f1f3f5);border:2px solid var(--ivds-border-strong,#a1adba);border-radius:var(--borderRadius-full,9999px);display:inline-flex;height:28px;padding:2px;position:relative;transition:background-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),border-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),box-shadow var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease);width:52px}.ivds-switch--large .ivds-switch__track:after{background-color:#fff;border-radius:var(--borderRadius-full,9999px);box-shadow:var(--ivds-shadow-sm,0 1px 2px rgba(15,23,42,.08));content:"";height:22px;transition:transform var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease);width:22px}.ivds-switch--large .ivds-switch__input:checked+.ivds-switch__track:after{transform:translateX(24px)}.ivds-switch--disabled{cursor:not-allowed;opacity:.62}.ivds-switch--disabled .ivds-switch__track{background-color:var(--ivds-surface-muted,#f1f3f5);border-color:var(--ivds-border-subtle,#e2e7ec)}

package/lib/components/switch/switch.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/switch/switch.scss%23sass","../../../src/components/switch/_switch-mixin.scss","../../../src/components/switch/switch.scss"],"names":[],"mappings":"AAMA,aCAE,kBAAA,CAGA,cAAA,CCLF,mBAAA,CDOE,0DAAA,CCLF,2BAAA,CDEE,eAAA,CAJA,iBAAA,CAMA,wBAAA,CAAA,qBAAA,CAAA,gBCCF,CFDE,oBCQA,QAAA,CAFA,SAAA,CADA,iBAAA,CAEA,OCAF,CFJI,gDCmCF,sDAAA,CACA,kDC5BF,CD8BE,sDACE,0BC5BJ,CFPI,sDC0CF,eAAA,CAFA,iHAAA,CACA,gDC7BF,CFRI,iDACE,kBEUN,CFNE,oBCFA,kBAAA,CAMA,kDAAA,CAFA,kDAAA,CACA,6CAAA,CANA,mBAAA,CAGA,WAAA,CACA,WAAA,CALA,iBAAA,CASA,iOACE,CAPF,UCmBF,CDRE,0BAKE,qBAAA,CADA,6CAAA,CAEA,6DAAA,CALA,UAAA,CAEA,WAAA,CAIA,8EAAA,CALA,UCeJ,CFvBE,oBAGE,wCAAA,CAFA,mCAAA,CACA,wCE0BJ,CFpBI,wCCdF,kBAAA,CAMA,kDAAA,CAFA,kDAAA,CACA,6CAAA,CCgCF,mBAAA,CDnCE,WDamC,CCZnC,WAAA,CALA,iBAAA,CASA,iOACE,CAPF,UC6CF,CDlCE,8CAKE,qBAAA,CADA,6CAAA,CAEA,6DAAA,CALA,UAAA,CAEA,WAAA,CAIA,8EAAA,CALA,UCyCJ,CFrCI,0EACE,0BEuCN,CFlCI,wCCxBF,kBAAA,CAMA,kDAAA,CAFA,kDAAA,CACA,6CAAA,CANA,mBAAA,CAGA,WDuBmC,CCtBnC,WAAA,CALA,iBAAA,CASA,iOACE,CAPF,UCqEF,CD1DE,8CAKE,qBAAA,CADA,6CAAA,CAEA,6DAAA,CALA,UAAA,CAEA,WAAA,CAIA,8EAAA,CALA,UCiEJ,CFnDI,0EACE,0BEqDN,CFhDE,uBCMA,kBAAA,CADA,WC+CF,CD5CE,2CAEE,kDAAA,CADA,8CC+CJ","file":"switch.min.css","sourcesContent":["// Switch (Toggle) component styles\n// Premium toggle switches for binary choices and settings\n/* stylelint-disable no-descending-specificity */\n\n@use '_switch-mixin' as sw;\n\n.ivds-switch {\n  @include sw.switch-base;\n  \n  // Elements\n  &__input {\n    @include sw.switch-input;\n    \n    &:checked + .ivds-switch__track {\n      @include sw.switch-checked;\n    }\n    \n    &:focus-visible + .ivds-switch__track {\n      @include sw.switch-focus;\n    }\n    \n    &:disabled + .ivds-switch__track {\n      cursor: not-allowed;\n    }\n  }\n  \n  &__track {\n    @include sw.switch-track;\n  }\n  \n  &__label {\n    font-size: var(--fontSize-base, 1rem);\n    font-weight: var(--fontWeight-medium, 500);\n    color: var(--ivds-text-secondary, #36414f);\n  }\n  \n  // Sizes\n  &--small {\n    .ivds-switch__track {\n      @include sw.switch-track(36px, 20px);\n    }\n    \n    .ivds-switch__input:checked + .ivds-switch__track::after {\n      transform: translateX(16px);\n    }\n  }\n  \n  &--large {\n    .ivds-switch__track {\n      @include sw.switch-track(52px, 28px);\n    }\n    \n    .ivds-switch__input:checked + .ivds-switch__track::after {\n      transform: translateX(24px);\n    }\n  }\n  \n  // States\n  &--disabled {\n    @include sw.switch-disabled;\n  }\n}\n","// Switch (Toggle) component mixins and private styles\n/* stylelint-disable no-descending-specificity */\n\n@mixin switch-base {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-3, 0.75rem);\n  min-height: 48px;\n  cursor: pointer;\n  user-select: none;\n  font-family: var(--fontFamily-primary, system-ui, sans-serif);\n}\n\n@mixin switch-input {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n@mixin switch-track($width: 46px, $height: 26px) {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  width: $width;\n  height: $height;\n  padding: 2px;\n  border: 2px solid var(--ivds-border-strong, #a1adba);\n  border-radius: var(--borderRadius-full, 9999px);\n  background-color: var(--ivds-surface-muted, #f1f3f5);\n  transition:\n    background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    box-shadow var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n  &::after {\n    content: '';\n    width: calc($height - 6px);\n    height: calc($height - 6px);\n    border-radius: var(--borderRadius-full, 9999px);\n    background-color: #fff;\n    box-shadow: var(--ivds-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));\n    transition: transform var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n  }\n}\n\n@mixin switch-checked($bg-color: var(--color-brand-accent-600, #1058b8)) {\n  background-color: $bg-color;\n  border-color: $bg-color;\n\n  &::after {\n    transform: translateX(20px);\n  }\n}\n\n@mixin switch-focus {\n  outline: var(--ivds-focus-ring-width, 3px) solid var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8));\n  outline-offset: var(--ivds-focus-ring-offset, 2px);\n  box-shadow: none;\n}\n\n@mixin switch-disabled {\n  opacity: 0.62;\n  cursor: not-allowed;\n\n  .ivds-switch__track {\n    border-color: var(--ivds-border-subtle, #e2e7ec);\n    background-color: var(--ivds-surface-muted, #f1f3f5);\n  }\n}\n","// Switch (Toggle) component styles\n// Premium toggle switches for binary choices and settings\n/* stylelint-disable no-descending-specificity */\n\n@use '_switch-mixin' as sw;\n\n.ivds-switch {\n  @include sw.switch-base;\n  \n  // Elements\n  &__input {\n    @include sw.switch-input;\n    \n    &:checked + .ivds-switch__track {\n      @include sw.switch-checked;\n    }\n    \n    &:focus-visible + .ivds-switch__track {\n      @include sw.switch-focus;\n    }\n    \n    &:disabled + .ivds-switch__track {\n      cursor: not-allowed;\n    }\n  }\n  \n  &__track {\n    @include sw.switch-track;\n  }\n  \n  &__label {\n    font-size: var(--fontSize-base, 1rem);\n    font-weight: var(--fontWeight-medium, 500);\n    color: var(--ivds-text-secondary, #36414f);\n  }\n  \n  // Sizes\n  &--small {\n    .ivds-switch__track {\n      @include sw.switch-track(36px, 20px);\n    }\n    \n    .ivds-switch__input:checked + .ivds-switch__track::after {\n      transform: translateX(16px);\n    }\n  }\n  \n  &--large {\n    .ivds-switch__track {\n      @include sw.switch-track(52px, 28px);\n    }\n    \n    .ivds-switch__input:checked + .ivds-switch__track::after {\n      transform: translateX(24px);\n    }\n  }\n  \n  // States\n  &--disabled {\n    @include sw.switch-disabled;\n  }\n}\n"]}

package/lib/components/tabs/_tabs-mixin.scss

@@ -0,0 +1,55 @@
+// Tabs component mixins and private styles
+
+@use '../../base/focus' as *;
+
+@mixin tabs-list {
+  // Per-component CSS variable API
+  --border-color: var(--ivds-border-subtle, #e2e7ec);
+  --gap: var(--spacing-6, 1.5rem);
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap);
+  border-bottom: 2px solid var(--border-color);
+}
+
+@mixin tab-trigger {
+  --color: var(--ivds-text-muted, #4d5968);
+  --active-color: var(--color-brand-accent-700, #0b4593);
+  --active-border-color: var(--color-brand-accent-600, #1058b8);
+  --min-height: 48px;
+
+  position: relative;
+  min-height: var(--min-height);
+  padding: var(--spacing-4, 1rem) 0;
+  border: none;
+  border-bottom: 3px solid transparent;
+  background: transparent;
+  color: var(--color);
+  font-family: var(--fontFamily-primary, system-ui, sans-serif);
+  font-size: var(--fontSize-base, 1rem);
+  font-weight: var(--fontWeight-medium, 500);
+  cursor: pointer;
+  transition:
+    color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),
+    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+
+  &:hover {
+    color: var(--ivds-text-primary, #121a24);
+    border-color: var(--ivds-border-strong, #a1adba);
+  }
+
+  @include focus-ring;
+
+  &[data-state='active'],
+  &--active {
+    color: var(--active-color);
+    border-color: var(--active-border-color);
+    font-weight: var(--fontWeight-semibold, 600);
+  }
+}
+
+@mixin tabs-content {
+  color: var(--ivds-text-secondary, #36414f);
+  padding: var(--spacing-6, 1.5rem) 0;
+}

package/lib/components/tabs/tabs.css

@@ -0,0 +1,59 @@
+.ivds-tabs {
+  display: block;
+  width: 100%;
+}
+.ivds-tabs__list {
+  --border-color: var(--ivds-border-subtle, #e2e7ec);
+  --gap: var(--spacing-6, 1.5rem);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap);
+  border-bottom: 2px solid var(--border-color);
+}
+.ivds-tabs__trigger {
+  --color: var(--ivds-text-muted, #4d5968);
+  --active-color: var(--color-brand-accent-700, #0b4593);
+  --active-border-color: var(--color-brand-accent-600, #1058b8);
+  --min-height: 48px;
+  position: relative;
+  min-height: var(--min-height);
+  padding: var(--spacing-4, 1rem) 0;
+  border: none;
+  border-bottom: 3px solid transparent;
+  background: transparent;
+  color: var(--color);
+  font-family: var(--fontFamily-primary, system-ui, sans-serif);
+  font-size: var(--fontSize-base, 1rem);
+  font-weight: var(--fontWeight-medium, 500);
+  cursor: pointer;
+  transition: color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease), border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+}
+.ivds-tabs__trigger:hover {
+  color: var(--ivds-text-primary, #121a24);
+  border-color: var(--ivds-border-strong, #a1adba);
+}
+.ivds-tabs__trigger:focus-visible {
+  outline: var(--ivds-focus-ring-width, 3px) solid var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8));
+  outline-offset: var(--ivds-focus-ring-offset, 2px);
+  box-shadow: none;
+}
+.ivds-tabs__trigger:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+.ivds-tabs__trigger[data-state=active], .ivds-tabs__trigger--active {
+  color: var(--active-color);
+  border-color: var(--active-border-color);
+  font-weight: var(--fontWeight-semibold, 600);
+}
+.ivds-tabs__content {
+  color: var(--ivds-text-secondary, #36414f);
+  padding: var(--spacing-6, 1.5rem) 0;
+}
+.ivds-tabs--full-width .ivds-tabs__list {
+  justify-content: stretch;
+}
+.ivds-tabs--full-width .ivds-tabs__trigger {
+  flex: 1;
+  text-align: center;
+}

package/lib/components/tabs/tabs.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/tabs/tabs.scss%23sass","../../../src/components/tabs/tabs.scss","../../../src/components/tabs/_tabs-mixin.scss","../../../src/base/_focus.scss"],"names":[],"mappings":"AAEA;EACE,cAAA;ECDF,WAAA;AACA;ADGE;EEAA,kDAAA;EACA,+BAAA;EAEA,aAAA;EACA,eAAA;EACA,eAAA;EACA,4CAAA;ADDF;ADDE;EEMA,wCAAA;EACA,sDAAA;EACA,6DAAA;EACA,kBAAA;EAEA,kBAAA;EACA,6BAAA;EACA,iCAAA;EACA,YAAA;EACA,oCAAA;EACA,uBAAA;EACA,mBAAA;EACA,6DAAA;EACA,qCAAA;EDHF,0CAAA;ECKE,eAAA;EACA,yJACE;ADJJ;ACOE;EACE,wCAAA;EACA,gDAAA;ADLJ;AE5BE;EACE,qHAAA;EACA,kDAAA;EACA,gBAAA;AF8BJ;AE3BE;EACE,aAAA;EACA,gBAAA;AF6BJ;ACCE;EAEE,0BAAA;EACA,wCAAA;EACA,4CAAA;ADAJ;ADjCE;EEsCA,0CAAA;EACA,mCAAA;ADFF;ADjCE;EACE,wBAAA;ACmCJ;ADhCE;EACE,OAAA;EACA,kBAAA;ACkCJ","file":"tabs.css","sourcesContent":["@use 'tabs-mixin' as tabs;\n\n.ivds-tabs {\n  display: block;\n  width: 100%;\n  \n  &__list {\n    @include tabs.tabs-list;\n  }\n  \n  &__trigger {\n    @include tabs.tab-trigger;\n  }\n  \n  &__content {\n    @include tabs.tabs-content;\n  }\n  \n  &--full-width &__list {\n    justify-content: stretch;\n  }\n  \n  &--full-width &__trigger {\n    flex: 1;\n    text-align: center;\n  }\n}\n","@use 'tabs-mixin' as tabs;\n\n.ivds-tabs {\n  display: block;\n  width: 100%;\n  \n  &__list {\n    @include tabs.tabs-list;\n  }\n  \n  &__trigger {\n    @include tabs.tab-trigger;\n  }\n  \n  &__content {\n    @include tabs.tabs-content;\n  }\n  \n  &--full-width &__list {\n    justify-content: stretch;\n  }\n  \n  &--full-width &__trigger {\n    flex: 1;\n    text-align: center;\n  }\n}\n","// Tabs component mixins and private styles\n\n@use '../../base/focus' as *;\n\n@mixin tabs-list {\n  // Per-component CSS variable API\n  --border-color: var(--ivds-border-subtle, #e2e7ec);\n  --gap: var(--spacing-6, 1.5rem);\n\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--gap);\n  border-bottom: 2px solid var(--border-color);\n}\n\n@mixin tab-trigger {\n  --color: var(--ivds-text-muted, #4d5968);\n  --active-color: var(--color-brand-accent-700, #0b4593);\n  --active-border-color: var(--color-brand-accent-600, #1058b8);\n  --min-height: 48px;\n\n  position: relative;\n  min-height: var(--min-height);\n  padding: var(--spacing-4, 1rem) 0;\n  border: none;\n  border-bottom: 3px solid transparent;\n  background: transparent;\n  color: var(--color);\n  font-family: var(--fontFamily-primary, system-ui, sans-serif);\n  font-size: var(--fontSize-base, 1rem);\n  font-weight: var(--fontWeight-medium, 500);\n  cursor: pointer;\n  transition:\n    color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n  &:hover {\n    color: var(--ivds-text-primary, #121a24);\n    border-color: var(--ivds-border-strong, #a1adba);\n  }\n\n  @include focus-ring;\n\n  &[data-state='active'],\n  &--active {\n    color: var(--active-color);\n    border-color: var(--active-border-color);\n    font-weight: var(--fontWeight-semibold, 600);\n  }\n}\n\n@mixin tabs-content {\n  color: var(--ivds-text-secondary, #36414f);\n  padding: var(--spacing-6, 1.5rem) 0;\n}\n","// Unified focus ring mixin\n// Uses outline instead of box-shadow to avoid conflicts with elevated components (Card, Modal).\n// Inspired by Helsinki Design System: 3px solid outline with 2px offset.\n\n@mixin focus-ring($offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {\n  &:focus-visible {\n    outline: #{$width} solid #{$color};\n    outline-offset: #{$offset};\n    box-shadow: none;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n    box-shadow: none;\n  }\n}\n\n// Variant for components where the focus indicator is on a sibling element\n// (e.g., checkbox input:focus-visible + .checkbox__box)\n@mixin focus-ring-on-sibling($selector, $offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {\n  &:focus-visible + #{$selector} {\n    outline: #{$width} solid #{$color};\n    outline-offset: #{$offset};\n    box-shadow: none;\n  }\n\n  &:focus:not(:focus-visible) + #{$selector} {\n    outline: none;\n    box-shadow: none;\n  }\n}\n"]}

package/lib/components/tabs/tabs.min.css

@@ -0,0 +1 @@
+.ivds-tabs{display:block;width:100%}.ivds-tabs__list{--border-color:var(--ivds-border-subtle,#e2e7ec);--gap:var(--spacing-6,1.5rem);border-bottom:2px solid var(--border-color);display:flex;flex-wrap:wrap;gap:var(--gap)}.ivds-tabs__trigger{--color:var(--ivds-text-muted,#4d5968);--active-color:var(--color-brand-accent-700,#0b4593);--active-border-color:var(--color-brand-accent-600,#1058b8);--min-height:48px;background:transparent;border:none;border-bottom:3px solid transparent;color:var(--color);cursor:pointer;font-family:var(--fontFamily-primary,system-ui,sans-serif);font-size:var(--fontSize-base,1rem);font-weight:var(--fontWeight-medium,500);min-height:var(--min-height);padding:var(--spacing-4,1rem) 0;position:relative;transition:color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),border-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease)}.ivds-tabs__trigger:hover{border-color:var(--ivds-border-strong,#a1adba);color:var(--ivds-text-primary,#121a24)}.ivds-tabs__trigger:focus-visible{box-shadow:none;outline:var(--ivds-focus-ring-width,3px) solid var(--ivds-focus-ring-color,var(--color-brand-accent-600,#1058b8));outline-offset:var(--ivds-focus-ring-offset,2px)}.ivds-tabs__trigger:focus:not(:focus-visible){box-shadow:none;outline:none}.ivds-tabs__trigger--active,.ivds-tabs__trigger[data-state=active]{border-color:var(--active-border-color);color:var(--active-color);font-weight:var(--fontWeight-semibold,600)}.ivds-tabs__content{color:var(--ivds-text-secondary,#36414f);padding:var(--spacing-6,1.5rem) 0}.ivds-tabs--full-width .ivds-tabs__list{justify-content:stretch}.ivds-tabs--full-width .ivds-tabs__trigger{flex:1;text-align:center}

package/lib/components/tabs/tabs.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/tabs/tabs.scss%23sass","../../../src/components/tabs/tabs.scss","../../../src/components/tabs/_tabs-mixin.scss","../../../src/base/_focus.scss"],"names":[],"mappings":"AAEA,WACE,aAAA,CCDF,UACA,CDGE,iBEAA,gDAAA,CACA,6BAAA,CAKA,2CAAA,CAHA,YAAA,CACA,cAAA,CACA,cDAF,CDDE,oBEMA,sCAAA,CACA,oDAAA,CACA,2DAAA,CACA,iBAAA,CAOA,sBAAA,CADA,WAAA,CAAA,mCAAA,CAEA,kBAAA,CAIA,cAAA,CAHA,0DAAA,CACA,mCAAA,CDHF,wCAAA,CCJE,4BAAA,CACA,+BAAA,CAFA,iBAAA,CAWA,iJDHF,CCOE,0BAEE,8CAAA,CADA,sCDJJ,CE5BE,kCAGE,eAAA,CAFA,iHAAA,CACA,gDF+BJ,CE3BE,8CAEE,eAAA,CADA,YF8BJ,CCCE,mEAGE,uCAAA,CADA,yBAAA,CAEA,0CDAJ,CDjCE,oBEsCA,wCAAA,CACA,iCDFF,CDjCE,wCACE,uBCmCJ,CDhCE,2CACE,MAAA,CACA,iBCkCJ","file":"tabs.min.css","sourcesContent":["@use 'tabs-mixin' as tabs;\n\n.ivds-tabs {\n  display: block;\n  width: 100%;\n  \n  &__list {\n    @include tabs.tabs-list;\n  }\n  \n  &__trigger {\n    @include tabs.tab-trigger;\n  }\n  \n  &__content {\n    @include tabs.tabs-content;\n  }\n  \n  &--full-width &__list {\n    justify-content: stretch;\n  }\n  \n  &--full-width &__trigger {\n    flex: 1;\n    text-align: center;\n  }\n}\n","@use 'tabs-mixin' as tabs;\n\n.ivds-tabs {\n  display: block;\n  width: 100%;\n  \n  &__list {\n    @include tabs.tabs-list;\n  }\n  \n  &__trigger {\n    @include tabs.tab-trigger;\n  }\n  \n  &__content {\n    @include tabs.tabs-content;\n  }\n  \n  &--full-width &__list {\n    justify-content: stretch;\n  }\n  \n  &--full-width &__trigger {\n    flex: 1;\n    text-align: center;\n  }\n}\n","// Tabs component mixins and private styles\n\n@use '../../base/focus' as *;\n\n@mixin tabs-list {\n  // Per-component CSS variable API\n  --border-color: var(--ivds-border-subtle, #e2e7ec);\n  --gap: var(--spacing-6, 1.5rem);\n\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--gap);\n  border-bottom: 2px solid var(--border-color);\n}\n\n@mixin tab-trigger {\n  --color: var(--ivds-text-muted, #4d5968);\n  --active-color: var(--color-brand-accent-700, #0b4593);\n  --active-border-color: var(--color-brand-accent-600, #1058b8);\n  --min-height: 48px;\n\n  position: relative;\n  min-height: var(--min-height);\n  padding: var(--spacing-4, 1rem) 0;\n  border: none;\n  border-bottom: 3px solid transparent;\n  background: transparent;\n  color: var(--color);\n  font-family: var(--fontFamily-primary, system-ui, sans-serif);\n  font-size: var(--fontSize-base, 1rem);\n  font-weight: var(--fontWeight-medium, 500);\n  cursor: pointer;\n  transition:\n    color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n  &:hover {\n    color: var(--ivds-text-primary, #121a24);\n    border-color: var(--ivds-border-strong, #a1adba);\n  }\n\n  @include focus-ring;\n\n  &[data-state='active'],\n  &--active {\n    color: var(--active-color);\n    border-color: var(--active-border-color);\n    font-weight: var(--fontWeight-semibold, 600);\n  }\n}\n\n@mixin tabs-content {\n  color: var(--ivds-text-secondary, #36414f);\n  padding: var(--spacing-6, 1.5rem) 0;\n}\n","// Unified focus ring mixin\n// Uses outline instead of box-shadow to avoid conflicts with elevated components (Card, Modal).\n// Inspired by Helsinki Design System: 3px solid outline with 2px offset.\n\n@mixin focus-ring($offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {\n  &:focus-visible {\n    outline: #{$width} solid #{$color};\n    outline-offset: #{$offset};\n    box-shadow: none;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n    box-shadow: none;\n  }\n}\n\n// Variant for components where the focus indicator is on a sibling element\n// (e.g., checkbox input:focus-visible + .checkbox__box)\n@mixin focus-ring-on-sibling($selector, $offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {\n  &:focus-visible + #{$selector} {\n    outline: #{$width} solid #{$color};\n    outline-offset: #{$offset};\n    box-shadow: none;\n  }\n\n  &:focus:not(:focus-visible) + #{$selector} {\n    outline: none;\n    box-shadow: none;\n  }\n}\n"]}

package/lib/components/tag/_tag-mixin.scss

@@ -0,0 +1,163 @@
+// Tag component mixins and private styles
+/* stylelint-disable no-descending-specificity */
+
+@use '../../base/focus' as *;
+
+@mixin tag-base {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  user-select: none;
+  text-decoration: none;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  font-family: var(--fontFamily-primary, system-ui, sans-serif);
+  font-weight: var(--fontWeight-semibold, 600);
+  line-height: var(--lineHeight-tight, 1.25);
+  border: 1px solid transparent;
+  border-radius: var(--ivds-radius-s, 0.125rem);
+  transition:
+    background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),
+    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),
+    color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+
+  @include focus-ring;
+}
+
+@mixin tag-variant($bg-color, $text-color, $border-color: transparent, $hover-bg: null) {
+  background-color: $bg-color;
+  color: $text-color;
+  border-color: $border-color;
+
+  @if $hover-bg {
+    &:hover:not(:disabled) {
+      background-color: $hover-bg;
+    }
+  }
+}
+
+@mixin tag-variant-dot($dot-color) {
+  &::before {
+    content: '';
+    width: 6px;
+    height: 6px;
+    border-radius: var(--borderRadius-full, 9999px);
+    margin-right: var(--spacing-2, 0.5rem);
+    background-color: $dot-color;
+  }
+}
+
+@mixin tag-with-icon($gap: var(--spacing-2, 0.5rem)) {
+  gap: $gap;
+
+  .ivds-tag__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    svg {
+      width: 1em;
+      height: 1em;
+      fill: currentcolor;
+    }
+  }
+}
+
+@mixin tag-size($padding-y, $padding-x, $font-size, $min-height: null) {
+  padding: $padding-y $padding-x;
+  font-size: $font-size;
+
+  @if $min-height {
+    min-height: $min-height;
+  }
+}
+
+@mixin tag-removable($remove-btn-color: currentcolor) {
+  padding-right: var(--spacing-1, 0.25rem);
+
+  .ivds-tag__remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: var(--spacing-2, 0.5rem);
+    padding: 2px;
+    border: none;
+    border-radius: var(--ivds-radius-xs, 0.125rem);
+    background-color: transparent;
+    color: $remove-btn-color;
+    cursor: pointer;
+    transition:
+      background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),
+      color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+
+    &:hover {
+      background-color: rgba(16, 24, 40, 0.08);
+    }
+
+    svg {
+      width: 14px;
+      height: 14px;
+    }
+  }
+}
+
+@mixin tag-pill {
+  border-radius: var(--borderRadius-full, 9999px);
+}
+
+@mixin tag-interactive {
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    border-color: var(--ivds-border-strong, #a1adba);
+  }
+
+  &:active:not(:disabled) {
+    opacity: 0.9;
+  }
+}
+
+@mixin tag-link {
+  @include tag-interactive;
+
+  text-decoration: none;
+}
+
+@mixin tag-outlined($border-color, $text-color, $hover-bg: null) {
+  @include tag-variant(transparent, $text-color, $border-color, $hover-bg);
+}
+
+@mixin tag-solid($bg-color, $text-color, $hover-bg: null) {
+  @include tag-variant($bg-color, $text-color, $bg-color, $hover-bg);
+}
+
+@mixin tag-group($gap: var(--spacing-2, 0.5rem)) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: $gap;
+}
+
+@mixin tag-small {
+  @include tag-size(var(--spacing-1, 0.25rem), var(--spacing-2, 0.5rem), var(--fontSize-xs, 0.75rem), 20px);
+}
+
+@mixin tag-large {
+  @include tag-size(var(--spacing-2, 0.5rem), var(--spacing-4, 1rem), var(--fontSize-base, 1rem), 32px);
+}
+
+@mixin tag-status-new {
+  @include tag-variant-dot(var(--color-semantic-success-500, #16a34a));
+}
+
+@mixin tag-status-updated {
+  @include tag-variant-dot(var(--color-semantic-info-500, #1f84d6));
+}
+
+@mixin tag-disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  pointer-events: none;
+}