@ivds/core 0.1.1 → 1.0.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button/_button-mixin.scss","../../../src/components/button/button.scss","../../../src/components/button/button.scss%23sass","../../../src/base/_focus.scss"],"names":[],"mappings":"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","file":"button.min.css","sourcesContent":["// Button component mixins and private styles\n/* stylelint-disable no-descending-specificity, at-rule-empty-line-before */\n\n@use '../../base/focus' as *;\n\n@keyframes ivds-button-spin {\n  to {\n    transform: translate(-50%, -50%) rotate(360deg);\n  }\n}\n\n@mixin button-base {\n  // Per-component CSS variable API\n  --background-color: transparent;\n  --color: var(--ivds-text-primary, #121a24);\n  --border-color: transparent;\n  --hover-background-color: transparent;\n  --hover-border-color: transparent;\n  --active-background-color: transparent;\n  --disabled-background-color: var(--ivds-surface-muted, #f1f3f5);\n  --disabled-border-color: var(--ivds-border-subtle, #e2e7ec);\n  --disabled-color: var(--ivds-text-muted, #6b7785);\n  --font-size: var(--fontSize-base, 1rem);\n  --min-height: 48px;\n  --padding-block: var(--spacing-3, 0.75rem);\n  --padding-inline: var(--spacing-6, 1.5rem);\n  --border-radius: var(--ivds-radius-s, 0.125rem);\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--spacing-2, 0.5rem);\n  min-width: 2.75rem;\n  min-height: var(--min-height);\n  padding: var(--padding-block) var(--padding-inline);\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(--font-size);\n  font-weight: var(--fontWeight-bold, 700);\n  letter-spacing: 0.01em;\n  line-height: 1.1;\n  text-decoration: none;\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n  position: relative;\n  transition:\n    background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n  @include focus-ring;\n\n  &:hover:not(:disabled, [aria-disabled='true']) {\n    background-color: var(--hover-background-color);\n    border-color: var(--hover-border-color);\n  }\n\n  &:active:not(:disabled, [aria-disabled='true']) {\n    background-color: var(--active-background-color);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    background-color: var(--disabled-background-color);\n    border-color: var(--disabled-border-color);\n    color: var(--disabled-color);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n}\n\n@mixin button-variant(\n  $bg-color,\n  $text-color,\n  $border-color: transparent,\n  $hover-bg: null,\n  $hover-border: null,\n  $active-bg: null\n) {\n  --background-color: #{$bg-color};\n  --color: #{$text-color};\n  --border-color: #{$border-color};\n\n  @if $hover-bg {\n    --hover-background-color: #{$hover-bg};\n  }\n\n  @if $hover-border {\n    --hover-border-color: #{$hover-border};\n  }\n\n  @if $active-bg {\n    --active-background-color: #{$active-bg};\n  }\n}\n\n@mixin button-variant-gradient($gradient, $text-color: #fff, $hover-filter: brightness(0.95)) {\n  --border-color: transparent;\n  --color: #{$text-color};\n\n  background: $gradient;\n\n  &:hover:not(:disabled, [aria-disabled='true']) {\n    filter: $hover-filter;\n  }\n}\n\n@mixin button-variant-outline($border-color, $text-color, $hover-bg: null) {\n  --background-color: var(--ivds-interactive-secondary-bg, #fff);\n  --color: #{$text-color};\n  --border-color: #{$border-color};\n\n  @if $hover-bg {\n    --hover-background-color: #{$hover-bg};\n  }\n}\n\n@mixin button-variant-ghost($text-color, $hover-bg) {\n  --background-color: var(--ivds-interactive-supplementary-bg, #f1f3f5);\n  --border-color: transparent;\n  --color: #{$text-color};\n  --hover-background-color: #{$hover-bg};\n}\n\n@mixin button-variant-glass($text-color: var(--ivds-text-primary)) {\n  --background-color: var(--ivds-surface-base, #fff);\n  --border-color: var(--ivds-border-strong, #a1adba);\n  --color: #{$text-color};\n}\n\n@mixin button-size($padding-y, $padding-x, $font-size, $min-height: null) {\n  --padding-block: #{$padding-y};\n  --padding-inline: #{$padding-x};\n  --font-size: #{$font-size};\n\n  @if $min-height {\n    --min-height: #{$min-height};\n  }\n}\n\n@mixin button-icon-spacing($gap: var(--spacing-2, 0.5rem)) {\n  gap: $gap;\n\n  .ivds-button__icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n}\n\n@mixin button-loading {\n  position: relative;\n  color: transparent !important;\n  pointer-events: none;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 1rem;\n    height: 1rem;\n    border: 2px solid currentcolor;\n    border-radius: 9999px;\n    border-right-color: transparent;\n    border-bottom-color: transparent;\n    transform: translate(-50%, -50%);\n    animation: ivds-button-spin 0.7s linear infinite;\n    color: inherit;\n  }\n}\n\n@mixin button-full-width {\n  width: 100%;\n  justify-content: center;\n}\n\n@mixin button-icon-only($size: 48px) {\n  --min-height: #{$size};\n  --padding-block: 0;\n  --padding-inline: 0;\n\n  width: $size;\n  height: $size;\n\n  .ivds-button__icon {\n    margin: 0;\n  }\n\n  &--circular {\n    --border-radius: var(--borderRadius-full, 9999px);\n  }\n}\n\n@mixin button-pill {\n  border-radius: var(--borderRadius-full, 9999px);\n}\n\n","// Button component styles\n/* stylelint-disable no-descending-specificity */\n\n@use 'button-mixin' as btn;\n\n.ivds-button {\n  @include btn.button-base;\n  @include btn.button-icon-spacing;\n\n  &__icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n\n    svg {\n      width: 1.15em;\n      height: 1.15em;\n      fill: currentcolor;\n    }\n  }\n\n  &__text {\n    flex: 1;\n  }\n\n  &--loading {\n    @include btn.button-loading;\n  }\n\n  &--full-width {\n    @include btn.button-full-width;\n  }\n\n  &--pill {\n    @include btn.button-pill;\n  }\n\n  &--icon-only {\n    @include btn.button-icon-only;\n\n    &.ivds-button--small {\n      @include btn.button-icon-only(40px);\n    }\n\n    &.ivds-button--large {\n      @include btn.button-icon-only(56px);\n    }\n  }\n}\n\n.ivds-button--primary {\n  @include btn.button-variant(\n    var(--ivds-interactive-primary-bg, #1058b8),\n    var(--ivds-interactive-primary-text, #fff),\n    var(--ivds-interactive-primary-bg, #1058b8),\n    var(--ivds-interactive-primary-bg-hover, #0b4593),\n    var(--ivds-interactive-primary-bg-hover, #0b4593),\n    var(--ivds-interactive-primary-bg-active, #083775)\n  );\n}\n\n.ivds-button--secondary {\n  @include btn.button-variant-outline(\n    var(--ivds-interactive-secondary-border, #1058b8),\n    var(--ivds-interactive-secondary-text, #0b4593),\n    var(--ivds-interactive-secondary-bg-hover, #eef4ff)\n  );\n}\n\n.ivds-button--accent {\n  @include btn.button-variant(\n    var(--color-brand-accent-500, #1a6bdb),\n    #fff,\n    var(--color-brand-accent-500, #1a6bdb),\n    var(--color-brand-accent-600, #1058b8),\n    var(--color-brand-accent-600, #1058b8),\n    var(--color-brand-accent-600, #1058b8)\n  );\n}\n\n.ivds-button--success {\n  @include btn.button-variant(\n    var(--color-semantic-success-600, #0f6f4a),\n    #fff,\n    var(--color-semantic-success-600, #0f6f4a),\n    var(--color-semantic-success-700, #0a573a),\n    var(--color-semantic-success-700, #0a573a),\n    var(--color-semantic-success-700, #0a573a)\n  );\n}\n\n.ivds-button--warning {\n  @include btn.button-variant(\n    var(--color-semantic-warning-500, #ce790b),\n    #fff,\n    var(--color-semantic-warning-500, #ce790b),\n    var(--color-semantic-warning-600, #a76009),\n    var(--color-semantic-warning-600, #a76009),\n    var(--color-semantic-warning-600, #a76009)\n  );\n}\n\n.ivds-button--danger {\n  @include btn.button-variant(\n    var(--color-semantic-error-500, #d73a50),\n    #fff,\n    var(--color-semantic-error-500, #d73a50),\n    var(--color-semantic-error-600, #b72a41),\n    var(--color-semantic-error-600, #b72a41),\n    var(--color-semantic-error-600, #b72a41)\n  );\n}\n\n.ivds-button--info {\n  @include btn.button-variant(\n    var(--color-semantic-info-600, #0050c8),\n    #fff,\n    var(--color-semantic-info-600, #0050c8),\n    var(--color-semantic-info-700, #003d99),\n    var(--color-semantic-info-700, #003d99),\n    var(--color-semantic-info-700, #003d99)\n  );\n}\n\n.ivds-button--neutral {\n  @include btn.button-variant(\n    var(--color-semantic-neutral-900, #121a24),\n    #fff,\n    var(--color-semantic-neutral-900, #121a24),\n    var(--color-semantic-neutral-800, #202a36),\n    var(--color-semantic-neutral-800, #202a36),\n    var(--color-semantic-neutral-800, #202a36)\n  );\n}\n\n.ivds-button--gradient-primary {\n  @include btn.button-variant-gradient(\n    linear-gradient(135deg, var(--color-brand-accent-500, #1a6bdb) 0%, var(--color-brand-accent-700, #0b4593) 100%),\n    #fff\n  );\n}\n\n.ivds-button--gradient-secondary {\n  @include btn.button-variant-gradient(\n    linear-gradient(135deg, var(--color-brand-secondary-500, #007a4d) 0%, var(--color-brand-secondary-700, #004d31) 100%),\n    #fff\n  );\n}\n\n.ivds-button--gradient-mixed {\n  @include btn.button-variant-gradient(\n    linear-gradient(135deg, var(--color-brand-primary-500, #cc5500) 0%, var(--color-brand-accent-600, #1058b8) 100%),\n    #fff\n  );\n}\n\n.ivds-button--gradient-sunset {\n  @include btn.button-variant-gradient(\n    linear-gradient(135deg, var(--color-brand-primary-500, #cc5500) 0%, var(--color-semantic-error-600, #b72a41) 100%),\n    #fff\n  );\n}\n\n.ivds-button--gradient-ocean {\n  @include btn.button-variant-gradient(\n    linear-gradient(135deg, var(--color-brand-accent-500, #1a6bdb) 0%, var(--color-brand-accent-700, #0b4593) 100%),\n    #fff\n  );\n}\n\n.ivds-button--outline-primary {\n  @include btn.button-variant-outline(\n    var(--color-brand-accent-600, #1058b8),\n    var(--color-brand-accent-700, #0b4593),\n    var(--color-brand-accent-50, #eef4ff)\n  );\n}\n\n.ivds-button--outline-secondary {\n  @include btn.button-variant-outline(\n    var(--color-brand-secondary-600, #006640),\n    var(--color-brand-secondary-700, #005234),\n    var(--color-brand-secondary-50, #eef8f3)\n  );\n}\n\n.ivds-button--outline-neutral {\n  @include btn.button-variant-outline(\n    var(--color-semantic-neutral-500, #6b7785),\n    var(--color-semantic-neutral-800, #202a36),\n    var(--color-semantic-neutral-100, #f1f3f5)\n  );\n}\n\n.ivds-button--ghost-primary {\n  @include btn.button-variant-ghost(\n    var(--color-brand-accent-700, #0b4593),\n    var(--ivds-interactive-supplementary-bg-hover, #e2e7ec)\n  );\n}\n\n.ivds-button--ghost-secondary {\n  @include btn.button-variant-ghost(\n    var(--color-brand-secondary-700, #005234),\n    var(--color-semantic-neutral-200, #e2e7ec)\n  );\n}\n\n.ivds-button--ghost-neutral {\n  @include btn.button-variant-ghost(\n    var(--color-semantic-neutral-800, #202a36),\n    var(--color-semantic-neutral-200, #e2e7ec)\n  );\n}\n\n.ivds-button--tertiary,\n.ivds-button--supplementary {\n  @extend .ivds-button--ghost-primary;\n}\n\n.ivds-button--ghost {\n  @extend .ivds-button--ghost-neutral;\n}\n\n.ivds-button--glass {\n  @include btn.button-variant-glass(var(--ivds-text-primary, #121a24));\n}\n\n.ivds-button--glass-dark {\n  @include btn.button-variant(\n    var(--color-semantic-neutral-900, #121a24),\n    #fff,\n    var(--color-semantic-neutral-900, #121a24),\n    var(--color-semantic-neutral-800, #202a36),\n    var(--color-semantic-neutral-800, #202a36)\n  );\n}\n\n.ivds-button--xs {\n  @include btn.button-size(var(--spacing-1, 0.25rem), var(--spacing-3, 0.75rem), var(--fontSize-xs, 0.75rem), 32px);\n}\n\n.ivds-button--small {\n  @include btn.button-size(var(--spacing-2, 0.5rem), var(--spacing-4, 1rem), var(--fontSize-sm, 0.875rem), 40px);\n}\n\n.ivds-button--large {\n  @include btn.button-size(var(--spacing-4, 1rem), var(--spacing-8, 2rem), var(--fontSize-lg, 1.125rem), 56px);\n}\n\n.ivds-button--xl {\n  @include btn.button-size(var(--spacing-5, 1.25rem), var(--spacing-10, 2.5rem), var(--fontSize-xl, 1.25rem), 64px);\n}\n\n.ivds-button-group {\n  display: inline-flex;\n\n  > .ivds-button {\n    border-radius: 0;\n\n    &:not(:first-child) {\n      margin-left: -2px;\n    }\n\n    &:first-child {\n      border-top-left-radius: var(--ivds-radius-s, 0.125rem);\n      border-bottom-left-radius: var(--ivds-radius-s, 0.125rem);\n    }\n\n    &:last-child {\n      border-top-right-radius: var(--ivds-radius-s, 0.125rem);\n      border-bottom-right-radius: var(--ivds-radius-s, 0.125rem);\n    }\n  }\n}\n\n.ivds-button-group--vertical {\n  flex-direction: column;\n\n  > .ivds-button {\n    border-radius: 0;\n\n    &:not(:first-child) {\n      margin-left: 0;\n      margin-top: -2px;\n    }\n\n    &:first-child {\n      border-top-left-radius: var(--ivds-radius-s, 0.125rem);\n      border-top-right-radius: var(--ivds-radius-s, 0.125rem);\n    }\n\n    &:last-child {\n      border-bottom-left-radius: var(--ivds-radius-s, 0.125rem);\n      border-bottom-right-radius: var(--ivds-radius-s, 0.125rem);\n    }\n  }\n}\n\n.ivds-button-group--gap {\n  gap: var(--spacing-2, 0.5rem);\n\n  > .ivds-button {\n    border-radius: var(--ivds-radius-s, 0.125rem);\n    margin: 0;\n  }\n}\n","// Button component styles\n/* stylelint-disable no-descending-specificity */\n\n@use 'button-mixin' as btn;\n\n.ivds-button {\n  @include btn.button-base;\n  @include btn.button-icon-spacing;\n\n  &__icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n\n    svg {\n      width: 1.15em;\n      height: 1.15em;\n      fill: currentcolor;\n    }\n  }\n\n  &__text {\n    flex: 1;\n  }\n\n  &--loading {\n    @include btn.button-loading;\n  }\n\n  &--full-width {\n    @include btn.button-full-width;\n  }\n\n  &--pill {\n    @include btn.button-pill;\n  }\n\n  &--icon-only {\n    @include btn.button-icon-only;\n\n    &.ivds-button--small {\n      @include btn.button-icon-only(40px);\n    }\n\n    &.ivds-button--large {\n      @include btn.button-icon-only(56px);\n    }\n  }\n}\n\n.ivds-button--primary {\n  @include btn.button-variant(\n    var(--ivds-interactive-primary-bg, #1058b8),\n    var(--ivds-interactive-primary-text, #fff),\n    var(--ivds-interactive-primary-bg, #1058b8),\n    var(--ivds-interactive-primary-bg-hover, #0b4593),\n    var(--ivds-interactive-primary-bg-hover, #0b4593),\n    var(--ivds-interactive-primary-bg-active, #083775)\n  );\n}\n\n.ivds-button--secondary {\n  @include btn.button-variant-outline(\n    var(--ivds-interactive-secondary-border, #1058b8),\n    var(--ivds-interactive-secondary-text, #0b4593),\n    var(--ivds-interactive-secondary-bg-hover, #eef4ff)\n  );\n}\n\n.ivds-button--accent {\n  @include btn.button-variant(\n    var(--color-brand-accent-500, #1a6bdb),\n    #fff,\n    var(--color-brand-accent-500, #1a6bdb),\n    var(--color-brand-accent-600, #1058b8),\n    var(--color-brand-accent-600, #1058b8),\n    var(--color-brand-accent-600, #1058b8)\n  );\n}\n\n.ivds-button--success {\n  @include btn.button-variant(\n    var(--color-semantic-success-600, #0f6f4a),\n    #fff,\n    var(--color-semantic-success-600, #0f6f4a),\n    var(--color-semantic-success-700, #0a573a),\n    var(--color-semantic-success-700, #0a573a),\n    var(--color-semantic-success-700, #0a573a)\n  );\n}\n\n.ivds-button--warning {\n  @include btn.button-variant(\n    var(--color-semantic-warning-500, #ce790b),\n    #fff,\n    var(--color-semantic-warning-500, #ce790b),\n    var(--color-semantic-warning-600, #a76009),\n    var(--color-semantic-warning-600, #a76009),\n    var(--color-semantic-warning-600, #a76009)\n  );\n}\n\n.ivds-button--danger {\n  @include btn.button-variant(\n    var(--color-semantic-error-500, #d73a50),\n    #fff,\n    var(--color-semantic-error-500, #d73a50),\n    var(--color-semantic-error-600, #b72a41),\n    var(--color-semantic-error-600, #b72a41),\n    var(--color-semantic-error-600, #b72a41)\n  );\n}\n\n.ivds-button--info {\n  @include btn.button-variant(\n    var(--color-semantic-info-600, #0050c8),\n    #fff,\n    var(--color-semantic-info-600, #0050c8),\n    var(--color-semantic-info-700, #003d99),\n    var(--color-semantic-info-700, #003d99),\n    var(--color-semantic-info-700, #003d99)\n  );\n}\n\n.ivds-button--neutral {\n  @include btn.button-variant(\n    var(--color-semantic-neutral-900, #121a24),\n    #fff,\n    var(--color-semantic-neutral-900, #121a24),\n    var(--color-semantic-neutral-800, #202a36),\n    var(--color-semantic-neutral-800, #202a36),\n    var(--color-semantic-neutral-800, #202a36)\n  );\n}\n\n.ivds-button--gradient-primary {\n  @include btn.button-variant-gradient(\n    linear-gradient(135deg, var(--color-brand-accent-500, #1a6bdb) 0%, var(--color-brand-accent-700, #0b4593) 100%),\n    #fff\n  );\n}\n\n.ivds-button--gradient-secondary {\n  @include btn.button-variant-gradient(\n    linear-gradient(135deg, var(--color-brand-secondary-500, #007a4d) 0%, var(--color-brand-secondary-700, #004d31) 100%),\n    #fff\n  );\n}\n\n.ivds-button--gradient-mixed {\n  @include btn.button-variant-gradient(\n    linear-gradient(135deg, var(--color-brand-primary-500, #cc5500) 0%, var(--color-brand-accent-600, #1058b8) 100%),\n    #fff\n  );\n}\n\n.ivds-button--gradient-sunset {\n  @include btn.button-variant-gradient(\n    linear-gradient(135deg, var(--color-brand-primary-500, #cc5500) 0%, var(--color-semantic-error-600, #b72a41) 100%),\n    #fff\n  );\n}\n\n.ivds-button--gradient-ocean {\n  @include btn.button-variant-gradient(\n    linear-gradient(135deg, var(--color-brand-accent-500, #1a6bdb) 0%, var(--color-brand-accent-700, #0b4593) 100%),\n    #fff\n  );\n}\n\n.ivds-button--outline-primary {\n  @include btn.button-variant-outline(\n    var(--color-brand-accent-600, #1058b8),\n    var(--color-brand-accent-700, #0b4593),\n    var(--color-brand-accent-50, #eef4ff)\n  );\n}\n\n.ivds-button--outline-secondary {\n  @include btn.button-variant-outline(\n    var(--color-brand-secondary-600, #006640),\n    var(--color-brand-secondary-700, #005234),\n    var(--color-brand-secondary-50, #eef8f3)\n  );\n}\n\n.ivds-button--outline-neutral {\n  @include btn.button-variant-outline(\n    var(--color-semantic-neutral-500, #6b7785),\n    var(--color-semantic-neutral-800, #202a36),\n    var(--color-semantic-neutral-100, #f1f3f5)\n  );\n}\n\n.ivds-button--ghost-primary {\n  @include btn.button-variant-ghost(\n    var(--color-brand-accent-700, #0b4593),\n    var(--ivds-interactive-supplementary-bg-hover, #e2e7ec)\n  );\n}\n\n.ivds-button--ghost-secondary {\n  @include btn.button-variant-ghost(\n    var(--color-brand-secondary-700, #005234),\n    var(--color-semantic-neutral-200, #e2e7ec)\n  );\n}\n\n.ivds-button--ghost-neutral {\n  @include btn.button-variant-ghost(\n    var(--color-semantic-neutral-800, #202a36),\n    var(--color-semantic-neutral-200, #e2e7ec)\n  );\n}\n\n.ivds-button--tertiary,\n.ivds-button--supplementary {\n  @extend .ivds-button--ghost-primary;\n}\n\n.ivds-button--ghost {\n  @extend .ivds-button--ghost-neutral;\n}\n\n.ivds-button--glass {\n  @include btn.button-variant-glass(var(--ivds-text-primary, #121a24));\n}\n\n.ivds-button--glass-dark {\n  @include btn.button-variant(\n    var(--color-semantic-neutral-900, #121a24),\n    #fff,\n    var(--color-semantic-neutral-900, #121a24),\n    var(--color-semantic-neutral-800, #202a36),\n    var(--color-semantic-neutral-800, #202a36)\n  );\n}\n\n.ivds-button--xs {\n  @include btn.button-size(var(--spacing-1, 0.25rem), var(--spacing-3, 0.75rem), var(--fontSize-xs, 0.75rem), 32px);\n}\n\n.ivds-button--small {\n  @include btn.button-size(var(--spacing-2, 0.5rem), var(--spacing-4, 1rem), var(--fontSize-sm, 0.875rem), 40px);\n}\n\n.ivds-button--large {\n  @include btn.button-size(var(--spacing-4, 1rem), var(--spacing-8, 2rem), var(--fontSize-lg, 1.125rem), 56px);\n}\n\n.ivds-button--xl {\n  @include btn.button-size(var(--spacing-5, 1.25rem), var(--spacing-10, 2.5rem), var(--fontSize-xl, 1.25rem), 64px);\n}\n\n.ivds-button-group {\n  display: inline-flex;\n\n  > .ivds-button {\n    border-radius: 0;\n\n    &:not(:first-child) {\n      margin-left: -2px;\n    }\n\n    &:first-child {\n      border-top-left-radius: var(--ivds-radius-s, 0.125rem);\n      border-bottom-left-radius: var(--ivds-radius-s, 0.125rem);\n    }\n\n    &:last-child {\n      border-top-right-radius: var(--ivds-radius-s, 0.125rem);\n      border-bottom-right-radius: var(--ivds-radius-s, 0.125rem);\n    }\n  }\n}\n\n.ivds-button-group--vertical {\n  flex-direction: column;\n\n  > .ivds-button {\n    border-radius: 0;\n\n    &:not(:first-child) {\n      margin-left: 0;\n      margin-top: -2px;\n    }\n\n    &:first-child {\n      border-top-left-radius: var(--ivds-radius-s, 0.125rem);\n      border-top-right-radius: var(--ivds-radius-s, 0.125rem);\n    }\n\n    &:last-child {\n      border-bottom-left-radius: var(--ivds-radius-s, 0.125rem);\n      border-bottom-right-radius: var(--ivds-radius-s, 0.125rem);\n    }\n  }\n}\n\n.ivds-button-group--gap {\n  gap: var(--spacing-2, 0.5rem);\n\n  > .ivds-button {\n    border-radius: var(--ivds-radius-s, 0.125rem);\n    margin: 0;\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/__tests__/card-mixins.test.css

@@ -0,0 +1,28 @@
+.test-card-base {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-semantic-neutral-50, #fafafa);
+  border-radius: var(--borderRadius-xl, 0.75rem);
+  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));
+}
+
+.test-card-variant {
+  background-color: #ffffff;
+  border: var(--borderWidth-1, 1px) solid #e2e8f0;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.test-card-section {
+  padding: 1rem;
+}
+
+.test-card-interactive {
+  cursor: pointer;
+}
+
+.test-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));
+}

package/lib/components/card/__tests__/card-mixins.test.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/card/__tests__/card-mixins.test.scss%23sass","../../../../src/components/card/__tests__/card-mixins.test.scss"],"names":[],"mappings":"AAcA;EAVE,aAAA;ECFF,sBAAA;EACA,2DAAA;EDIE,8CAAA;EACA,gBAAA;EACA,qEAAA;EACA,+FAAA;ACFF;;ADUA;ECPA,yBAAA;EDSE,+CAAA;ECPF,wCDQE;ACPF;;ADUA;EACE,aAAA;ACPF;;ADUA;EACE,eAAA;ACPF;;ADSE;ECPF,2BAAA;EDSI,qGAAA;ACPJ","file":"card-mixins.test.css","sourcesContent":["// SCSS compilation test for card mixins\r\n\r\n// Base card mixin with common styles\r\n@mixin card-base {\r\n  display: flex;\r\n  flex-direction: column;\r\n  background-color: var(--color-semantic-neutral-50, #fafafa);\r\n  border-radius: var(--borderRadius-xl, 0.75rem);\r\n  overflow: hidden;\r\n  transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;\r\n  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));\r\n}\r\n\r\n// Test compilation by using the mixins\r\n.test-card-base {\r\n  @include card-base;\r\n}\r\n\r\n.test-card-variant {\r\n  background-color: #ffffff;\r\n  border: var(--borderWidth-1, 1px) solid #e2e8f0;\r\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.test-card-section {\r\n  padding: 1rem;\r\n}\r\n\r\n.test-card-interactive {\r\n  cursor: pointer;\r\n  \r\n  &:hover {\r\n    transform: translateY(-2px);\r\n    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));\r\n  }\r\n}","// SCSS compilation test for card mixins\r\n\r\n// Base card mixin with common styles\r\n@mixin card-base {\r\n  display: flex;\r\n  flex-direction: column;\r\n  background-color: var(--color-semantic-neutral-50, #fafafa);\r\n  border-radius: var(--borderRadius-xl, 0.75rem);\r\n  overflow: hidden;\r\n  transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;\r\n  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));\r\n}\r\n\r\n// Test compilation by using the mixins\r\n.test-card-base {\r\n  @include card-base;\r\n}\r\n\r\n.test-card-variant {\r\n  background-color: #ffffff;\r\n  border: var(--borderWidth-1, 1px) solid #e2e8f0;\r\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.test-card-section {\r\n  padding: 1rem;\r\n}\r\n\r\n.test-card-interactive {\r\n  cursor: pointer;\r\n  \r\n  &:hover {\r\n    transform: translateY(-2px);\r\n    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));\r\n  }\r\n}"]}

package/lib/components/card/__tests__/card-mixins.test.min.css

@@ -0,0 +1 @@
+.test-card-base{background-color:var(--color-semantic-neutral-50,#fafafa);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));display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .15s ease-in-out,transform .15s ease-in-out}.test-card-variant{background-color:#fff;border:var(--borderWidth-1,1px) solid #e2e8f0;box-shadow:0 4px 6px rgba(0,0,0,.1)}.test-card-section{padding:1rem}.test-card-interactive{cursor:pointer}.test-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)}

package/lib/components/card/__tests__/card-mixins.test.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/card/__tests__/card-mixins.test.scss%23sass","../../../../src/components/card/__tests__/card-mixins.test.scss"],"names":[],"mappings":"AAcA,gBCXA,yDAAA,CDIE,2CAAA,CAGA,oFAAA,CANA,YAAA,CCFF,qBAAA,CDME,eAAA,CACA,iECDF,CDUA,mBCPA,qBAAA,CDSE,6CAAA,CCPF,mCACA,CDUA,mBACE,YCPF,CDUA,uBACE,cCPF,CDSE,6BAEE,0FAAA,CCTJ,0BAEA","file":"card-mixins.test.min.css","sourcesContent":["// SCSS compilation test for card mixins\r\n\r\n// Base card mixin with common styles\r\n@mixin card-base {\r\n  display: flex;\r\n  flex-direction: column;\r\n  background-color: var(--color-semantic-neutral-50, #fafafa);\r\n  border-radius: var(--borderRadius-xl, 0.75rem);\r\n  overflow: hidden;\r\n  transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;\r\n  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));\r\n}\r\n\r\n// Test compilation by using the mixins\r\n.test-card-base {\r\n  @include card-base;\r\n}\r\n\r\n.test-card-variant {\r\n  background-color: #ffffff;\r\n  border: var(--borderWidth-1, 1px) solid #e2e8f0;\r\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.test-card-section {\r\n  padding: 1rem;\r\n}\r\n\r\n.test-card-interactive {\r\n  cursor: pointer;\r\n  \r\n  &:hover {\r\n    transform: translateY(-2px);\r\n    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));\r\n  }\r\n}","// SCSS compilation test for card mixins\r\n\r\n// Base card mixin with common styles\r\n@mixin card-base {\r\n  display: flex;\r\n  flex-direction: column;\r\n  background-color: var(--color-semantic-neutral-50, #fafafa);\r\n  border-radius: var(--borderRadius-xl, 0.75rem);\r\n  overflow: hidden;\r\n  transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;\r\n  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));\r\n}\r\n\r\n// Test compilation by using the mixins\r\n.test-card-base {\r\n  @include card-base;\r\n}\r\n\r\n.test-card-variant {\r\n  background-color: #ffffff;\r\n  border: var(--borderWidth-1, 1px) solid #e2e8f0;\r\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.test-card-section {\r\n  padding: 1rem;\r\n}\r\n\r\n.test-card-interactive {\r\n  cursor: pointer;\r\n  \r\n  &:hover {\r\n    transform: translateY(-2px);\r\n    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));\r\n  }\r\n}"]}

package/lib/components/{_card-mixin.scss → card/_card-mixin.scss}

@@ -1,196 +1,208 @@
-// Card component mixins and private styles
-// This file contains mixins for card variants, sections, and internal utilities
-
-@use '../../variables/variables' as vars;
-
-// Base card mixin with common styles
-@mixin card-base {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--color-semantic-neutral-50, #fafafa);
-  border-radius: var(--borderRadius-xl, 0.75rem);
-  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));
-}
-
-// Card variant mixin
-@mixin card-variant($bg-color, $border-color: null, $shadow: null) {
-  background-color: $bg-color;
-  
-  @if $border-color {
-    border: var(--borderWidth-1, 1px) solid $border-color;
-  }
-  
-  @if $shadow {
-    box-shadow: $shadow;
-  }
-}
-
-// Card section mixin
-@mixin card-section($padding: var(--spacing-6, 1.5rem)) {
-  padding: $padding;
-}
-
-// Card header mixin
-@mixin card-header($padding: var(--spacing-6, 1.5rem), $border-bottom: true) {
-  @include card-section($padding);
-  
-  @if $border-bottom {
-    border-bottom: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
-  }
-}
-
-// Card body mixin
-@mixin card-body($padding: var(--spacing-6, 1.5rem)) {
-  @include card-section($padding);
-  
-  flex: 1;
-}
-
-// Card footer mixin
-@mixin card-footer($padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem), $bg-color: var(--color-semantic-neutral-100, #f1f5f9), $border-top: true) {
-  @include card-section($padding);
-  
-  background-color: $bg-color;
-  
-  @if $border-top {
-    border-top: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
-  }
-}
-
-// Card media mixin
-@mixin card-media {
-  position: relative;
-  overflow: hidden;
-  
-  img,
-  video {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-  }
-}
-
-// Card title mixin
-@mixin card-title($font-size: var(--fontSize-lg, 1.125rem), $font-weight: var(--fontWeight-semibold, 600)) {
-  margin: 0 0 var(--spacing-2, 0.5rem) 0;
-  font-size: $font-size;
-  font-weight: $font-weight;
-  color: var(--color-semantic-neutral-900, #0f172a);
-  line-height: var(--lineHeight-tight, 1.25);
-}
-
-// Card subtitle mixin
-@mixin card-subtitle($font-size: var(--fontSize-sm, 0.875rem)) {
-  margin: 0 0 var(--spacing-3, 0.75rem) 0;
-  font-size: $font-size;
-  color: var(--color-semantic-neutral-600, #4b5563);
-  line-height: var(--lineHeight-normal, 1.5);
-}
-
-// Card content mixin
-@mixin card-content {
-  margin: 0;
-  color: var(--color-semantic-neutral-700, #334155);
-  line-height: var(--lineHeight-relaxed, 1.625);
-}
-
-// Card actions mixin
-@mixin card-actions($justify: flex-start, $gap: var(--spacing-3, 0.75rem)) {
-  display: flex;
-  align-items: center;
-  justify-content: $justify;
-  gap: $gap;
-  margin-top: var(--spacing-4, 1rem);
-}
-
-// Card interactive mixin
-@mixin card-interactive {
-  cursor: pointer;
-  
-  &: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));
-  }
-  
-  &:active {
-    transform: translateY(0);
-  }
-  
-  &:focus {
-    outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
-    outline-offset: 2px;
-  }
-}
-
-// Card size variants
-@mixin card-compact {
-  .ivds-card__header {
-    @include card-header(var(--spacing-4, 1rem));
-  }
-  
-  .ivds-card__body {
-    @include card-body(var(--spacing-4, 1rem));
-  }
-  
-  .ivds-card__footer {
-    @include card-footer(var(--spacing-3, 0.75rem) var(--spacing-4, 1rem));
-  }
-}
-
-@mixin card-spacious {
-  .ivds-card__header {
-    @include card-header(var(--spacing-8, 2rem));
-  }
-  
-  .ivds-card__body {
-    @include card-body(var(--spacing-8, 2rem));
-  }
-  
-  .ivds-card__footer {
-    @include card-footer(var(--spacing-6, 1.5rem) var(--spacing-8, 2rem));
-  }
-}
-
-// Card horizontal layout mixin
-@mixin card-horizontal {
-  flex-direction: row;
-  
-  .ivds-card__media {
-    flex-shrink: 0;
-    width: 200px;
-  }
-  
-  .ivds-card__content-wrapper {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-  }
-}
-
-// Card overlay mixin (for media cards)
-@mixin card-overlay {
-  position: relative;
-  
-  .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%);
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    padding: var(--spacing-6, 1.5rem);
-    color: var(--color-semantic-neutral-50, #f8fafc);
-    
-    .ivds-card__title,
-    .ivds-card__subtitle,
-    .ivds-card__content {
-      color: inherit;
-    }
-  }
-}
+// Card component mixins and private styles
+/* stylelint-disable no-descending-specificity */
+
+@use '../../base/focus' as *;
+
+@mixin card-base {
+  // Per-component CSS variable API
+  --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;
+  position: relative;
+  overflow: hidden;
+  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);
+}
+
+@mixin card-variant($bg-color, $border-color: null, $shadow: null) {
+  --background-color: #{$bg-color};
+
+  @if $border-color {
+    --border-color: #{$border-color};
+  }
+
+  @if $shadow {
+    --box-shadow: #{$shadow};
+  }
+}
+
+@mixin card-variant-glass {
+  background: rgba(255, 255, 255, 0.92);
+  border-color: var(--ivds-border-subtle, #e2e7ec);
+}
+
+@mixin card-variant-raised {
+  box-shadow: var(--ivds-shadow-md, 0 1px 2px rgba(7, 11, 16, 0.12));
+}
+
+@mixin card-section($padding: var(--spacing-6, 1.5rem)) {
+  padding: $padding;
+}
+
+@mixin card-header($padding: var(--spacing-6, 1.5rem), $border-bottom: true) {
+  @include card-section($padding);
+
+  @if $border-bottom {
+    border-bottom: 1px solid var(--ivds-border-subtle, #e2e7ec);
+  }
+}
+
+@mixin card-body($padding: var(--spacing-6, 1.5rem)) {
+  @include card-section($padding);
+
+  flex: 1;
+}
+
+@mixin card-footer(
+  $padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem),
+  $bg-color: var(--ivds-surface-muted, #f1f3f5),
+  $border-top: true
+) {
+  @include card-section($padding);
+
+  background-color: $bg-color;
+
+  @if $border-top {
+    border-top: 1px solid var(--ivds-border-subtle, #e2e7ec);
+  }
+}
+
+@mixin card-media {
+  position: relative;
+  overflow: hidden;
+
+  img,
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    transition: transform var(--ivds-motion-normal, 250ms) var(--ivds-motion-ease, ease);
+  }
+}
+
+@mixin card-title($font-size: var(--fontSize-xl, 1.25rem), $font-weight: var(--fontWeight-semibold, 600)) {
+  margin: 0 0 var(--spacing-1, 0.25rem);
+  color: var(--ivds-text-primary, #121a24);
+  font-size: $font-size;
+  font-weight: $font-weight;
+  line-height: var(--lineHeight-tight, 1.25);
+}
+
+@mixin card-subtitle($font-size: var(--fontSize-sm, 0.875rem)) {
+  margin: 0 0 var(--spacing-4, 1rem);
+  color: var(--ivds-text-muted, #4d5968);
+  font-size: $font-size;
+  font-weight: var(--fontWeight-medium, 500);
+}
+
+@mixin card-content {
+  margin: 0;
+  color: var(--ivds-text-secondary, #36414f);
+  line-height: var(--lineHeight-relaxed, 1.625);
+}
+
+@mixin card-actions($justify: flex-start, $gap: var(--spacing-3, 0.75rem)) {
+  display: flex;
+  align-items: center;
+  justify-content: $justify;
+  flex-wrap: wrap;
+  gap: $gap;
+  margin-top: var(--spacing-4, 1rem);
+}
+
+@mixin card-compact {
+  .ivds-card__header {
+    @include card-header(var(--spacing-4, 1rem));
+  }
+
+  .ivds-card__body {
+    @include card-body(var(--spacing-4, 1rem));
+  }
+
+  .ivds-card__footer {
+    @include card-footer(var(--spacing-3, 0.75rem) var(--spacing-4, 1rem));
+  }
+}
+
+@mixin card-spacious {
+  .ivds-card__header {
+    @include card-header(var(--spacing-8, 2rem));
+  }
+
+  .ivds-card__body {
+    @include card-body(var(--spacing-8, 2rem));
+  }
+
+  .ivds-card__footer {
+    @include card-footer(var(--spacing-6, 1.5rem) var(--spacing-8, 2rem));
+  }
+}
+
+@mixin card-horizontal {
+  flex-direction: row;
+
+  .ivds-card__media {
+    width: 220px;
+    flex-shrink: 0;
+  }
+
+  .ivds-card__content-wrapper {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+}
+
+@mixin card-overlay {
+  position: relative;
+
+  .ivds-card__overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: column;
+    padding: var(--spacing-6, 1.5rem);
+    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__title,
+    .ivds-card__subtitle,
+    .ivds-card__content {
+      color: inherit;
+    }
+  }
+}
+
+@mixin card-interactive {
+  cursor: pointer;
+
+  &:hover {
+    border-color: var(--hover-border-color);
+    box-shadow: var(--hover-box-shadow);
+
+    .ivds-card__media img {
+      transform: scale(1.01);
+    }
+  }
+
+  &:active {
+    box-shadow: var(--ivds-shadow-sm, 0 1px 0 rgba(7, 11, 16, 0.10));
+  }
+
+  @include focus-ring;
+}