@ivds/core 0.1.1

package/lib/components/notification/notification.css

@@ -0,0 +1,253 @@
+/* Notification component styles*/
+/* Provides styling for the IVDS notification component with all variants, dismissible functionality, and states*/
+@keyframes ivds-notification-slide-in {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+@keyframes ivds-notification-slide-out {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+@keyframes ivds-notification-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes ivds-notification-fade-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+/* Notification Base*/
+.ivds-notification {
+  display: flex;
+  align-items: flex-start;
+  padding: var(--spacing-4, 1rem);
+  border-radius: var(--borderRadius-md, 0.375rem);
+  border-left: var(--borderWidth-4, 4px) solid;
+  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+  position: relative;
+  transition: all 0.15s ease-in-out;
+  /* Notification elements*/
+}
+.ivds-notification__icon {
+  flex-shrink: 0;
+  margin-right: var(--spacing-3, 0.75rem);
+  margin-top: var(--spacing-1, 0.25rem);
+  width: 1.25rem;
+  height: 1.25rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.ivds-notification__content {
+  flex: 1;
+  min-width: 0;
+}
+.ivds-notification__title {
+  margin: 0 0 var(--spacing-1, 0.25rem) 0;
+  font-size: var(--fontSize-base, 1rem);
+  font-weight: var(--fontWeight-medium, 500);
+  line-height: var(--lineHeight-tight, 1.25);
+}
+.ivds-notification__message {
+  margin: 0;
+  font-size: var(--fontSize-sm, 0.875rem);
+  line-height: var(--lineHeight-relaxed, 1.625);
+}
+.ivds-notification__actions {
+  display: flex;
+  gap: var(--spacing-2, 0.5rem);
+  margin-top: var(--spacing-3, 0.75rem);
+  align-items: center;
+}
+.ivds-notification {
+  /* Dismiss button (added when dismissible)*/
+}
+.ivds-notification__dismiss {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.ivds-notification__dismiss svg {
+  width: 1rem;
+  height: 1rem;
+  fill: currentcolor;
+}
+/* Notification Variants*/
+.ivds-notification--success {
+  background-color: var(--color-semantic-success-50, #f0fdf4);
+  border-left-color: var(--color-semantic-success-500, #22c55e);
+}
+.ivds-notification--success .ivds-notification__title {
+  color: var(--color-semantic-success-800, #166534);
+}
+.ivds-notification--success .ivds-notification__message {
+  color: var(--color-semantic-success-700, #15803d);
+}
+.ivds-notification--success .ivds-notification__icon {
+  color: var(--color-semantic-success-500, #22c55e);
+}
+.ivds-notification--warning {
+  background-color: var(--color-semantic-warning-50, #fffbeb);
+  border-left-color: var(--color-semantic-warning-500, #f59e0b);
+}
+.ivds-notification--warning .ivds-notification__title {
+  color: var(--color-semantic-warning-800, #92400e);
+}
+.ivds-notification--warning .ivds-notification__message {
+  color: var(--color-semantic-warning-700, #b45309);
+}
+.ivds-notification--warning .ivds-notification__icon {
+  color: var(--color-semantic-warning-500, #f59e0b);
+}
+.ivds-notification--error {
+  background-color: var(--color-semantic-error-50, #fef2f2);
+  border-left-color: var(--color-semantic-error-500, #ef4444);
+}
+.ivds-notification--error .ivds-notification__title {
+  color: var(--color-semantic-error-800, #991b1b);
+}
+.ivds-notification--error .ivds-notification__message {
+  color: var(--color-semantic-error-700, #b91c1c);
+}
+.ivds-notification--error .ivds-notification__icon {
+  color: var(--color-semantic-error-500, #ef4444);
+}
+.ivds-notification--info {
+  background-color: var(--color-semantic-info-50, #eff6ff);
+  border-left-color: var(--color-semantic-info-500, #3b82f6);
+}
+.ivds-notification--info .ivds-notification__title {
+  color: var(--color-semantic-info-800, #1e40af);
+}
+.ivds-notification--info .ivds-notification__message {
+  color: var(--color-semantic-info-700, #1d4ed8);
+}
+.ivds-notification--info .ivds-notification__icon {
+  color: var(--color-semantic-info-500, #3b82f6);
+}
+/* Dismissible notifications*/
+.ivds-notification--dismissible {
+  padding-right: var(--spacing-12, 3rem);
+}
+.ivds-notification--dismissible .ivds-notification__dismiss {
+  position: absolute;
+  top: var(--spacing-3, 0.75rem);
+  right: var(--spacing-3, 0.75rem);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: var(--spacing-1, 0.25rem);
+  border-radius: var(--borderRadius-sm, 0.25rem);
+  color: inherit;
+  opacity: 0.7;
+  transition: opacity 0.15s ease-in-out, background-color 0.15s ease-in-out;
+}
+.ivds-notification--dismissible .ivds-notification__dismiss:hover {
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.ivds-notification--dismissible .ivds-notification__dismiss:focus {
+  outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
+  outline-offset: 2px;
+  opacity: 1;
+}
+.ivds-notification--dismissible .ivds-notification__dismiss:active {
+  transform: scale(0.95);
+}
+/* Size variants*/
+.ivds-notification--compact {
+  padding: var(--spacing-3, 0.75rem);
+}
+.ivds-notification--compact .ivds-notification__icon {
+  margin-right: var(--spacing-2, 0.5rem);
+  width: 1rem;
+  height: 1rem;
+}
+.ivds-notification--compact .ivds-notification__title {
+  margin: 0 0 var(--spacing-1, 0.25rem) 0;
+  font-size: var(--fontSize-sm, 0.875rem);
+  font-weight: var(--fontWeight-medium, 500);
+  line-height: var(--lineHeight-tight, 1.25);
+}
+.ivds-notification--compact .ivds-notification__message {
+  margin: 0;
+  font-size: var(--fontSize-xs, 0.75rem);
+  line-height: var(--lineHeight-relaxed, 1.625);
+}
+.ivds-notification--compact.ivds-notification--dismissible {
+  padding-right: var(--spacing-10, 2.5rem);
+}
+.ivds-notification--compact.ivds-notification--dismissible .ivds-notification__dismiss {
+  top: var(--spacing-2, 0.5rem);
+  right: var(--spacing-2, 0.5rem);
+}
+.ivds-notification--spacious {
+  padding: var(--spacing-6, 1.5rem);
+}
+.ivds-notification--spacious .ivds-notification__icon {
+  margin-right: var(--spacing-4, 1rem);
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.ivds-notification--spacious .ivds-notification__title {
+  margin: 0 0 var(--spacing-1, 0.25rem) 0;
+  font-size: var(--fontSize-lg, 1.125rem);
+  font-weight: var(--fontWeight-semibold, 600);
+  line-height: var(--lineHeight-tight, 1.25);
+  margin-bottom: var(--spacing-2, 0.5rem);
+}
+.ivds-notification--spacious .ivds-notification__message {
+  margin: 0;
+  font-size: var(--fontSize-base, 1rem);
+  line-height: var(--lineHeight-relaxed, 1.625);
+}
+.ivds-notification--spacious.ivds-notification--dismissible {
+  padding-right: var(--spacing-14, 3.5rem);
+}
+.ivds-notification--spacious.ivds-notification--dismissible .ivds-notification__dismiss {
+  top: var(--spacing-4, 1rem);
+  right: var(--spacing-4, 1rem);
+}
+/* Notifications with actions*/
+.ivds-notification--with-actions .ivds-notification__content {
+  padding-bottom: var(--spacing-1, 0.25rem);
+}
+/* Animation classes*/
+.ivds-notification--slide-in {
+  animation: ivds-notification-slide-in 0.3s ease-out;
+}
+.ivds-notification--slide-out {
+  animation: ivds-notification-slide-out 0.2s ease-in forwards;
+}
+.ivds-notification--fade-in {
+  animation: ivds-notification-fade-in 0.3s ease-out;
+}
+.ivds-notification--fade-out {
+  animation: ivds-notification-fade-out 0.2s ease-in forwards;
+}

package/lib/components/notification/notification.min.css

@@ -0,0 +1 @@
+@keyframes ivds-notification-slide-in{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes ivds-notification-slide-out{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}@keyframes ivds-notification-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes ivds-notification-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.ivds-notification{align-items:flex-start;border-left:var(--borderWidth-4,4px) solid;border-radius:var(--borderRadius-md,.375rem);box-shadow:var(--shadow-sm,0 1px 2px 0 rgba(0,0,0,.05));display:flex;padding:var(--spacing-4,1rem);position:relative;transition:all .15s ease-in-out}.ivds-notification__icon{align-items:center;display:inline-flex;flex-shrink:0;height:1.25rem;justify-content:center;margin-right:var(--spacing-3,.75rem);margin-top:var(--spacing-1,.25rem);width:1.25rem}.ivds-notification__content{flex:1;min-width:0}.ivds-notification__title{font-size:var(--fontSize-base,1rem);font-weight:var(--fontWeight-medium,500);line-height:var(--lineHeight-tight,1.25);margin:0 0 var(--spacing-1,.25rem) 0}.ivds-notification__message{font-size:var(--fontSize-sm,.875rem);line-height:var(--lineHeight-relaxed,1.625);margin:0}.ivds-notification__actions{align-items:center;display:flex;gap:var(--spacing-2,.5rem);margin-top:var(--spacing-3,.75rem)}.ivds-notification__dismiss{align-items:center;display:inline-flex;height:1.5rem;justify-content:center;width:1.5rem}.ivds-notification__dismiss svg{fill:currentcolor;height:1rem;width:1rem}.ivds-notification--success{background-color:var(--color-semantic-success-50,#f0fdf4);border-left-color:var(--color-semantic-success-500,#22c55e)}.ivds-notification--success .ivds-notification__title{color:var(--color-semantic-success-800,#166534)}.ivds-notification--success .ivds-notification__message{color:var(--color-semantic-success-700,#15803d)}.ivds-notification--success .ivds-notification__icon{color:var(--color-semantic-success-500,#22c55e)}.ivds-notification--warning{background-color:var(--color-semantic-warning-50,#fffbeb);border-left-color:var(--color-semantic-warning-500,#f59e0b)}.ivds-notification--warning .ivds-notification__title{color:var(--color-semantic-warning-800,#92400e)}.ivds-notification--warning .ivds-notification__message{color:var(--color-semantic-warning-700,#b45309)}.ivds-notification--warning .ivds-notification__icon{color:var(--color-semantic-warning-500,#f59e0b)}.ivds-notification--error{background-color:var(--color-semantic-error-50,#fef2f2);border-left-color:var(--color-semantic-error-500,#ef4444)}.ivds-notification--error .ivds-notification__title{color:var(--color-semantic-error-800,#991b1b)}.ivds-notification--error .ivds-notification__message{color:var(--color-semantic-error-700,#b91c1c)}.ivds-notification--error .ivds-notification__icon{color:var(--color-semantic-error-500,#ef4444)}.ivds-notification--info{background-color:var(--color-semantic-info-50,#eff6ff);border-left-color:var(--color-semantic-info-500,#3b82f6)}.ivds-notification--info .ivds-notification__title{color:var(--color-semantic-info-800,#1e40af)}.ivds-notification--info .ivds-notification__message{color:var(--color-semantic-info-700,#1d4ed8)}.ivds-notification--info .ivds-notification__icon{color:var(--color-semantic-info-500,#3b82f6)}.ivds-notification--dismissible{padding-right:var(--spacing-12,3rem)}.ivds-notification--dismissible .ivds-notification__dismiss{background:transparent;border:none;border-radius:var(--borderRadius-sm,.25rem);color:inherit;cursor:pointer;opacity:.7;padding:var(--spacing-1,.25rem);position:absolute;right:var(--spacing-3,.75rem);top:var(--spacing-3,.75rem);transition:opacity .15s ease-in-out,background-color .15s ease-in-out}.ivds-notification--dismissible .ivds-notification__dismiss:hover{background-color:rgba(0,0,0,.05);opacity:1}.ivds-notification--dismissible .ivds-notification__dismiss:focus{opacity:1;outline:2px solid var(--color-brand-primary-500,#0ea5e9);outline-offset:2px}.ivds-notification--dismissible .ivds-notification__dismiss:active{transform:scale(.95)}.ivds-notification--compact{padding:var(--spacing-3,.75rem)}.ivds-notification--compact .ivds-notification__icon{height:1rem;margin-right:var(--spacing-2,.5rem);width:1rem}.ivds-notification--compact .ivds-notification__title{font-size:var(--fontSize-sm,.875rem);font-weight:var(--fontWeight-medium,500);line-height:var(--lineHeight-tight,1.25);margin:0 0 var(--spacing-1,.25rem) 0}.ivds-notification--compact .ivds-notification__message{font-size:var(--fontSize-xs,.75rem);line-height:var(--lineHeight-relaxed,1.625);margin:0}.ivds-notification--compact.ivds-notification--dismissible{padding-right:var(--spacing-10,2.5rem)}.ivds-notification--compact.ivds-notification--dismissible .ivds-notification__dismiss{right:var(--spacing-2,.5rem);top:var(--spacing-2,.5rem)}.ivds-notification--spacious{padding:var(--spacing-6,1.5rem)}.ivds-notification--spacious .ivds-notification__icon{height:1.5rem;margin-right:var(--spacing-4,1rem);width:1.5rem}.ivds-notification--spacious .ivds-notification__title{font-size:var(--fontSize-lg,1.125rem);font-weight:var(--fontWeight-semibold,600);line-height:var(--lineHeight-tight,1.25);margin:0 0 var(--spacing-1,.25rem) 0;margin-bottom:var(--spacing-2,.5rem)}.ivds-notification--spacious .ivds-notification__message{font-size:var(--fontSize-base,1rem);line-height:var(--lineHeight-relaxed,1.625);margin:0}.ivds-notification--spacious.ivds-notification--dismissible{padding-right:var(--spacing-14,3.5rem)}.ivds-notification--spacious.ivds-notification--dismissible .ivds-notification__dismiss{right:var(--spacing-4,1rem);top:var(--spacing-4,1rem)}.ivds-notification--with-actions .ivds-notification__content{padding-bottom:var(--spacing-1,.25rem)}.ivds-notification--slide-in{animation:ivds-notification-slide-in .3s ease-out}.ivds-notification--slide-out{animation:ivds-notification-slide-out .2s ease-in forwards}.ivds-notification--fade-in{animation:ivds-notification-fade-in .3s ease-out}.ivds-notification--fade-out{animation:ivds-notification-fade-out .2s ease-in forwards}

package/lib/components/pagination/pagination.css

@@ -0,0 +1,221 @@
+/* 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);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ivds-pagination__list {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  gap: var(--pagination-gap);
+}
+.ivds-pagination__item {
+  display: flex;
+}
+.ivds-pagination__link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--pagination-item-size);
+  height: var(--pagination-item-size);
+  padding: var(--spacing-2, 0.5rem);
+  color: var(--pagination-color);
+  text-decoration: none;
+  border: var(--borderWidth-1, 1px) solid var(--pagination-border-color);
+  border-radius: var(--borderRadius-md, 0.375rem);
+  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;
+          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 {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.ivds-pagination__link--disabled:hover {
+  background-color: transparent;
+  border-color: var(--pagination-border-color);
+  color: var(--pagination-color);
+}
+.ivds-pagination__ellipsis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--pagination-item-size);
+  height: var(--pagination-item-size);
+  color: var(--color-semantic-neutral-500, #737373);
+  font-weight: var(--fontWeight-medium, 500);
+  -webkit-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);
+}
+.ivds-pagination--small .ivds-pagination__link {
+  font-size: var(--fontSize-xs, 0.75rem);
+  padding: var(--spacing-1, 0.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, 0.75rem);
+}
+.ivds-pagination {
+  /* Layout variants*/
+}
+.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-top-left-radius: var(--borderRadius-md, 0.375rem);
+  border-bottom-left-radius: var(--borderRadius-md, 0.375rem);
+}
+.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-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);
+}
+.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, 0.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 {
+  /* Feature variants*/
+}
+.ivds-pagination--with-icons .ivds-pagination__link--prev, .ivds-pagination--with-icons .ivds-pagination__link--next {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 0.5rem);
+  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
+}
+.ivds-pagination--with-icons .ivds-pagination__link--prev .ivds-pagination__icon, .ivds-pagination--with-icons .ivds-pagination__link--next .ivds-pagination__icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+.ivds-pagination--with-icons .ivds-pagination__link--prev .ivds-pagination__icon svg, .ivds-pagination--with-icons .ivds-pagination__link--next .ivds-pagination__icon svg {
+  width: 100%;
+  height: 100%;
+  fill: currentcolor;
+}
+.ivds-pagination--with-info .ivds-pagination__info {
+  margin: 0 var(--spacing-4, 1rem);
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-neutral-600, #525252);
+  white-space: nowrap;
+}
+.ivds-pagination--with-jumper .ivds-pagination__jumper {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 0.5rem);
+  margin-left: var(--spacing-4, 1rem);
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-neutral-600, #525252);
+}
+.ivds-pagination--with-jumper .ivds-pagination__jumper input {
+  width: 3rem;
+  padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
+  border: var(--borderWidth-1, 1px) solid var(--pagination-border-color);
+  border-radius: var(--borderRadius-sm, 0.25rem);
+  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);
+}
+@media (max-width: 640px) {
+  .ivds-pagination--responsive .ivds-pagination__item:not(:first-child, :last-child, .ivds-pagination__item--active) {
+    display: none;
+  }
+  .ivds-pagination--responsive .ivds-pagination__item--ellipsis {
+    display: none;
+  }
+  .ivds-pagination--responsive .ivds-pagination__info {
+    display: none;
+  }
+  .ivds-pagination--responsive .ivds-pagination__jumper {
+    display: none;
+  }
+}

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

@@ -0,0 +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}}