@ivds/core 0.1.1 → 1.0.0

package/lib/components/breadcrumb/breadcrumb.css

@@ -1,141 +1,51 @@
-@charset "UTF-8";
-/* Breadcrumb component styles*/
-/* Provides styling for the IVDS breadcrumb component following Helsinki Design System patterns*/
 .ivds-breadcrumb {
-  --separator-content: "/";
-  --separator-spacing: var(--spacing-2, 0.5rem);
-  --link-color: var(--color-brand-primary-500, #f97316);
-  --link-color-hover: var(--color-brand-primary-600, #ea580c);
-  --current-color: var(--color-semantic-neutral-700, #404040);
-  --separator-color: var(--color-semantic-neutral-500, #737373);
   display: flex;
-  align-items: center;
   flex-wrap: wrap;
-  font-size: var(--fontSize-sm, 0.875rem);
-  line-height: var(--lineHeight-normal, 1.5);
-}
-.ivds-breadcrumb__list {
-  display: flex;
   align-items: center;
-  flex-wrap: wrap;
-  margin: 0;
-  padding: 0;
   list-style: none;
-  gap: 0;
+  padding: 0;
+  margin: 0;
+  gap: var(--spacing-2, 0.5rem);
+  font-family: var(--fontFamily-primary, system-ui, sans-serif);
+  font-size: var(--fontSize-sm, 0.875rem);
 }
 .ivds-breadcrumb__item {
   display: flex;
   align-items: center;
-}
-.ivds-breadcrumb__item:not(:last-child)::after {
-  content: var(--separator-content);
-  margin: 0 var(--separator-spacing);
-  color: var(--separator-color);
-  font-weight: var(--fontWeight-normal, 400);
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  pointer-events: none;
+  gap: var(--spacing-2, 0.5rem);
+  color: var(--ivds-text-muted, #4d5968);
 }
 .ivds-breadcrumb__link {
-  color: var(--link-color);
+  color: var(--color-brand-accent-700, #0b4593);
   text-decoration: none;
-  transition: all 0.15s ease-in-out;
-  border-radius: var(--borderRadius-md, 0.375rem);
-  padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
-  margin: calc(-1 * var(--spacing-1, 0.25rem)) calc(-1 * var(--spacing-2, 0.5rem));
+  font-weight: var(--fontWeight-medium, 500);
+  transition: color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease), text-decoration-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
 }
 .ivds-breadcrumb__link:hover {
-  color: var(--link-color-hover);
+  color: var(--color-brand-accent-600, #1058b8);
   text-decoration: underline;
-  background-color: var(--color-brand-primary-50, #fff7ed);
-}
-.ivds-breadcrumb__link:focus {
-  outline: 2px solid var(--color-brand-primary-500, #f97316);
-  outline-offset: 2px;
-  text-decoration: none;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 0.14em;
 }
-.ivds-breadcrumb__link:active {
-  background-color: var(--color-brand-primary-100, #ffedd5);
+.ivds-breadcrumb__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-breadcrumb__current {
-  color: var(--current-color);
-  font-weight: var(--fontWeight-medium, 500);
-  padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
-  margin: calc(-1 * var(--spacing-1, 0.25rem)) calc(-1 * var(--spacing-2, 0.5rem));
+.ivds-breadcrumb__link:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
 }
-.ivds-breadcrumb {
-  /* Size variants*/
-}
-.ivds-breadcrumb--small {
-  --separator-spacing: var(--spacing-1, 0.25rem);
-  font-size: var(--fontSize-xs, 0.75rem);
-}
-.ivds-breadcrumb--large {
-  --separator-spacing: var(--spacing-3, 0.75rem);
-  font-size: var(--fontSize-base, 1rem);
-}
-.ivds-breadcrumb {
-  /* Separator variants*/
-}
-.ivds-breadcrumb--separator-arrow {
-  --separator-content: "→";
-}
-.ivds-breadcrumb--separator-chevron {
-  --separator-content: "›";
-}
-.ivds-breadcrumb--separator-bullet {
-  --separator-content: "•";
-}
-.ivds-breadcrumb {
-  /* Theme variants*/
-}
-.ivds-breadcrumb--theme-dark {
-  --link-color: var(--color-brand-primary-400, #fb923c);
-  --link-color-hover: var(--color-brand-primary-300, #fdba74);
-  --current-color: var(--color-semantic-neutral-200, #e5e5e5);
-  --separator-color: var(--color-semantic-neutral-400, #a3a3a3);
-}
-.ivds-breadcrumb--theme-muted {
-  --link-color: var(--color-semantic-neutral-600, #525252);
-  --link-color-hover: var(--color-semantic-neutral-700, #404040);
-  --current-color: var(--color-semantic-neutral-800, #262626);
-  --separator-color: var(--color-semantic-neutral-400, #a3a3a3);
-}
-.ivds-breadcrumb {
-  /* Feature variants*/
-}
-.ivds-breadcrumb--with-icons .ivds-breadcrumb__link,
-.ivds-breadcrumb--with-icons .ivds-breadcrumb__current {
+.ivds-breadcrumb__separator {
+  color: var(--ivds-border-strong, #a1adba);
   display: flex;
   align-items: center;
-  gap: var(--spacing-1, 0.25rem);
 }
-.ivds-breadcrumb--with-icons .ivds-breadcrumb__icon {
-  width: 1em;
-  height: 1em;
-  flex-shrink: 0;
+.ivds-breadcrumb__separator svg {
+  width: 1rem;
+  height: 1rem;
 }
-@media (max-width: 640px) {
-  .ivds-breadcrumb--responsive .ivds-breadcrumb__list {
-    flex-wrap: wrap;
-  }
-  .ivds-breadcrumb--responsive .ivds-breadcrumb__item:nth-last-child(2)::after {
-    content: "...";
-    margin: 0 var(--separator-spacing);
-    color: var(--separator-color);
-  }
-  .ivds-breadcrumb--responsive .ivds-breadcrumb__item:not(:last-child, :nth-last-child(2))::after {
-    display: none;
-  }
-  .ivds-breadcrumb--responsive .ivds-breadcrumb__item:not(:last-child, :nth-last-child(2)) {
-    display: none;
-  }
-}
-.ivds-breadcrumb--truncate .ivds-breadcrumb__link,
-.ivds-breadcrumb--truncate .ivds-breadcrumb__current {
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.ivds-breadcrumb__current {
+  color: var(--ivds-text-primary, #121a24);
+  font-weight: var(--fontWeight-semibold, 600);
 }

package/lib/components/breadcrumb/breadcrumb.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/breadcrumb/breadcrumb.scss%23sass","../../../src/components/breadcrumb/_breadcrumb-mixin.scss","../../../src/components/breadcrumb/breadcrumb.scss","../../../src/base/_focus.scss"],"names":[],"mappings":"AAEA;ECGE,aAAA;ECHF,eAAA;EDKE,mBAAA;EACA,gBAAA;EACA,UAAA;EACA,SAAA;EACA,6BAAA;EACA,6DAAA;EACA,uCAAA;ACHF;AFLE;ECYA,aAAA;EACA,mBAAA;EACA,6BAAA;EACA,sCAAA;ACJF;AFPE;ECeA,6CAAA;EACA,qBAAA;EACA,0CAAA;EACA,kKACE;ACNJ;ADSE;EACE,6CAAA;ECPJ,0BAAA;EDSI,8BAAA;EACA,6BAAA;ACPJ;ACvBE;EACE,qHAAA;EACA,kDAAA;EACA,gBAAA;ADyBJ;ACtBE;EACE,aAAA;EACA,gBAAA;ADwBJ;AFxBE;EC6BA,yCAAA;EACA,aAAA;EACA,mBAAA;ACFF;AF1BI;EACE,WAAA;EACA,YAAA;AE4BN;AFxBE;EC0BA,wCAAA;EACA,4CAAA;ACCF","file":"breadcrumb.css","sourcesContent":["@use 'breadcrumb-mixin' as breadcrumb;\r\n\r\n.ivds-breadcrumb {\r\n  @include breadcrumb.breadcrumb-list;\r\n  \r\n  &__item {\r\n    @include breadcrumb.breadcrumb-item;\r\n  }\r\n  \r\n  &__link {\r\n    @include breadcrumb.breadcrumb-link;\r\n  }\r\n  \r\n  &__separator {\r\n    @include breadcrumb.breadcrumb-separator;\r\n    \r\n    svg {\r\n      width: 1rem;\r\n      height: 1rem;\r\n    }\r\n  }\r\n  \r\n  &__current {\r\n    @include breadcrumb.breadcrumb-current;\r\n  }\r\n}","// Breadcrumb component mixins and private styles\n\n@use '../../base/focus' as *;\n\n@mixin breadcrumb-list {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  gap: var(--spacing-2, 0.5rem);\n  font-family: var(--fontFamily-primary, system-ui, sans-serif);\n  font-size: var(--fontSize-sm, 0.875rem);\n}\n\n@mixin breadcrumb-item {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-2, 0.5rem);\n  color: var(--ivds-text-muted, #4d5968);\n}\n\n@mixin breadcrumb-link {\n  color: var(--color-brand-accent-700, #0b4593);\n  text-decoration: none;\n  font-weight: var(--fontWeight-medium, 500);\n  transition:\n    color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    text-decoration-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n  &:hover {\n    color: var(--color-brand-accent-600, #1058b8);\n    text-decoration: underline;\n    text-decoration-thickness: 2px;\n    text-underline-offset: 0.14em;\n  }\n\n  @include focus-ring;\n}\n\n@mixin breadcrumb-separator {\n  color: var(--ivds-border-strong, #a1adba);\n  display: flex;\n  align-items: center;\n}\n\n@mixin breadcrumb-current {\n  color: var(--ivds-text-primary, #121a24);\n  font-weight: var(--fontWeight-semibold, 600);\n}\n","@use 'breadcrumb-mixin' as breadcrumb;\r\n\r\n.ivds-breadcrumb {\r\n  @include breadcrumb.breadcrumb-list;\r\n  \r\n  &__item {\r\n    @include breadcrumb.breadcrumb-item;\r\n  }\r\n  \r\n  &__link {\r\n    @include breadcrumb.breadcrumb-link;\r\n  }\r\n  \r\n  &__separator {\r\n    @include breadcrumb.breadcrumb-separator;\r\n    \r\n    svg {\r\n      width: 1rem;\r\n      height: 1rem;\r\n    }\r\n  }\r\n  \r\n  &__current {\r\n    @include breadcrumb.breadcrumb-current;\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/breadcrumb/breadcrumb.min.css

@@ -1 +1 @@
-@charset "UTF-8";.ivds-breadcrumb{--separator-content:"/";--separator-spacing:var(--spacing-2,0.5rem);--link-color:var(--color-brand-primary-500,#f97316);--link-color-hover:var(--color-brand-primary-600,#ea580c);--current-color:var(--color-semantic-neutral-700,#404040);--separator-color:var(--color-semantic-neutral-500,#737373);font-size:var(--fontSize-sm,.875rem);line-height:var(--lineHeight-normal,1.5)}.ivds-breadcrumb,.ivds-breadcrumb__list{align-items:center;display:flex;flex-wrap:wrap}.ivds-breadcrumb__list{gap:0;list-style:none;margin:0;padding:0}.ivds-breadcrumb__item{align-items:center;display:flex}.ivds-breadcrumb__item:not(:last-child):after{color:var(--separator-color);content:var(--separator-content);font-weight:var(--fontWeight-normal,400);margin:0 var(--separator-spacing);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ivds-breadcrumb__link{border-radius:var(--borderRadius-md,.375rem);color:var(--link-color);margin:calc(var(--spacing-1, .25rem)*-1) calc(var(--spacing-2, .5rem)*-1);padding:var(--spacing-1,.25rem) var(--spacing-2,.5rem);text-decoration:none;transition:all .15s ease-in-out}.ivds-breadcrumb__link:hover{background-color:var(--color-brand-primary-50,#fff7ed);color:var(--link-color-hover);text-decoration:underline}.ivds-breadcrumb__link:focus{outline:2px solid var(--color-brand-primary-500,#f97316);outline-offset:2px;text-decoration:none}.ivds-breadcrumb__link:active{background-color:var(--color-brand-primary-100,#ffedd5)}.ivds-breadcrumb__current{color:var(--current-color);font-weight:var(--fontWeight-medium,500);margin:calc(var(--spacing-1, .25rem)*-1) calc(var(--spacing-2, .5rem)*-1);padding:var(--spacing-1,.25rem) var(--spacing-2,.5rem)}.ivds-breadcrumb--small{--separator-spacing:var(--spacing-1,0.25rem);font-size:var(--fontSize-xs,.75rem)}.ivds-breadcrumb--large{--separator-spacing:var(--spacing-3,0.75rem);font-size:var(--fontSize-base,1rem)}.ivds-breadcrumb--separator-arrow{--separator-content:"→"}.ivds-breadcrumb--separator-chevron{--separator-content:"›"}.ivds-breadcrumb--separator-bullet{--separator-content:"•"}.ivds-breadcrumb--theme-dark{--link-color:var(--color-brand-primary-400,#fb923c);--link-color-hover:var(--color-brand-primary-300,#fdba74);--current-color:var(--color-semantic-neutral-200,#e5e5e5);--separator-color:var(--color-semantic-neutral-400,#a3a3a3)}.ivds-breadcrumb--theme-muted{--link-color:var(--color-semantic-neutral-600,#525252);--link-color-hover:var(--color-semantic-neutral-700,#404040);--current-color:var(--color-semantic-neutral-800,#262626);--separator-color:var(--color-semantic-neutral-400,#a3a3a3)}.ivds-breadcrumb--with-icons .ivds-breadcrumb__current,.ivds-breadcrumb--with-icons .ivds-breadcrumb__link{align-items:center;display:flex;gap:var(--spacing-1,.25rem)}.ivds-breadcrumb--with-icons .ivds-breadcrumb__icon{flex-shrink:0;height:1em;width:1em}@media (max-width:640px){.ivds-breadcrumb--responsive .ivds-breadcrumb__list{flex-wrap:wrap}.ivds-breadcrumb--responsive .ivds-breadcrumb__item:nth-last-child(2):after{color:var(--separator-color);content:"...";margin:0 var(--separator-spacing)}.ivds-breadcrumb--responsive .ivds-breadcrumb__item:not(:last-child,:nth-last-child(2)),.ivds-breadcrumb--responsive .ivds-breadcrumb__item:not(:last-child,:nth-last-child(2)):after{display:none}}.ivds-breadcrumb--truncate .ivds-breadcrumb__current,.ivds-breadcrumb--truncate .ivds-breadcrumb__link{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ivds-breadcrumb{flex-wrap:wrap;font-family:var(--fontFamily-primary,system-ui,sans-serif);font-size:var(--fontSize-sm,.875rem);list-style:none;margin:0;padding:0}.ivds-breadcrumb,.ivds-breadcrumb__item{align-items:center;display:flex;gap:var(--spacing-2,.5rem)}.ivds-breadcrumb__item{color:var(--ivds-text-muted,#4d5968)}.ivds-breadcrumb__link{color:var(--color-brand-accent-700,#0b4593);font-weight:var(--fontWeight-medium,500);text-decoration:none;transition:color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),text-decoration-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease)}.ivds-breadcrumb__link:hover{color:var(--color-brand-accent-600,#1058b8);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em}.ivds-breadcrumb__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-breadcrumb__link:focus:not(:focus-visible){box-shadow:none;outline:none}.ivds-breadcrumb__separator{align-items:center;color:var(--ivds-border-strong,#a1adba);display:flex}.ivds-breadcrumb__separator svg{height:1rem;width:1rem}.ivds-breadcrumb__current{color:var(--ivds-text-primary,#121a24);font-weight:var(--fontWeight-semibold,600)}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/breadcrumb/breadcrumb.scss%23sass","../../../src/components/breadcrumb/breadcrumb.scss","../../../src/components/breadcrumb/_breadcrumb-mixin.scss","../../../src/base/_focus.scss"],"names":[],"mappings":"AAEA,iBCAA,cAAA,CCUE,0DAAA,CACA,oCAAA,CALA,eAAA,CAEA,QAAA,CADA,SDCF,CDLE,wCEEA,kBAAA,CAFA,YAAA,CAMA,0BDKF,CDXE,uBEeA,oCDJF,CDPE,uBEeA,2CAAA,CAEA,wCAAA,CADA,oBAAA,CAEA,0JDLF,CCSE,6BACE,2CAAA,CDPJ,yBAAA,CCSI,6BAAA,CACA,2BDPJ,CEvBE,qCAGE,eAAA,CAFA,iHAAA,CACA,gDF0BJ,CEtBE,iDAEE,eAAA,CADA,YFyBJ,CDxBE,4BE+BA,kBAAA,CAFA,uCAAA,CACA,YDDF,CD1BI,gCAEE,WAAA,CADA,UC6BN,CDxBE,0BE0BA,sCAAA,CACA,0CDCF","file":"breadcrumb.min.css","sourcesContent":["@use 'breadcrumb-mixin' as breadcrumb;\r\n\r\n.ivds-breadcrumb {\r\n  @include breadcrumb.breadcrumb-list;\r\n  \r\n  &__item {\r\n    @include breadcrumb.breadcrumb-item;\r\n  }\r\n  \r\n  &__link {\r\n    @include breadcrumb.breadcrumb-link;\r\n  }\r\n  \r\n  &__separator {\r\n    @include breadcrumb.breadcrumb-separator;\r\n    \r\n    svg {\r\n      width: 1rem;\r\n      height: 1rem;\r\n    }\r\n  }\r\n  \r\n  &__current {\r\n    @include breadcrumb.breadcrumb-current;\r\n  }\r\n}","@use 'breadcrumb-mixin' as breadcrumb;\r\n\r\n.ivds-breadcrumb {\r\n  @include breadcrumb.breadcrumb-list;\r\n  \r\n  &__item {\r\n    @include breadcrumb.breadcrumb-item;\r\n  }\r\n  \r\n  &__link {\r\n    @include breadcrumb.breadcrumb-link;\r\n  }\r\n  \r\n  &__separator {\r\n    @include breadcrumb.breadcrumb-separator;\r\n    \r\n    svg {\r\n      width: 1rem;\r\n      height: 1rem;\r\n    }\r\n  }\r\n  \r\n  &__current {\r\n    @include breadcrumb.breadcrumb-current;\r\n  }\r\n}","// Breadcrumb component mixins and private styles\n\n@use '../../base/focus' as *;\n\n@mixin breadcrumb-list {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  gap: var(--spacing-2, 0.5rem);\n  font-family: var(--fontFamily-primary, system-ui, sans-serif);\n  font-size: var(--fontSize-sm, 0.875rem);\n}\n\n@mixin breadcrumb-item {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-2, 0.5rem);\n  color: var(--ivds-text-muted, #4d5968);\n}\n\n@mixin breadcrumb-link {\n  color: var(--color-brand-accent-700, #0b4593);\n  text-decoration: none;\n  font-weight: var(--fontWeight-medium, 500);\n  transition:\n    color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    text-decoration-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n  &:hover {\n    color: var(--color-brand-accent-600, #1058b8);\n    text-decoration: underline;\n    text-decoration-thickness: 2px;\n    text-underline-offset: 0.14em;\n  }\n\n  @include focus-ring;\n}\n\n@mixin breadcrumb-separator {\n  color: var(--ivds-border-strong, #a1adba);\n  display: flex;\n  align-items: center;\n}\n\n@mixin breadcrumb-current {\n  color: var(--ivds-text-primary, #121a24);\n  font-weight: var(--fontWeight-semibold, 600);\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/button/__tests__/button-mixins.test.css

@@ -0,0 +1,29 @@
+.test-button-base {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--borderWidth-1, 1px) solid transparent;
+  border-radius: var(--borderRadius-md, 0.375rem);
+  font-family: var(--fontFamily-sans, system-ui, -apple-system, sans-serif);
+  font-weight: var(--fontWeight-medium, 500);
+  line-height: var(--lineHeight-tight, 1.25);
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+  -webkit-user-select: none;
+             -moz-user-select: none;
+          user-select: none;
+  white-space: nowrap;
+}
+
+.test-button-variant {
+  background-color: #0ea5e9;
+  color: #ffffff;
+  border-color: transparent;
+}
+
+.test-button-size {
+  padding: 0.75rem 1.5rem;
+  font-size: 0.875rem;
+  min-height: 44px;
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/button/__tests__/button-mixins.test.scss%23sass","../../../../src/components/button/__tests__/button-mixins.test.scss"],"names":[],"mappings":"AAoBA;EAhBE,oBAAA;ECFF,mBAAA;EACA,uBAAA;EDIE,mDAAA;EACA,+CAAA;EACA,yEAAA;EACA,0CAAA;EACA,0CAAA;EACA,qBAAA;EACA,eAAA;EACA,iCAAA;EACA,yBAAA;aAAA,sBAAA;UAAA,iBAAA;EACA,mBAAA;ACFF;;ADUA;ECPA,yBAAA;EDSE,cAAA;ECPF,yBAAA;AACA;;ADUA;EACE,uBAAA;ECPF,mBAAA;EDSE,gBAAA;ACPF","file":"button-mixins.test.css","sourcesContent":["// SCSS compilation test for button mixins\r\n\r\n// Base button mixin with common styles\r\n@mixin button-base {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: var(--borderWidth-1, 1px) solid transparent;\r\n  border-radius: var(--borderRadius-md, 0.375rem);\r\n  font-family: var(--fontFamily-sans, system-ui, -apple-system, sans-serif);\r\n  font-weight: var(--fontWeight-medium, 500);\r\n  line-height: var(--lineHeight-tight, 1.25);\r\n  text-decoration: none;\r\n  cursor: pointer;\r\n  transition: all 0.15s ease-in-out;\r\n  user-select: none;\r\n  white-space: nowrap;\r\n}\r\n\r\n// Test compilation by using the mixins\r\n.test-button-base {\r\n  @include button-base;\r\n}\r\n\r\n.test-button-variant {\r\n  background-color: #0ea5e9;\r\n  color: #ffffff;\r\n  border-color: transparent;\r\n}\r\n\r\n.test-button-size {\r\n  padding: 0.75rem 1.5rem;\r\n  font-size: 0.875rem;\r\n  min-height: 44px;\r\n}","// SCSS compilation test for button mixins\r\n\r\n// Base button mixin with common styles\r\n@mixin button-base {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: var(--borderWidth-1, 1px) solid transparent;\r\n  border-radius: var(--borderRadius-md, 0.375rem);\r\n  font-family: var(--fontFamily-sans, system-ui, -apple-system, sans-serif);\r\n  font-weight: var(--fontWeight-medium, 500);\r\n  line-height: var(--lineHeight-tight, 1.25);\r\n  text-decoration: none;\r\n  cursor: pointer;\r\n  transition: all 0.15s ease-in-out;\r\n  user-select: none;\r\n  white-space: nowrap;\r\n}\r\n\r\n// Test compilation by using the mixins\r\n.test-button-base {\r\n  @include button-base;\r\n}\r\n\r\n.test-button-variant {\r\n  background-color: #0ea5e9;\r\n  color: #ffffff;\r\n  border-color: transparent;\r\n}\r\n\r\n.test-button-size {\r\n  padding: 0.75rem 1.5rem;\r\n  font-size: 0.875rem;\r\n  min-height: 44px;\r\n}"]}

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

@@ -0,0 +1 @@
+.test-button-base{align-items:center;border:var(--borderWidth-1,1px) solid transparent;border-radius:var(--borderRadius-md,.375rem);cursor:pointer;display:inline-flex;font-family:var(--fontFamily-sans,system-ui,-apple-system,sans-serif);font-weight:var(--fontWeight-medium,500);justify-content:center;line-height:var(--lineHeight-tight,1.25);text-decoration:none;transition:all .15s ease-in-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.test-button-variant{background-color:#0ea5e9;border-color:transparent;color:#fff}.test-button-size{font-size:.875rem;min-height:44px;padding:.75rem 1.5rem}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/button/__tests__/button-mixins.test.scss%23sass","../../../../src/components/button/__tests__/button-mixins.test.scss"],"names":[],"mappings":"AAoBA,kBClBA,kBAAA,CDKE,iDAAA,CACA,4CAAA,CAKA,cAAA,CATA,mBAAA,CAKA,qEAAA,CACA,wCAAA,CCPF,sBAAA,CDQE,wCAAA,CACA,oBAAA,CAEA,+BAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,gBAAA,CACA,kBCFF,CDUA,qBCPA,wBAAA,CAEA,wBAAA,CDOE,UCNF,CDUA,kBCNA,iBAAA,CDSE,eAAA,CAFA,qBCLF","file":"button-mixins.test.min.css","sourcesContent":["// SCSS compilation test for button mixins\r\n\r\n// Base button mixin with common styles\r\n@mixin button-base {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: var(--borderWidth-1, 1px) solid transparent;\r\n  border-radius: var(--borderRadius-md, 0.375rem);\r\n  font-family: var(--fontFamily-sans, system-ui, -apple-system, sans-serif);\r\n  font-weight: var(--fontWeight-medium, 500);\r\n  line-height: var(--lineHeight-tight, 1.25);\r\n  text-decoration: none;\r\n  cursor: pointer;\r\n  transition: all 0.15s ease-in-out;\r\n  user-select: none;\r\n  white-space: nowrap;\r\n}\r\n\r\n// Test compilation by using the mixins\r\n.test-button-base {\r\n  @include button-base;\r\n}\r\n\r\n.test-button-variant {\r\n  background-color: #0ea5e9;\r\n  color: #ffffff;\r\n  border-color: transparent;\r\n}\r\n\r\n.test-button-size {\r\n  padding: 0.75rem 1.5rem;\r\n  font-size: 0.875rem;\r\n  min-height: 44px;\r\n}","// SCSS compilation test for button mixins\r\n\r\n// Base button mixin with common styles\r\n@mixin button-base {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: var(--borderWidth-1, 1px) solid transparent;\r\n  border-radius: var(--borderRadius-md, 0.375rem);\r\n  font-family: var(--fontFamily-sans, system-ui, -apple-system, sans-serif);\r\n  font-weight: var(--fontWeight-medium, 500);\r\n  line-height: var(--lineHeight-tight, 1.25);\r\n  text-decoration: none;\r\n  cursor: pointer;\r\n  transition: all 0.15s ease-in-out;\r\n  user-select: none;\r\n  white-space: nowrap;\r\n}\r\n\r\n// Test compilation by using the mixins\r\n.test-button-base {\r\n  @include button-base;\r\n}\r\n\r\n.test-button-variant {\r\n  background-color: #0ea5e9;\r\n  color: #ffffff;\r\n  border-color: transparent;\r\n}\r\n\r\n.test-button-size {\r\n  padding: 0.75rem 1.5rem;\r\n  font-size: 0.875rem;\r\n  min-height: 44px;\r\n}"]}

package/lib/components/button/_button-mixin.scss

@@ -0,0 +1,203 @@
+// Button component mixins and private styles
+/* stylelint-disable no-descending-specificity, at-rule-empty-line-before */
+
+@use '../../base/focus' as *;
+
+@keyframes ivds-button-spin {
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+@mixin button-base {
+  // Per-component CSS variable API
+  --background-color: transparent;
+  --color: var(--ivds-text-primary, #121a24);
+  --border-color: transparent;
+  --hover-background-color: transparent;
+  --hover-border-color: transparent;
+  --active-background-color: transparent;
+  --disabled-background-color: var(--ivds-surface-muted, #f1f3f5);
+  --disabled-border-color: var(--ivds-border-subtle, #e2e7ec);
+  --disabled-color: var(--ivds-text-muted, #6b7785);
+  --font-size: var(--fontSize-base, 1rem);
+  --min-height: 48px;
+  --padding-block: var(--spacing-3, 0.75rem);
+  --padding-inline: var(--spacing-6, 1.5rem);
+  --border-radius: var(--ivds-radius-s, 0.125rem);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2, 0.5rem);
+  min-width: 2.75rem;
+  min-height: var(--min-height);
+  padding: var(--padding-block) var(--padding-inline);
+  border: 2px solid var(--border-color);
+  border-radius: var(--border-radius);
+  background-color: var(--background-color);
+  color: var(--color);
+  font-family: var(--fontFamily-primary, system-ui, sans-serif);
+  font-size: var(--font-size);
+  font-weight: var(--fontWeight-bold, 700);
+  letter-spacing: 0.01em;
+  line-height: 1.1;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  position: relative;
+  transition:
+    background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),
+    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),
+    color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+
+  @include focus-ring;
+
+  &:hover:not(:disabled, [aria-disabled='true']) {
+    background-color: var(--hover-background-color);
+    border-color: var(--hover-border-color);
+  }
+
+  &:active:not(:disabled, [aria-disabled='true']) {
+    background-color: var(--active-background-color);
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    background-color: var(--disabled-background-color);
+    border-color: var(--disabled-border-color);
+    color: var(--disabled-color);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+@mixin button-variant(
+  $bg-color,
+  $text-color,
+  $border-color: transparent,
+  $hover-bg: null,
+  $hover-border: null,
+  $active-bg: null
+) {
+  --background-color: #{$bg-color};
+  --color: #{$text-color};
+  --border-color: #{$border-color};
+
+  @if $hover-bg {
+    --hover-background-color: #{$hover-bg};
+  }
+
+  @if $hover-border {
+    --hover-border-color: #{$hover-border};
+  }
+
+  @if $active-bg {
+    --active-background-color: #{$active-bg};
+  }
+}
+
+@mixin button-variant-gradient($gradient, $text-color: #fff, $hover-filter: brightness(0.95)) {
+  --border-color: transparent;
+  --color: #{$text-color};
+
+  background: $gradient;
+
+  &:hover:not(:disabled, [aria-disabled='true']) {
+    filter: $hover-filter;
+  }
+}
+
+@mixin button-variant-outline($border-color, $text-color, $hover-bg: null) {
+  --background-color: var(--ivds-interactive-secondary-bg, #fff);
+  --color: #{$text-color};
+  --border-color: #{$border-color};
+
+  @if $hover-bg {
+    --hover-background-color: #{$hover-bg};
+  }
+}
+
+@mixin button-variant-ghost($text-color, $hover-bg) {
+  --background-color: var(--ivds-interactive-supplementary-bg, #f1f3f5);
+  --border-color: transparent;
+  --color: #{$text-color};
+  --hover-background-color: #{$hover-bg};
+}
+
+@mixin button-variant-glass($text-color: var(--ivds-text-primary)) {
+  --background-color: var(--ivds-surface-base, #fff);
+  --border-color: var(--ivds-border-strong, #a1adba);
+  --color: #{$text-color};
+}
+
+@mixin button-size($padding-y, $padding-x, $font-size, $min-height: null) {
+  --padding-block: #{$padding-y};
+  --padding-inline: #{$padding-x};
+  --font-size: #{$font-size};
+
+  @if $min-height {
+    --min-height: #{$min-height};
+  }
+}
+
+@mixin button-icon-spacing($gap: var(--spacing-2, 0.5rem)) {
+  gap: $gap;
+
+  .ivds-button__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+}
+
+@mixin button-loading {
+  position: relative;
+  color: transparent !important;
+  pointer-events: none;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 1rem;
+    height: 1rem;
+    border: 2px solid currentcolor;
+    border-radius: 9999px;
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+    transform: translate(-50%, -50%);
+    animation: ivds-button-spin 0.7s linear infinite;
+    color: inherit;
+  }
+}
+
+@mixin button-full-width {
+  width: 100%;
+  justify-content: center;
+}
+
+@mixin button-icon-only($size: 48px) {
+  --min-height: #{$size};
+  --padding-block: 0;
+  --padding-inline: 0;
+
+  width: $size;
+  height: $size;
+
+  .ivds-button__icon {
+    margin: 0;
+  }
+
+  &--circular {
+    --border-radius: var(--borderRadius-full, 9999px);
+  }
+}
+
+@mixin button-pill {
+  border-radius: var(--borderRadius-full, 9999px);
+}
+