@ivds/core 0.1.1 → 1.1.0

package/lib/components/pagination/pagination.css

@@ -1,18 +1,16 @@
-/* Pagination component styles*/
-/* Provides styling for the IVDS pagination component following Helsinki Design System patterns*/
 .ivds-pagination {
   --pagination-item-size: 2.5rem;
   --pagination-item-size-small: 2rem;
   --pagination-item-size-large: 3rem;
   --pagination-gap: var(--spacing-1, 0.25rem);
-  --pagination-color: var(--color-semantic-neutral-700, #404040);
-  --pagination-color-hover: var(--color-brand-primary-600, #ea580c);
-  --pagination-color-active: var(--color-semantic-neutral-50, #fafafa);
-  --pagination-bg-hover: var(--color-brand-primary-50, #fff7ed);
-  --pagination-bg-active: var(--color-brand-primary-500, #f97316);
-  --pagination-border-color: var(--color-semantic-neutral-300, #d4d4d4);
-  --pagination-border-color-hover: var(--color-brand-primary-500, #f97316);
-  --pagination-border-color-active: var(--color-brand-primary-500, #f97316);
+  --pagination-color: var(--ivds-text-secondary, #36414f);
+  --pagination-color-hover: var(--color-brand-accent-700, #0b4593);
+  --pagination-color-active: #fff;
+  --pagination-bg-hover: var(--color-brand-accent-50, #eef4ff);
+  --pagination-bg-active: var(--color-brand-accent-600, #1058b8);
+  --pagination-border-color: var(--ivds-border-strong, #a1adba);
+  --pagination-border-color-hover: var(--color-brand-accent-600, #1058b8);
+  --pagination-border-color-active: var(--color-brand-accent-600, #1058b8);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -38,18 +36,25 @@
   color: var(--pagination-color);
   text-decoration: none;
   border: var(--borderWidth-1, 1px) solid var(--pagination-border-color);
-  border-radius: var(--borderRadius-md, 0.375rem);
+  border-radius: var(--ivds-radius-s, 0.125rem);
   font-weight: var(--fontWeight-medium, 500);
   font-size: var(--fontSize-sm, 0.875rem);
   line-height: var(--lineHeight-tight, 1.25);
   transition: all 0.15s ease-in-out;
   -webkit-user-select: none;
-     -moz-user-select: none;
+             -moz-user-select: none;
           user-select: none;
 }
-.ivds-pagination__link:focus {
-  outline: 2px solid var(--color-brand-primary-500, #f97316);
-  outline-offset: 2px;
+.ivds-pagination__link: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-pagination__link:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+.ivds-pagination__link:focus-visible {
   text-decoration: none;
 }
 .ivds-pagination__link:hover:not(.ivds-pagination__link--disabled) {
@@ -67,8 +72,8 @@
   font-weight: var(--fontWeight-semibold, 600);
 }
 .ivds-pagination__link--active:hover {
-  background-color: var(--color-brand-primary-600, #ea580c);
-  border-color: var(--color-brand-primary-600, #ea580c);
+  background-color: var(--color-brand-accent-700, #0b4593);
+  border-color: var(--color-brand-accent-700, #0b4593);
   color: var(--pagination-color-active);
 }
 .ivds-pagination__link--disabled {
@@ -87,15 +92,12 @@
   justify-content: center;
   min-width: var(--pagination-item-size);
   height: var(--pagination-item-size);
-  color: var(--color-semantic-neutral-500, #737373);
+  color: var(--ivds-text-muted, #4d5968);
   font-weight: var(--fontWeight-medium, 500);
   -webkit-user-select: none;
-     -moz-user-select: none;
+             -moz-user-select: none;
           user-select: none;
 }
-.ivds-pagination {
-  /* Size variants*/
-}
 .ivds-pagination--small {
   --pagination-item-size: var(--pagination-item-size-small);
 }
@@ -110,9 +112,6 @@
   font-size: var(--fontSize-base, 1rem);
   padding: var(--spacing-3, 0.75rem);
 }
-.ivds-pagination {
-  /* Layout variants*/
-}
 .ivds-pagination--compact {
   --pagination-gap: 0;
 }
@@ -121,25 +120,22 @@
   border-right-width: 0;
 }
 .ivds-pagination--compact .ivds-pagination__link:first-child {
-  border-top-left-radius: var(--borderRadius-md, 0.375rem);
-  border-bottom-left-radius: var(--borderRadius-md, 0.375rem);
+  border-top-left-radius: var(--ivds-radius-s, 0.125rem);
+  border-bottom-left-radius: var(--ivds-radius-s, 0.125rem);
 }
 .ivds-pagination--compact .ivds-pagination__link:last-child {
-  border-top-right-radius: var(--borderRadius-md, 0.375rem);
-  border-bottom-right-radius: var(--borderRadius-md, 0.375rem);
+  border-top-right-radius: var(--ivds-radius-s, 0.125rem);
+  border-bottom-right-radius: var(--ivds-radius-s, 0.125rem);
   border-right-width: var(--borderWidth-1, 1px);
 }
 .ivds-pagination--rounded .ivds-pagination__link {
   border-radius: var(--borderRadius-full, 9999px);
 }
-.ivds-pagination {
-  /* Theme variants*/
-}
 .ivds-pagination--theme-minimal {
   --pagination-border-color: transparent;
   --pagination-border-color-hover: transparent;
   --pagination-border-color-active: transparent;
-  --pagination-bg-hover: var(--color-semantic-neutral-100, #f5f5f5);
+  --pagination-bg-hover: var(--ivds-surface-muted, #f1f3f5);
 }
 .ivds-pagination--theme-minimal .ivds-pagination__link:hover:not(.ivds-pagination__link--disabled) {
   text-decoration: underline;
@@ -151,16 +147,13 @@
 }
 .ivds-pagination--theme-dark {
   --pagination-color: var(--color-semantic-neutral-200, #e5e5e5);
-  --pagination-color-hover: var(--color-brand-primary-300, #fdba74);
+  --pagination-color-hover: var(--color-brand-accent-300, #93bcff);
   --pagination-color-active: var(--color-semantic-neutral-900, #171717);
-  --pagination-bg-hover: rgba(249, 115, 22, 0.1);
-  --pagination-bg-active: var(--color-brand-primary-400, #fb923c);
+  --pagination-bg-hover: rgba(147, 188, 255, 0.12);
+  --pagination-bg-active: var(--color-brand-accent-400, #5a96f5);
   --pagination-border-color: var(--color-semantic-neutral-600, #525252);
-  --pagination-border-color-hover: var(--color-brand-primary-400, #fb923c);
-  --pagination-border-color-active: var(--color-brand-primary-400, #fb923c);
-}
-.ivds-pagination {
-  /* Feature variants*/
+  --pagination-border-color-hover: var(--color-brand-accent-400, #5a96f5);
+  --pagination-border-color-active: var(--color-brand-accent-400, #5a96f5);
 }
 .ivds-pagination--with-icons .ivds-pagination__link--prev, .ivds-pagination--with-icons .ivds-pagination__link--next {
   display: flex;
@@ -200,10 +193,17 @@
   font-size: inherit;
   text-align: center;
 }
-.ivds-pagination--with-jumper .ivds-pagination__jumper input:focus {
-  outline: 2px solid var(--color-brand-primary-500, #f97316);
-  outline-offset: 2px;
-  border-color: var(--color-brand-primary-500, #f97316);
+.ivds-pagination--with-jumper .ivds-pagination__jumper input: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-pagination--with-jumper .ivds-pagination__jumper input:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+.ivds-pagination--with-jumper .ivds-pagination__jumper input:focus-visible {
+  border-color: var(--color-brand-accent-600, #1058b8);
 }
 @media (max-width: 640px) {
   .ivds-pagination--responsive .ivds-pagination__item:not(:first-child, :last-child, .ivds-pagination__item--active) {

package/lib/components/pagination/pagination.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/pagination/pagination.scss%23sass","../../../src/components/pagination/pagination.scss","../../../src/components/pagination/_pagination-mixins.scss","../../../src/base/_focus.scss"],"names":[],"mappings":"AAKA;ECJA,8BAAA;ECQE,kCAAA;EDNF,kCAAA;ECQE,2CAAA;EDNF,uDAAA;ECQE,gEAAA;EACA,+BAAA;EACA,4DAAA;EACA,8DAAA;EACA,6DAAA;EACA,uEAAA;EACA,wEAAA;EAEA,aAAA;EACA,mBAAA;EACA,uBAAA;ADPF;ADRE;EEoBA,aAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,gBAAA;EACA,0BAAA;ADTF;ADZE;EE0BA,aAAA;ADXF;ADXE;EE2BA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,sCAAA;EACA,mCAAA;EACA,iCAAA;EACA,8BAAA;EACA,qBAAA;EACA,sEAAA;EACA,6CAAA;EACA,0CAAA;EACA,uCAAA;EACA,0CAAA;EACA,iCAAA;EACA,yBAAA;aAAA,sBAAA;UAAA,iBAAA;ADbF;AEvCE;EACE,qHAAA;EACA,kDAAA;EACA,gBAAA;AFyCJ;AEtCE;EACE,aAAA;EACA,gBAAA;AFwCJ;ACQE;EACE,qBAAA;ADNJ;ACSE;EACE,4CAAA;EACA,kDAAA;EACA,oCAAA;ADPJ;ACUE;EACE,0BAAA;ADRJ;AD7CI;EE2DF,6CAAA;EACA,mDAAA;EACA,qCAAA;EACA,4CAAA;ADXF;ACaE;EACE,wDAAA;EACA,oDAAA;EACA,qCAAA;ADXJ;ADpDI;EEqEF,YAAA;EACA,mBAAA;EACA,oBAAA;ADdF;ACgBE;EACE,6BAAA;EACA,4CAAA;EACA,8BAAA;ADdJ;ADzDE;EE6EA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,sCAAA;EACA,mCAAA;EACA,sCAAA;EACA,0CAAA;EACA,yBAAA;aAAA,sBAAA;UAAA,iBAAA;ADjBF;AD9DE;EEwGA,yDAAA;ADvCF;ACyCE;EACE,sCAAA;EACA,kCAAA;ADvCJ;ADjEE;EE6GA,yDAAA;ADzCF;AC2CE;EACE,qCAAA;EACA,kCAAA;ADzCJ;ADnEE;EEkHA,mBAAA;AD5CF;AC8CE;EACE,gBAAA;EACA,qBAAA;AD5CJ;AC8CI;EACE,sDAAA;EACA,yDAAA;AD5CN;AC+CI;EACE,uDAAA;EACA,0DAAA;EACA,6CAAA;AD7CN;ACmDE;EACE,+CAAA;ADjDJ;AD7EE;EEoIA,sCAAA;EACA,4CAAA;EACA,6CAAA;EACA,yDAAA;ADpDF;ACuDI;EACE,0BAAA;ADrDN;ACwDI;EACE,0BAAA;EACA,8BAAA;EACA,0BAAA;ADtDN;ADvFE;EEmJA,8DAAA;EACA,gEAAA;EACA,qEAAA;EACA,gDAAA;EACA,8DAAA;EACA,qEAAA;EACA,uEAAA;EACA,wEAAA;ADzDF;AC+DI;EAlGF,aAAA;EACA,mBAAA;EACA,6BAAA;EACA,2DAAA;ADsCF;ACpCE;EACE,WAAA;EACA,YAAA;EACA,cAAA;ADsCJ;ACpCI;EACE,WAAA;EACA,YAAA;EACA,kBAAA;ADsCN;ACwDE;EACE,gCAAA;EACA,uCAAA;EACA,iDAAA;EACA,mBAAA;ADtDJ;AC4DE;EACE,aAAA;EACA,mBAAA;EACA,6BAAA;EACA,mCAAA;EACA,uCAAA;EACA,iDAAA;AD1DJ;AC4DI;EACE,WAAA;EACA,2DAAA;EACA,sEAAA;EACA,8CAAA;EACA,kBAAA;EACA,kBAAA;AD1DN;AEzLE;EACE,qHAAA;EACA,kDAAA;EACA,gBAAA;AF2LJ;AExLE;EACE,aAAA;EACA,gBAAA;AF0LJ;ACqDM;EACE,oDAAA;ADnDR;AC2DE;EAEI;IACE,aAAA;ED1DN;EC6DI;IACE,aAAA;ED3DN;EC+DE;IACE,aAAA;ED7DJ;ECgEE;IACE,aAAA;ED9DJ;AACF","file":"pagination.css","sourcesContent":["// Pagination component styles\r\n// Provides styling for the IVDS pagination component following Helsinki Design System patterns\r\n\r\n@use 'pagination-mixins' as pagination;\r\n\r\n.ivds-pagination {\r\n  @include pagination.pagination-base;\r\n  \r\n  &__list {\r\n    @include pagination.pagination-list;\r\n  }\r\n  \r\n  &__item {\r\n    @include pagination.pagination-item;\r\n  }\r\n  \r\n  &__link {\r\n    @include pagination.pagination-link;\r\n    \r\n    &--active {\r\n      @include pagination.pagination-link-active;\r\n    }\r\n    \r\n    &--disabled {\r\n      @include pagination.pagination-link-disabled;\r\n    }\r\n  }\r\n  \r\n  &__ellipsis {\r\n    @include pagination.pagination-ellipsis;\r\n  }\r\n  \r\n  // Size variants\r\n  &--small {\r\n    @include pagination.pagination-small;\r\n  }\r\n  \r\n  &--large {\r\n    @include pagination.pagination-large;\r\n  }\r\n  \r\n  // Layout variants\r\n  &--compact {\r\n    @include pagination.pagination-compact;\r\n  }\r\n  \r\n  &--rounded {\r\n    @include pagination.pagination-rounded;\r\n  }\r\n  \r\n  // Theme variants\r\n  &--theme-minimal {\r\n    @include pagination.pagination-theme-minimal;\r\n  }\r\n  \r\n  &--theme-dark {\r\n    @include pagination.pagination-theme-dark;\r\n  }\r\n  \r\n  // Feature variants\r\n  &--with-icons {\r\n    @include pagination.pagination-with-icons;\r\n  }\r\n  \r\n  &--with-info {\r\n    @include pagination.pagination-with-info;\r\n  }\r\n  \r\n  &--with-jumper {\r\n    @include pagination.pagination-with-jumper;\r\n  }\r\n  \r\n  &--responsive {\r\n    @include pagination.pagination-responsive;\r\n  }\r\n}","// Pagination component styles\r\n// Provides styling for the IVDS pagination component following Helsinki Design System patterns\r\n\r\n@use 'pagination-mixins' as pagination;\r\n\r\n.ivds-pagination {\r\n  @include pagination.pagination-base;\r\n  \r\n  &__list {\r\n    @include pagination.pagination-list;\r\n  }\r\n  \r\n  &__item {\r\n    @include pagination.pagination-item;\r\n  }\r\n  \r\n  &__link {\r\n    @include pagination.pagination-link;\r\n    \r\n    &--active {\r\n      @include pagination.pagination-link-active;\r\n    }\r\n    \r\n    &--disabled {\r\n      @include pagination.pagination-link-disabled;\r\n    }\r\n  }\r\n  \r\n  &__ellipsis {\r\n    @include pagination.pagination-ellipsis;\r\n  }\r\n  \r\n  // Size variants\r\n  &--small {\r\n    @include pagination.pagination-small;\r\n  }\r\n  \r\n  &--large {\r\n    @include pagination.pagination-large;\r\n  }\r\n  \r\n  // Layout variants\r\n  &--compact {\r\n    @include pagination.pagination-compact;\r\n  }\r\n  \r\n  &--rounded {\r\n    @include pagination.pagination-rounded;\r\n  }\r\n  \r\n  // Theme variants\r\n  &--theme-minimal {\r\n    @include pagination.pagination-theme-minimal;\r\n  }\r\n  \r\n  &--theme-dark {\r\n    @include pagination.pagination-theme-dark;\r\n  }\r\n  \r\n  // Feature variants\r\n  &--with-icons {\r\n    @include pagination.pagination-with-icons;\r\n  }\r\n  \r\n  &--with-info {\r\n    @include pagination.pagination-with-info;\r\n  }\r\n  \r\n  &--with-jumper {\r\n    @include pagination.pagination-with-jumper;\r\n  }\r\n  \r\n  &--responsive {\r\n    @include pagination.pagination-responsive;\r\n  }\r\n}","// Pagination component mixins and private styles\r\n// This file contains mixins for pagination variants and internal utilities\r\n\r\n@use '../../variables/variables' as vars;\r\n@use '../../base/focus' as *;\r\n\r\n// Base pagination mixin with common styles\r\n@mixin pagination-base {\r\n  --pagination-item-size: 2.5rem;\r\n  --pagination-item-size-small: 2rem;\r\n  --pagination-item-size-large: 3rem;\r\n  --pagination-gap: var(--spacing-1, 0.25rem);\r\n  --pagination-color: var(--ivds-text-secondary, #36414f);\r\n  --pagination-color-hover: var(--color-brand-accent-700, #0b4593);\r\n  --pagination-color-active: #fff;\r\n  --pagination-bg-hover: var(--color-brand-accent-50, #eef4ff);\r\n  --pagination-bg-active: var(--color-brand-accent-600, #1058b8);\r\n  --pagination-border-color: var(--ivds-border-strong, #a1adba);\r\n  --pagination-border-color-hover: var(--color-brand-accent-600, #1058b8);\r\n  --pagination-border-color-active: var(--color-brand-accent-600, #1058b8);\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n// Pagination list mixin\r\n@mixin pagination-list {\r\n  display: flex;\r\n  align-items: center;\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n  gap: var(--pagination-gap);\r\n}\r\n\r\n// Pagination item mixin\r\n@mixin pagination-item {\r\n  display: flex;\r\n}\r\n\r\n// Pagination link mixin\r\n@mixin pagination-link {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: var(--pagination-item-size);\r\n  height: var(--pagination-item-size);\r\n  padding: var(--spacing-2, 0.5rem);\r\n  color: var(--pagination-color);\r\n  text-decoration: none;\r\n  border: var(--borderWidth-1, 1px) solid var(--pagination-border-color);\r\n  border-radius: var(--ivds-radius-s, 0.125rem);\r\n  font-weight: var(--fontWeight-medium, 500);\r\n  font-size: var(--fontSize-sm, 0.875rem);\r\n  line-height: var(--lineHeight-tight, 1.25);\r\n  transition: all 0.15s ease-in-out;\r\n  user-select: none;\r\n  \r\n  @include focus-ring;\r\n\r\n  &:focus-visible {\r\n    text-decoration: none;\r\n  }\r\n  \r\n  &:hover:not(.ivds-pagination__link--disabled) {\r\n    background-color: var(--pagination-bg-hover);\r\n    border-color: var(--pagination-border-color-hover);\r\n    color: var(--pagination-color-hover);\r\n  }\r\n  \r\n  &:active:not(.ivds-pagination__link--disabled) {\r\n    transform: translateY(1px);\r\n  }\r\n}\r\n\r\n// Active pagination link mixin\r\n@mixin pagination-link-active {\r\n  background-color: var(--pagination-bg-active);\r\n  border-color: var(--pagination-border-color-active);\r\n  color: var(--pagination-color-active);\r\n  font-weight: var(--fontWeight-semibold, 600);\r\n  \r\n  &:hover {\r\n    background-color: var(--color-brand-accent-700, #0b4593);\r\n    border-color: var(--color-brand-accent-700, #0b4593);\r\n    color: var(--pagination-color-active);\r\n  }\r\n}\r\n\r\n// Disabled pagination link mixin\r\n@mixin pagination-link-disabled {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n  \r\n  &:hover {\r\n    background-color: transparent;\r\n    border-color: var(--pagination-border-color);\r\n    color: var(--pagination-color);\r\n  }\r\n}\r\n\r\n// Pagination ellipsis mixin\r\n@mixin pagination-ellipsis {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: var(--pagination-item-size);\r\n  height: var(--pagination-item-size);\r\n  color: var(--ivds-text-muted, #4d5968);\r\n  font-weight: var(--fontWeight-medium, 500);\r\n  user-select: none;\r\n}\r\n\r\n// Pagination navigation buttons (prev/next)\r\n@mixin pagination-nav-button {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-2, 0.5rem);\r\n  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);\r\n  \r\n  .ivds-pagination__icon {\r\n    width: 1rem;\r\n    height: 1rem;\r\n    flex-shrink: 0;\r\n    \r\n    svg {\r\n      width: 100%;\r\n      height: 100%;\r\n      fill: currentcolor;\r\n    }\r\n  }\r\n}\r\n\r\n// Pagination size variants\r\n@mixin pagination-small {\r\n  --pagination-item-size: var(--pagination-item-size-small);\r\n  \r\n  .ivds-pagination__link {\r\n    font-size: var(--fontSize-xs, 0.75rem);\r\n    padding: var(--spacing-1, 0.25rem);\r\n  }\r\n}\r\n\r\n@mixin pagination-large {\r\n  --pagination-item-size: var(--pagination-item-size-large);\r\n  \r\n  .ivds-pagination__link {\r\n    font-size: var(--fontSize-base, 1rem);\r\n    padding: var(--spacing-3, 0.75rem);\r\n  }\r\n}\r\n\r\n// Pagination layout variants\r\n@mixin pagination-compact {\r\n  --pagination-gap: 0;\r\n  \r\n  .ivds-pagination__link {\r\n    border-radius: 0;\r\n    border-right-width: 0;\r\n    \r\n    &:first-child {\r\n      border-top-left-radius: var(--ivds-radius-s, 0.125rem);\r\n      border-bottom-left-radius: var(--ivds-radius-s, 0.125rem);\r\n    }\r\n    \r\n    &:last-child {\r\n      border-top-right-radius: var(--ivds-radius-s, 0.125rem);\r\n      border-bottom-right-radius: var(--ivds-radius-s, 0.125rem);\r\n      border-right-width: var(--borderWidth-1, 1px);\r\n    }\r\n  }\r\n}\r\n\r\n@mixin pagination-rounded {\r\n  .ivds-pagination__link {\r\n    border-radius: var(--borderRadius-full, 9999px);\r\n  }\r\n}\r\n\r\n// Pagination theme variants\r\n@mixin pagination-theme-minimal {\r\n  --pagination-border-color: transparent;\r\n  --pagination-border-color-hover: transparent;\r\n  --pagination-border-color-active: transparent;\r\n  --pagination-bg-hover: var(--ivds-surface-muted, #f1f3f5);\r\n  \r\n  .ivds-pagination__link {\r\n    &:hover:not(.ivds-pagination__link--disabled) {\r\n      text-decoration: underline;\r\n    }\r\n    \r\n    &--active {\r\n      text-decoration: underline;\r\n      text-decoration-thickness: 2px;\r\n      text-underline-offset: 4px;\r\n    }\r\n  }\r\n}\r\n\r\n@mixin pagination-theme-dark {\r\n  --pagination-color: var(--color-semantic-neutral-200, #e5e5e5);\r\n  --pagination-color-hover: var(--color-brand-accent-300, #93bcff);\r\n  --pagination-color-active: var(--color-semantic-neutral-900, #171717);\r\n  --pagination-bg-hover: rgba(147, 188, 255, 0.12);\r\n  --pagination-bg-active: var(--color-brand-accent-400, #5a96f5);\r\n  --pagination-border-color: var(--color-semantic-neutral-600, #525252);\r\n  --pagination-border-color-hover: var(--color-brand-accent-400, #5a96f5);\r\n  --pagination-border-color-active: var(--color-brand-accent-400, #5a96f5);\r\n}\r\n\r\n// Pagination with icons\r\n@mixin pagination-with-icons {\r\n  .ivds-pagination__link {\r\n    &--prev,\r\n    &--next {\r\n      @include pagination-nav-button;\r\n    }\r\n  }\r\n}\r\n\r\n// Pagination info display\r\n@mixin pagination-with-info {\r\n  .ivds-pagination__info {\r\n    margin: 0 var(--spacing-4, 1rem);\r\n    font-size: var(--fontSize-sm, 0.875rem);\r\n    color: var(--color-semantic-neutral-600, #525252);\r\n    white-space: nowrap;\r\n  }\r\n}\r\n\r\n// Pagination jump to page\r\n@mixin pagination-with-jumper {\r\n  .ivds-pagination__jumper {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--spacing-2, 0.5rem);\r\n    margin-left: var(--spacing-4, 1rem);\r\n    font-size: var(--fontSize-sm, 0.875rem);\r\n    color: var(--color-semantic-neutral-600, #525252);\r\n    \r\n    input {\r\n      width: 3rem;\r\n      padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);\r\n      border: var(--borderWidth-1, 1px) solid var(--pagination-border-color);\r\n      border-radius: var(--borderRadius-sm, 0.25rem);\r\n      font-size: inherit;\r\n      text-align: center;\r\n      \r\n      @include focus-ring;\r\n\r\n      &:focus-visible {\r\n        border-color: var(--color-brand-accent-600, #1058b8);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n// Responsive pagination behavior\r\n@mixin pagination-responsive {\r\n  @media (max-width: 640px) {\r\n    .ivds-pagination__item {\r\n      &:not(:first-child, :last-child, .ivds-pagination__item--active) {\r\n        display: none;\r\n      }\r\n      \r\n      &--ellipsis {\r\n        display: none;\r\n      }\r\n    }\r\n    \r\n    .ivds-pagination__info {\r\n      display: none;\r\n    }\r\n    \r\n    .ivds-pagination__jumper {\r\n      display: none;\r\n    }\r\n  }\r\n}\r\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/pagination/pagination.min.css

@@ -1 +1 @@
-.ivds-pagination{--pagination-item-size:2.5rem;--pagination-item-size-small:2rem;--pagination-item-size-large:3rem;--pagination-gap:var(--spacing-1,0.25rem);--pagination-color:var(--color-semantic-neutral-700,#404040);--pagination-color-hover:var(--color-brand-primary-600,#ea580c);--pagination-color-active:var(--color-semantic-neutral-50,#fafafa);--pagination-bg-hover:var(--color-brand-primary-50,#fff7ed);--pagination-bg-active:var(--color-brand-primary-500,#f97316);--pagination-border-color:var(--color-semantic-neutral-300,#d4d4d4);--pagination-border-color-hover:var(--color-brand-primary-500,#f97316);--pagination-border-color-active:var(--color-brand-primary-500,#f97316);align-items:center;display:flex;justify-content:center}.ivds-pagination__list{align-items:center;display:flex;gap:var(--pagination-gap);list-style:none;margin:0;padding:0}.ivds-pagination__item{display:flex}.ivds-pagination__link{align-items:center;border:var(--borderWidth-1,1px) solid var(--pagination-border-color);border-radius:var(--borderRadius-md,.375rem);color:var(--pagination-color);display:flex;font-size:var(--fontSize-sm,.875rem);font-weight:var(--fontWeight-medium,500);height:var(--pagination-item-size);justify-content:center;line-height:var(--lineHeight-tight,1.25);min-width:var(--pagination-item-size);padding:var(--spacing-2,.5rem);text-decoration:none;transition:all .15s ease-in-out;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ivds-pagination__link:focus{outline:2px solid var(--color-brand-primary-500,#f97316);outline-offset:2px;text-decoration:none}.ivds-pagination__link:hover:not(.ivds-pagination__link--disabled){background-color:var(--pagination-bg-hover);border-color:var(--pagination-border-color-hover);color:var(--pagination-color-hover)}.ivds-pagination__link:active:not(.ivds-pagination__link--disabled){transform:translateY(1px)}.ivds-pagination__link--active{background-color:var(--pagination-bg-active);border-color:var(--pagination-border-color-active);color:var(--pagination-color-active);font-weight:var(--fontWeight-semibold,600)}.ivds-pagination__link--active:hover{background-color:var(--color-brand-primary-600,#ea580c);border-color:var(--color-brand-primary-600,#ea580c);color:var(--pagination-color-active)}.ivds-pagination__link--disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.ivds-pagination__link--disabled:hover{background-color:transparent;border-color:var(--pagination-border-color);color:var(--pagination-color)}.ivds-pagination__ellipsis{align-items:center;color:var(--color-semantic-neutral-500,#737373);display:flex;font-weight:var(--fontWeight-medium,500);height:var(--pagination-item-size);justify-content:center;min-width:var(--pagination-item-size);-webkit-user-select:none;-moz-user-select:none;user-select:none}.ivds-pagination--small{--pagination-item-size:var(--pagination-item-size-small)}.ivds-pagination--small .ivds-pagination__link{font-size:var(--fontSize-xs,.75rem);padding:var(--spacing-1,.25rem)}.ivds-pagination--large{--pagination-item-size:var(--pagination-item-size-large)}.ivds-pagination--large .ivds-pagination__link{font-size:var(--fontSize-base,1rem);padding:var(--spacing-3,.75rem)}.ivds-pagination--compact{--pagination-gap:0}.ivds-pagination--compact .ivds-pagination__link{border-radius:0;border-right-width:0}.ivds-pagination--compact .ivds-pagination__link:first-child{border-bottom-left-radius:var(--borderRadius-md,.375rem);border-top-left-radius:var(--borderRadius-md,.375rem)}.ivds-pagination--compact .ivds-pagination__link:last-child{border-bottom-right-radius:var(--borderRadius-md,.375rem);border-right-width:var(--borderWidth-1,1px);border-top-right-radius:var(--borderRadius-md,.375rem)}.ivds-pagination--rounded .ivds-pagination__link{border-radius:var(--borderRadius-full,9999px)}.ivds-pagination--theme-minimal{--pagination-border-color:transparent;--pagination-border-color-hover:transparent;--pagination-border-color-active:transparent;--pagination-bg-hover:var(--color-semantic-neutral-100,#f5f5f5)}.ivds-pagination--theme-minimal .ivds-pagination__link:hover:not(.ivds-pagination__link--disabled){text-decoration:underline}.ivds-pagination--theme-minimal .ivds-pagination__link--active{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}.ivds-pagination--theme-dark{--pagination-color:var(--color-semantic-neutral-200,#e5e5e5);--pagination-color-hover:var(--color-brand-primary-300,#fdba74);--pagination-color-active:var(--color-semantic-neutral-900,#171717);--pagination-bg-hover:rgba(249,115,22,.1);--pagination-bg-active:var(--color-brand-primary-400,#fb923c);--pagination-border-color:var(--color-semantic-neutral-600,#525252);--pagination-border-color-hover:var(--color-brand-primary-400,#fb923c);--pagination-border-color-active:var(--color-brand-primary-400,#fb923c)}.ivds-pagination--with-icons .ivds-pagination__link--next,.ivds-pagination--with-icons .ivds-pagination__link--prev{align-items:center;display:flex;gap:var(--spacing-2,.5rem);padding:var(--spacing-2,.5rem) var(--spacing-3,.75rem)}.ivds-pagination--with-icons .ivds-pagination__link--next .ivds-pagination__icon,.ivds-pagination--with-icons .ivds-pagination__link--prev .ivds-pagination__icon{flex-shrink:0;height:1rem;width:1rem}.ivds-pagination--with-icons .ivds-pagination__link--next .ivds-pagination__icon svg,.ivds-pagination--with-icons .ivds-pagination__link--prev .ivds-pagination__icon svg{fill:currentcolor;height:100%;width:100%}.ivds-pagination--with-info .ivds-pagination__info{color:var(--color-semantic-neutral-600,#525252);font-size:var(--fontSize-sm,.875rem);margin:0 var(--spacing-4,1rem);white-space:nowrap}.ivds-pagination--with-jumper .ivds-pagination__jumper{align-items:center;color:var(--color-semantic-neutral-600,#525252);display:flex;font-size:var(--fontSize-sm,.875rem);gap:var(--spacing-2,.5rem);margin-left:var(--spacing-4,1rem)}.ivds-pagination--with-jumper .ivds-pagination__jumper input{border:var(--borderWidth-1,1px) solid var(--pagination-border-color);border-radius:var(--borderRadius-sm,.25rem);font-size:inherit;padding:var(--spacing-1,.25rem) var(--spacing-2,.5rem);text-align:center;width:3rem}.ivds-pagination--with-jumper .ivds-pagination__jumper input:focus{border-color:var(--color-brand-primary-500,#f97316);outline:2px solid var(--color-brand-primary-500,#f97316);outline-offset:2px}@media (max-width:640px){.ivds-pagination--responsive .ivds-pagination__info,.ivds-pagination--responsive .ivds-pagination__item--ellipsis,.ivds-pagination--responsive .ivds-pagination__item:not(:first-child,:last-child,.ivds-pagination__item--active),.ivds-pagination--responsive .ivds-pagination__jumper{display:none}}
+.ivds-pagination{--pagination-item-size:2.5rem;--pagination-item-size-small:2rem;--pagination-item-size-large:3rem;--pagination-gap:var(--spacing-1,0.25rem);--pagination-color:var(--ivds-text-secondary,#36414f);--pagination-color-hover:var(--color-brand-accent-700,#0b4593);--pagination-color-active:#fff;--pagination-bg-hover:var(--color-brand-accent-50,#eef4ff);--pagination-bg-active:var(--color-brand-accent-600,#1058b8);--pagination-border-color:var(--ivds-border-strong,#a1adba);--pagination-border-color-hover:var(--color-brand-accent-600,#1058b8);--pagination-border-color-active:var(--color-brand-accent-600,#1058b8);align-items:center;display:flex;justify-content:center}.ivds-pagination__list{align-items:center;display:flex;gap:var(--pagination-gap);list-style:none;margin:0;padding:0}.ivds-pagination__item{display:flex}.ivds-pagination__link{align-items:center;border:var(--borderWidth-1,1px) solid var(--pagination-border-color);border-radius:var(--ivds-radius-s,.125rem);color:var(--pagination-color);display:flex;font-size:var(--fontSize-sm,.875rem);font-weight:var(--fontWeight-medium,500);height:var(--pagination-item-size);justify-content:center;line-height:var(--lineHeight-tight,1.25);min-width:var(--pagination-item-size);padding:var(--spacing-2,.5rem);text-decoration:none;transition:all .15s ease-in-out;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ivds-pagination__link: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-pagination__link:focus:not(:focus-visible){box-shadow:none;outline:none}.ivds-pagination__link:focus-visible{text-decoration:none}.ivds-pagination__link:hover:not(.ivds-pagination__link--disabled){background-color:var(--pagination-bg-hover);border-color:var(--pagination-border-color-hover);color:var(--pagination-color-hover)}.ivds-pagination__link:active:not(.ivds-pagination__link--disabled){transform:translateY(1px)}.ivds-pagination__link--active{background-color:var(--pagination-bg-active);border-color:var(--pagination-border-color-active);color:var(--pagination-color-active);font-weight:var(--fontWeight-semibold,600)}.ivds-pagination__link--active:hover{background-color:var(--color-brand-accent-700,#0b4593);border-color:var(--color-brand-accent-700,#0b4593);color:var(--pagination-color-active)}.ivds-pagination__link--disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.ivds-pagination__link--disabled:hover{background-color:transparent;border-color:var(--pagination-border-color);color:var(--pagination-color)}.ivds-pagination__ellipsis{align-items:center;color:var(--ivds-text-muted,#4d5968);display:flex;font-weight:var(--fontWeight-medium,500);height:var(--pagination-item-size);justify-content:center;min-width:var(--pagination-item-size);-webkit-user-select:none;-moz-user-select:none;user-select:none}.ivds-pagination--small{--pagination-item-size:var(--pagination-item-size-small)}.ivds-pagination--small .ivds-pagination__link{font-size:var(--fontSize-xs,.75rem);padding:var(--spacing-1,.25rem)}.ivds-pagination--large{--pagination-item-size:var(--pagination-item-size-large)}.ivds-pagination--large .ivds-pagination__link{font-size:var(--fontSize-base,1rem);padding:var(--spacing-3,.75rem)}.ivds-pagination--compact{--pagination-gap:0}.ivds-pagination--compact .ivds-pagination__link{border-radius:0;border-right-width:0}.ivds-pagination--compact .ivds-pagination__link:first-child{border-bottom-left-radius:var(--ivds-radius-s,.125rem);border-top-left-radius:var(--ivds-radius-s,.125rem)}.ivds-pagination--compact .ivds-pagination__link:last-child{border-bottom-right-radius:var(--ivds-radius-s,.125rem);border-right-width:var(--borderWidth-1,1px);border-top-right-radius:var(--ivds-radius-s,.125rem)}.ivds-pagination--rounded .ivds-pagination__link{border-radius:var(--borderRadius-full,9999px)}.ivds-pagination--theme-minimal{--pagination-border-color:transparent;--pagination-border-color-hover:transparent;--pagination-border-color-active:transparent;--pagination-bg-hover:var(--ivds-surface-muted,#f1f3f5)}.ivds-pagination--theme-minimal .ivds-pagination__link:hover:not(.ivds-pagination__link--disabled){text-decoration:underline}.ivds-pagination--theme-minimal .ivds-pagination__link--active{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}.ivds-pagination--theme-dark{--pagination-color:var(--color-semantic-neutral-200,#e5e5e5);--pagination-color-hover:var(--color-brand-accent-300,#93bcff);--pagination-color-active:var(--color-semantic-neutral-900,#171717);--pagination-bg-hover:rgba(147,188,255,.12);--pagination-bg-active:var(--color-brand-accent-400,#5a96f5);--pagination-border-color:var(--color-semantic-neutral-600,#525252);--pagination-border-color-hover:var(--color-brand-accent-400,#5a96f5);--pagination-border-color-active:var(--color-brand-accent-400,#5a96f5)}.ivds-pagination--with-icons .ivds-pagination__link--next,.ivds-pagination--with-icons .ivds-pagination__link--prev{align-items:center;display:flex;gap:var(--spacing-2,.5rem);padding:var(--spacing-2,.5rem) var(--spacing-3,.75rem)}.ivds-pagination--with-icons .ivds-pagination__link--next .ivds-pagination__icon,.ivds-pagination--with-icons .ivds-pagination__link--prev .ivds-pagination__icon{flex-shrink:0;height:1rem;width:1rem}.ivds-pagination--with-icons .ivds-pagination__link--next .ivds-pagination__icon svg,.ivds-pagination--with-icons .ivds-pagination__link--prev .ivds-pagination__icon svg{fill:currentcolor;height:100%;width:100%}.ivds-pagination--with-info .ivds-pagination__info{color:var(--color-semantic-neutral-600,#525252);font-size:var(--fontSize-sm,.875rem);margin:0 var(--spacing-4,1rem);white-space:nowrap}.ivds-pagination--with-jumper .ivds-pagination__jumper{align-items:center;color:var(--color-semantic-neutral-600,#525252);display:flex;font-size:var(--fontSize-sm,.875rem);gap:var(--spacing-2,.5rem);margin-left:var(--spacing-4,1rem)}.ivds-pagination--with-jumper .ivds-pagination__jumper input{border:var(--borderWidth-1,1px) solid var(--pagination-border-color);border-radius:var(--borderRadius-sm,.25rem);font-size:inherit;padding:var(--spacing-1,.25rem) var(--spacing-2,.5rem);text-align:center;width:3rem}.ivds-pagination--with-jumper .ivds-pagination__jumper input: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-pagination--with-jumper .ivds-pagination__jumper input:focus:not(:focus-visible){box-shadow:none;outline:none}.ivds-pagination--with-jumper .ivds-pagination__jumper input:focus-visible{border-color:var(--color-brand-accent-600,#1058b8)}@media (max-width:640px){.ivds-pagination--responsive .ivds-pagination__info,.ivds-pagination--responsive .ivds-pagination__item--ellipsis,.ivds-pagination--responsive .ivds-pagination__item:not(:first-child,:last-child,.ivds-pagination__item--active),.ivds-pagination--responsive .ivds-pagination__jumper{display:none}}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/pagination/pagination.scss%23sass","../../../src/components/pagination/pagination.scss","../../../src/components/pagination/_pagination-mixins.scss","../../../src/base/_focus.scss"],"names":[],"mappings":"AAKA,iBCJA,6BAAA,CCQE,iCAAA,CDNF,iCAAA,CCQE,yCAAA,CDNF,qDAAA,CCQE,8DAAA,CACA,8BAAA,CACA,0DAAA,CACA,4DAAA,CACA,2DAAA,CACA,qEAAA,CACA,sEAAA,CAGA,kBAAA,CADA,YAAA,CAEA,sBDPF,CDRE,uBEqBA,kBAAA,CADA,YAAA,CAKA,yBAAA,CADA,eAAA,CAFA,QAAA,CACA,SDPF,CDZE,uBE0BA,YDXF,CDXE,uBE4BA,kBAAA,CAOA,oEAAA,CACA,0CAAA,CAHA,6BAAA,CANA,YAAA,CAWA,oCAAA,CADA,wCAAA,CANA,kCAAA,CAFA,sBAAA,CAUA,wCAAA,CATA,qCAAA,CAEA,8BAAA,CAEA,oBAAA,CAMA,+BAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,gBDbF,CEvCE,qCAGE,eAAA,CAFA,iHAAA,CACA,gDF0CJ,CEtCE,iDAEE,eAAA,CADA,YFyCJ,CCQE,qCACE,oBDNJ,CCSE,mEACE,2CAAA,CACA,iDAAA,CACA,mCDPJ,CCUE,oEACE,yBDRJ,CD7CI,+BE2DF,4CAAA,CACA,kDAAA,CACA,oCAAA,CACA,0CDXF,CCaE,qCACE,sDAAA,CACA,kDAAA,CACA,oCDXJ,CDpDI,iCEsEF,kBAAA,CADA,UAAA,CAEA,mBDdF,CCgBE,uCACE,4BAAA,CACA,2CAAA,CACA,6BDdJ,CDzDE,2BE8EA,kBAAA,CAIA,oCAAA,CALA,YAAA,CAMA,wCAAA,CAFA,kCAAA,CAFA,sBAAA,CACA,qCAAA,CAIA,wBAAA,CAAA,qBAAA,CAAA,gBDjBF,CD9DE,wBEwGA,wDDvCF,CCyCE,+CACE,mCAAA,CACA,+BDvCJ,CDjEE,wBE6GA,wDDzCF,CC2CE,+CACE,mCAAA,CACA,+BDzCJ,CDnEE,0BEkHA,kBD5CF,CC8CE,iDACE,eAAA,CACA,oBD5CJ,CC8CI,6DAEE,sDAAA,CADA,mDD3CN,CC+CI,4DAEE,uDAAA,CACA,2CAAA,CAFA,oDD3CN,CCmDE,iDACE,6CDjDJ,CD7EE,gCEoIA,qCAAA,CACA,2CAAA,CACA,4CAAA,CACA,uDDpDF,CCuDI,mGACE,yBDrDN,CCwDI,+DACE,yBAAA,CACA,6BAAA,CACA,yBDtDN,CDvFE,6BEmJA,4DAAA,CACA,8DAAA,CACA,mEAAA,CACA,2CAAA,CACA,4DAAA,CACA,mEAAA,CACA,qEAAA,CACA,sEDzDF,CC+DI,oHAjGF,kBAAA,CADA,YAAA,CAEA,0BAAA,CACA,sDDsCF,CCpCE,kKAGE,aAAA,CADA,WAAA,CADA,UDwCJ,CCpCI,0KAGE,iBAAA,CADA,WAAA,CADA,UDwCN,CCwDE,mDAGE,+CAAA,CADA,oCAAA,CADA,8BAAA,CAGA,kBDtDJ,CC4DE,uDAEE,kBAAA,CAIA,+CAAA,CALA,YAAA,CAIA,oCAAA,CAFA,0BAAA,CACA,iCDxDJ,CC4DI,6DAGE,oEAAA,CACA,2CAAA,CACA,iBAAA,CAHA,sDAAA,CAIA,iBAAA,CALA,UDrDN,CEzLE,2EAGE,eAAA,CAFA,iHAAA,CACA,gDF4LJ,CExLE,uFAEE,eAAA,CADA,YF2LJ,CCqDM,2EACE,kDDnDR,CC2DE,yBAeE,yRACE,YD9DJ,CACF","file":"pagination.min.css","sourcesContent":["// Pagination component styles\r\n// Provides styling for the IVDS pagination component following Helsinki Design System patterns\r\n\r\n@use 'pagination-mixins' as pagination;\r\n\r\n.ivds-pagination {\r\n  @include pagination.pagination-base;\r\n  \r\n  &__list {\r\n    @include pagination.pagination-list;\r\n  }\r\n  \r\n  &__item {\r\n    @include pagination.pagination-item;\r\n  }\r\n  \r\n  &__link {\r\n    @include pagination.pagination-link;\r\n    \r\n    &--active {\r\n      @include pagination.pagination-link-active;\r\n    }\r\n    \r\n    &--disabled {\r\n      @include pagination.pagination-link-disabled;\r\n    }\r\n  }\r\n  \r\n  &__ellipsis {\r\n    @include pagination.pagination-ellipsis;\r\n  }\r\n  \r\n  // Size variants\r\n  &--small {\r\n    @include pagination.pagination-small;\r\n  }\r\n  \r\n  &--large {\r\n    @include pagination.pagination-large;\r\n  }\r\n  \r\n  // Layout variants\r\n  &--compact {\r\n    @include pagination.pagination-compact;\r\n  }\r\n  \r\n  &--rounded {\r\n    @include pagination.pagination-rounded;\r\n  }\r\n  \r\n  // Theme variants\r\n  &--theme-minimal {\r\n    @include pagination.pagination-theme-minimal;\r\n  }\r\n  \r\n  &--theme-dark {\r\n    @include pagination.pagination-theme-dark;\r\n  }\r\n  \r\n  // Feature variants\r\n  &--with-icons {\r\n    @include pagination.pagination-with-icons;\r\n  }\r\n  \r\n  &--with-info {\r\n    @include pagination.pagination-with-info;\r\n  }\r\n  \r\n  &--with-jumper {\r\n    @include pagination.pagination-with-jumper;\r\n  }\r\n  \r\n  &--responsive {\r\n    @include pagination.pagination-responsive;\r\n  }\r\n}","// Pagination component styles\r\n// Provides styling for the IVDS pagination component following Helsinki Design System patterns\r\n\r\n@use 'pagination-mixins' as pagination;\r\n\r\n.ivds-pagination {\r\n  @include pagination.pagination-base;\r\n  \r\n  &__list {\r\n    @include pagination.pagination-list;\r\n  }\r\n  \r\n  &__item {\r\n    @include pagination.pagination-item;\r\n  }\r\n  \r\n  &__link {\r\n    @include pagination.pagination-link;\r\n    \r\n    &--active {\r\n      @include pagination.pagination-link-active;\r\n    }\r\n    \r\n    &--disabled {\r\n      @include pagination.pagination-link-disabled;\r\n    }\r\n  }\r\n  \r\n  &__ellipsis {\r\n    @include pagination.pagination-ellipsis;\r\n  }\r\n  \r\n  // Size variants\r\n  &--small {\r\n    @include pagination.pagination-small;\r\n  }\r\n  \r\n  &--large {\r\n    @include pagination.pagination-large;\r\n  }\r\n  \r\n  // Layout variants\r\n  &--compact {\r\n    @include pagination.pagination-compact;\r\n  }\r\n  \r\n  &--rounded {\r\n    @include pagination.pagination-rounded;\r\n  }\r\n  \r\n  // Theme variants\r\n  &--theme-minimal {\r\n    @include pagination.pagination-theme-minimal;\r\n  }\r\n  \r\n  &--theme-dark {\r\n    @include pagination.pagination-theme-dark;\r\n  }\r\n  \r\n  // Feature variants\r\n  &--with-icons {\r\n    @include pagination.pagination-with-icons;\r\n  }\r\n  \r\n  &--with-info {\r\n    @include pagination.pagination-with-info;\r\n  }\r\n  \r\n  &--with-jumper {\r\n    @include pagination.pagination-with-jumper;\r\n  }\r\n  \r\n  &--responsive {\r\n    @include pagination.pagination-responsive;\r\n  }\r\n}","// Pagination component mixins and private styles\r\n// This file contains mixins for pagination variants and internal utilities\r\n\r\n@use '../../variables/variables' as vars;\r\n@use '../../base/focus' as *;\r\n\r\n// Base pagination mixin with common styles\r\n@mixin pagination-base {\r\n  --pagination-item-size: 2.5rem;\r\n  --pagination-item-size-small: 2rem;\r\n  --pagination-item-size-large: 3rem;\r\n  --pagination-gap: var(--spacing-1, 0.25rem);\r\n  --pagination-color: var(--ivds-text-secondary, #36414f);\r\n  --pagination-color-hover: var(--color-brand-accent-700, #0b4593);\r\n  --pagination-color-active: #fff;\r\n  --pagination-bg-hover: var(--color-brand-accent-50, #eef4ff);\r\n  --pagination-bg-active: var(--color-brand-accent-600, #1058b8);\r\n  --pagination-border-color: var(--ivds-border-strong, #a1adba);\r\n  --pagination-border-color-hover: var(--color-brand-accent-600, #1058b8);\r\n  --pagination-border-color-active: var(--color-brand-accent-600, #1058b8);\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n// Pagination list mixin\r\n@mixin pagination-list {\r\n  display: flex;\r\n  align-items: center;\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n  gap: var(--pagination-gap);\r\n}\r\n\r\n// Pagination item mixin\r\n@mixin pagination-item {\r\n  display: flex;\r\n}\r\n\r\n// Pagination link mixin\r\n@mixin pagination-link {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: var(--pagination-item-size);\r\n  height: var(--pagination-item-size);\r\n  padding: var(--spacing-2, 0.5rem);\r\n  color: var(--pagination-color);\r\n  text-decoration: none;\r\n  border: var(--borderWidth-1, 1px) solid var(--pagination-border-color);\r\n  border-radius: var(--ivds-radius-s, 0.125rem);\r\n  font-weight: var(--fontWeight-medium, 500);\r\n  font-size: var(--fontSize-sm, 0.875rem);\r\n  line-height: var(--lineHeight-tight, 1.25);\r\n  transition: all 0.15s ease-in-out;\r\n  user-select: none;\r\n  \r\n  @include focus-ring;\r\n\r\n  &:focus-visible {\r\n    text-decoration: none;\r\n  }\r\n  \r\n  &:hover:not(.ivds-pagination__link--disabled) {\r\n    background-color: var(--pagination-bg-hover);\r\n    border-color: var(--pagination-border-color-hover);\r\n    color: var(--pagination-color-hover);\r\n  }\r\n  \r\n  &:active:not(.ivds-pagination__link--disabled) {\r\n    transform: translateY(1px);\r\n  }\r\n}\r\n\r\n// Active pagination link mixin\r\n@mixin pagination-link-active {\r\n  background-color: var(--pagination-bg-active);\r\n  border-color: var(--pagination-border-color-active);\r\n  color: var(--pagination-color-active);\r\n  font-weight: var(--fontWeight-semibold, 600);\r\n  \r\n  &:hover {\r\n    background-color: var(--color-brand-accent-700, #0b4593);\r\n    border-color: var(--color-brand-accent-700, #0b4593);\r\n    color: var(--pagination-color-active);\r\n  }\r\n}\r\n\r\n// Disabled pagination link mixin\r\n@mixin pagination-link-disabled {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n  \r\n  &:hover {\r\n    background-color: transparent;\r\n    border-color: var(--pagination-border-color);\r\n    color: var(--pagination-color);\r\n  }\r\n}\r\n\r\n// Pagination ellipsis mixin\r\n@mixin pagination-ellipsis {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: var(--pagination-item-size);\r\n  height: var(--pagination-item-size);\r\n  color: var(--ivds-text-muted, #4d5968);\r\n  font-weight: var(--fontWeight-medium, 500);\r\n  user-select: none;\r\n}\r\n\r\n// Pagination navigation buttons (prev/next)\r\n@mixin pagination-nav-button {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-2, 0.5rem);\r\n  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);\r\n  \r\n  .ivds-pagination__icon {\r\n    width: 1rem;\r\n    height: 1rem;\r\n    flex-shrink: 0;\r\n    \r\n    svg {\r\n      width: 100%;\r\n      height: 100%;\r\n      fill: currentcolor;\r\n    }\r\n  }\r\n}\r\n\r\n// Pagination size variants\r\n@mixin pagination-small {\r\n  --pagination-item-size: var(--pagination-item-size-small);\r\n  \r\n  .ivds-pagination__link {\r\n    font-size: var(--fontSize-xs, 0.75rem);\r\n    padding: var(--spacing-1, 0.25rem);\r\n  }\r\n}\r\n\r\n@mixin pagination-large {\r\n  --pagination-item-size: var(--pagination-item-size-large);\r\n  \r\n  .ivds-pagination__link {\r\n    font-size: var(--fontSize-base, 1rem);\r\n    padding: var(--spacing-3, 0.75rem);\r\n  }\r\n}\r\n\r\n// Pagination layout variants\r\n@mixin pagination-compact {\r\n  --pagination-gap: 0;\r\n  \r\n  .ivds-pagination__link {\r\n    border-radius: 0;\r\n    border-right-width: 0;\r\n    \r\n    &:first-child {\r\n      border-top-left-radius: var(--ivds-radius-s, 0.125rem);\r\n      border-bottom-left-radius: var(--ivds-radius-s, 0.125rem);\r\n    }\r\n    \r\n    &:last-child {\r\n      border-top-right-radius: var(--ivds-radius-s, 0.125rem);\r\n      border-bottom-right-radius: var(--ivds-radius-s, 0.125rem);\r\n      border-right-width: var(--borderWidth-1, 1px);\r\n    }\r\n  }\r\n}\r\n\r\n@mixin pagination-rounded {\r\n  .ivds-pagination__link {\r\n    border-radius: var(--borderRadius-full, 9999px);\r\n  }\r\n}\r\n\r\n// Pagination theme variants\r\n@mixin pagination-theme-minimal {\r\n  --pagination-border-color: transparent;\r\n  --pagination-border-color-hover: transparent;\r\n  --pagination-border-color-active: transparent;\r\n  --pagination-bg-hover: var(--ivds-surface-muted, #f1f3f5);\r\n  \r\n  .ivds-pagination__link {\r\n    &:hover:not(.ivds-pagination__link--disabled) {\r\n      text-decoration: underline;\r\n    }\r\n    \r\n    &--active {\r\n      text-decoration: underline;\r\n      text-decoration-thickness: 2px;\r\n      text-underline-offset: 4px;\r\n    }\r\n  }\r\n}\r\n\r\n@mixin pagination-theme-dark {\r\n  --pagination-color: var(--color-semantic-neutral-200, #e5e5e5);\r\n  --pagination-color-hover: var(--color-brand-accent-300, #93bcff);\r\n  --pagination-color-active: var(--color-semantic-neutral-900, #171717);\r\n  --pagination-bg-hover: rgba(147, 188, 255, 0.12);\r\n  --pagination-bg-active: var(--color-brand-accent-400, #5a96f5);\r\n  --pagination-border-color: var(--color-semantic-neutral-600, #525252);\r\n  --pagination-border-color-hover: var(--color-brand-accent-400, #5a96f5);\r\n  --pagination-border-color-active: var(--color-brand-accent-400, #5a96f5);\r\n}\r\n\r\n// Pagination with icons\r\n@mixin pagination-with-icons {\r\n  .ivds-pagination__link {\r\n    &--prev,\r\n    &--next {\r\n      @include pagination-nav-button;\r\n    }\r\n  }\r\n}\r\n\r\n// Pagination info display\r\n@mixin pagination-with-info {\r\n  .ivds-pagination__info {\r\n    margin: 0 var(--spacing-4, 1rem);\r\n    font-size: var(--fontSize-sm, 0.875rem);\r\n    color: var(--color-semantic-neutral-600, #525252);\r\n    white-space: nowrap;\r\n  }\r\n}\r\n\r\n// Pagination jump to page\r\n@mixin pagination-with-jumper {\r\n  .ivds-pagination__jumper {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--spacing-2, 0.5rem);\r\n    margin-left: var(--spacing-4, 1rem);\r\n    font-size: var(--fontSize-sm, 0.875rem);\r\n    color: var(--color-semantic-neutral-600, #525252);\r\n    \r\n    input {\r\n      width: 3rem;\r\n      padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);\r\n      border: var(--borderWidth-1, 1px) solid var(--pagination-border-color);\r\n      border-radius: var(--borderRadius-sm, 0.25rem);\r\n      font-size: inherit;\r\n      text-align: center;\r\n      \r\n      @include focus-ring;\r\n\r\n      &:focus-visible {\r\n        border-color: var(--color-brand-accent-600, #1058b8);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n// Responsive pagination behavior\r\n@mixin pagination-responsive {\r\n  @media (max-width: 640px) {\r\n    .ivds-pagination__item {\r\n      &:not(:first-child, :last-child, .ivds-pagination__item--active) {\r\n        display: none;\r\n      }\r\n      \r\n      &--ellipsis {\r\n        display: none;\r\n      }\r\n    }\r\n    \r\n    .ivds-pagination__info {\r\n      display: none;\r\n    }\r\n    \r\n    .ivds-pagination__jumper {\r\n      display: none;\r\n    }\r\n  }\r\n}\r\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/radio-button/_radio-button-mixin.scss

@@ -0,0 +1,93 @@
+// Radio button component mixins and private styles
+/* stylelint-disable no-descending-specificity */
+
+@mixin radio-button-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-radio-button__circle {
+    border-color: var(--color-brand-accent-600, #1058b8);
+  }
+}
+
+@mixin radio-button-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+@mixin radio-button-circle($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(--borderRadius-full, 9999px);
+  background-color: var(--ivds-surface-base, #fff);
+  transition:
+    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),
+    box-shadow var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+
+  &::after {
+    content: '';
+    width: calc($size * 0.48);
+    height: calc($size * 0.48);
+    border-radius: var(--borderRadius-full, 9999px);
+    background-color: var(--color-brand-accent-600, #1058b8);
+    transform: scale(0);
+    transition: transform var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+  }
+}
+
+@mixin radio-button-checked {
+  border-color: var(--color-brand-accent-600, #1058b8);
+
+  &::after {
+    transform: scale(1);
+  }
+}
+
+@mixin radio-button-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 radio-button-disabled {
+  opacity: 0.62;
+  cursor: not-allowed;
+
+  .ivds-radio-button__circle {
+    border-color: var(--ivds-border-subtle, #e2e7ec);
+    background-color: var(--ivds-surface-muted, #f1f3f5);
+  }
+}
+
+@mixin radio-button-card {
+  padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);
+  border: 1px solid var(--ivds-border-subtle, #e2e7ec);
+  border-radius: var(--ivds-radius-s, 0.125rem);
+  background-color: var(--ivds-surface-base, #fff);
+  transition:
+    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),
+    background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+
+  &:hover {
+    border-color: var(--color-brand-accent-600, #1058b8);
+    background-color: var(--color-brand-accent-50, #eef4ff);
+  }
+
+  &.ivds-radio-button--checked {
+    border-color: var(--color-brand-accent-600, #1058b8);
+    background-color: var(--color-brand-accent-50, #eef4ff);
+  }
+}