@ivds/core 0.1.1 → 1.1.0

package/lib/components/radio-button/radio-button.css

@@ -1,326 +1,97 @@
-@charset "UTF-8";
-/* Radio button component styles*/
-/* Provides styling for the IVDS radio button component with all variants, sizes, and states*/
-/* Radio Button Base*/
+/* stylelint-disable no-descending-specificity */
+/* stylelint-disable no-descending-specificity */
 .ivds-radio-button {
   position: relative;
   display: inline-flex;
-  align-items: flex-start;
+  align-items: center;
+  gap: var(--spacing-3, 0.75rem);
+  min-height: 48px;
   cursor: pointer;
   -webkit-user-select: none;
-     -moz-user-select: none;
+             -moz-user-select: none;
           user-select: none;
+  font-family: var(--fontFamily-primary, system-ui, sans-serif);
 }
 .ivds-radio-button:hover .ivds-radio-button__circle {
-  border-color: var(--color-brand-primary-400, #38bdf8);
-}
-.ivds-radio-button {
-  /* Radio button circle*/
-}
-.ivds-radio-button__circle {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  min-width: 18px;
-  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
-  border-radius: 50%;
-  background-color: var(--color-semantic-neutral-50, #f8fafc);
-  transition: all 0.15s ease-in-out;
-}
-.ivds-radio-button__circle::after {
-  content: "";
-  position: absolute;
-  width: 9px;
-  height: 9px;
-  border-radius: 50%;
-  background-color: transparent;
-  transform: scale(0);
-  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
-}
-.ivds-radio-button {
-  /* Hidden input*/
+  border-color: var(--color-brand-accent-600, #1058b8);
 }
 .ivds-radio-button__input {
   position: absolute;
   opacity: 0;
-  width: 1px;
-  height: 1px;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  overflow: hidden;
-  /* Checked state*/
+  width: 0;
+  height: 0;
 }
 .ivds-radio-button__input:checked + .ivds-radio-button__circle {
-  background-color: var(--color-brand-primary-500, #0ea5e9);
-  border-color: var(--color-brand-primary-500, #0ea5e9);
+  border-color: var(--color-brand-accent-600, #1058b8);
 }
 .ivds-radio-button__input:checked + .ivds-radio-button__circle::after {
-  background-color: var(--color-semantic-neutral-50, #f8fafc);
   transform: scale(1);
 }
-.ivds-radio-button__input {
-  /* Focus state*/
-}
-.ivds-radio-button__input:focus + .ivds-radio-button__circle {
-  outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
-  outline-offset: 2px;
-}
-.ivds-radio-button {
-  /* Radio button label*/
-}
-.ivds-radio-button__label {
-  margin-left: var(--spacing-3, 0.75rem);
-  font-size: var(--fontSize-base, 1rem);
-  color: var(--color-semantic-neutral-900, #0f172a);
-  line-height: var(--lineHeight-normal, 1.5);
-}
-.ivds-radio-button {
-  /* Radio button description*/
-}
-.ivds-radio-button__description {
-  margin-top: var(--spacing-1, 0.25rem);
-  margin-left: calc(18px + var(--spacing-3, 0.75rem));
-  font-size: var(--fontSize-sm, 0.875rem);
-  color: var(--color-semantic-neutral-600, #4b5563);
-  line-height: var(--lineHeight-relaxed, 1.625);
-}
-.ivds-radio-button {
-  /* Disabled state*/
+.ivds-radio-button__input:focus-visible + .ivds-radio-button__circle {
+  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-radio-button--disabled {
+.ivds-radio-button__input:disabled + .ivds-radio-button__circle, .ivds-radio-button__input:disabled ~ .ivds-radio-button__label {
   cursor: not-allowed;
   opacity: 0.6;
 }
-.ivds-radio-button--disabled .ivds-radio-button__circle {
-  background-color: var(--color-semantic-neutral-100, #f1f5f9);
-  border-color: var(--color-semantic-neutral-200, #e2e8f0);
-  cursor: not-allowed;
-}
-.ivds-radio-button--disabled .ivds-radio-button__label {
-  color: var(--color-semantic-neutral-500, #64748b);
-  cursor: not-allowed;
-}
-.ivds-radio-button {
-  /* Error state*/
-}
-.ivds-radio-button--error .ivds-radio-button__circle {
-  border-color: var(--color-semantic-error-500, #ef4444);
-}
-.ivds-radio-button--error:hover .ivds-radio-button__circle {
-  border-color: var(--color-semantic-error-600, #dc2626);
-}
-.ivds-radio-button--error .ivds-radio-button__input:checked + .ivds-radio-button__circle {
-  background-color: var(--color-semantic-error-500, #ef4444);
-  border-color: var(--color-semantic-error-500, #ef4444);
-}
-.ivds-radio-button--error .ivds-radio-button__input:focus + .ivds-radio-button__circle {
-  outline-color: var(--color-semantic-error-500, #ef4444);
-}
-.ivds-radio-button {
-  /* Success state*/
-}
-.ivds-radio-button--success .ivds-radio-button__circle {
-  border-color: var(--color-semantic-success-500, #10b981);
-}
-.ivds-radio-button--success:hover .ivds-radio-button__circle {
-  border-color: var(--color-semantic-success-600, #059669);
-}
-.ivds-radio-button--success .ivds-radio-button__input:checked + .ivds-radio-button__circle {
-  background-color: var(--color-semantic-success-500, #10b981);
-  border-color: var(--color-semantic-success-500, #10b981);
-}
-.ivds-radio-button--success .ivds-radio-button__input:focus + .ivds-radio-button__circle {
-  outline-color: var(--color-semantic-success-500, #10b981);
-}
-/* Radio Button Sizes*/
-.ivds-radio-button--small .ivds-radio-button__circle {
+.ivds-radio-button__circle {
   position: relative;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 14px;
-  height: 14px;
-  min-width: 14px;
-  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
-  border-radius: 50%;
-  background-color: var(--color-semantic-neutral-50, #f8fafc);
-  transition: all 0.15s ease-in-out;
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--ivds-border-strong, #a1adba);
+  border-radius: var(--borderRadius-full, 9999px);
+  background-color: var(--ivds-surface-base, #fff);
+  transition: 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-radio-button--small .ivds-radio-button__circle::after {
+.ivds-radio-button__circle::after {
   content: "";
-  position: absolute;
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background-color: transparent;
+  width: 9.6px;
+  height: 9.6px;
+  border-radius: var(--borderRadius-full, 9999px);
+  background-color: var(--color-brand-accent-600, #1058b8);
   transform: scale(0);
-  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
+  transition: transform var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
 }
-.ivds-radio-button--small .ivds-radio-button__label {
-  margin-left: var(--spacing-2, 0.5rem);
-  font-size: var(--fontSize-sm, 0.875rem);
-  color: var(--color-semantic-neutral-900, #0f172a);
-  line-height: var(--lineHeight-normal, 1.5);
+.ivds-radio-button__label {
+  font-size: var(--fontSize-base, 1rem);
+  font-weight: var(--fontWeight-medium, 500);
+  color: var(--ivds-text-secondary, #36414f);
 }
-.ivds-radio-button--large .ivds-radio-button__circle {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  min-width: 22px;
-  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
-  border-radius: 50%;
-  background-color: var(--color-semantic-neutral-50, #f8fafc);
-  transition: all 0.15s ease-in-out;
+.ivds-radio-button--disabled {
+  opacity: 0.62;
+  cursor: not-allowed;
 }
-.ivds-radio-button--large .ivds-radio-button__circle::after {
-  content: "";
-  position: absolute;
-  width: 11px;
-  height: 11px;
-  border-radius: 50%;
-  background-color: transparent;
-  transform: scale(0);
-  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
+.ivds-radio-button--disabled .ivds-radio-button__circle {
+  border-color: var(--ivds-border-subtle, #e2e7ec);
+  background-color: var(--ivds-surface-muted, #f1f3f5);
 }
-.ivds-radio-button--large .ivds-radio-button__label {
-  margin-left: var(--spacing-4, 1rem);
-  font-size: var(--fontSize-lg, 1.125rem);
-  color: var(--color-semantic-neutral-900, #0f172a);
-  line-height: var(--lineHeight-normal, 1.5);
+.ivds-radio-button--card {
+  padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);
+  border: 1px solid var(--ivds-border-subtle, #e2e7ec);
+  border-radius: var(--ivds-radius-s, 0.125rem);
+  background-color: var(--ivds-surface-base, #fff);
+  transition: border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease), background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
 }
-/* Radio Button Group*/
-.ivds-radio-button-group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-3, 0.75rem);
+.ivds-radio-button--card:hover {
+  border-color: var(--color-brand-accent-600, #1058b8);
+  background-color: var(--color-brand-accent-50, #eef4ff);
 }
-.ivds-radio-button-group--horizontal {
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: var(--spacing-6, 1.5rem);
+.ivds-radio-button--card.ivds-radio-button--checked {
+  border-color: var(--color-brand-accent-600, #1058b8);
+  background-color: var(--color-brand-accent-50, #eef4ff);
 }
-.ivds-radio-button-group--horizontal {
+.ivds-radio-group {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-3, 0.75rem);
 }
-.ivds-radio-button-group--horizontal--horizontal {
+.ivds-radio-group--horizontal {
   flex-direction: row;
   flex-wrap: wrap;
   gap: var(--spacing-6, 1.5rem);
-}
-.ivds-radio-button-group--horizontal {
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: var(--spacing-6, 1.5rem);
-}
-.ivds-radio-button-group {
-  /* Group label*/
-}
-.ivds-radio-button-group__label {
-  display: block;
-  font-size: var(--fontSize-base, 1rem);
-  font-weight: var(--fontWeight-medium, 500);
-  color: var(--color-semantic-neutral-900, #0f172a);
-  margin-bottom: var(--spacing-3, 0.75rem);
-}
-.ivds-radio-button-group__label--required::after {
-  content: " *";
-  color: var(--color-semantic-error-500, #ef4444);
-}
-.ivds-radio-button-group {
-  /* Group description*/
-}
-.ivds-radio-button-group__description {
-  font-size: var(--fontSize-sm, 0.875rem);
-  color: var(--color-semantic-neutral-600, #4b5563);
-  margin-bottom: var(--spacing-3, 0.75rem);
-}
-.ivds-radio-button-group {
-  /* Group error message*/
-}
-.ivds-radio-button-group__error {
-  margin-top: var(--spacing-2, 0.5rem);
-  font-size: var(--fontSize-sm, 0.875rem);
-  color: var(--color-semantic-error-600, #dc2626);
-}
-.ivds-radio-button-group__error::before {
-  content: "⚠ ";
-  margin-right: var(--spacing-1, 0.25rem);
-}
-/* Radio Button Card variant (for more prominent selections)*/
-.ivds-radio-button--card {
-  padding: var(--spacing-4, 1rem);
-  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
-  border-radius: var(--borderRadius-md, 0.375rem);
-  background-color: var(--color-semantic-neutral-50, #f8fafc);
-  transition: all 0.15s ease-in-out;
-}
-.ivds-radio-button--card:hover {
-  border-color: var(--color-brand-primary-300, #7dd3fc);
-  background-color: var(--color-brand-primary-50, #eff6ff);
-}
-.ivds-radio-button__input:checked ~ .ivds-radio-button--card {
-  border-color: var(--color-brand-primary-500, #0ea5e9);
-  background-color: var(--color-brand-primary-50, #eff6ff);
-}
-.ivds-radio-button__input:focus ~ .ivds-radio-button--card {
-  outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
-  outline-offset: 2px;
-}
-/* Legacy support for existing .ivds-radio class*/
-.ivds-radio {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-}
-.ivds-radio__input {
-  position: absolute;
-  opacity: 0;
-  width: 1px;
-  height: 1px;
-}
-.ivds-radio__button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1rem;
-  height: 1rem;
-  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
-  border-radius: 50%;
-  background-color: var(--color-semantic-neutral-25, #fcfcfd);
-  transition: all 0.2s ease-in-out;
-}
-.ivds-radio__label {
-  margin-left: var(--spacing-2, 0.5rem);
-  font-size: var(--fontSize-base, 1rem);
-  color: var(--color-semantic-neutral-900, #0f172a);
-}
-.ivds-radio__input:checked + .ivds-radio__button {
-  border-color: var(--color-brand-primary-500, #0ea5e9);
-}
-.ivds-radio__input:checked + .ivds-radio__button::after {
-  content: "";
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 50%;
-  background-color: var(--color-brand-primary-500, #0ea5e9);
-}
-.ivds-radio__input:focus + .ivds-radio__button {
-  outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
-  outline-offset: 2px;
-}
-.ivds-radio__input:disabled + .ivds-radio__button {
-  background-color: var(--color-semantic-neutral-100, #f1f5f9);
-  border-color: var(--color-semantic-neutral-200, #e2e8f0);
-  cursor: not-allowed;
 }

package/lib/components/radio-button/radio-button.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/radio-button/radio-button.scss%23sass","../../../src/components/radio-button/_radio-button-mixin.scss","../../../src/components/radio-button/radio-button.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;ADEE;EACE,oDAAA;ACAJ;AFJE;ECSA,kBAAA;EACA,UAAA;EACA,QAAA;EACA,SAAA;ACFF;AFPI;ECsCF,oDAAA;AC5BF;AD8BE;EACE,mBAAA;AC5BJ;AFTI;EC0CF,qHAAA;EACA,kDAAA;EACA,gBAAA;AC9BF;AFVI;EAEE,mBAAA;EACA,YAAA;AEWN;AFPE;ECFA,kBAAA;EACA,oBAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YDFqC;ECGrC,oDAAA;EACA,+CAAA;EACA,gDAAA;EACA,8JAAA;ACYF;ADRE;ECUF,WDTI;ECUJ,YAAA;EDRI,aAAA;EACA,+CAAA;EACA,wDAAA;EACA,mBAAA;EACA,kFAAA;ACUJ;AFxBE;EACE,qCAAA;EACA,0CAAA;EE0BJ,0CAAA;AACA;AFtBE;EC0BA,aAAA;EACA,mBAAA;ACDF;ADGE;EACE,gDAAA;EACA,oDAAA;ACDJ;AFzBE;EC+BA,wDAAA;EACA,oDAAA;EACA,6CAAA;EACA,gDAAA;EACA,oKACE;ACJJ;ADOE;EACE,oDAAA;EACA,uDAAA;ACLJ;ADQE;EACE,oDAAA;EACA,uDAAA;ACNJ;AFlCA;EACE,aAAA;EACA,sBAAA;EACA,8BAAA;AEqCF;AFnCE;EACE,mBAAA;EACA,eAAA;EACA,6BAAA;AEqCJ","file":"radio-button.css","sourcesContent":["// Radio button component styles\r\n// Core styling for modern radio buttons, groups, and interactive cards\r\n/* stylelint-disable no-descending-specificity */\r\n\r\n@use '_radio-button-mixin' as radio;\r\n\r\n.ivds-radio-button {\r\n  @include radio.radio-button-base;\r\n  \r\n  // Elements\r\n  &__input {\r\n    @include radio.radio-button-input;\r\n    \r\n    &:checked + .ivds-radio-button__circle {\r\n      @include radio.radio-button-checked;\r\n    }\r\n    \r\n    &:focus-visible + .ivds-radio-button__circle {\r\n      @include radio.radio-button-focus;\r\n    }\r\n    \r\n    &:disabled + .ivds-radio-button__circle,\r\n    &:disabled ~ .ivds-radio-button__label {\r\n      cursor: not-allowed;\r\n      opacity: 0.6;\r\n    }\r\n  }\r\n  \r\n  &__circle {\r\n    @include radio.radio-button-circle(20px);\r\n  }\r\n  \r\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  \r\n  // States\r\n  &--disabled {\r\n    @include radio.radio-button-disabled;\r\n  }\r\n  \r\n  // Variants\r\n  &--card {\r\n    @include radio.radio-button-card;\r\n  }\r\n}\r\n\r\n// Radio Group\r\n.ivds-radio-group {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3, 0.75rem);\r\n  \r\n  &--horizontal {\r\n    flex-direction: row;\r\n    flex-wrap: wrap;\r\n    gap: var(--spacing-6, 1.5rem);\r\n  }\r\n}\n","// Radio button component mixins and private styles\n/* stylelint-disable no-descending-specificity */\n\n@mixin radio-button-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  &:hover .ivds-radio-button__circle {\n    border-color: var(--color-brand-accent-600, #1058b8);\n  }\n}\n\n@mixin radio-button-input {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n@mixin radio-button-circle($size: 20px) {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: $size;\n  height: $size;\n  border: 2px solid var(--ivds-border-strong, #a1adba);\n  border-radius: var(--borderRadius-full, 9999px);\n  background-color: var(--ivds-surface-base, #fff);\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\n  &::after {\n    content: '';\n    width: calc($size * 0.48);\n    height: calc($size * 0.48);\n    border-radius: var(--borderRadius-full, 9999px);\n    background-color: var(--color-brand-accent-600, #1058b8);\n    transform: scale(0);\n    transition: transform var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n  }\n}\n\n@mixin radio-button-checked {\n  border-color: var(--color-brand-accent-600, #1058b8);\n\n  &::after {\n    transform: scale(1);\n  }\n}\n\n@mixin radio-button-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 radio-button-disabled {\n  opacity: 0.62;\n  cursor: not-allowed;\n\n  .ivds-radio-button__circle {\n    border-color: var(--ivds-border-subtle, #e2e7ec);\n    background-color: var(--ivds-surface-muted, #f1f3f5);\n  }\n}\n\n@mixin radio-button-card {\n  padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);\n  border: 1px solid var(--ivds-border-subtle, #e2e7ec);\n  border-radius: var(--ivds-radius-s, 0.125rem);\n  background-color: var(--ivds-surface-base, #fff);\n  transition:\n    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n  &:hover {\n    border-color: var(--color-brand-accent-600, #1058b8);\n    background-color: var(--color-brand-accent-50, #eef4ff);\n  }\n\n  &.ivds-radio-button--checked {\n    border-color: var(--color-brand-accent-600, #1058b8);\n    background-color: var(--color-brand-accent-50, #eef4ff);\n  }\n}\n","// Radio button component styles\r\n// Core styling for modern radio buttons, groups, and interactive cards\r\n/* stylelint-disable no-descending-specificity */\r\n\r\n@use '_radio-button-mixin' as radio;\r\n\r\n.ivds-radio-button {\r\n  @include radio.radio-button-base;\r\n  \r\n  // Elements\r\n  &__input {\r\n    @include radio.radio-button-input;\r\n    \r\n    &:checked + .ivds-radio-button__circle {\r\n      @include radio.radio-button-checked;\r\n    }\r\n    \r\n    &:focus-visible + .ivds-radio-button__circle {\r\n      @include radio.radio-button-focus;\r\n    }\r\n    \r\n    &:disabled + .ivds-radio-button__circle,\r\n    &:disabled ~ .ivds-radio-button__label {\r\n      cursor: not-allowed;\r\n      opacity: 0.6;\r\n    }\r\n  }\r\n  \r\n  &__circle {\r\n    @include radio.radio-button-circle(20px);\r\n  }\r\n  \r\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  \r\n  // States\r\n  &--disabled {\r\n    @include radio.radio-button-disabled;\r\n  }\r\n  \r\n  // Variants\r\n  &--card {\r\n    @include radio.radio-button-card;\r\n  }\r\n}\r\n\r\n// Radio Group\r\n.ivds-radio-group {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3, 0.75rem);\r\n  \r\n  &--horizontal {\r\n    flex-direction: row;\r\n    flex-wrap: wrap;\r\n    gap: var(--spacing-6, 1.5rem);\r\n  }\r\n}\n"]}

package/lib/components/radio-button/radio-button.min.css

@@ -1 +1 @@
-@charset "UTF-8";.ivds-radio-button{align-items:flex-start;cursor:pointer;display:inline-flex;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ivds-radio-button:hover .ivds-radio-button__circle{border-color:var(--color-brand-primary-400,#38bdf8)}.ivds-radio-button__circle{align-items:center;background-color:var(--color-semantic-neutral-50,#f8fafc);border:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-300,#cbd5e1);border-radius:50%;display:flex;height:18px;justify-content:center;min-width:18px;position:relative;transition:all .15s ease-in-out;width:18px}.ivds-radio-button__circle:after{background-color:transparent;border-radius:50%;content:"";height:9px;position:absolute;transform:scale(0);transition:transform .15s ease-in-out,background-color .15s ease-in-out;width:9px}.ivds-radio-button__input{border:0;height:1px;margin:0;opacity:0;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);overflow:hidden}.ivds-radio-button__input:checked+.ivds-radio-button__circle{background-color:var(--color-brand-primary-500,#0ea5e9);border-color:var(--color-brand-primary-500,#0ea5e9)}.ivds-radio-button__input:checked+.ivds-radio-button__circle:after{background-color:var(--color-semantic-neutral-50,#f8fafc);transform:scale(1)}.ivds-radio-button__input:focus+.ivds-radio-button__circle{outline:2px solid var(--color-brand-primary-500,#0ea5e9);outline-offset:2px}.ivds-radio-button__label{color:var(--color-semantic-neutral-900,#0f172a);font-size:var(--fontSize-base,1rem);line-height:var(--lineHeight-normal,1.5);margin-left:var(--spacing-3,.75rem)}.ivds-radio-button__description{color:var(--color-semantic-neutral-600,#4b5563);font-size:var(--fontSize-sm,.875rem);line-height:var(--lineHeight-relaxed,1.625);margin-left:calc(18px + var(--spacing-3, .75rem));margin-top:var(--spacing-1,.25rem)}.ivds-radio-button--disabled{cursor:not-allowed;opacity:.6}.ivds-radio-button--disabled .ivds-radio-button__circle{background-color:var(--color-semantic-neutral-100,#f1f5f9);border-color:var(--color-semantic-neutral-200,#e2e8f0);cursor:not-allowed}.ivds-radio-button--disabled .ivds-radio-button__label{color:var(--color-semantic-neutral-500,#64748b);cursor:not-allowed}.ivds-radio-button--error .ivds-radio-button__circle{border-color:var(--color-semantic-error-500,#ef4444)}.ivds-radio-button--error:hover .ivds-radio-button__circle{border-color:var(--color-semantic-error-600,#dc2626)}.ivds-radio-button--error .ivds-radio-button__input:checked+.ivds-radio-button__circle{background-color:var(--color-semantic-error-500,#ef4444);border-color:var(--color-semantic-error-500,#ef4444)}.ivds-radio-button--error .ivds-radio-button__input:focus+.ivds-radio-button__circle{outline-color:var(--color-semantic-error-500,#ef4444)}.ivds-radio-button--success .ivds-radio-button__circle{border-color:var(--color-semantic-success-500,#10b981)}.ivds-radio-button--success:hover .ivds-radio-button__circle{border-color:var(--color-semantic-success-600,#059669)}.ivds-radio-button--success .ivds-radio-button__input:checked+.ivds-radio-button__circle{background-color:var(--color-semantic-success-500,#10b981);border-color:var(--color-semantic-success-500,#10b981)}.ivds-radio-button--success .ivds-radio-button__input:focus+.ivds-radio-button__circle{outline-color:var(--color-semantic-success-500,#10b981)}.ivds-radio-button--small .ivds-radio-button__circle{align-items:center;background-color:var(--color-semantic-neutral-50,#f8fafc);border:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-300,#cbd5e1);border-radius:50%;display:flex;height:14px;justify-content:center;min-width:14px;position:relative;transition:all .15s ease-in-out;width:14px}.ivds-radio-button--small .ivds-radio-button__circle:after{background-color:transparent;border-radius:50%;content:"";height:7px;position:absolute;transform:scale(0);transition:transform .15s ease-in-out,background-color .15s ease-in-out;width:7px}.ivds-radio-button--small .ivds-radio-button__label{color:var(--color-semantic-neutral-900,#0f172a);font-size:var(--fontSize-sm,.875rem);line-height:var(--lineHeight-normal,1.5);margin-left:var(--spacing-2,.5rem)}.ivds-radio-button--large .ivds-radio-button__circle{align-items:center;background-color:var(--color-semantic-neutral-50,#f8fafc);border:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-300,#cbd5e1);border-radius:50%;display:flex;height:22px;justify-content:center;min-width:22px;position:relative;transition:all .15s ease-in-out;width:22px}.ivds-radio-button--large .ivds-radio-button__circle:after{background-color:transparent;border-radius:50%;content:"";height:11px;position:absolute;transform:scale(0);transition:transform .15s ease-in-out,background-color .15s ease-in-out;width:11px}.ivds-radio-button--large .ivds-radio-button__label{color:var(--color-semantic-neutral-900,#0f172a);font-size:var(--fontSize-lg,1.125rem);line-height:var(--lineHeight-normal,1.5);margin-left:var(--spacing-4,1rem)}.ivds-radio-button-group,.ivds-radio-button-group--horizontal{display:flex;flex-direction:column;gap:var(--spacing-3,.75rem)}.ivds-radio-button-group--horizontal,.ivds-radio-button-group--horizontal--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--spacing-6,1.5rem)}.ivds-radio-button-group__label{color:var(--color-semantic-neutral-900,#0f172a);display:block;font-size:var(--fontSize-base,1rem);font-weight:var(--fontWeight-medium,500);margin-bottom:var(--spacing-3,.75rem)}.ivds-radio-button-group__label--required:after{color:var(--color-semantic-error-500,#ef4444);content:" *"}.ivds-radio-button-group__description{color:var(--color-semantic-neutral-600,#4b5563);font-size:var(--fontSize-sm,.875rem);margin-bottom:var(--spacing-3,.75rem)}.ivds-radio-button-group__error{color:var(--color-semantic-error-600,#dc2626);font-size:var(--fontSize-sm,.875rem);margin-top:var(--spacing-2,.5rem)}.ivds-radio-button-group__error:before{content:"⚠ ";margin-right:var(--spacing-1,.25rem)}.ivds-radio-button--card{background-color:var(--color-semantic-neutral-50,#f8fafc);border:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-200,#e2e8f0);border-radius:var(--borderRadius-md,.375rem);padding:var(--spacing-4,1rem);transition:all .15s ease-in-out}.ivds-radio-button--card:hover{background-color:var(--color-brand-primary-50,#eff6ff);border-color:var(--color-brand-primary-300,#7dd3fc)}.ivds-radio-button__input:checked~.ivds-radio-button--card{background-color:var(--color-brand-primary-50,#eff6ff);border-color:var(--color-brand-primary-500,#0ea5e9)}.ivds-radio-button__input:focus~.ivds-radio-button--card{outline:2px solid var(--color-brand-primary-500,#0ea5e9);outline-offset:2px}.ivds-radio{align-items:center;cursor:pointer;display:inline-flex;position:relative}.ivds-radio__input{height:1px;opacity:0;position:absolute;width:1px}.ivds-radio__button{align-items:center;background-color:var(--color-semantic-neutral-25,#fcfcfd);border:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-300,#cbd5e1);border-radius:50%;display:flex;height:1rem;justify-content:center;transition:all .2s ease-in-out;width:1rem}.ivds-radio__label{color:var(--color-semantic-neutral-900,#0f172a);font-size:var(--fontSize-base,1rem);margin-left:var(--spacing-2,.5rem)}.ivds-radio__input:checked+.ivds-radio__button{border-color:var(--color-brand-primary-500,#0ea5e9)}.ivds-radio__input:checked+.ivds-radio__button:after{background-color:var(--color-brand-primary-500,#0ea5e9);border-radius:50%;content:"";height:.5rem;width:.5rem}.ivds-radio__input:focus+.ivds-radio__button{outline:2px solid var(--color-brand-primary-500,#0ea5e9);outline-offset:2px}.ivds-radio__input:disabled+.ivds-radio__button{background-color:var(--color-semantic-neutral-100,#f1f5f9);border-color:var(--color-semantic-neutral-200,#e2e8f0);cursor:not-allowed}
+.ivds-radio-button{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-radio-button:hover .ivds-radio-button__circle{border-color:var(--color-brand-accent-600,#1058b8)}.ivds-radio-button__input{height:0;opacity:0;position:absolute;width:0}.ivds-radio-button__input:checked+.ivds-radio-button__circle{border-color:var(--color-brand-accent-600,#1058b8)}.ivds-radio-button__input:checked+.ivds-radio-button__circle:after{transform:scale(1)}.ivds-radio-button__input:focus-visible+.ivds-radio-button__circle{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-radio-button__input:disabled+.ivds-radio-button__circle,.ivds-radio-button__input:disabled~.ivds-radio-button__label{cursor:not-allowed;opacity:.6}.ivds-radio-button__circle{align-items:center;background-color:var(--ivds-surface-base,#fff);border:2px solid var(--ivds-border-strong,#a1adba);border-radius:var(--borderRadius-full,9999px);display:inline-flex;height:20px;justify-content:center;position:relative;transition: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:20px}.ivds-radio-button__circle:after{background-color:var(--color-brand-accent-600,#1058b8);border-radius:var(--borderRadius-full,9999px);content:"";height:9.6px;transform:scale(0);transition:transform var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease);width:9.6px}.ivds-radio-button__label{color:var(--ivds-text-secondary,#36414f);font-size:var(--fontSize-base,1rem);font-weight:var(--fontWeight-medium,500)}.ivds-radio-button--disabled{cursor:not-allowed;opacity:.62}.ivds-radio-button--disabled .ivds-radio-button__circle{background-color:var(--ivds-surface-muted,#f1f3f5);border-color:var(--ivds-border-subtle,#e2e7ec)}.ivds-radio-button--card{background-color:var(--ivds-surface-base,#fff);border:1px solid var(--ivds-border-subtle,#e2e7ec);border-radius:var(--ivds-radius-s,.125rem);padding:var(--spacing-4,1rem) var(--spacing-6,1.5rem);transition:border-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),background-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease)}.ivds-radio-button--card.ivds-radio-button--checked,.ivds-radio-button--card:hover{background-color:var(--color-brand-accent-50,#eef4ff);border-color:var(--color-brand-accent-600,#1058b8)}.ivds-radio-group{display:flex;flex-direction:column;gap:var(--spacing-3,.75rem)}.ivds-radio-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--spacing-6,1.5rem)}

package/lib/components/radio-button/radio-button.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/radio-button/radio-button.scss%23sass","../../../src/components/radio-button/_radio-button-mixin.scss","../../../src/components/radio-button/radio-button.scss"],"names":[],"mappings":"AAMA,mBCAE,kBAAA,CAGA,cAAA,CCLF,mBAAA,CDOE,0DAAA,CCLF,2BAAA,CDEE,eAAA,CAJA,iBAAA,CAMA,wBAAA,CAAA,qBAAA,CAAA,gBCCF,CDEE,oDACE,kDCAJ,CFJE,0BCYA,QAAA,CAFA,SAAA,CADA,iBAAA,CAEA,OCDF,CFPI,6DCsCF,kDC5BF,CD8BE,mEACE,kBC5BJ,CFTI,mEC4CF,eAAA,CAFA,iHAAA,CACA,gDC7BF,CFVI,2HAEE,kBAAA,CACA,UEWN,CFPE,2BCAA,kBAAA,CAMA,8CAAA,CAFA,kDAAA,CACA,6CAAA,CANA,mBAAA,CAIA,WDFqC,CCArC,sBAAA,CAHA,iBAAA,CASA,sJAAA,CALA,UCiBF,CDRE,iCAKE,sDAAA,CADA,6CAAA,CCMJ,UDTI,CAEA,YAAA,CAGA,kBAAA,CACA,8EAAA,CCIJ,WAMA,CFxBE,0BE4BF,wCAAA,CF3BI,mCAAA,CACA,wCE2BJ,CFtBE,6BC2BA,kBAAA,CADA,WCAF,CDGE,wDAEE,kDAAA,CADA,8CCAJ,CFzBE,yBCkCA,8CAAA,CAFA,kDAAA,CACA,0CAAA,CAFA,qDAAA,CAIA,4JCHF,CDYE,mFAEE,qDAAA,CADA,kDCLJ,CFlCA,kBACE,YAAA,CACA,qBAAA,CACA,2BEqCF,CFnCE,8BACE,kBAAA,CACA,cAAA,CACA,2BEqCJ","file":"radio-button.min.css","sourcesContent":["// Radio button component styles\r\n// Core styling for modern radio buttons, groups, and interactive cards\r\n/* stylelint-disable no-descending-specificity */\r\n\r\n@use '_radio-button-mixin' as radio;\r\n\r\n.ivds-radio-button {\r\n  @include radio.radio-button-base;\r\n  \r\n  // Elements\r\n  &__input {\r\n    @include radio.radio-button-input;\r\n    \r\n    &:checked + .ivds-radio-button__circle {\r\n      @include radio.radio-button-checked;\r\n    }\r\n    \r\n    &:focus-visible + .ivds-radio-button__circle {\r\n      @include radio.radio-button-focus;\r\n    }\r\n    \r\n    &:disabled + .ivds-radio-button__circle,\r\n    &:disabled ~ .ivds-radio-button__label {\r\n      cursor: not-allowed;\r\n      opacity: 0.6;\r\n    }\r\n  }\r\n  \r\n  &__circle {\r\n    @include radio.radio-button-circle(20px);\r\n  }\r\n  \r\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  \r\n  // States\r\n  &--disabled {\r\n    @include radio.radio-button-disabled;\r\n  }\r\n  \r\n  // Variants\r\n  &--card {\r\n    @include radio.radio-button-card;\r\n  }\r\n}\r\n\r\n// Radio Group\r\n.ivds-radio-group {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3, 0.75rem);\r\n  \r\n  &--horizontal {\r\n    flex-direction: row;\r\n    flex-wrap: wrap;\r\n    gap: var(--spacing-6, 1.5rem);\r\n  }\r\n}\n","// Radio button component mixins and private styles\n/* stylelint-disable no-descending-specificity */\n\n@mixin radio-button-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  &:hover .ivds-radio-button__circle {\n    border-color: var(--color-brand-accent-600, #1058b8);\n  }\n}\n\n@mixin radio-button-input {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n@mixin radio-button-circle($size: 20px) {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: $size;\n  height: $size;\n  border: 2px solid var(--ivds-border-strong, #a1adba);\n  border-radius: var(--borderRadius-full, 9999px);\n  background-color: var(--ivds-surface-base, #fff);\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\n  &::after {\n    content: '';\n    width: calc($size * 0.48);\n    height: calc($size * 0.48);\n    border-radius: var(--borderRadius-full, 9999px);\n    background-color: var(--color-brand-accent-600, #1058b8);\n    transform: scale(0);\n    transition: transform var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n  }\n}\n\n@mixin radio-button-checked {\n  border-color: var(--color-brand-accent-600, #1058b8);\n\n  &::after {\n    transform: scale(1);\n  }\n}\n\n@mixin radio-button-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 radio-button-disabled {\n  opacity: 0.62;\n  cursor: not-allowed;\n\n  .ivds-radio-button__circle {\n    border-color: var(--ivds-border-subtle, #e2e7ec);\n    background-color: var(--ivds-surface-muted, #f1f3f5);\n  }\n}\n\n@mixin radio-button-card {\n  padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);\n  border: 1px solid var(--ivds-border-subtle, #e2e7ec);\n  border-radius: var(--ivds-radius-s, 0.125rem);\n  background-color: var(--ivds-surface-base, #fff);\n  transition:\n    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n  &:hover {\n    border-color: var(--color-brand-accent-600, #1058b8);\n    background-color: var(--color-brand-accent-50, #eef4ff);\n  }\n\n  &.ivds-radio-button--checked {\n    border-color: var(--color-brand-accent-600, #1058b8);\n    background-color: var(--color-brand-accent-50, #eef4ff);\n  }\n}\n","// Radio button component styles\r\n// Core styling for modern radio buttons, groups, and interactive cards\r\n/* stylelint-disable no-descending-specificity */\r\n\r\n@use '_radio-button-mixin' as radio;\r\n\r\n.ivds-radio-button {\r\n  @include radio.radio-button-base;\r\n  \r\n  // Elements\r\n  &__input {\r\n    @include radio.radio-button-input;\r\n    \r\n    &:checked + .ivds-radio-button__circle {\r\n      @include radio.radio-button-checked;\r\n    }\r\n    \r\n    &:focus-visible + .ivds-radio-button__circle {\r\n      @include radio.radio-button-focus;\r\n    }\r\n    \r\n    &:disabled + .ivds-radio-button__circle,\r\n    &:disabled ~ .ivds-radio-button__label {\r\n      cursor: not-allowed;\r\n      opacity: 0.6;\r\n    }\r\n  }\r\n  \r\n  &__circle {\r\n    @include radio.radio-button-circle(20px);\r\n  }\r\n  \r\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  \r\n  // States\r\n  &--disabled {\r\n    @include radio.radio-button-disabled;\r\n  }\r\n  \r\n  // Variants\r\n  &--card {\r\n    @include radio.radio-button-card;\r\n  }\r\n}\r\n\r\n// Radio Group\r\n.ivds-radio-group {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3, 0.75rem);\r\n  \r\n  &--horizontal {\r\n    flex-direction: row;\r\n    flex-wrap: wrap;\r\n    gap: var(--spacing-6, 1.5rem);\r\n  }\r\n}\n"]}

package/lib/components/select/_select-mixin.scss

@@ -0,0 +1,76 @@
+// Select component mixins and private styles
+/* stylelint-disable no-descending-specificity */
+
+@use '../../base/focus' as *;
+
+@mixin select-base {
+  // Per-component CSS variable API
+  --background-color: var(--ivds-surface-base, #fff);
+  --border-color: var(--ivds-border-strong, #a1adba);
+  --border-radius: var(--ivds-radius-s, 0.125rem);
+  --color: var(--ivds-text-primary, #121a24);
+  --focus-border-color: var(--color-brand-accent-600, #1058b8);
+  --min-height: 48px;
+
+  display: block;
+  width: 100%;
+  min-height: var(--min-height);
+  appearance: none;
+  cursor: pointer;
+  border: 2px solid var(--border-color);
+  border-radius: var(--border-radius);
+  background-color: var(--background-color);
+  color: var(--color);
+  font-family: var(--fontFamily-primary, system-ui, sans-serif);
+  font-size: var(--fontSize-base, 1rem);
+  line-height: var(--lineHeight-normal, 1.5);
+  padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
+  padding-right: var(--spacing-10, 2.5rem);
+  transition:
+    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),
+    box-shadow var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),
+    background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+  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");
+  background-repeat: no-repeat;
+  background-position: right var(--spacing-3, 0.75rem) center;
+  background-size: 1rem;
+
+  &:hover:not(:disabled, :focus) {
+    border-color: var(--color-semantic-neutral-600, #4d5968);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--focus-border-color);
+    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");
+  }
+
+  @include focus-ring;
+}
+
+@mixin select-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2, 0.5rem);
+}
+
+@mixin select-disabled {
+  cursor: not-allowed;
+  opacity: 0.74;
+  color: var(--ivds-text-muted, #4d5968);
+  border-color: var(--ivds-border-subtle, #e2e7ec);
+  background-color: var(--ivds-surface-muted, #f1f3f5);
+}
+
+@mixin select-error {
+  border-color: var(--color-semantic-error-500, #d73a50);
+
+  &:focus {
+    border-color: var(--color-semantic-error-500, #d73a50);
+  }
+
+  &:focus-visible {
+    outline-color: var(--color-semantic-error-500, #d73a50);
+  }
+}

package/lib/components/select/select.css

@@ -0,0 +1,90 @@
+/* stylelint-disable no-descending-specificity */
+/* stylelint-disable no-descending-specificity */
+.ivds-select-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2, 0.5rem);
+}
+.ivds-select {
+  --background-color: var(--ivds-surface-base, #fff);
+  --border-color: var(--ivds-border-strong, #a1adba);
+  --border-radius: var(--ivds-radius-s, 0.125rem);
+  --color: var(--ivds-text-primary, #121a24);
+  --focus-border-color: var(--color-brand-accent-600, #1058b8);
+  --min-height: 48px;
+  display: block;
+  width: 100%;
+  min-height: var(--min-height);
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
+  border: 2px solid var(--border-color);
+  border-radius: var(--border-radius);
+  background-color: var(--background-color);
+  color: var(--color);
+  font-family: var(--fontFamily-primary, system-ui, sans-serif);
+  font-size: var(--fontSize-base, 1rem);
+  line-height: var(--lineHeight-normal, 1.5);
+  padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
+  padding-right: var(--spacing-10, 2.5rem);
+  transition: border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease), box-shadow var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease), background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+  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");
+  background-repeat: no-repeat;
+  background-position: right var(--spacing-3, 0.75rem) center;
+  background-size: 1rem;
+}
+.ivds-select:hover:not(:disabled, :focus) {
+  border-color: var(--color-semantic-neutral-600, #4d5968);
+}
+.ivds-select:focus {
+  outline: none;
+  border-color: var(--focus-border-color);
+  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");
+}
+.ivds-select: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-select:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+.ivds-select--small {
+  padding-top: var(--spacing-2, 0.5rem);
+  padding-bottom: var(--spacing-2, 0.5rem);
+  font-size: var(--fontSize-sm, 0.875rem);
+  border-radius: var(--ivds-radius-s, 0.125rem);
+}
+.ivds-select--large {
+  padding-top: var(--spacing-4, 1rem);
+  padding-bottom: var(--spacing-4, 1rem);
+  font-size: var(--fontSize-lg, 1.125rem);
+}
+.ivds-select:disabled {
+  cursor: not-allowed;
+  opacity: 0.74;
+  color: var(--ivds-text-muted, #4d5968);
+  border-color: var(--ivds-border-subtle, #e2e7ec);
+  background-color: var(--ivds-surface-muted, #f1f3f5);
+}
+.ivds-select--error {
+  border-color: var(--color-semantic-error-500, #d73a50);
+}
+.ivds-select--error:focus {
+  border-color: var(--color-semantic-error-500, #d73a50);
+}
+.ivds-select--error:focus-visible {
+  outline-color: var(--color-semantic-error-500, #d73a50);
+}
+.ivds-select__label {
+  font-size: var(--fontSize-sm, 0.875rem);
+  font-weight: var(--fontWeight-semibold, 600);
+  color: var(--ivds-text-primary, #121a24);
+}
+.ivds-select__helper {
+  font-size: var(--fontSize-xs, 0.75rem);
+  color: var(--ivds-text-muted, #4d5968);
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/select/select.scss%23sass","../../../src/components/select/_select-mixin.scss","../../../src/components/select/select.scss","../../../src/base/_focus.scss"],"names":[],"mappings":"AAEA,gDAAA;ACDA,gDAAA;ADKA;EC6CE,kBAAA;EC/CF,aAAA;EDiDE,sBAAA;EC/CF,6BAAA;AACA;AFGA;EEAA,kDAAA;EDFE,kDAAA;EACA,+CAAA;EACA,0CAAA;EACA,4DAAA;EACA,kBAAA;EAEA,cAAA;EACA,WAAA;EACA,6BAAA;EACA,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,eAAA;EACA,qCAAA;EACA,mCAAA;EACA,yCAAA;EACA,mBAAA;EACA,6DAAA;EACA,qCAAA;EACA,0CAAA;EACA,yDAAA;EACA,wCAAA;EACA,6OAAA;EAIA,mSAAA;EACA,4BAAA;EACA,2DAAA;EACA,qBAAA;ACAF;ADEE;ECAF,wDAAA;AACA;ADGE;EACE,aAAA;ECDJ,uCAAA;EDGI,mSAAA;ACDJ;ACtCE;EACE,qHAAA;EDwCJ,kDAAA;ECtCI,gBAAA;ADwCJ;ACrCE;EACE,aAAA;EACA,gBAAA;ADuCJ;AFtCE;EACE,qCAAA;EACA,wCAAA;EACA,uCAAA;EACA,6CAAA;AEwCJ;AFrCE;EACE,mCAAA;EACA,sCAAA;EACA,uCAAA;AEuCJ;AFnCE;EC8BA,mBAAA;EACA,aAAA;EACA,sCAAA;EACA,gDAAA;EACA,oDAAA;ACQF;AFtCE;ECkCA,sDAAA;ACOF;ADLE;EACE,sDAAA;ACOJ;ADJE;EACE,uDAAA;ACMJ;AF1CA;EACE,uCAAA;EACA,4CAAA;EACA,wCAAA;AE6CF;AF1CA;EACE,sCAAA;EACA,sCAAA;AE6CF","file":"select.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 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","// 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","// 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/select/select.min.css

@@ -0,0 +1 @@
+.ivds-select-wrapper{display:flex;flex-direction:column;gap:var(--spacing-2,.5rem);position:relative}.ivds-select{--background-color:var(--ivds-surface-base,#fff);--border-color:var(--ivds-border-strong,#a1adba);--border-radius:var(--ivds-radius-s,0.125rem);--color:var(--ivds-text-primary,#121a24);--focus-border-color:var(--color-brand-accent-600,#1058b8);--min-height:48px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--background-color);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%234d5968' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right var(--spacing-3,.75rem) center;background-repeat:no-repeat;background-size:1rem;border:2px solid var(--border-color);border-radius:var(--border-radius);color:var(--color);cursor:pointer;display:block;font-family:var(--fontFamily-primary,system-ui,sans-serif);font-size:var(--fontSize-base,1rem);line-height:var(--lineHeight-normal,1.5);min-height:var(--min-height);padding:var(--spacing-3,.75rem) var(--spacing-4,1rem);padding-right:var(--spacing-10,2.5rem);transition:border-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),box-shadow var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),background-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease);width:100%}.ivds-select:hover:not(:disabled,:focus){border-color:var(--color-semantic-neutral-600,#4d5968)}.ivds-select:focus{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%230050c8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");border-color:var(--focus-border-color);outline:none}.ivds-select: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-select:focus:not(:focus-visible){box-shadow:none;outline:none}.ivds-select--small{border-radius:var(--ivds-radius-s,.125rem);font-size:var(--fontSize-sm,.875rem);padding-bottom:var(--spacing-2,.5rem);padding-top:var(--spacing-2,.5rem)}.ivds-select--large{font-size:var(--fontSize-lg,1.125rem);padding-bottom:var(--spacing-4,1rem);padding-top:var(--spacing-4,1rem)}.ivds-select:disabled{background-color:var(--ivds-surface-muted,#f1f3f5);border-color:var(--ivds-border-subtle,#e2e7ec);color:var(--ivds-text-muted,#4d5968);cursor:not-allowed;opacity:.74}.ivds-select--error,.ivds-select--error:focus{border-color:var(--color-semantic-error-500,#d73a50)}.ivds-select--error:focus-visible{outline-color:var(--color-semantic-error-500,#d73a50)}.ivds-select__label{color:var(--ivds-text-primary,#121a24);font-size:var(--fontSize-sm,.875rem);font-weight:var(--fontWeight-semibold,600)}.ivds-select__helper{color:var(--ivds-text-muted,#4d5968);font-size:var(--fontSize-xs,.75rem)}