@ivds/core 0.1.1 → 1.1.0

package/lib/components/card/card.css

@@ -1,22 +1,28 @@
-/* Card component styles*/
-/* Provides styling for the IVDS card component with all variants, sections, and states*/
-/* Card Base*/
+/* stylelint-disable no-descending-specificity */
 .ivds-card {
+  --background-color: var(--ivds-surface-base, #fff);
+  --border-color: var(--ivds-border-subtle, #e2e7ec);
+  --border-radius: var(--ivds-radius-m, 0.25rem);
+  --box-shadow: none;
+  --padding: var(--spacing-6, 1.5rem);
+  --hover-border-color: var(--color-brand-accent-500, #1a6bdb);
+  --hover-box-shadow: var(--ivds-shadow-md, 0 1px 2px rgba(7, 11, 16, 0.12));
   display: flex;
   flex-direction: column;
-  background-color: var(--color-semantic-neutral-50, #fafafa);
-  border-radius: var(--borderRadius-xl, 0.75rem);
+  position: relative;
   overflow: hidden;
-  transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
-  box-shadow: var(--shadow-sm, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1));
-  background-color: var(--color-semantic-neutral-50, #f8fafc);
-  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
-  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
-  /* Card sections*/
+  background-color: var(--background-color);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  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-color: var(--ivds-surface-base, #fff);
+  --border-color: var(--ivds-border-subtle, #e2e7ec);
+  --box-shadow: none;
 }
 .ivds-card__header {
   padding: var(--spacing-6, 1.5rem);
-  border-bottom: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+  border-bottom: 1px solid var(--ivds-border-subtle, #e2e7ec);
 }
 .ivds-card__body {
   padding: var(--spacing-6, 1.5rem);
@@ -24,8 +30,8 @@
 }
 .ivds-card__footer {
   padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);
-  background-color: var(--color-semantic-neutral-100, #f1f5f9);
-  border-top: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+  background-color: var(--ivds-surface-muted, #f1f3f5);
+  border-top: 1px solid var(--ivds-border-subtle, #e2e7ec);
 }
 .ivds-card__media {
   position: relative;
@@ -38,104 +44,102 @@
   -o-object-fit: cover;
      object-fit: cover;
   display: block;
-}
-.ivds-card {
-  /* Card content elements*/
+  transition: transform var(--ivds-motion-normal, 250ms) var(--ivds-motion-ease, ease);
 }
 .ivds-card__title {
-  margin: 0 0 var(--spacing-2, 0.5rem) 0;
-  font-size: var(--fontSize-lg, 1.125rem);
+  margin: 0 0 var(--spacing-1, 0.25rem);
+  color: var(--ivds-text-primary, #121a24);
+  font-size: var(--fontSize-xl, 1.25rem);
   font-weight: var(--fontWeight-semibold, 600);
-  color: var(--color-semantic-neutral-900, #0f172a);
   line-height: var(--lineHeight-tight, 1.25);
 }
 .ivds-card__subtitle {
-  margin: 0 0 var(--spacing-3, 0.75rem) 0;
+  margin: 0 0 var(--spacing-4, 1rem);
+  color: var(--ivds-text-muted, #4d5968);
   font-size: var(--fontSize-sm, 0.875rem);
-  color: var(--color-semantic-neutral-600, #4b5563);
-  line-height: var(--lineHeight-normal, 1.5);
+  font-weight: var(--fontWeight-medium, 500);
 }
 .ivds-card__content {
   margin: 0;
-  color: var(--color-semantic-neutral-700, #334155);
+  color: var(--ivds-text-secondary, #36414f);
   line-height: var(--lineHeight-relaxed, 1.625);
 }
 .ivds-card__actions {
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  flex-wrap: wrap;
   gap: var(--spacing-3, 0.75rem);
   margin-top: var(--spacing-4, 1rem);
 }
-.ivds-card {
-  /* Content wrapper for horizontal cards*/
-}
 .ivds-card__content-wrapper {
   display: flex;
   flex-direction: column;
   flex: 1;
 }
-.ivds-card {
-  /* Overlay for media cards*/
-}
 .ivds-card__overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
+  background: linear-gradient(to bottom, rgba(var(--ivds-overlay-rgb, 18, 26, 36), 0.08) 0%, rgba(var(--ivds-overlay-rgb, 18, 26, 36), 0.82) 100%);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: var(--spacing-6, 1.5rem);
-  color: var(--color-semantic-neutral-50, #f8fafc);
+  color: var(--ivds-text-on-strong, #fff);
 }
 .ivds-card__overlay .ivds-card__title,
 .ivds-card__overlay .ivds-card__subtitle,
 .ivds-card__overlay .ivds-card__content {
   color: inherit;
 }
-/* Card Variants*/
 .ivds-card--flat {
-  background-color: var(--color-semantic-neutral-50, #f8fafc);
-  border: var(--borderWidth-1, 1px) solid transparent;
-  box-shadow: none;
+  --background-color: var(--ivds-surface-base, #fff);
+  --border-color: transparent;
+  --box-shadow: none;
 }
 .ivds-card--bordered {
-  background-color: var(--color-semantic-neutral-50, #f8fafc);
-  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
-  box-shadow: none;
+  --background-color: var(--ivds-surface-base, #fff);
+  --border-color: var(--ivds-border-strong, #a1adba);
+  --box-shadow: none;
 }
 .ivds-card--elevated {
-  background-color: var(--color-semantic-neutral-50, #f8fafc);
-  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
-  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
+  --background-color: var(--ivds-surface-base, #fff);
+  --border-color: var(--ivds-border-subtle, #e2e7ec);
+  --box-shadow: var(--ivds-shadow-md, 0 1px 2px rgba(7, 11, 16, 0.12));
 }
 .ivds-card--floating {
-  background-color: var(--color-semantic-neutral-50, #f8fafc);
-  border: var(--borderWidth-1, 1px) solid transparent;
-  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
+  --background-color: var(--ivds-surface-base, #fff);
+  --border-color: transparent;
+  --box-shadow: var(--ivds-shadow-lg, 0 4px 10px rgba(7, 11, 16, 0.14));
 }
-/* Interactive card*/
 .ivds-card--interactive {
   cursor: pointer;
 }
 .ivds-card--interactive:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
+  border-color: var(--hover-border-color);
+  box-shadow: var(--hover-box-shadow);
+}
+.ivds-card--interactive:hover .ivds-card__media img {
+  transform: scale(1.01);
 }
 .ivds-card--interactive:active {
-  transform: translateY(0);
+  box-shadow: var(--ivds-shadow-sm, 0 1px 0 rgba(7, 11, 16, 0.1));
 }
-.ivds-card--interactive:focus {
-  outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
-  outline-offset: 2px;
+.ivds-card--interactive: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-card--interactive:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
 }
-/* Card sizes*/
 .ivds-card--compact .ivds-card__header {
   padding: var(--spacing-4, 1rem);
-  border-bottom: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+  border-bottom: 1px solid var(--ivds-border-subtle, #e2e7ec);
 }
 .ivds-card--compact .ivds-card__body {
   padding: var(--spacing-4, 1rem);
@@ -143,12 +147,12 @@
 }
 .ivds-card--compact .ivds-card__footer {
   padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
-  background-color: var(--color-semantic-neutral-100, #f1f5f9);
-  border-top: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+  background-color: var(--ivds-surface-muted, #f1f3f5);
+  border-top: 1px solid var(--ivds-border-subtle, #e2e7ec);
 }
 .ivds-card--spacious .ivds-card__header {
   padding: var(--spacing-8, 2rem);
-  border-bottom: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+  border-bottom: 1px solid var(--ivds-border-subtle, #e2e7ec);
 }
 .ivds-card--spacious .ivds-card__body {
   padding: var(--spacing-8, 2rem);
@@ -156,81 +160,76 @@
 }
 .ivds-card--spacious .ivds-card__footer {
   padding: var(--spacing-6, 1.5rem) var(--spacing-8, 2rem);
-  background-color: var(--color-semantic-neutral-100, #f1f5f9);
-  border-top: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+  background-color: var(--ivds-surface-muted, #f1f3f5);
+  border-top: 1px solid var(--ivds-border-subtle, #e2e7ec);
 }
-/* Card layouts*/
 .ivds-card--horizontal {
   flex-direction: row;
 }
 .ivds-card--horizontal .ivds-card__media {
+  width: 220px;
   flex-shrink: 0;
-  width: 200px;
 }
 .ivds-card--horizontal .ivds-card__content-wrapper {
   display: flex;
-  flex-direction: column;
   flex: 1;
+  flex-direction: column;
 }
 .ivds-card--overlay {
   position: relative;
 }
 .ivds-card--overlay .ivds-card__overlay {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
+  inset: 0;
   display: flex;
-  flex-direction: column;
   justify-content: flex-end;
+  flex-direction: column;
   padding: var(--spacing-6, 1.5rem);
-  color: var(--color-semantic-neutral-50, #f8fafc);
+  color: var(--ivds-text-on-strong, #fff);
+  background: linear-gradient(to bottom, rgba(18, 26, 36, 0.08) 0%, rgba(18, 26, 36, 0.82) 100%);
 }
 .ivds-card--overlay .ivds-card__overlay .ivds-card__title,
 .ivds-card--overlay .ivds-card__overlay .ivds-card__subtitle,
 .ivds-card--overlay .ivds-card__overlay .ivds-card__content {
   color: inherit;
 }
-/* Card semantic variants*/
 .ivds-card--success {
-  background-color: var(--color-semantic-success-50, #ecfdf5);
-  border: var(--borderWidth-1, 1px) solid var(--color-semantic-success-200, #bbf7d0);
+  --background-color: var(--color-semantic-success-50, #edf9f4);
+  --border-color: var(--color-ui-success-200, #b8e9d2);
 }
 .ivds-card--success .ivds-card__title {
-  color: var(--color-semantic-success-800, #166534);
+  color: var(--color-semantic-success-700, #0a573a);
 }
 .ivds-card--success .ivds-card__content {
-  color: var(--color-semantic-success-700, #15803d);
+  color: var(--color-semantic-success-600, #0f6f4a);
 }
 .ivds-card--warning {
-  background-color: var(--color-semantic-warning-50, #fffbeb);
-  border: var(--borderWidth-1, 1px) solid var(--color-semantic-warning-200, #fed7aa);
+  --background-color: var(--color-semantic-warning-50, #fff8eb);
+  --border-color: var(--color-ui-warning-200, #f6d6a7);
 }
 .ivds-card--warning .ivds-card__title {
-  color: var(--color-semantic-warning-800, #92400e);
+  color: var(--color-semantic-warning-700, #834b08);
 }
 .ivds-card--warning .ivds-card__content {
-  color: var(--color-semantic-warning-700, #b45309);
+  color: var(--color-semantic-warning-600, #a76009);
 }
 .ivds-card--error {
-  background-color: var(--color-semantic-error-50, #fef2f2);
-  border: var(--borderWidth-1, 1px) solid var(--color-semantic-error-200, #fecaca);
+  --background-color: var(--color-semantic-error-50, #fff1f2);
+  --border-color: var(--color-ui-error-200, #f2b8c1);
 }
 .ivds-card--error .ivds-card__title {
-  color: var(--color-semantic-error-800, #991b1b);
+  color: var(--color-semantic-error-700, #922036);
 }
 .ivds-card--error .ivds-card__content {
-  color: var(--color-semantic-error-700, #b91c1c);
+  color: var(--color-semantic-error-600, #b72a41);
 }
 .ivds-card--info {
-  background-color: var(--color-semantic-info-50, #eff6ff);
-  border: var(--borderWidth-1, 1px) solid var(--color-semantic-info-200, #bfdbfe);
+  --background-color: var(--color-semantic-info-50, #edf4ff);
+  --border-color: var(--color-ui-info-200, #bfd7ff);
 }
 .ivds-card--info .ivds-card__title {
-  color: var(--color-semantic-info-800, #1e40af);
+  color: var(--color-semantic-info-700, #003d99);
 }
 .ivds-card--info .ivds-card__content {
-  color: var(--color-semantic-info-700, #1d4ed8);
+  color: var(--color-semantic-info-600, #0050c8);
 }

package/lib/components/card/card.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/card/_card-mixin.scss","../../../src/components/card/card.scss%23sass","../../../src/components/card/card.scss","../../../src/base/_focus.scss"],"names":[],"mappings":"AACA,gDAAA;ACKA;EDCE,kDAAA;EEJF,kDFKE;EACA,8CAAA;EEJF,kBFKE;EEJF,mCAAA;EFME,4DAAA;EACA,0EAAA;EAEA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;EACA,yCAAA;EACA,qCAAA;EACA,mCAAA;EACA,6BAAA;EACA,6OAAA;EAOA,kDAAA;EAGE,kDAAA;EAIA,kBAAA;AEhBJ;ADNE;EDoCA,iCAAA;EAOE,2DAAA;AEjCJ;ADNE;EDgCA,iCAAA;EAcA,OAAA;AEpCF;ADNE;ED4BA,wDAkBU;EAMV,oDAAA;EAGE,wDAAA;AE5CJ;ADPE;EDwDA,kBAAA;EACA,gBAAA;AE9CF;AFgDE;;EAEE,WAAA;EACA,YAAA;EACA,oBAAA;KAAA,iBAAA;EACA,cAAA;EACA,oFAAA;AE9CJ;ADdE;EDiEA,qCAAA;EACA,wCAAA;EACA,sCAH4B;EAI5B,4CAJuE;EAKvE,0CAAA;AEhDF;ADjBE;EDqEA,kCAAA;EACA,sCAAA;EACA,uCAH+B;EAI/B,0CAAA;AEjDF;ADnBE;EDwEA,SAAA;EACA,0CAAA;EACA,6CAAA;AElDF;ADpBE;ED0EA,aAAA;EACA,mBAAA;EACA,2BAH4B;EAI5B,eAAA;EACA,8BAL8C;EAM9C,kCAAA;AEnDF;ADvBE;EACE,aAAA;ECyBJ,sBAAA;EDvBI,OAAA;ACyBJ;ADrBE;EACE,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;ECuBJ,gJAAA;EDrBI,aAAA;ECuBJ,sBAAA;EDrBI,yBAAA;EACA,iCAAA;EACA,uCAAA;ACuBJ;ADrBI;;;ECyBJ,cAAA;AACA;ADjBA;EDhDE,kDAAA;EAGE,2BAAA;EEmEJ,kBAAA;AACA;ADfA;EDxDE,kDAAA;EAGE,kDAAA;EAIA,kBAAA;AEsEJ;ADbA;ECgBA,kDFhFE;EEiFF,kDAAA;EF1EI,oEAAA;AE4EJ;ADXA;ECcA,kDAAA;EFnFI,2BAAA;EEqFJ,qEAAA;AACA;ADRA;ECWA,eAAA;AACA;AFsEE;EEpEF,uCAAA;EFsEI,mCAAA;AEpEJ;AFsEI;EEpEJ,sBAAA;AACA;AFwEE;EACE,+DAAA;AEtEJ;AChIE;EACE,qHAAA;EACA,kDAAA;EACA,gBAAA;ADkIJ;AC/HE;EACE,aAAA;EACA,gBAAA;ADiIJ;AFfE;EA5EA,+BAAA;EAOE,2DAAA;AEyFJ;AFhBE;EEkBF,+BAAA;EFpFE,OAAA;AEsFF;AFhBE;EApFA,yDAAA;EAwBA,oDALW;EAQT,wDAAA;AE8EJ;AFfE;EA1FA,+BAAA;EAOE,2DAAA;AEuGJ;AFhBE;EA9FA,+BA+FqB;EEkBvB,OAAA;AACA;AFhBE;EAlGA,wDAmGuB;EA3EvB,oDAAA;EAGE,wDAAA;AE4FJ;AD7CA;ED8BE,mBAAA;AEmBF;AFjBE;EACE,YAAA;EEmBJ,cAAA;AACA;AFhBE;EACE,aAAA;EACA,OAAA;EACA,sBAAA;AEkBJ;ADtDA;EDyCE,kBAAA;AEiBF;AFfE;EACE,kBAAA;EACA,QAAA;EACA,aAAA;EEiBJ,yBAAA;EFfI,sBAAA;EACA,iCAAA;EACA,uCAAA;EACA,8FAAA;AEiBJ;AFfI;;;EAGE,cAAA;AEiBN;ADpEA;EDxGE,6DAAA;EAGE,oDAAA;AE8KJ;ADnEE;EACE,iDAAA;ACqEJ;ADlEE;EACE,iDAAA;ACoEJ;ADhEA;EDvHE,6DAAA;EAGE,oDAAA;AEyLJ;AD/DE;EACE,iDAAA;ACiEJ;AD9DE;EACE,iDAAA;ACgEJ;AD5DA;EDtIE,2DAAA;EAGE,kDAAA;AEoMJ;AD3DE;EACE,+CAAA;AC6DJ;AD1DE;EACE,+CAAA;AC4DJ;ADxDA;EDrJE,0DAAA;EAGE,iDAAA;AE+MJ;ADvDE;EACE,8CAAA;ACyDJ;ADtDE;EACE,8CAAA;ACwDJ","file":"card.css","sourcesContent":["// Card component mixins and private styles\n/* stylelint-disable no-descending-specificity */\n\n@use '../../base/focus' as *;\n\n@mixin card-base {\n  // Per-component CSS variable API\n  --background-color: var(--ivds-surface-base, #fff);\n  --border-color: var(--ivds-border-subtle, #e2e7ec);\n  --border-radius: var(--ivds-radius-m, 0.25rem);\n  --box-shadow: none;\n  --padding: var(--spacing-6, 1.5rem);\n  --hover-border-color: var(--color-brand-accent-500, #1a6bdb);\n  --hover-box-shadow: var(--ivds-shadow-md, 0 1px 2px rgba(7, 11, 16, 0.12));\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  overflow: hidden;\n  background-color: var(--background-color);\n  border: 1px solid var(--border-color);\n  border-radius: var(--border-radius);\n  box-shadow: var(--box-shadow);\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}\n\n@mixin card-variant($bg-color, $border-color: null, $shadow: null) {\n  --background-color: #{$bg-color};\n\n  @if $border-color {\n    --border-color: #{$border-color};\n  }\n\n  @if $shadow {\n    --box-shadow: #{$shadow};\n  }\n}\n\n@mixin card-variant-glass {\n  background: rgba(255, 255, 255, 0.92);\n  border-color: var(--ivds-border-subtle, #e2e7ec);\n}\n\n@mixin card-variant-raised {\n  box-shadow: var(--ivds-shadow-md, 0 1px 2px rgba(7, 11, 16, 0.12));\n}\n\n@mixin card-section($padding: var(--spacing-6, 1.5rem)) {\n  padding: $padding;\n}\n\n@mixin card-header($padding: var(--spacing-6, 1.5rem), $border-bottom: true) {\n  @include card-section($padding);\n\n  @if $border-bottom {\n    border-bottom: 1px solid var(--ivds-border-subtle, #e2e7ec);\n  }\n}\n\n@mixin card-body($padding: var(--spacing-6, 1.5rem)) {\n  @include card-section($padding);\n\n  flex: 1;\n}\n\n@mixin card-footer(\n  $padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem),\n  $bg-color: var(--ivds-surface-muted, #f1f3f5),\n  $border-top: true\n) {\n  @include card-section($padding);\n\n  background-color: $bg-color;\n\n  @if $border-top {\n    border-top: 1px solid var(--ivds-border-subtle, #e2e7ec);\n  }\n}\n\n@mixin card-media {\n  position: relative;\n  overflow: hidden;\n\n  img,\n  video {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n    transition: transform var(--ivds-motion-normal, 250ms) var(--ivds-motion-ease, ease);\n  }\n}\n\n@mixin card-title($font-size: var(--fontSize-xl, 1.25rem), $font-weight: var(--fontWeight-semibold, 600)) {\n  margin: 0 0 var(--spacing-1, 0.25rem);\n  color: var(--ivds-text-primary, #121a24);\n  font-size: $font-size;\n  font-weight: $font-weight;\n  line-height: var(--lineHeight-tight, 1.25);\n}\n\n@mixin card-subtitle($font-size: var(--fontSize-sm, 0.875rem)) {\n  margin: 0 0 var(--spacing-4, 1rem);\n  color: var(--ivds-text-muted, #4d5968);\n  font-size: $font-size;\n  font-weight: var(--fontWeight-medium, 500);\n}\n\n@mixin card-content {\n  margin: 0;\n  color: var(--ivds-text-secondary, #36414f);\n  line-height: var(--lineHeight-relaxed, 1.625);\n}\n\n@mixin card-actions($justify: flex-start, $gap: var(--spacing-3, 0.75rem)) {\n  display: flex;\n  align-items: center;\n  justify-content: $justify;\n  flex-wrap: wrap;\n  gap: $gap;\n  margin-top: var(--spacing-4, 1rem);\n}\n\n@mixin card-compact {\n  .ivds-card__header {\n    @include card-header(var(--spacing-4, 1rem));\n  }\n\n  .ivds-card__body {\n    @include card-body(var(--spacing-4, 1rem));\n  }\n\n  .ivds-card__footer {\n    @include card-footer(var(--spacing-3, 0.75rem) var(--spacing-4, 1rem));\n  }\n}\n\n@mixin card-spacious {\n  .ivds-card__header {\n    @include card-header(var(--spacing-8, 2rem));\n  }\n\n  .ivds-card__body {\n    @include card-body(var(--spacing-8, 2rem));\n  }\n\n  .ivds-card__footer {\n    @include card-footer(var(--spacing-6, 1.5rem) var(--spacing-8, 2rem));\n  }\n}\n\n@mixin card-horizontal {\n  flex-direction: row;\n\n  .ivds-card__media {\n    width: 220px;\n    flex-shrink: 0;\n  }\n\n  .ivds-card__content-wrapper {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n  }\n}\n\n@mixin card-overlay {\n  position: relative;\n\n  .ivds-card__overlay {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    justify-content: flex-end;\n    flex-direction: column;\n    padding: var(--spacing-6, 1.5rem);\n    color: var(--ivds-text-on-strong, #fff);\n    background: linear-gradient(to bottom, rgba(18, 26, 36, 0.08) 0%, rgba(18, 26, 36, 0.82) 100%);\n\n    .ivds-card__title,\n    .ivds-card__subtitle,\n    .ivds-card__content {\n      color: inherit;\n    }\n  }\n}\n\n@mixin card-interactive {\n  cursor: pointer;\n\n  &:hover {\n    border-color: var(--hover-border-color);\n    box-shadow: var(--hover-box-shadow);\n\n    .ivds-card__media img {\n      transform: scale(1.01);\n    }\n  }\n\n  &:active {\n    box-shadow: var(--ivds-shadow-sm, 0 1px 0 rgba(7, 11, 16, 0.10));\n  }\n\n  @include focus-ring;\n}\n","// Card component styles\n// Provides styling for the IVDS card component with all variants, sections, and states\n\n@use '_card-mixin' as card;\n\n// Card Base\n.ivds-card {\n  @include card.card-base;\n  @include card.card-variant(\n    var(--ivds-surface-base, #fff),\n    var(--ivds-border-subtle, #e2e7ec),\n    none\n  );\n  \n  // Card sections\n  &__header {\n    @include card.card-header;\n  }\n  \n  &__body {\n    @include card.card-body;\n  }\n  \n  &__footer {\n    @include card.card-footer;\n  }\n  \n  &__media {\n    @include card.card-media;\n  }\n  \n  // Card content elements\n  &__title {\n    @include card.card-title;\n  }\n  \n  &__subtitle {\n    @include card.card-subtitle;\n  }\n  \n  &__content {\n    @include card.card-content;\n  }\n  \n  &__actions {\n    @include card.card-actions;\n  }\n  \n  // Content wrapper for horizontal cards\n  &__content-wrapper {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n  }\n  \n  // Overlay for media cards\n  &__overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: linear-gradient(to bottom, rgba(var(--ivds-overlay-rgb, 18, 26, 36), 0.08) 0%, rgba(var(--ivds-overlay-rgb, 18, 26, 36), 0.82) 100%);\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    padding: var(--spacing-6, 1.5rem);\n    color: var(--ivds-text-on-strong, #fff);\n    \n    .ivds-card__title,\n    .ivds-card__subtitle,\n    .ivds-card__content {\n      color: inherit;\n    }\n  }\n}\n\n// Card Variants\n.ivds-card--flat {\n  @include card.card-variant(\n    var(--ivds-surface-base, #fff),\n    transparent,\n    none\n  );\n}\n\n.ivds-card--bordered {\n  @include card.card-variant(\n    var(--ivds-surface-base, #fff),\n    var(--ivds-border-strong, #a1adba),\n    none\n  );\n}\n\n.ivds-card--elevated {\n  @include card.card-variant(\n    var(--ivds-surface-base, #fff),\n    var(--ivds-border-subtle, #e2e7ec),\n    var(--ivds-shadow-md, 0 1px 2px rgba(7, 11, 16, 0.12))\n  );\n}\n\n.ivds-card--floating {\n  @include card.card-variant(\n    var(--ivds-surface-base, #fff),\n    transparent,\n    var(--ivds-shadow-lg, 0 4px 10px rgba(7, 11, 16, 0.14))\n  );\n}\n\n// Interactive card\n.ivds-card--interactive {\n  @include card.card-interactive;\n}\n\n// Card sizes\n.ivds-card--compact {\n  @include card.card-compact;\n}\n\n.ivds-card--spacious {\n  @include card.card-spacious;\n}\n\n// Card layouts\n.ivds-card--horizontal {\n  @include card.card-horizontal;\n}\n\n.ivds-card--overlay {\n  @include card.card-overlay;\n}\n\n// Card semantic variants\n.ivds-card--success {\n  @include card.card-variant(\n    var(--color-semantic-success-50, #edf9f4),\n    var(--color-ui-success-200, #b8e9d2)\n  );\n  \n  .ivds-card__title {\n    color: var(--color-semantic-success-700, #0a573a);\n  }\n  \n  .ivds-card__content {\n    color: var(--color-semantic-success-600, #0f6f4a);\n  }\n}\n\n.ivds-card--warning {\n  @include card.card-variant(\n    var(--color-semantic-warning-50, #fff8eb),\n    var(--color-ui-warning-200, #f6d6a7)\n  );\n  \n  .ivds-card__title {\n    color: var(--color-semantic-warning-700, #834b08);\n  }\n  \n  .ivds-card__content {\n    color: var(--color-semantic-warning-600, #a76009);\n  }\n}\n\n.ivds-card--error {\n  @include card.card-variant(\n    var(--color-semantic-error-50, #fff1f2),\n    var(--color-ui-error-200, #f2b8c1)\n  );\n  \n  .ivds-card__title {\n    color: var(--color-semantic-error-700, #922036);\n  }\n  \n  .ivds-card__content {\n    color: var(--color-semantic-error-600, #b72a41);\n  }\n}\n\n.ivds-card--info {\n  @include card.card-variant(\n    var(--color-semantic-info-50, #edf4ff),\n    var(--color-ui-info-200, #bfd7ff)\n  );\n  \n  .ivds-card__title {\n    color: var(--color-semantic-info-700, #003d99);\n  }\n  \n  .ivds-card__content {\n    color: var(--color-semantic-info-600, #0050c8);\n  }\n}\n","// Card component styles\n// Provides styling for the IVDS card component with all variants, sections, and states\n\n@use '_card-mixin' as card;\n\n// Card Base\n.ivds-card {\n  @include card.card-base;\n  @include card.card-variant(\n    var(--ivds-surface-base, #fff),\n    var(--ivds-border-subtle, #e2e7ec),\n    none\n  );\n  \n  // Card sections\n  &__header {\n    @include card.card-header;\n  }\n  \n  &__body {\n    @include card.card-body;\n  }\n  \n  &__footer {\n    @include card.card-footer;\n  }\n  \n  &__media {\n    @include card.card-media;\n  }\n  \n  // Card content elements\n  &__title {\n    @include card.card-title;\n  }\n  \n  &__subtitle {\n    @include card.card-subtitle;\n  }\n  \n  &__content {\n    @include card.card-content;\n  }\n  \n  &__actions {\n    @include card.card-actions;\n  }\n  \n  // Content wrapper for horizontal cards\n  &__content-wrapper {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n  }\n  \n  // Overlay for media cards\n  &__overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: linear-gradient(to bottom, rgba(var(--ivds-overlay-rgb, 18, 26, 36), 0.08) 0%, rgba(var(--ivds-overlay-rgb, 18, 26, 36), 0.82) 100%);\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    padding: var(--spacing-6, 1.5rem);\n    color: var(--ivds-text-on-strong, #fff);\n    \n    .ivds-card__title,\n    .ivds-card__subtitle,\n    .ivds-card__content {\n      color: inherit;\n    }\n  }\n}\n\n// Card Variants\n.ivds-card--flat {\n  @include card.card-variant(\n    var(--ivds-surface-base, #fff),\n    transparent,\n    none\n  );\n}\n\n.ivds-card--bordered {\n  @include card.card-variant(\n    var(--ivds-surface-base, #fff),\n    var(--ivds-border-strong, #a1adba),\n    none\n  );\n}\n\n.ivds-card--elevated {\n  @include card.card-variant(\n    var(--ivds-surface-base, #fff),\n    var(--ivds-border-subtle, #e2e7ec),\n    var(--ivds-shadow-md, 0 1px 2px rgba(7, 11, 16, 0.12))\n  );\n}\n\n.ivds-card--floating {\n  @include card.card-variant(\n    var(--ivds-surface-base, #fff),\n    transparent,\n    var(--ivds-shadow-lg, 0 4px 10px rgba(7, 11, 16, 0.14))\n  );\n}\n\n// Interactive card\n.ivds-card--interactive {\n  @include card.card-interactive;\n}\n\n// Card sizes\n.ivds-card--compact {\n  @include card.card-compact;\n}\n\n.ivds-card--spacious {\n  @include card.card-spacious;\n}\n\n// Card layouts\n.ivds-card--horizontal {\n  @include card.card-horizontal;\n}\n\n.ivds-card--overlay {\n  @include card.card-overlay;\n}\n\n// Card semantic variants\n.ivds-card--success {\n  @include card.card-variant(\n    var(--color-semantic-success-50, #edf9f4),\n    var(--color-ui-success-200, #b8e9d2)\n  );\n  \n  .ivds-card__title {\n    color: var(--color-semantic-success-700, #0a573a);\n  }\n  \n  .ivds-card__content {\n    color: var(--color-semantic-success-600, #0f6f4a);\n  }\n}\n\n.ivds-card--warning {\n  @include card.card-variant(\n    var(--color-semantic-warning-50, #fff8eb),\n    var(--color-ui-warning-200, #f6d6a7)\n  );\n  \n  .ivds-card__title {\n    color: var(--color-semantic-warning-700, #834b08);\n  }\n  \n  .ivds-card__content {\n    color: var(--color-semantic-warning-600, #a76009);\n  }\n}\n\n.ivds-card--error {\n  @include card.card-variant(\n    var(--color-semantic-error-50, #fff1f2),\n    var(--color-ui-error-200, #f2b8c1)\n  );\n  \n  .ivds-card__title {\n    color: var(--color-semantic-error-700, #922036);\n  }\n  \n  .ivds-card__content {\n    color: var(--color-semantic-error-600, #b72a41);\n  }\n}\n\n.ivds-card--info {\n  @include card.card-variant(\n    var(--color-semantic-info-50, #edf4ff),\n    var(--color-ui-info-200, #bfd7ff)\n  );\n  \n  .ivds-card__title {\n    color: var(--color-semantic-info-700, #003d99);\n  }\n  \n  .ivds-card__content {\n    color: var(--color-semantic-info-600, #0050c8);\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/card/card.min.css

@@ -1 +1 @@
-.ivds-card{background-color:var(--color-semantic-neutral-50,#fafafa);background-color:var(--color-semantic-neutral-50,#f8fafc);border:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-200,#e2e8f0);border-radius:var(--borderRadius-xl,.75rem);box-shadow:var(--shadow-sm,0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1));box-shadow:var(--shadow-sm,0 1px 2px 0 rgba(0,0,0,.05));display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .15s ease-in-out,transform .15s ease-in-out}.ivds-card__header{border-bottom:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-200,#e2e8f0);padding:var(--spacing-6,1.5rem)}.ivds-card__body{flex:1;padding:var(--spacing-6,1.5rem)}.ivds-card__footer{background-color:var(--color-semantic-neutral-100,#f1f5f9);border-top:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-200,#e2e8f0);padding:var(--spacing-4,1rem) var(--spacing-6,1.5rem)}.ivds-card__media{overflow:hidden;position:relative}.ivds-card__media img,.ivds-card__media video{display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.ivds-card__title{color:var(--color-semantic-neutral-900,#0f172a);font-size:var(--fontSize-lg,1.125rem);font-weight:var(--fontWeight-semibold,600);line-height:var(--lineHeight-tight,1.25);margin:0 0 var(--spacing-2,.5rem) 0}.ivds-card__subtitle{color:var(--color-semantic-neutral-600,#4b5563);font-size:var(--fontSize-sm,.875rem);line-height:var(--lineHeight-normal,1.5);margin:0 0 var(--spacing-3,.75rem) 0}.ivds-card__content{color:var(--color-semantic-neutral-700,#334155);line-height:var(--lineHeight-relaxed,1.625);margin:0}.ivds-card__actions{align-items:center;display:flex;gap:var(--spacing-3,.75rem);justify-content:flex-start;margin-top:var(--spacing-4,1rem)}.ivds-card__content-wrapper{display:flex;flex:1;flex-direction:column}.ivds-card__overlay{background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.7));bottom:0;color:var(--color-semantic-neutral-50,#f8fafc);display:flex;flex-direction:column;justify-content:flex-end;left:0;padding:var(--spacing-6,1.5rem);position:absolute;right:0;top:0}.ivds-card__overlay .ivds-card__content,.ivds-card__overlay .ivds-card__subtitle,.ivds-card__overlay .ivds-card__title{color:inherit}.ivds-card--flat{border:var(--borderWidth-1,1px) solid transparent}.ivds-card--bordered,.ivds-card--flat{background-color:var(--color-semantic-neutral-50,#f8fafc);box-shadow:none}.ivds-card--bordered{border:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-300,#cbd5e1)}.ivds-card--elevated{border:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-200,#e2e8f0);box-shadow:var(--shadow-md,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06))}.ivds-card--elevated,.ivds-card--floating{background-color:var(--color-semantic-neutral-50,#f8fafc)}.ivds-card--floating{border:var(--borderWidth-1,1px) solid transparent;box-shadow:var(--shadow-lg,0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05))}.ivds-card--interactive{cursor:pointer}.ivds-card--interactive:hover{box-shadow:var(--shadow-lg,0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05));transform:translateY(-2px)}.ivds-card--interactive:active{transform:translateY(0)}.ivds-card--interactive:focus{outline:2px solid var(--color-brand-primary-500,#0ea5e9);outline-offset:2px}.ivds-card--compact .ivds-card__header{border-bottom:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-200,#e2e8f0);padding:var(--spacing-4,1rem)}.ivds-card--compact .ivds-card__body{flex:1;padding:var(--spacing-4,1rem)}.ivds-card--compact .ivds-card__footer{background-color:var(--color-semantic-neutral-100,#f1f5f9);border-top:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-200,#e2e8f0);padding:var(--spacing-3,.75rem) var(--spacing-4,1rem)}.ivds-card--spacious .ivds-card__header{border-bottom:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-200,#e2e8f0);padding:var(--spacing-8,2rem)}.ivds-card--spacious .ivds-card__body{flex:1;padding:var(--spacing-8,2rem)}.ivds-card--spacious .ivds-card__footer{background-color:var(--color-semantic-neutral-100,#f1f5f9);border-top:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-200,#e2e8f0);padding:var(--spacing-6,1.5rem) var(--spacing-8,2rem)}.ivds-card--horizontal{flex-direction:row}.ivds-card--horizontal .ivds-card__media{flex-shrink:0;width:200px}.ivds-card--horizontal .ivds-card__content-wrapper{display:flex;flex:1;flex-direction:column}.ivds-card--overlay{position:relative}.ivds-card--overlay .ivds-card__overlay{background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.7));bottom:0;color:var(--color-semantic-neutral-50,#f8fafc);display:flex;flex-direction:column;justify-content:flex-end;left:0;padding:var(--spacing-6,1.5rem);position:absolute;right:0;top:0}.ivds-card--overlay .ivds-card__overlay .ivds-card__content,.ivds-card--overlay .ivds-card__overlay .ivds-card__subtitle,.ivds-card--overlay .ivds-card__overlay .ivds-card__title{color:inherit}.ivds-card--success{background-color:var(--color-semantic-success-50,#ecfdf5);border:var(--borderWidth-1,1px) solid var(--color-semantic-success-200,#bbf7d0)}.ivds-card--success .ivds-card__title{color:var(--color-semantic-success-800,#166534)}.ivds-card--success .ivds-card__content{color:var(--color-semantic-success-700,#15803d)}.ivds-card--warning{background-color:var(--color-semantic-warning-50,#fffbeb);border:var(--borderWidth-1,1px) solid var(--color-semantic-warning-200,#fed7aa)}.ivds-card--warning .ivds-card__title{color:var(--color-semantic-warning-800,#92400e)}.ivds-card--warning .ivds-card__content{color:var(--color-semantic-warning-700,#b45309)}.ivds-card--error{background-color:var(--color-semantic-error-50,#fef2f2);border:var(--borderWidth-1,1px) solid var(--color-semantic-error-200,#fecaca)}.ivds-card--error .ivds-card__title{color:var(--color-semantic-error-800,#991b1b)}.ivds-card--error .ivds-card__content{color:var(--color-semantic-error-700,#b91c1c)}.ivds-card--info{background-color:var(--color-semantic-info-50,#eff6ff);border:var(--borderWidth-1,1px) solid var(--color-semantic-info-200,#bfdbfe)}.ivds-card--info .ivds-card__title{color:var(--color-semantic-info-800,#1e40af)}.ivds-card--info .ivds-card__content{color:var(--color-semantic-info-700,#1d4ed8)}
+.ivds-card{--border-radius:var(--ivds-radius-m,0.25rem);--padding:var(--spacing-6,1.5rem);--hover-border-color:var(--color-brand-accent-500,#1a6bdb);--hover-box-shadow:var(--ivds-shadow-md,0 1px 2px rgba(7,11,16,.12));background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--box-shadow);display:flex;flex-direction:column;overflow:hidden;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),background-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease);--background-color:var(--ivds-surface-base,#fff);--border-color:var(--ivds-border-subtle,#e2e7ec);--box-shadow:none}.ivds-card__header{border-bottom:1px solid var(--ivds-border-subtle,#e2e7ec);padding:var(--spacing-6,1.5rem)}.ivds-card__body{flex:1;padding:var(--spacing-6,1.5rem)}.ivds-card__footer{background-color:var(--ivds-surface-muted,#f1f3f5);border-top:1px solid var(--ivds-border-subtle,#e2e7ec);padding:var(--spacing-4,1rem) var(--spacing-6,1.5rem)}.ivds-card__media{overflow:hidden;position:relative}.ivds-card__media img,.ivds-card__media video{display:block;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform var(--ivds-motion-normal,.25s) var(--ivds-motion-ease,ease);width:100%}.ivds-card__title{color:var(--ivds-text-primary,#121a24);font-size:var(--fontSize-xl,1.25rem);font-weight:var(--fontWeight-semibold,600);line-height:var(--lineHeight-tight,1.25);margin:0 0 var(--spacing-1,.25rem)}.ivds-card__subtitle{color:var(--ivds-text-muted,#4d5968);font-size:var(--fontSize-sm,.875rem);font-weight:var(--fontWeight-medium,500);margin:0 0 var(--spacing-4,1rem)}.ivds-card__content{color:var(--ivds-text-secondary,#36414f);line-height:var(--lineHeight-relaxed,1.625);margin:0}.ivds-card__actions{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-3,.75rem);justify-content:flex-start;margin-top:var(--spacing-4,1rem)}.ivds-card__content-wrapper{display:flex;flex:1;flex-direction:column}.ivds-card__overlay{background:linear-gradient(to bottom,rgba(var(--ivds-overlay-rgb,18,26,36),.08) 0,rgba(var(--ivds-overlay-rgb,18,26,36),.82) 100%);bottom:0;color:var(--ivds-text-on-strong,#fff);display:flex;flex-direction:column;justify-content:flex-end;left:0;padding:var(--spacing-6,1.5rem);position:absolute;right:0;top:0}.ivds-card__overlay .ivds-card__content,.ivds-card__overlay .ivds-card__subtitle,.ivds-card__overlay .ivds-card__title{color:inherit}.ivds-card--flat{--background-color:var(--ivds-surface-base,#fff);--border-color:transparent;--box-shadow:none}.ivds-card--bordered{--background-color:var(--ivds-surface-base,#fff);--border-color:var(--ivds-border-strong,#a1adba);--box-shadow:none}.ivds-card--elevated{--background-color:var(--ivds-surface-base,#fff);--border-color:var(--ivds-border-subtle,#e2e7ec);--box-shadow:var(--ivds-shadow-md,0 1px 2px rgba(7,11,16,.12))}.ivds-card--floating{--background-color:var(--ivds-surface-base,#fff);--border-color:transparent;--box-shadow:var(--ivds-shadow-lg,0 4px 10px rgba(7,11,16,.14))}.ivds-card--interactive{cursor:pointer}.ivds-card--interactive:hover{border-color:var(--hover-border-color);box-shadow:var(--hover-box-shadow)}.ivds-card--interactive:hover .ivds-card__media img{transform:scale(1.01)}.ivds-card--interactive:active{box-shadow:var(--ivds-shadow-sm,0 1px 0 rgba(7,11,16,.1))}.ivds-card--interactive: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-card--interactive:focus:not(:focus-visible){box-shadow:none;outline:none}.ivds-card--compact .ivds-card__header{border-bottom:1px solid var(--ivds-border-subtle,#e2e7ec);padding:var(--spacing-4,1rem)}.ivds-card--compact .ivds-card__body{flex:1;padding:var(--spacing-4,1rem)}.ivds-card--compact .ivds-card__footer{background-color:var(--ivds-surface-muted,#f1f3f5);border-top:1px solid var(--ivds-border-subtle,#e2e7ec);padding:var(--spacing-3,.75rem) var(--spacing-4,1rem)}.ivds-card--spacious .ivds-card__header{border-bottom:1px solid var(--ivds-border-subtle,#e2e7ec);padding:var(--spacing-8,2rem)}.ivds-card--spacious .ivds-card__body{flex:1;padding:var(--spacing-8,2rem)}.ivds-card--spacious .ivds-card__footer{background-color:var(--ivds-surface-muted,#f1f3f5);border-top:1px solid var(--ivds-border-subtle,#e2e7ec);padding:var(--spacing-6,1.5rem) var(--spacing-8,2rem)}.ivds-card--horizontal{flex-direction:row}.ivds-card--horizontal .ivds-card__media{flex-shrink:0;width:220px}.ivds-card--horizontal .ivds-card__content-wrapper{display:flex;flex:1;flex-direction:column}.ivds-card--overlay{position:relative}.ivds-card--overlay .ivds-card__overlay{background:linear-gradient(180deg,rgba(18,26,36,.08) 0,rgba(18,26,36,.82));color:var(--ivds-text-on-strong,#fff);display:flex;flex-direction:column;inset:0;justify-content:flex-end;padding:var(--spacing-6,1.5rem);position:absolute}.ivds-card--overlay .ivds-card__overlay .ivds-card__content,.ivds-card--overlay .ivds-card__overlay .ivds-card__subtitle,.ivds-card--overlay .ivds-card__overlay .ivds-card__title{color:inherit}.ivds-card--success{--background-color:var(--color-semantic-success-50,#edf9f4);--border-color:var(--color-ui-success-200,#b8e9d2)}.ivds-card--success .ivds-card__title{color:var(--color-semantic-success-700,#0a573a)}.ivds-card--success .ivds-card__content{color:var(--color-semantic-success-600,#0f6f4a)}.ivds-card--warning{--background-color:var(--color-semantic-warning-50,#fff8eb);--border-color:var(--color-ui-warning-200,#f6d6a7)}.ivds-card--warning .ivds-card__title{color:var(--color-semantic-warning-700,#834b08)}.ivds-card--warning .ivds-card__content{color:var(--color-semantic-warning-600,#a76009)}.ivds-card--error{--background-color:var(--color-semantic-error-50,#fff1f2);--border-color:var(--color-ui-error-200,#f2b8c1)}.ivds-card--error .ivds-card__title{color:var(--color-semantic-error-700,#922036)}.ivds-card--error .ivds-card__content{color:var(--color-semantic-error-600,#b72a41)}.ivds-card--info{--background-color:var(--color-semantic-info-50,#edf4ff);--border-color:var(--color-ui-info-200,#bfd7ff)}.ivds-card--info .ivds-card__title{color:var(--color-semantic-info-700,#003d99)}.ivds-card--info .ivds-card__content{color:var(--color-semantic-info-600,#0050c8)}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/card/card.scss%23sass","../../../src/components/card/_card-mixin.scss","../../../src/components/card/card.scss","../../../src/base/_focus.scss"],"names":[],"mappings":"AAMA,WCGE,4CAAA,CCHF,iCAAA,CDME,0DAAA,CACA,oEAAA,CAMA,wCAAA,CACA,oCAAA,CACA,kCAAA,CACA,4BAAA,CAPA,YAAA,CACA,qBAAA,CAEA,eAAA,CADA,iBAAA,CAMA,iOAAA,CAOA,gDAAA,CAGE,gDAAA,CAIA,iBChBJ,CFNE,mBC2CE,yDAAA,CAPF,+BC1BF,CFNE,iBC8CA,MAAA,CAdA,+BCtBF,CFNE,mBCoDA,kDAAA,CAGE,sDAAA,CA3BF,qDCjBF,CFPE,kBCyDA,eAAA,CADA,iBC7CF,CDgDE,8CAKE,aAAA,CAFA,WAAA,CACA,mBAAA,CAAA,gBAAA,CAEA,gFAAA,CAJA,UC1CJ,CFdE,kBCkEA,sCAAA,CACA,oCAH4B,CAI5B,0CAJuE,CAKvE,wCAAA,CAJA,kCC5CF,CFjBE,qBCsEA,oCAAA,CACA,oCAH+B,CAI/B,wCAAA,CAHA,gCC9CF,CFnBE,oBCyEA,wCAAA,CACA,2CAAA,CAFA,QChDF,CFpBE,oBC2EA,kBAAA,CADA,YAAA,CAGA,cAAA,CACA,2BAL8C,CAG9C,0BAH4B,CAM5B,gCCnDF,CFvBE,4BACE,YAAA,CAEA,MAAA,CEuBJ,qBAEA,CFrBE,oBE4BF,kIAAA,CFvBI,QAAA,CAMA,qCAAA,CAJA,YAAA,CEuBJ,qBAAA,CFrBI,wBAAA,CANA,MAAA,CAOA,+BAAA,CATA,iBAAA,CAGA,OAAA,CAFA,KEgCJ,CFrBI,uHEyBJ,aACA,CFjBA,iBChDE,gDAAA,CAGE,0BAAA,CCmEJ,iBACA,CFfA,qBCxDE,gDAAA,CAGE,gDAAA,CAIA,iBCsEJ,CFbA,qBEgBA,gDDhFE,CCiFF,gDAAA,CD1EI,8DC4EJ,CFXA,qBEcA,gDAAA,CDnFI,0BAAA,CCqFJ,+DACA,CFRA,wBEWA,cACA,CDsEE,8BCpEF,sCAAA,CDsEI,kCCpEJ,CDsEI,oDCpEJ,qBACA,CDwEE,+BACE,yDCtEJ,CChIE,sCAGE,eAAA,CAFA,iHAAA,CACA,gDDmIJ,CC/HE,kDAEE,eAAA,CADA,YDkIJ,CDfE,uCArEE,yDAAA,CAPF,6BCgGF,CDhBE,qCAlEA,MAAA,CCoFF,6BAEA,CDhBE,uCA5DA,kDALW,CAQT,sDAAA,CA3BF,qDCyGF,CDfE,wCAnFE,yDAAA,CAPF,6BC8GF,CDhBE,sCCmBF,MAAA,CDjHE,6BCkHF,CDhBE,wCA1EA,kDAAA,CAGE,sDAAA,CA3BF,qDCuHF,CF7CA,uBC8BE,kBCmBF,CDjBE,yCCoBF,aAAA,CDnBI,WCoBJ,CDhBE,mDACE,YAAA,CACA,MAAA,CACA,qBCkBJ,CFtDA,oBCyCE,iBCiBF,CDfE,wCAQE,0EAAA,CADA,qCAAA,CAJA,YAAA,CAEA,qBAAA,CAHA,OAAA,CCkBJ,wBAAA,CDdI,+BAAA,CALA,iBCwBJ,CDfI,mLAGE,aCiBN,CFpEA,oBCxGE,2DAAA,CAGE,kDC8KJ,CFnEE,sCACE,+CEqEJ,CFlEE,wCACE,+CEoEJ,CFhEA,oBCvHE,2DAAA,CAGE,kDCyLJ,CF/DE,sCACE,+CEiEJ,CF9DE,wCACE,+CEgEJ,CF5DA,kBCtIE,yDAAA,CAGE,gDCoMJ,CF3DE,oCACE,6CE6DJ,CF1DE,sCACE,6CE4DJ,CFxDA,iBCrJE,wDAAA,CAGE,+CC+MJ,CFvDE,mCACE,4CEyDJ,CFtDE,qCACE,4CEwDJ","file":"card.min.css","sourcesContent":["// Card component styles\n// Provides styling for the IVDS card component with all variants, sections, and states\n\n@use '_card-mixin' as card;\n\n// Card Base\n.ivds-card {\n  @include card.card-base;\n  @include card.card-variant(\n    var(--ivds-surface-base, #fff),\n    var(--ivds-border-subtle, #e2e7ec),\n    none\n  );\n  \n  // Card sections\n  &__header {\n    @include card.card-header;\n  }\n  \n  &__body {\n    @include card.card-body;\n  }\n  \n  &__footer {\n    @include card.card-footer;\n  }\n  \n  &__media {\n    @include card.card-media;\n  }\n  \n  // Card content elements\n  &__title {\n    @include card.card-title;\n  }\n  \n  &__subtitle {\n    @include card.card-subtitle;\n  }\n  \n  &__content {\n    @include card.card-content;\n  }\n  \n  &__actions {\n    @include card.card-actions;\n  }\n  \n  // Content wrapper for horizontal cards\n  &__content-wrapper {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n  }\n  \n  // Overlay for media cards\n  &__overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: linear-gradient(to bottom, rgba(var(--ivds-overlay-rgb, 18, 26, 36), 0.08) 0%, rgba(var(--ivds-overlay-rgb, 18, 26, 36), 0.82) 100%);\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    padding: var(--spacing-6, 1.5rem);\n    color: var(--ivds-text-on-strong, #fff);\n    \n    .ivds-card__title,\n    .ivds-card__subtitle,\n    .ivds-card__content {\n      color: inherit;\n    }\n  }\n}\n\n// Card Variants\n.ivds-card--flat {\n  @include card.card-variant(\n    var(--ivds-surface-base, #fff),\n    transparent,\n    none\n  );\n}\n\n.ivds-card--bordered {\n  @include card.card-variant(\n    var(--ivds-surface-base, #fff),\n    var(--ivds-border-strong, #a1adba),\n    none\n  );\n}\n\n.ivds-card--elevated {\n  @include card.card-variant(\n    var(--ivds-surface-base, #fff),\n    var(--ivds-border-subtle, #e2e7ec),\n    var(--ivds-shadow-md, 0 1px 2px rgba(7, 11, 16, 0.12))\n  );\n}\n\n.ivds-card--floating {\n  @include card.card-variant(\n    var(--ivds-surface-base, #fff),\n    transparent,\n    var(--ivds-shadow-lg, 0 4px 10px rgba(7, 11, 16, 0.14))\n  );\n}\n\n// Interactive card\n.ivds-card--interactive {\n  @include card.card-interactive;\n}\n\n// Card sizes\n.ivds-card--compact {\n  @include card.card-compact;\n}\n\n.ivds-card--spacious {\n  @include card.card-spacious;\n}\n\n// Card layouts\n.ivds-card--horizontal {\n  @include card.card-horizontal;\n}\n\n.ivds-card--overlay {\n  @include card.card-overlay;\n}\n\n// Card semantic variants\n.ivds-card--success {\n  @include card.card-variant(\n    var(--color-semantic-success-50, #edf9f4),\n    var(--color-ui-success-200, #b8e9d2)\n  );\n  \n  .ivds-card__title {\n    color: var(--color-semantic-success-700, #0a573a);\n  }\n  \n  .ivds-card__content {\n    color: var(--color-semantic-success-600, #0f6f4a);\n  }\n}\n\n.ivds-card--warning {\n  @include card.card-variant(\n    var(--color-semantic-warning-50, #fff8eb),\n    var(--color-ui-warning-200, #f6d6a7)\n  );\n  \n  .ivds-card__title {\n    color: var(--color-semantic-warning-700, #834b08);\n  }\n  \n  .ivds-card__content {\n    color: var(--color-semantic-warning-600, #a76009);\n  }\n}\n\n.ivds-card--error {\n  @include card.card-variant(\n    var(--color-semantic-error-50, #fff1f2),\n    var(--color-ui-error-200, #f2b8c1)\n  );\n  \n  .ivds-card__title {\n    color: var(--color-semantic-error-700, #922036);\n  }\n  \n  .ivds-card__content {\n    color: var(--color-semantic-error-600, #b72a41);\n  }\n}\n\n.ivds-card--info {\n  @include card.card-variant(\n    var(--color-semantic-info-50, #edf4ff),\n    var(--color-ui-info-200, #bfd7ff)\n  );\n  \n  .ivds-card__title {\n    color: var(--color-semantic-info-700, #003d99);\n  }\n  \n  .ivds-card__content {\n    color: var(--color-semantic-info-600, #0050c8);\n  }\n}\n","// Card component mixins and private styles\n/* stylelint-disable no-descending-specificity */\n\n@use '../../base/focus' as *;\n\n@mixin card-base {\n  // Per-component CSS variable API\n  --background-color: var(--ivds-surface-base, #fff);\n  --border-color: var(--ivds-border-subtle, #e2e7ec);\n  --border-radius: var(--ivds-radius-m, 0.25rem);\n  --box-shadow: none;\n  --padding: var(--spacing-6, 1.5rem);\n  --hover-border-color: var(--color-brand-accent-500, #1a6bdb);\n  --hover-box-shadow: var(--ivds-shadow-md, 0 1px 2px rgba(7, 11, 16, 0.12));\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  overflow: hidden;\n  background-color: var(--background-color);\n  border: 1px solid var(--border-color);\n  border-radius: var(--border-radius);\n  box-shadow: var(--box-shadow);\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}\n\n@mixin card-variant($bg-color, $border-color: null, $shadow: null) {\n  --background-color: #{$bg-color};\n\n  @if $border-color {\n    --border-color: #{$border-color};\n  }\n\n  @if $shadow {\n    --box-shadow: #{$shadow};\n  }\n}\n\n@mixin card-variant-glass {\n  background: rgba(255, 255, 255, 0.92);\n  border-color: var(--ivds-border-subtle, #e2e7ec);\n}\n\n@mixin card-variant-raised {\n  box-shadow: var(--ivds-shadow-md, 0 1px 2px rgba(7, 11, 16, 0.12));\n}\n\n@mixin card-section($padding: var(--spacing-6, 1.5rem)) {\n  padding: $padding;\n}\n\n@mixin card-header($padding: var(--spacing-6, 1.5rem), $border-bottom: true) {\n  @include card-section($padding);\n\n  @if $border-bottom {\n    border-bottom: 1px solid var(--ivds-border-subtle, #e2e7ec);\n  }\n}\n\n@mixin card-body($padding: var(--spacing-6, 1.5rem)) {\n  @include card-section($padding);\n\n  flex: 1;\n}\n\n@mixin card-footer(\n  $padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem),\n  $bg-color: var(--ivds-surface-muted, #f1f3f5),\n  $border-top: true\n) {\n  @include card-section($padding);\n\n  background-color: $bg-color;\n\n  @if $border-top {\n    border-top: 1px solid var(--ivds-border-subtle, #e2e7ec);\n  }\n}\n\n@mixin card-media {\n  position: relative;\n  overflow: hidden;\n\n  img,\n  video {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n    transition: transform var(--ivds-motion-normal, 250ms) var(--ivds-motion-ease, ease);\n  }\n}\n\n@mixin card-title($font-size: var(--fontSize-xl, 1.25rem), $font-weight: var(--fontWeight-semibold, 600)) {\n  margin: 0 0 var(--spacing-1, 0.25rem);\n  color: var(--ivds-text-primary, #121a24);\n  font-size: $font-size;\n  font-weight: $font-weight;\n  line-height: var(--lineHeight-tight, 1.25);\n}\n\n@mixin card-subtitle($font-size: var(--fontSize-sm, 0.875rem)) {\n  margin: 0 0 var(--spacing-4, 1rem);\n  color: var(--ivds-text-muted, #4d5968);\n  font-size: $font-size;\n  font-weight: var(--fontWeight-medium, 500);\n}\n\n@mixin card-content {\n  margin: 0;\n  color: var(--ivds-text-secondary, #36414f);\n  line-height: var(--lineHeight-relaxed, 1.625);\n}\n\n@mixin card-actions($justify: flex-start, $gap: var(--spacing-3, 0.75rem)) {\n  display: flex;\n  align-items: center;\n  justify-content: $justify;\n  flex-wrap: wrap;\n  gap: $gap;\n  margin-top: var(--spacing-4, 1rem);\n}\n\n@mixin card-compact {\n  .ivds-card__header {\n    @include card-header(var(--spacing-4, 1rem));\n  }\n\n  .ivds-card__body {\n    @include card-body(var(--spacing-4, 1rem));\n  }\n\n  .ivds-card__footer {\n    @include card-footer(var(--spacing-3, 0.75rem) var(--spacing-4, 1rem));\n  }\n}\n\n@mixin card-spacious {\n  .ivds-card__header {\n    @include card-header(var(--spacing-8, 2rem));\n  }\n\n  .ivds-card__body {\n    @include card-body(var(--spacing-8, 2rem));\n  }\n\n  .ivds-card__footer {\n    @include card-footer(var(--spacing-6, 1.5rem) var(--spacing-8, 2rem));\n  }\n}\n\n@mixin card-horizontal {\n  flex-direction: row;\n\n  .ivds-card__media {\n    width: 220px;\n    flex-shrink: 0;\n  }\n\n  .ivds-card__content-wrapper {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n  }\n}\n\n@mixin card-overlay {\n  position: relative;\n\n  .ivds-card__overlay {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    justify-content: flex-end;\n    flex-direction: column;\n    padding: var(--spacing-6, 1.5rem);\n    color: var(--ivds-text-on-strong, #fff);\n    background: linear-gradient(to bottom, rgba(18, 26, 36, 0.08) 0%, rgba(18, 26, 36, 0.82) 100%);\n\n    .ivds-card__title,\n    .ivds-card__subtitle,\n    .ivds-card__content {\n      color: inherit;\n    }\n  }\n}\n\n@mixin card-interactive {\n  cursor: pointer;\n\n  &:hover {\n    border-color: var(--hover-border-color);\n    box-shadow: var(--hover-box-shadow);\n\n    .ivds-card__media img {\n      transform: scale(1.01);\n    }\n  }\n\n  &:active {\n    box-shadow: var(--ivds-shadow-sm, 0 1px 0 rgba(7, 11, 16, 0.10));\n  }\n\n  @include focus-ring;\n}\n","// Card component styles\n// Provides styling for the IVDS card component with all variants, sections, and states\n\n@use '_card-mixin' as card;\n\n// Card Base\n.ivds-card {\n  @include card.card-base;\n  @include card.card-variant(\n    var(--ivds-surface-base, #fff),\n    var(--ivds-border-subtle, #e2e7ec),\n    none\n  );\n  \n  // Card sections\n  &__header {\n    @include card.card-header;\n  }\n  \n  &__body {\n    @include card.card-body;\n  }\n  \n  &__footer {\n    @include card.card-footer;\n  }\n  \n  &__media {\n    @include card.card-media;\n  }\n  \n  // Card content elements\n  &__title {\n    @include card.card-title;\n  }\n  \n  &__subtitle {\n    @include card.card-subtitle;\n  }\n  \n  &__content {\n    @include card.card-content;\n  }\n  \n  &__actions {\n    @include card.card-actions;\n  }\n  \n  // Content wrapper for horizontal cards\n  &__content-wrapper {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n  }\n  \n  // Overlay for media cards\n  &__overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: linear-gradient(to bottom, rgba(var(--ivds-overlay-rgb, 18, 26, 36), 0.08) 0%, rgba(var(--ivds-overlay-rgb, 18, 26, 36), 0.82) 100%);\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    padding: var(--spacing-6, 1.5rem);\n    color: var(--ivds-text-on-strong, #fff);\n    \n    .ivds-card__title,\n    .ivds-card__subtitle,\n    .ivds-card__content {\n      color: inherit;\n    }\n  }\n}\n\n// Card Variants\n.ivds-card--flat {\n  @include card.card-variant(\n    var(--ivds-surface-base, #fff),\n    transparent,\n    none\n  );\n}\n\n.ivds-card--bordered {\n  @include card.card-variant(\n    var(--ivds-surface-base, #fff),\n    var(--ivds-border-strong, #a1adba),\n    none\n  );\n}\n\n.ivds-card--elevated {\n  @include card.card-variant(\n    var(--ivds-surface-base, #fff),\n    var(--ivds-border-subtle, #e2e7ec),\n    var(--ivds-shadow-md, 0 1px 2px rgba(7, 11, 16, 0.12))\n  );\n}\n\n.ivds-card--floating {\n  @include card.card-variant(\n    var(--ivds-surface-base, #fff),\n    transparent,\n    var(--ivds-shadow-lg, 0 4px 10px rgba(7, 11, 16, 0.14))\n  );\n}\n\n// Interactive card\n.ivds-card--interactive {\n  @include card.card-interactive;\n}\n\n// Card sizes\n.ivds-card--compact {\n  @include card.card-compact;\n}\n\n.ivds-card--spacious {\n  @include card.card-spacious;\n}\n\n// Card layouts\n.ivds-card--horizontal {\n  @include card.card-horizontal;\n}\n\n.ivds-card--overlay {\n  @include card.card-overlay;\n}\n\n// Card semantic variants\n.ivds-card--success {\n  @include card.card-variant(\n    var(--color-semantic-success-50, #edf9f4),\n    var(--color-ui-success-200, #b8e9d2)\n  );\n  \n  .ivds-card__title {\n    color: var(--color-semantic-success-700, #0a573a);\n  }\n  \n  .ivds-card__content {\n    color: var(--color-semantic-success-600, #0f6f4a);\n  }\n}\n\n.ivds-card--warning {\n  @include card.card-variant(\n    var(--color-semantic-warning-50, #fff8eb),\n    var(--color-ui-warning-200, #f6d6a7)\n  );\n  \n  .ivds-card__title {\n    color: var(--color-semantic-warning-700, #834b08);\n  }\n  \n  .ivds-card__content {\n    color: var(--color-semantic-warning-600, #a76009);\n  }\n}\n\n.ivds-card--error {\n  @include card.card-variant(\n    var(--color-semantic-error-50, #fff1f2),\n    var(--color-ui-error-200, #f2b8c1)\n  );\n  \n  .ivds-card__title {\n    color: var(--color-semantic-error-700, #922036);\n  }\n  \n  .ivds-card__content {\n    color: var(--color-semantic-error-600, #b72a41);\n  }\n}\n\n.ivds-card--info {\n  @include card.card-variant(\n    var(--color-semantic-info-50, #edf4ff),\n    var(--color-ui-info-200, #bfd7ff)\n  );\n  \n  .ivds-card__title {\n    color: var(--color-semantic-info-700, #003d99);\n  }\n  \n  .ivds-card__content {\n    color: var(--color-semantic-info-600, #0050c8);\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/checkbox/_checkbox-mixin.scss

@@ -0,0 +1,92 @@
+// Checkbox component mixins and private styles
+/* stylelint-disable no-descending-specificity */
+
+@use '../../base/focus' as *;
+
+@mixin checkbox-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);
+
+  &:hover .ivds-checkbox__box {
+    border-color: var(--color-brand-accent-600, #1058b8);
+  }
+}
+
+@mixin checkbox-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+@mixin checkbox-box($size: 20px) {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: $size;
+  height: $size;
+  border: 2px solid var(--ivds-border-strong, #a1adba);
+  border-radius: var(--ivds-radius-xs, 0);
+  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),
+    box-shadow var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+
+  &::after {
+    content: '';
+    width: 9px;
+    height: 5px;
+    border: 2px solid #fff;
+    border-top: none;
+    border-right: none;
+    transform: rotate(-45deg) scale(0);
+    transform-origin: center;
+    transition: transform var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+  }
+}
+
+@mixin checkbox-checked {
+  border-color: var(--color-brand-accent-600, #1058b8);
+  background-color: var(--color-brand-accent-600, #1058b8);
+
+  &::after {
+    transform: rotate(-45deg) scale(1);
+  }
+}
+
+@mixin checkbox-indeterminate {
+  border-color: var(--color-brand-accent-600, #1058b8);
+  background-color: var(--color-brand-accent-600, #1058b8);
+
+  &::after {
+    width: 10px;
+    height: 2px;
+    border: none;
+    background-color: #fff;
+    transform: scaleX(1);
+  }
+}
+
+@mixin checkbox-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 checkbox-disabled {
+  opacity: 0.62;
+  cursor: not-allowed;
+
+  .ivds-checkbox__box {
+    border-color: var(--ivds-border-subtle, #e2e7ec);
+    background-color: var(--ivds-surface-muted, #f1f3f5);
+  }
+}