@ivds/core 0.1.1 → 1.0.0

package/lib/components/tag/tag.css

@@ -1,24 +1,30 @@
-/* Tag component styles*/
-/* Provides styling for the IVDS tag component with all variants, sizes, and removable functionality*/
-/* Tag Base*/
+/* stylelint-disable no-descending-specificity */
 .ivds-tag {
   display: inline-flex;
   align-items: center;
-  font-family: var(--fontFamily-sans, system-ui, -apple-system, sans-serif);
-  font-weight: var(--fontWeight-medium, 500);
-  line-height: var(--lineHeight-tight, 1.25);
-  border-radius: var(--borderRadius-md, 0.375rem);
-  border: var(--borderWidth-1, 1px) solid transparent;
-  text-decoration: none;
+  justify-content: center;
   white-space: nowrap;
-  transition: all 0.15s ease-in-out;
   -webkit-user-select: none;
-     -moz-user-select: none;
+             -moz-user-select: none;
           user-select: none;
+  text-decoration: none;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  font-family: var(--fontFamily-primary, system-ui, sans-serif);
+  font-weight: var(--fontWeight-semibold, 600);
+  line-height: var(--lineHeight-tight, 1.25);
+  border: 1px solid transparent;
+  border-radius: var(--ivds-radius-s, 0.125rem);
+  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);
 }
-.ivds-tag:focus-within {
-  outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
-  outline-offset: 2px;
+.ivds-tag: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-tag:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
 }
 .ivds-tag {
   padding: var(--spacing-1, 0.25rem) var(--spacing-3, 0.75rem);
@@ -38,15 +44,12 @@
   fill: currentcolor;
 }
 .ivds-tag {
-  background-color: var(--color-semantic-neutral-100, #f1f5f9);
-  color: var(--color-semantic-neutral-700, #334155);
-  border-color: transparent;
-}
-.ivds-tag:hover {
-  background-color: var(--color-semantic-neutral-200, #e2e8f0);
+  background-color: var(--ivds-surface-muted, #f1f3f5);
+  color: var(--ivds-text-secondary, #36414f);
+  border-color: var(--ivds-border-subtle, #e2e7ec);
 }
-.ivds-tag {
-  /* Tag elements*/
+.ivds-tag:hover:not(:disabled) {
+  background-color: var(--color-semantic-neutral-200, #e2e7ec);
 }
 .ivds-tag__icon {
   display: inline-flex;
@@ -73,186 +76,152 @@
   height: 0.875em;
   fill: currentcolor;
 }
-/* Tag Color Variants*/
 .ivds-tag--primary {
-  background-color: var(--color-brand-primary-100, #ffedd5);
-  color: var(--color-brand-primary-700, #c2410c);
-  border-color: transparent;
+  background-color: var(--color-brand-accent-50, #eef4ff);
+  color: var(--color-brand-accent-700, #0b4593);
+  border-color: var(--color-brand-accent-200, #bfd7ff);
 }
-.ivds-tag--primary:hover {
-  background-color: var(--color-brand-primary-200, #fed7aa);
+.ivds-tag--primary:hover:not(:disabled) {
+  background-color: var(--color-brand-accent-100, #dbe9ff);
 }
 .ivds-tag--success {
-  background-color: var(--color-semantic-success-100, #dcfce7);
-  color: var(--color-semantic-success-700, #15803d);
-  border-color: transparent;
+  background-color: var(--color-semantic-success-50, #edf9f4);
+  color: var(--color-semantic-success-700, #0a573a);
+  border-color: var(--color-ui-success-200, #b8e9d2);
 }
-.ivds-tag--success:hover {
-  background-color: var(--color-semantic-success-200, #bbf7d0);
+.ivds-tag--success:hover:not(:disabled) {
+  background-color: var(--color-ui-success-100, #d6f3e5);
 }
 .ivds-tag--warning {
-  background-color: var(--color-semantic-warning-100, #fef3c7);
-  color: var(--color-semantic-warning-700, #b45309);
-  border-color: transparent;
+  background-color: var(--color-semantic-warning-50, #fff8eb);
+  color: var(--color-semantic-warning-700, #834b08);
+  border-color: var(--color-ui-warning-200, #f6d6a7);
 }
-.ivds-tag--warning:hover {
-  background-color: var(--color-semantic-warning-200, #fed7aa);
+.ivds-tag--warning:hover:not(:disabled) {
+  background-color: var(--color-ui-warning-100, #fcebcf);
 }
 .ivds-tag--error {
-  background-color: var(--color-semantic-error-100, #fee2e2);
-  color: var(--color-semantic-error-700, #b91c1c);
-  border-color: transparent;
+  background-color: var(--color-semantic-error-50, #fff1f2);
+  color: var(--color-semantic-error-700, #922036);
+  border-color: var(--color-ui-error-200, #f2b8c1);
 }
-.ivds-tag--error:hover {
-  background-color: var(--color-semantic-error-200, #fecaca);
+.ivds-tag--error:hover:not(:disabled) {
+  background-color: var(--color-ui-error-100, #f9dbe0);
 }
 .ivds-tag--info {
-  background-color: var(--color-semantic-info-100, #dbeafe);
-  color: var(--color-semantic-info-700, #1d4ed8);
-  border-color: transparent;
+  background-color: var(--color-semantic-info-50, #edf4ff);
+  color: var(--color-semantic-info-700, #003d99);
+  border-color: var(--color-ui-info-200, #bfd7ff);
 }
-.ivds-tag--info:hover {
-  background-color: var(--color-semantic-info-200, #bfdbfe);
+.ivds-tag--info:hover:not(:disabled) {
+  background-color: var(--color-ui-info-100, #dbe9ff);
 }
-/* Tag Style Variants*/
 .ivds-tag--outlined.ivds-tag {
   background-color: transparent;
-  border-color: var(--color-semantic-neutral-300, #cbd5e1);
-  color: var(--color-semantic-neutral-700, #334155);
+  color: var(--ivds-text-secondary, #36414f);
+  border-color: var(--ivds-border-strong, #a1adba);
 }
-.ivds-tag--outlined.ivds-tag:hover {
-  background-color: var(--color-semantic-neutral-50, #f8fafc);
+.ivds-tag--outlined.ivds-tag:hover:not(:disabled) {
+  background-color: var(--ivds-surface-muted, #f1f3f5);
 }
 .ivds-tag--outlined.ivds-tag--primary {
   background-color: transparent;
-  border-color: var(--color-brand-primary-300, #fdba74);
-  color: var(--color-brand-primary-700, #c2410c);
+  color: var(--color-brand-accent-700, #0b4593);
+  border-color: var(--color-brand-accent-300, #93bcff);
 }
-.ivds-tag--outlined.ivds-tag--primary:hover {
-  background-color: var(--color-brand-primary-50, #fff7ed);
+.ivds-tag--outlined.ivds-tag--primary:hover:not(:disabled) {
+  background-color: var(--color-brand-accent-50, #eef4ff);
 }
 .ivds-tag--outlined.ivds-tag--success {
   background-color: transparent;
-  border-color: var(--color-semantic-success-300, #86efac);
-  color: var(--color-semantic-success-700, #15803d);
+  color: var(--color-semantic-success-700, #0a573a);
+  border-color: var(--color-ui-success-300, #86d7b8);
 }
-.ivds-tag--outlined.ivds-tag--success:hover {
-  background-color: var(--color-semantic-success-50, #f0fdf4);
+.ivds-tag--outlined.ivds-tag--success:hover:not(:disabled) {
+  background-color: var(--color-semantic-success-50, #edf9f4);
 }
 .ivds-tag--outlined.ivds-tag--warning {
   background-color: transparent;
-  border-color: var(--color-semantic-warning-300, #fcd34d);
-  color: var(--color-semantic-warning-700, #b45309);
+  color: var(--color-semantic-warning-700, #834b08);
+  border-color: var(--color-ui-warning-300, #efbf76);
 }
-.ivds-tag--outlined.ivds-tag--warning:hover {
-  background-color: var(--color-semantic-warning-50, #fffbeb);
+.ivds-tag--outlined.ivds-tag--warning:hover:not(:disabled) {
+  background-color: var(--color-semantic-warning-50, #fff8eb);
 }
 .ivds-tag--outlined.ivds-tag--error {
   background-color: transparent;
-  border-color: var(--color-semantic-error-300, #fca5a5);
-  color: var(--color-semantic-error-700, #b91c1c);
+  color: var(--color-semantic-error-700, #922036);
+  border-color: var(--color-ui-error-300, #e68f9d);
 }
-.ivds-tag--outlined.ivds-tag--error:hover {
-  background-color: var(--color-semantic-error-50, #fef2f2);
+.ivds-tag--outlined.ivds-tag--error:hover:not(:disabled) {
+  background-color: var(--color-semantic-error-50, #fff1f2);
 }
 .ivds-tag--outlined.ivds-tag--info {
   background-color: transparent;
-  border-color: var(--color-semantic-info-300, #93c5fd);
-  color: var(--color-semantic-info-700, #1d4ed8);
+  color: var(--color-semantic-info-700, #003d99);
+  border-color: var(--color-ui-info-300, #93bcff);
 }
-.ivds-tag--outlined.ivds-tag--info:hover {
-  background-color: var(--color-semantic-info-50, #eff6ff);
+.ivds-tag--outlined.ivds-tag--info:hover:not(:disabled) {
+  background-color: var(--color-semantic-info-50, #edf4ff);
 }
 .ivds-tag--solid.ivds-tag {
-  background-color: var(--color-semantic-neutral-600, #475569);
-  color: var(--color-semantic-neutral-50, #f8fafc);
-  border-color: var(--color-semantic-neutral-600, #475569);
+  background-color: var(--color-semantic-neutral-700, #36414f);
+  color: #fff;
+  border-color: var(--color-semantic-neutral-700, #36414f);
 }
-.ivds-tag--solid.ivds-tag:hover {
-  background-color: var(--color-semantic-neutral-700, #334155);
-  border-color: var(--color-semantic-neutral-700, #334155);
+.ivds-tag--solid.ivds-tag:hover:not(:disabled) {
+  background-color: var(--color-semantic-neutral-800, #202a36);
 }
 .ivds-tag--solid.ivds-tag--primary {
-  background-color: var(--color-brand-primary-600, #ea580c);
-  color: var(--color-semantic-neutral-50, #fafafa);
-  border-color: var(--color-brand-primary-600, #ea580c);
+  background-color: var(--color-brand-accent-600, #1058b8);
+  color: #fff;
+  border-color: var(--color-brand-accent-600, #1058b8);
 }
-.ivds-tag--solid.ivds-tag--primary:hover {
-  background-color: var(--color-brand-primary-700, #c2410c);
-  border-color: var(--color-brand-primary-700, #c2410c);
+.ivds-tag--solid.ivds-tag--primary:hover:not(:disabled) {
+  background-color: var(--color-brand-accent-700, #0b4593);
 }
 .ivds-tag--solid.ivds-tag--success {
-  background-color: var(--color-semantic-success-600, #16a34a);
-  color: var(--color-semantic-neutral-50, #f8fafc);
-  border-color: var(--color-semantic-success-600, #16a34a);
+  background-color: var(--color-semantic-success-600, #0f6f4a);
+  color: #fff;
+  border-color: var(--color-semantic-success-600, #0f6f4a);
 }
-.ivds-tag--solid.ivds-tag--success:hover {
-  background-color: var(--color-semantic-success-700, #15803d);
-  border-color: var(--color-semantic-success-700, #15803d);
+.ivds-tag--solid.ivds-tag--success:hover:not(:disabled) {
+  background-color: var(--color-semantic-success-700, #0a573a);
 }
 .ivds-tag--solid.ivds-tag--warning {
-  background-color: var(--color-semantic-warning-600, #d97706);
-  color: var(--color-semantic-neutral-50, #f8fafc);
-  border-color: var(--color-semantic-warning-600, #d97706);
+  background-color: var(--color-semantic-warning-600, #a76009);
+  color: #fff;
+  border-color: var(--color-semantic-warning-600, #a76009);
 }
-.ivds-tag--solid.ivds-tag--warning:hover {
-  background-color: var(--color-semantic-warning-700, #b45309);
-  border-color: var(--color-semantic-warning-700, #b45309);
+.ivds-tag--solid.ivds-tag--warning:hover:not(:disabled) {
+  background-color: var(--color-semantic-warning-700, #834b08);
 }
 .ivds-tag--solid.ivds-tag--error {
-  background-color: var(--color-semantic-error-600, #dc2626);
-  color: var(--color-semantic-neutral-50, #f8fafc);
-  border-color: var(--color-semantic-error-600, #dc2626);
+  background-color: var(--color-semantic-error-600, #b72a41);
+  color: #fff;
+  border-color: var(--color-semantic-error-600, #b72a41);
 }
-.ivds-tag--solid.ivds-tag--error:hover {
-  background-color: var(--color-semantic-error-700, #b91c1c);
-  border-color: var(--color-semantic-error-700, #b91c1c);
+.ivds-tag--solid.ivds-tag--error:hover:not(:disabled) {
+  background-color: var(--color-semantic-error-700, #922036);
 }
 .ivds-tag--solid.ivds-tag--info {
-  background-color: var(--color-semantic-info-600, #2563eb);
-  color: var(--color-semantic-neutral-50, #f8fafc);
-  border-color: var(--color-semantic-info-600, #2563eb);
+  background-color: var(--color-semantic-info-600, #0050c8);
+  color: #fff;
+  border-color: var(--color-semantic-info-600, #0050c8);
 }
-.ivds-tag--solid.ivds-tag--info:hover {
-  background-color: var(--color-semantic-info-700, #1d4ed8);
-  border-color: var(--color-semantic-info-700, #1d4ed8);
+.ivds-tag--solid.ivds-tag--info:hover:not(:disabled) {
+  background-color: var(--color-semantic-info-700, #003d99);
 }
-/* Tag Size Variants*/
 .ivds-tag--small {
   padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
   font-size: var(--fontSize-xs, 0.75rem);
   min-height: 20px;
 }
-.ivds-tag--small .ivds-tag__icon svg {
-  width: 0.875em;
-  height: 0.875em;
-}
-.ivds-tag--small.ivds-tag--removable .ivds-tag__remove {
-  margin-left: var(--spacing-1, 0.25rem);
-  padding: 2px;
-}
-.ivds-tag--small.ivds-tag--removable .ivds-tag__remove svg {
-  width: 0.75em;
-  height: 0.75em;
-}
 .ivds-tag--large {
   padding: var(--spacing-2, 0.5rem) var(--spacing-4, 1rem);
   font-size: var(--fontSize-base, 1rem);
   min-height: 32px;
 }
-.ivds-tag--large .ivds-tag__icon svg {
-  width: 1.125em;
-  height: 1.125em;
-}
-.ivds-tag--large.ivds-tag--removable .ivds-tag__remove {
-  margin-left: var(--spacing-3, 0.75rem);
-  padding: var(--spacing-1, 0.25rem);
-}
-.ivds-tag--large.ivds-tag--removable .ivds-tag__remove svg {
-  width: 1em;
-  height: 1em;
-}
-/* Tag Functionality Variants*/
 .ivds-tag--removable {
   padding-right: var(--spacing-1, 0.25rem);
 }
@@ -261,107 +230,78 @@
   align-items: center;
   justify-content: center;
   margin-left: var(--spacing-2, 0.5rem);
-  padding: var(--spacing-1, 0.25rem);
-  background: transparent;
+  padding: 2px;
   border: none;
-  border-radius: var(--borderRadius-sm, 0.25rem);
+  border-radius: var(--ivds-radius-xs, 0.125rem);
+  background-color: transparent;
+  color: currentcolor;
   cursor: pointer;
-  color: inherit;
-  opacity: 0.7;
-  transition: opacity 0.15s ease-in-out, background-color 0.15s ease-in-out;
+  transition: background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease), color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
 }
 .ivds-tag--removable .ivds-tag__remove:hover {
-  opacity: 1;
-  background-color: rgba(0, 0, 0, 0.1);
-}
-.ivds-tag--removable .ivds-tag__remove:focus {
-  outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
-  outline-offset: 1px;
-  opacity: 1;
-}
-.ivds-tag--removable .ivds-tag__remove:active {
-  transform: scale(0.95);
+  background-color: rgba(16, 24, 40, 0.08);
 }
 .ivds-tag--removable .ivds-tag__remove svg {
-  width: 0.875em;
-  height: 0.875em;
-  fill: currentcolor;
+  width: 14px;
+  height: 14px;
 }
 .ivds-tag--link {
   cursor: pointer;
-  text-decoration: none;
 }
-.ivds-tag--link:hover {
-  text-decoration: none;
+.ivds-tag--link:hover:not(:disabled) {
+  border-color: var(--ivds-border-strong, #a1adba);
 }
-.ivds-tag--link:focus {
-  outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
-  outline-offset: 2px;
+.ivds-tag--link:active:not(:disabled) {
+  opacity: 0.9;
 }
-.ivds-tag--link:active {
-  transform: translateY(1px);
+.ivds-tag--link {
+  text-decoration: none;
 }
 .ivds-tag--interactive {
   cursor: pointer;
 }
-.ivds-tag--interactive:hover {
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
-}
-.ivds-tag--interactive:active {
-  transform: translateY(0);
+.ivds-tag--interactive:hover:not(:disabled) {
+  border-color: var(--ivds-border-strong, #a1adba);
 }
-/* Tag Status Variants*/
-.ivds-tag--new {
-  position: relative;
+.ivds-tag--interactive:active:not(:disabled) {
+  opacity: 0.9;
 }
-.ivds-tag--new::after {
+.ivds-tag--new::before {
   content: "";
-  position: absolute;
-  top: -2px;
-  right: -2px;
   width: 6px;
   height: 6px;
-  background-color: var(--color-semantic-success-500, #22c55e);
-  border-radius: 50%;
-  border: 1px solid var(--color-semantic-neutral-50, #f8fafc);
-}
-.ivds-tag--updated {
-  position: relative;
+  border-radius: var(--borderRadius-full, 9999px);
+  margin-right: var(--spacing-2, 0.5rem);
+  background-color: var(--color-semantic-success-500, #16a34a);
 }
-.ivds-tag--updated::after {
+.ivds-tag--updated::before {
   content: "";
-  position: absolute;
-  top: -2px;
-  right: -2px;
   width: 6px;
   height: 6px;
-  background-color: var(--color-semantic-info-500, #3b82f6);
-  border-radius: 50%;
-  border: 1px solid var(--color-semantic-neutral-50, #f8fafc);
+  border-radius: var(--borderRadius-full, 9999px);
+  margin-right: var(--spacing-2, 0.5rem);
+  background-color: var(--color-semantic-info-500, #1f84d6);
 }
-/* Tag State Variants*/
 .ivds-tag--disabled {
-  opacity: 0.5;
+  opacity: 0.55;
   cursor: not-allowed;
   pointer-events: none;
 }
-/* Tag Group*/
 .ivds-tag-group {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--spacing-2, 0.5rem);
   align-items: center;
+  gap: var(--spacing-2, 0.5rem);
 }
 .ivds-tag-group--compact {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--spacing-1, 0.25rem);
   align-items: center;
+  gap: var(--spacing-1, 0.25rem);
 }
 .ivds-tag-group--spacious {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--spacing-3, 0.75rem);
   align-items: center;
+  gap: var(--spacing-3, 0.75rem);
 }

package/lib/components/tag/tag.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/tag/_tag-mixin.scss","../../../src/components/tag/tag.scss%23sass","../../../src/components/tag/tag.scss","../../../src/base/_focus.scss"],"names":[],"mappings":"AACA,gDAAA;ACIA;EDCE,oBAAA;EEHF,mBAAA;EFKE,uBAAA;EEHF,mBAAA;EFKE,yBAAA;aAAA,sBAAA;UAAA,iBAAA;EACA,qBAAA;EACA,yBAAA;EACA,sBAAA;EACA,6DAAA;EACA,4CAAA;EACA,0CAAA;EACA,6BAAA;EACA,6CAAA;EACA,wOACE;AEJJ;ACXE;EACE,qHAAA;EACA,kDAAA;EACA,gBAAA;ADaJ;ACVE;EACE,aAAA;EACA,gBAAA;ADYJ;ADpBA;ED+DE,4DAAA;EACA,uCC9D4E;EDiE1E,gBAAA;EArBF,6BADyB;AEnB3B;AFsBE;EACE,oBAAA;EACA,mBAAA;EACA,uBAAA;EACA,cAAA;AEpBJ;AFsBI;EACE,UAAA;EACA,WAAA;EACA,kBAAA;AEpBN;ADrCA;EDuBE,oDAAA;EEiBF,0CAAA;EFfE,gDClBE;ACmCJ;AFdI;EACE,4DCrBF;ACqCJ;ADlCE;EACE,oBAAA;EACA,mBAAA;ECoCJ,uBAAA;EDlCI,cAAA;ACoCJ;ADlCI;EACE,UAAA;EACA,WAAA;EACA,kBAAA;ACoCN;ADhCE;ECkCF,OAAA;AACA;AD/BE;EACE,oBAAA;EACA,mBAAA;EACA,uBAAA;EACA,cAAA;ACiCJ;AD/BI;ECiCJ,cAAA;ED/BM,eAAA;ECiCN,kBAAA;AACA;AD5BA;EDnBE,uDCqBE;EDpBF,6CCqBE;EDpBF,oDAAA;AEmDF;AFhDI;EEkDJ,wDAAA;AACA;AD5BA;ED5BE,2DC8BE;ED7BF,iDC8BE;ED7BF,kDAAA;AE4DF;AFzDI;EE2DJ,sDAAA;AACA;AD5BA;EDrCE,2DCuCE;EDtCF,iDCuCE;EDtCF,kDAAA;AEqEF;AFlEI;EACE,sDAAA;AEoEN;AD5BA;ED9CE,yDCgDE;ED/CF,+CAAA;EACA,gDAAA;AE8EF;AF3EI;EACE,oDAAA;AE6EN;AD5BA;EDvDE,wDAAA;EACA,8CAAA;EACA,+CCyDE;AC8BJ;AFpFI;EACE,mDCsDF;ACgCJ;AD3BE;EDjEA,6BAAA;EACA,0CCmEI;EDlEJ,gDAAA;AEgGF;AF7FI;EACE,oDC+DA;ACgCN;AD5BE;EDzEA,6BAAA;EACA,6CC2EI;ED1EJ,oDAAA;AEwGF;AFrGI;EACE,uDCuEA;ACgCN;AD5BE;EDjFA,6BAAA;EEgHF,iDAAA;EF9GE,kDCiFI;AC+BN;AF7GI;EACE,2DAAA;AE+GN;AD5BE;EDzFA,6BAoGqB;EAnGrB,iDAAA;EACA,kDAAA;AEwHF;AFrHI;EACE,2DAAA;AEuHN;AD5BE;EDjGA,6BAoGqB;EAnGrB,+CAAA;EACA,gDAAA;AEgIF;AF7HI;EACE,yDAAA;AE+HN;AD5BE;EDzGA,6BAoGqB;EAnGrB,8CAAA;EACA,+CAAA;AEwIF;AFrII;EACE,wDAAA;AEuIN;AD1BE;EDnHA,4DAAA;EACA,WAAA;EACA,wDCmHI;AC8BN;AF9II;EACE,4DCiHA;AC+BN;AD3BE;ED3HA,wDAAA;EACA,WAAA;EACA,oDC2HI;AC8BN;AFtJI;EACE,wDCyHA;AC+BN;AD3BE;EDnIA,4DAAA;EACA,WAAA;EEiKF,wDAAA;AACA;AF9JI;EACE,4DCiIA;AC+BN;AD3BE;EC6BF,4DAAA;EFvKE,WAAA;EEyKF,wDAAA;AACA;AFtKI;EACE,4DCyIA;AC+BN;AD3BE;EC6BF,0DAAA;EF/KE,WAAA;EEiLF,sDAAA;AACA;AF9KI;EACE,0DCiJA;AC+BN;AD3BE;EC6BF,yDAAA;EFvLE,WAAA;EEyLF,qDAAA;AACA;AFtLI;EACE,yDCyJA;AC+BN;AD1BA;ED5HE,2DAAA;EE0JF,sCAAA;EFtJI,gBAuEkG;AEiFtG;AD5BA;EDhIE,wDAAA;EACA,qCAAA;EAGE,gBAAA;AE8JJ;AD9BA;ED3HE,wCAAA;AE6JF;AF3JE;EACE,oBAAA;EACA,mBAAA;EACA,uBAAA;EACA,qCAAA;EACA,YAAA;EACA,YAAA;EACA,8CAAA;EACA,6BAAA;EACA,mBAZoC;EAapC,eAAA;EACA,6JACE;AE4JN;AFzJI;EACE,wCAAA;AE2JN;AFxJI;EACE,WAAA;EACA,YAAA;AE0JN;ADlDA;ED9FE,eAAA;AEoJF;AFlJE;EACE,gDAAA;AEoJJ;AFjJE;EACE,YAAA;AEmJJ;AD5DA;EDhFE,qBAAA;AE+IF;AD3DA;EDlGE,eAAA;AEiKF;AF/JE;EACE,gDAAA;AEiKJ;AF9JE;EACE,YAAA;AEgKJ;AF7OE;EACE,WAAA;EACA,UAAA;EACA,WAAA;EACA,+CAAA;EACA,sCAAA;EACA,4DAyGuB;AEuI3B;AFtPE;EACE,WAAA;EACA,UAAA;EACA,WAAA;EACA,+CAAA;EACA,sCAAA;EACA,yDA6GuB;AE4I3B;AD3EA;ED7DE,aAAA;EACA,mBAAA;EACA,oBAAA;AE4IF;AD7EA;EDxFE,aAAA;EACA,eAAA;EACA,mBAAA;EACA,6BAJqB;AE6KvB;ADjFE;ED3FA,aAAA;EACA,eAAA;EACA,mBAAA;EACA,8BCyFyB;ACsF3B;ADnFE;ED/FA,aAAA;EACA,eAAA;EACA,mBAAA;EACA,8BC6FyB;ACwF3B","file":"tag.css","sourcesContent":["// Tag component mixins and private styles\n/* stylelint-disable no-descending-specificity */\n\n@use '../../base/focus' as *;\n\n@mixin tag-base {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  white-space: nowrap;\n  user-select: none;\n  text-decoration: none;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n  font-family: var(--fontFamily-primary, system-ui, sans-serif);\n  font-weight: var(--fontWeight-semibold, 600);\n  line-height: var(--lineHeight-tight, 1.25);\n  border: 1px solid transparent;\n  border-radius: var(--ivds-radius-s, 0.125rem);\n  transition:\n    background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n  @include focus-ring;\n}\n\n@mixin tag-variant($bg-color, $text-color, $border-color: transparent, $hover-bg: null) {\n  background-color: $bg-color;\n  color: $text-color;\n  border-color: $border-color;\n\n  @if $hover-bg {\n    &:hover:not(:disabled) {\n      background-color: $hover-bg;\n    }\n  }\n}\n\n@mixin tag-variant-dot($dot-color) {\n  &::before {\n    content: '';\n    width: 6px;\n    height: 6px;\n    border-radius: var(--borderRadius-full, 9999px);\n    margin-right: var(--spacing-2, 0.5rem);\n    background-color: $dot-color;\n  }\n}\n\n@mixin tag-with-icon($gap: var(--spacing-2, 0.5rem)) {\n  gap: $gap;\n\n  .ivds-tag__icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n\n    svg {\n      width: 1em;\n      height: 1em;\n      fill: currentcolor;\n    }\n  }\n}\n\n@mixin tag-size($padding-y, $padding-x, $font-size, $min-height: null) {\n  padding: $padding-y $padding-x;\n  font-size: $font-size;\n\n  @if $min-height {\n    min-height: $min-height;\n  }\n}\n\n@mixin tag-removable($remove-btn-color: currentcolor) {\n  padding-right: var(--spacing-1, 0.25rem);\n\n  .ivds-tag__remove {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    margin-left: var(--spacing-2, 0.5rem);\n    padding: 2px;\n    border: none;\n    border-radius: var(--ivds-radius-xs, 0.125rem);\n    background-color: transparent;\n    color: $remove-btn-color;\n    cursor: pointer;\n    transition:\n      background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n      color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n    &:hover {\n      background-color: rgba(16, 24, 40, 0.08);\n    }\n\n    svg {\n      width: 14px;\n      height: 14px;\n    }\n  }\n}\n\n@mixin tag-pill {\n  border-radius: var(--borderRadius-full, 9999px);\n}\n\n@mixin tag-interactive {\n  cursor: pointer;\n\n  &:hover:not(:disabled) {\n    border-color: var(--ivds-border-strong, #a1adba);\n  }\n\n  &:active:not(:disabled) {\n    opacity: 0.9;\n  }\n}\n\n@mixin tag-link {\n  @include tag-interactive;\n\n  text-decoration: none;\n}\n\n@mixin tag-outlined($border-color, $text-color, $hover-bg: null) {\n  @include tag-variant(transparent, $text-color, $border-color, $hover-bg);\n}\n\n@mixin tag-solid($bg-color, $text-color, $hover-bg: null) {\n  @include tag-variant($bg-color, $text-color, $bg-color, $hover-bg);\n}\n\n@mixin tag-group($gap: var(--spacing-2, 0.5rem)) {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: $gap;\n}\n\n@mixin tag-small {\n  @include tag-size(var(--spacing-1, 0.25rem), var(--spacing-2, 0.5rem), var(--fontSize-xs, 0.75rem), 20px);\n}\n\n@mixin tag-large {\n  @include tag-size(var(--spacing-2, 0.5rem), var(--spacing-4, 1rem), var(--fontSize-base, 1rem), 32px);\n}\n\n@mixin tag-status-new {\n  @include tag-variant-dot(var(--color-semantic-success-500, #16a34a));\n}\n\n@mixin tag-status-updated {\n  @include tag-variant-dot(var(--color-semantic-info-500, #1f84d6));\n}\n\n@mixin tag-disabled {\n  opacity: 0.55;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n","// Tag component styles\n// Institutional tags for status, metadata and filtering.\n\n@use '_tag-mixin' as tag;\n\n.ivds-tag {\n  @include tag.tag-base;\n  @include tag.tag-size(var(--spacing-1, 0.25rem), var(--spacing-3, 0.75rem), var(--fontSize-sm, 0.875rem), 24px);\n  @include tag.tag-with-icon;\n  @include tag.tag-variant(\n    var(--ivds-surface-muted, #f1f3f5),\n    var(--ivds-text-secondary, #36414f),\n    var(--ivds-border-subtle, #e2e7ec),\n    var(--color-semantic-neutral-200, #e2e7ec)\n  );\n\n  &__icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n\n    svg {\n      width: 1em;\n      height: 1em;\n      fill: currentcolor;\n    }\n  }\n\n  &__text {\n    flex: 1;\n  }\n\n  &__remove {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n\n    svg {\n      width: 0.875em;\n      height: 0.875em;\n      fill: currentcolor;\n    }\n  }\n}\n\n.ivds-tag--primary {\n  @include tag.tag-variant(\n    var(--color-brand-accent-50, #eef4ff),\n    var(--color-brand-accent-700, #0b4593),\n    var(--color-brand-accent-200, #bfd7ff),\n    var(--color-brand-accent-100, #dbe9ff)\n  );\n}\n\n.ivds-tag--success {\n  @include tag.tag-variant(\n    var(--color-semantic-success-50, #edf9f4),\n    var(--color-semantic-success-700, #0a573a),\n    var(--color-ui-success-200, #b8e9d2),\n    var(--color-ui-success-100, #d6f3e5)\n  );\n}\n\n.ivds-tag--warning {\n  @include tag.tag-variant(\n    var(--color-semantic-warning-50, #fff8eb),\n    var(--color-semantic-warning-700, #834b08),\n    var(--color-ui-warning-200, #f6d6a7),\n    var(--color-ui-warning-100, #fcebcf)\n  );\n}\n\n.ivds-tag--error {\n  @include tag.tag-variant(\n    var(--color-semantic-error-50, #fff1f2),\n    var(--color-semantic-error-700, #922036),\n    var(--color-ui-error-200, #f2b8c1),\n    var(--color-ui-error-100, #f9dbe0)\n  );\n}\n\n.ivds-tag--info {\n  @include tag.tag-variant(\n    var(--color-semantic-info-50, #edf4ff),\n    var(--color-semantic-info-700, #003d99),\n    var(--color-ui-info-200, #bfd7ff),\n    var(--color-ui-info-100, #dbe9ff)\n  );\n}\n\n.ivds-tag--outlined {\n  &.ivds-tag {\n    @include tag.tag-outlined(\n      var(--ivds-border-strong, #a1adba),\n      var(--ivds-text-secondary, #36414f),\n      var(--ivds-surface-muted, #f1f3f5)\n    );\n  }\n\n  &.ivds-tag--primary {\n    @include tag.tag-outlined(\n      var(--color-brand-accent-300, #93bcff),\n      var(--color-brand-accent-700, #0b4593),\n      var(--color-brand-accent-50, #eef4ff)\n    );\n  }\n\n  &.ivds-tag--success {\n    @include tag.tag-outlined(\n      var(--color-ui-success-300, #86d7b8),\n      var(--color-semantic-success-700, #0a573a),\n      var(--color-semantic-success-50, #edf9f4)\n    );\n  }\n\n  &.ivds-tag--warning {\n    @include tag.tag-outlined(\n      var(--color-ui-warning-300, #efbf76),\n      var(--color-semantic-warning-700, #834b08),\n      var(--color-semantic-warning-50, #fff8eb)\n    );\n  }\n\n  &.ivds-tag--error {\n    @include tag.tag-outlined(\n      var(--color-ui-error-300, #e68f9d),\n      var(--color-semantic-error-700, #922036),\n      var(--color-semantic-error-50, #fff1f2)\n    );\n  }\n\n  &.ivds-tag--info {\n    @include tag.tag-outlined(\n      var(--color-ui-info-300, #93bcff),\n      var(--color-semantic-info-700, #003d99),\n      var(--color-semantic-info-50, #edf4ff)\n    );\n  }\n}\n\n.ivds-tag--solid {\n  &.ivds-tag {\n    @include tag.tag-solid(\n      var(--color-semantic-neutral-700, #36414f),\n      #fff,\n      var(--color-semantic-neutral-800, #202a36)\n    );\n  }\n\n  &.ivds-tag--primary {\n    @include tag.tag-solid(\n      var(--color-brand-accent-600, #1058b8),\n      #fff,\n      var(--color-brand-accent-700, #0b4593)\n    );\n  }\n\n  &.ivds-tag--success {\n    @include tag.tag-solid(\n      var(--color-semantic-success-600, #0f6f4a),\n      #fff,\n      var(--color-semantic-success-700, #0a573a)\n    );\n  }\n\n  &.ivds-tag--warning {\n    @include tag.tag-solid(\n      var(--color-semantic-warning-600, #a76009),\n      #fff,\n      var(--color-semantic-warning-700, #834b08)\n    );\n  }\n\n  &.ivds-tag--error {\n    @include tag.tag-solid(\n      var(--color-semantic-error-600, #b72a41),\n      #fff,\n      var(--color-semantic-error-700, #922036)\n    );\n  }\n\n  &.ivds-tag--info {\n    @include tag.tag-solid(\n      var(--color-semantic-info-600, #0050c8),\n      #fff,\n      var(--color-semantic-info-700, #003d99)\n    );\n  }\n}\n\n.ivds-tag--small {\n  @include tag.tag-small;\n}\n\n.ivds-tag--large {\n  @include tag.tag-large;\n}\n\n.ivds-tag--removable {\n  @include tag.tag-removable;\n}\n\n.ivds-tag--link {\n  @include tag.tag-link;\n}\n\n.ivds-tag--interactive {\n  @include tag.tag-interactive;\n}\n\n.ivds-tag--new {\n  @include tag.tag-status-new;\n}\n\n.ivds-tag--updated {\n  @include tag.tag-status-updated;\n}\n\n.ivds-tag--disabled {\n  @include tag.tag-disabled;\n}\n\n.ivds-tag-group {\n  @include tag.tag-group;\n\n  &--compact {\n    @include tag.tag-group(var(--spacing-1, 0.25rem));\n  }\n\n  &--spacious {\n    @include tag.tag-group(var(--spacing-3, 0.75rem));\n  }\n}\n","// Tag component styles\n// Institutional tags for status, metadata and filtering.\n\n@use '_tag-mixin' as tag;\n\n.ivds-tag {\n  @include tag.tag-base;\n  @include tag.tag-size(var(--spacing-1, 0.25rem), var(--spacing-3, 0.75rem), var(--fontSize-sm, 0.875rem), 24px);\n  @include tag.tag-with-icon;\n  @include tag.tag-variant(\n    var(--ivds-surface-muted, #f1f3f5),\n    var(--ivds-text-secondary, #36414f),\n    var(--ivds-border-subtle, #e2e7ec),\n    var(--color-semantic-neutral-200, #e2e7ec)\n  );\n\n  &__icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n\n    svg {\n      width: 1em;\n      height: 1em;\n      fill: currentcolor;\n    }\n  }\n\n  &__text {\n    flex: 1;\n  }\n\n  &__remove {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n\n    svg {\n      width: 0.875em;\n      height: 0.875em;\n      fill: currentcolor;\n    }\n  }\n}\n\n.ivds-tag--primary {\n  @include tag.tag-variant(\n    var(--color-brand-accent-50, #eef4ff),\n    var(--color-brand-accent-700, #0b4593),\n    var(--color-brand-accent-200, #bfd7ff),\n    var(--color-brand-accent-100, #dbe9ff)\n  );\n}\n\n.ivds-tag--success {\n  @include tag.tag-variant(\n    var(--color-semantic-success-50, #edf9f4),\n    var(--color-semantic-success-700, #0a573a),\n    var(--color-ui-success-200, #b8e9d2),\n    var(--color-ui-success-100, #d6f3e5)\n  );\n}\n\n.ivds-tag--warning {\n  @include tag.tag-variant(\n    var(--color-semantic-warning-50, #fff8eb),\n    var(--color-semantic-warning-700, #834b08),\n    var(--color-ui-warning-200, #f6d6a7),\n    var(--color-ui-warning-100, #fcebcf)\n  );\n}\n\n.ivds-tag--error {\n  @include tag.tag-variant(\n    var(--color-semantic-error-50, #fff1f2),\n    var(--color-semantic-error-700, #922036),\n    var(--color-ui-error-200, #f2b8c1),\n    var(--color-ui-error-100, #f9dbe0)\n  );\n}\n\n.ivds-tag--info {\n  @include tag.tag-variant(\n    var(--color-semantic-info-50, #edf4ff),\n    var(--color-semantic-info-700, #003d99),\n    var(--color-ui-info-200, #bfd7ff),\n    var(--color-ui-info-100, #dbe9ff)\n  );\n}\n\n.ivds-tag--outlined {\n  &.ivds-tag {\n    @include tag.tag-outlined(\n      var(--ivds-border-strong, #a1adba),\n      var(--ivds-text-secondary, #36414f),\n      var(--ivds-surface-muted, #f1f3f5)\n    );\n  }\n\n  &.ivds-tag--primary {\n    @include tag.tag-outlined(\n      var(--color-brand-accent-300, #93bcff),\n      var(--color-brand-accent-700, #0b4593),\n      var(--color-brand-accent-50, #eef4ff)\n    );\n  }\n\n  &.ivds-tag--success {\n    @include tag.tag-outlined(\n      var(--color-ui-success-300, #86d7b8),\n      var(--color-semantic-success-700, #0a573a),\n      var(--color-semantic-success-50, #edf9f4)\n    );\n  }\n\n  &.ivds-tag--warning {\n    @include tag.tag-outlined(\n      var(--color-ui-warning-300, #efbf76),\n      var(--color-semantic-warning-700, #834b08),\n      var(--color-semantic-warning-50, #fff8eb)\n    );\n  }\n\n  &.ivds-tag--error {\n    @include tag.tag-outlined(\n      var(--color-ui-error-300, #e68f9d),\n      var(--color-semantic-error-700, #922036),\n      var(--color-semantic-error-50, #fff1f2)\n    );\n  }\n\n  &.ivds-tag--info {\n    @include tag.tag-outlined(\n      var(--color-ui-info-300, #93bcff),\n      var(--color-semantic-info-700, #003d99),\n      var(--color-semantic-info-50, #edf4ff)\n    );\n  }\n}\n\n.ivds-tag--solid {\n  &.ivds-tag {\n    @include tag.tag-solid(\n      var(--color-semantic-neutral-700, #36414f),\n      #fff,\n      var(--color-semantic-neutral-800, #202a36)\n    );\n  }\n\n  &.ivds-tag--primary {\n    @include tag.tag-solid(\n      var(--color-brand-accent-600, #1058b8),\n      #fff,\n      var(--color-brand-accent-700, #0b4593)\n    );\n  }\n\n  &.ivds-tag--success {\n    @include tag.tag-solid(\n      var(--color-semantic-success-600, #0f6f4a),\n      #fff,\n      var(--color-semantic-success-700, #0a573a)\n    );\n  }\n\n  &.ivds-tag--warning {\n    @include tag.tag-solid(\n      var(--color-semantic-warning-600, #a76009),\n      #fff,\n      var(--color-semantic-warning-700, #834b08)\n    );\n  }\n\n  &.ivds-tag--error {\n    @include tag.tag-solid(\n      var(--color-semantic-error-600, #b72a41),\n      #fff,\n      var(--color-semantic-error-700, #922036)\n    );\n  }\n\n  &.ivds-tag--info {\n    @include tag.tag-solid(\n      var(--color-semantic-info-600, #0050c8),\n      #fff,\n      var(--color-semantic-info-700, #003d99)\n    );\n  }\n}\n\n.ivds-tag--small {\n  @include tag.tag-small;\n}\n\n.ivds-tag--large {\n  @include tag.tag-large;\n}\n\n.ivds-tag--removable {\n  @include tag.tag-removable;\n}\n\n.ivds-tag--link {\n  @include tag.tag-link;\n}\n\n.ivds-tag--interactive {\n  @include tag.tag-interactive;\n}\n\n.ivds-tag--new {\n  @include tag.tag-status-new;\n}\n\n.ivds-tag--updated {\n  @include tag.tag-status-updated;\n}\n\n.ivds-tag--disabled {\n  @include tag.tag-disabled;\n}\n\n.ivds-tag-group {\n  @include tag.tag-group;\n\n  &--compact {\n    @include tag.tag-group(var(--spacing-1, 0.25rem));\n  }\n\n  &--spacious {\n    @include tag.tag-group(var(--spacing-3, 0.75rem));\n  }\n}\n","// Unified focus ring mixin\n// Uses outline instead of box-shadow to avoid conflicts with elevated components (Card, Modal).\n// Inspired by Helsinki Design System: 3px solid outline with 2px offset.\n\n@mixin focus-ring($offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {\n  &:focus-visible {\n    outline: #{$width} solid #{$color};\n    outline-offset: #{$offset};\n    box-shadow: none;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n    box-shadow: none;\n  }\n}\n\n// Variant for components where the focus indicator is on a sibling element\n// (e.g., checkbox input:focus-visible + .checkbox__box)\n@mixin focus-ring-on-sibling($selector, $offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {\n  &:focus-visible + #{$selector} {\n    outline: #{$width} solid #{$color};\n    outline-offset: #{$offset};\n    box-shadow: none;\n  }\n\n  &:focus:not(:focus-visible) + #{$selector} {\n    outline: none;\n    box-shadow: none;\n  }\n}\n"]}

package/lib/components/tag/tag.min.css

@@ -1 +1 @@
-.ivds-tag{align-items:center;border:var(--borderWidth-1,1px) solid transparent;border-radius:var(--borderRadius-md,.375rem);display:inline-flex;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;transition:all .15s ease-in-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.ivds-tag:focus-within{outline:2px solid var(--color-brand-primary-500,#0ea5e9);outline-offset:2px}.ivds-tag{font-size:var(--fontSize-sm,.875rem);gap:var(--spacing-2,.5rem);min-height:24px;padding:var(--spacing-1,.25rem) var(--spacing-3,.75rem)}.ivds-tag .ivds-tag__icon{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center}.ivds-tag .ivds-tag__icon svg{fill:currentcolor;height:1em;width:1em}.ivds-tag{background-color:var(--color-semantic-neutral-100,#f1f5f9);border-color:transparent;color:var(--color-semantic-neutral-700,#334155)}.ivds-tag:hover{background-color:var(--color-semantic-neutral-200,#e2e8f0)}.ivds-tag__icon{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center}.ivds-tag__icon svg{fill:currentcolor;height:1em;width:1em}.ivds-tag__text{flex:1}.ivds-tag__remove{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center}.ivds-tag__remove svg{fill:currentcolor;height:.875em;width:.875em}.ivds-tag--primary{background-color:var(--color-brand-primary-100,#ffedd5);border-color:transparent;color:var(--color-brand-primary-700,#c2410c)}.ivds-tag--primary:hover{background-color:var(--color-brand-primary-200,#fed7aa)}.ivds-tag--success{background-color:var(--color-semantic-success-100,#dcfce7);border-color:transparent;color:var(--color-semantic-success-700,#15803d)}.ivds-tag--success:hover{background-color:var(--color-semantic-success-200,#bbf7d0)}.ivds-tag--warning{background-color:var(--color-semantic-warning-100,#fef3c7);border-color:transparent;color:var(--color-semantic-warning-700,#b45309)}.ivds-tag--warning:hover{background-color:var(--color-semantic-warning-200,#fed7aa)}.ivds-tag--error{background-color:var(--color-semantic-error-100,#fee2e2);border-color:transparent;color:var(--color-semantic-error-700,#b91c1c)}.ivds-tag--error:hover{background-color:var(--color-semantic-error-200,#fecaca)}.ivds-tag--info{background-color:var(--color-semantic-info-100,#dbeafe);border-color:transparent;color:var(--color-semantic-info-700,#1d4ed8)}.ivds-tag--info:hover{background-color:var(--color-semantic-info-200,#bfdbfe)}.ivds-tag--outlined.ivds-tag{background-color:transparent;border-color:var(--color-semantic-neutral-300,#cbd5e1);color:var(--color-semantic-neutral-700,#334155)}.ivds-tag--outlined.ivds-tag:hover{background-color:var(--color-semantic-neutral-50,#f8fafc)}.ivds-tag--outlined.ivds-tag--primary{background-color:transparent;border-color:var(--color-brand-primary-300,#fdba74);color:var(--color-brand-primary-700,#c2410c)}.ivds-tag--outlined.ivds-tag--primary:hover{background-color:var(--color-brand-primary-50,#fff7ed)}.ivds-tag--outlined.ivds-tag--success{background-color:transparent;border-color:var(--color-semantic-success-300,#86efac);color:var(--color-semantic-success-700,#15803d)}.ivds-tag--outlined.ivds-tag--success:hover{background-color:var(--color-semantic-success-50,#f0fdf4)}.ivds-tag--outlined.ivds-tag--warning{background-color:transparent;border-color:var(--color-semantic-warning-300,#fcd34d);color:var(--color-semantic-warning-700,#b45309)}.ivds-tag--outlined.ivds-tag--warning:hover{background-color:var(--color-semantic-warning-50,#fffbeb)}.ivds-tag--outlined.ivds-tag--error{background-color:transparent;border-color:var(--color-semantic-error-300,#fca5a5);color:var(--color-semantic-error-700,#b91c1c)}.ivds-tag--outlined.ivds-tag--error:hover{background-color:var(--color-semantic-error-50,#fef2f2)}.ivds-tag--outlined.ivds-tag--info{background-color:transparent;border-color:var(--color-semantic-info-300,#93c5fd);color:var(--color-semantic-info-700,#1d4ed8)}.ivds-tag--outlined.ivds-tag--info:hover{background-color:var(--color-semantic-info-50,#eff6ff)}.ivds-tag--solid.ivds-tag{background-color:var(--color-semantic-neutral-600,#475569);border-color:var(--color-semantic-neutral-600,#475569);color:var(--color-semantic-neutral-50,#f8fafc)}.ivds-tag--solid.ivds-tag:hover{background-color:var(--color-semantic-neutral-700,#334155);border-color:var(--color-semantic-neutral-700,#334155)}.ivds-tag--solid.ivds-tag--primary{background-color:var(--color-brand-primary-600,#ea580c);border-color:var(--color-brand-primary-600,#ea580c);color:var(--color-semantic-neutral-50,#fafafa)}.ivds-tag--solid.ivds-tag--primary:hover{background-color:var(--color-brand-primary-700,#c2410c);border-color:var(--color-brand-primary-700,#c2410c)}.ivds-tag--solid.ivds-tag--success{background-color:var(--color-semantic-success-600,#16a34a);border-color:var(--color-semantic-success-600,#16a34a);color:var(--color-semantic-neutral-50,#f8fafc)}.ivds-tag--solid.ivds-tag--success:hover{background-color:var(--color-semantic-success-700,#15803d);border-color:var(--color-semantic-success-700,#15803d)}.ivds-tag--solid.ivds-tag--warning{background-color:var(--color-semantic-warning-600,#d97706);border-color:var(--color-semantic-warning-600,#d97706);color:var(--color-semantic-neutral-50,#f8fafc)}.ivds-tag--solid.ivds-tag--warning:hover{background-color:var(--color-semantic-warning-700,#b45309);border-color:var(--color-semantic-warning-700,#b45309)}.ivds-tag--solid.ivds-tag--error{background-color:var(--color-semantic-error-600,#dc2626);border-color:var(--color-semantic-error-600,#dc2626);color:var(--color-semantic-neutral-50,#f8fafc)}.ivds-tag--solid.ivds-tag--error:hover{background-color:var(--color-semantic-error-700,#b91c1c);border-color:var(--color-semantic-error-700,#b91c1c)}.ivds-tag--solid.ivds-tag--info{background-color:var(--color-semantic-info-600,#2563eb);border-color:var(--color-semantic-info-600,#2563eb);color:var(--color-semantic-neutral-50,#f8fafc)}.ivds-tag--solid.ivds-tag--info:hover{background-color:var(--color-semantic-info-700,#1d4ed8);border-color:var(--color-semantic-info-700,#1d4ed8)}.ivds-tag--small{font-size:var(--fontSize-xs,.75rem);min-height:20px;padding:var(--spacing-1,.25rem) var(--spacing-2,.5rem)}.ivds-tag--small .ivds-tag__icon svg{height:.875em;width:.875em}.ivds-tag--small.ivds-tag--removable .ivds-tag__remove{margin-left:var(--spacing-1,.25rem);padding:2px}.ivds-tag--small.ivds-tag--removable .ivds-tag__remove svg{height:.75em;width:.75em}.ivds-tag--large{font-size:var(--fontSize-base,1rem);min-height:32px;padding:var(--spacing-2,.5rem) var(--spacing-4,1rem)}.ivds-tag--large .ivds-tag__icon svg{height:1.125em;width:1.125em}.ivds-tag--large.ivds-tag--removable .ivds-tag__remove{margin-left:var(--spacing-3,.75rem);padding:var(--spacing-1,.25rem)}.ivds-tag--large.ivds-tag--removable .ivds-tag__remove svg{height:1em;width:1em}.ivds-tag--removable{padding-right:var(--spacing-1,.25rem)}.ivds-tag--removable .ivds-tag__remove{align-items:center;background:transparent;border:none;border-radius:var(--borderRadius-sm,.25rem);color:inherit;cursor:pointer;display:inline-flex;justify-content:center;margin-left:var(--spacing-2,.5rem);opacity:.7;padding:var(--spacing-1,.25rem);transition:opacity .15s ease-in-out,background-color .15s ease-in-out}.ivds-tag--removable .ivds-tag__remove:hover{background-color:rgba(0,0,0,.1);opacity:1}.ivds-tag--removable .ivds-tag__remove:focus{opacity:1;outline:2px solid var(--color-brand-primary-500,#0ea5e9);outline-offset:1px}.ivds-tag--removable .ivds-tag__remove:active{transform:scale(.95)}.ivds-tag--removable .ivds-tag__remove svg{fill:currentcolor;height:.875em;width:.875em}.ivds-tag--link{cursor:pointer}.ivds-tag--link,.ivds-tag--link:hover{text-decoration:none}.ivds-tag--link:focus{outline:2px solid var(--color-brand-primary-500,#0ea5e9);outline-offset:2px}.ivds-tag--link:active{transform:translateY(1px)}.ivds-tag--interactive{cursor:pointer}.ivds-tag--interactive:hover{box-shadow:var(--shadow-sm,0 1px 2px 0 rgba(0,0,0,.05));transform:translateY(-1px)}.ivds-tag--interactive:active{transform:translateY(0)}.ivds-tag--new{position:relative}.ivds-tag--new:after{background-color:var(--color-semantic-success-500,#22c55e);border:1px solid var(--color-semantic-neutral-50,#f8fafc);border-radius:50%;content:"";height:6px;position:absolute;right:-2px;top:-2px;width:6px}.ivds-tag--updated{position:relative}.ivds-tag--updated:after{background-color:var(--color-semantic-info-500,#3b82f6);border:1px solid var(--color-semantic-neutral-50,#f8fafc);border-radius:50%;content:"";height:6px;position:absolute;right:-2px;top:-2px;width:6px}.ivds-tag--disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.ivds-tag-group{gap:var(--spacing-2,.5rem)}.ivds-tag-group,.ivds-tag-group--compact{align-items:center;display:flex;flex-wrap:wrap}.ivds-tag-group--compact{gap:var(--spacing-1,.25rem)}.ivds-tag-group--spacious{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-3,.75rem)}
+.ivds-tag{align-items:center;border:1px solid transparent;border-radius:var(--ivds-radius-s,.125rem);display:inline-flex;font-family:var(--fontFamily-primary,system-ui,sans-serif);font-weight:var(--fontWeight-semibold,600);justify-content:center;letter-spacing:.03em;line-height:var(--lineHeight-tight,1.25);text-decoration:none;text-transform:uppercase;transition:background-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),border-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.ivds-tag: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-tag:focus:not(:focus-visible){box-shadow:none;outline:none}.ivds-tag{font-size:var(--fontSize-sm,.875rem);gap:var(--spacing-2,.5rem);min-height:24px;padding:var(--spacing-1,.25rem) var(--spacing-3,.75rem)}.ivds-tag .ivds-tag__icon{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center}.ivds-tag .ivds-tag__icon svg{fill:currentcolor;height:1em;width:1em}.ivds-tag{background-color:var(--ivds-surface-muted,#f1f3f5);border-color:var(--ivds-border-subtle,#e2e7ec);color:var(--ivds-text-secondary,#36414f)}.ivds-tag:hover:not(:disabled){background-color:var(--color-semantic-neutral-200,#e2e7ec)}.ivds-tag__icon{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center}.ivds-tag__icon svg{fill:currentcolor;height:1em;width:1em}.ivds-tag__text{flex:1}.ivds-tag__remove{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center}.ivds-tag__remove svg{fill:currentcolor;height:.875em;width:.875em}.ivds-tag--primary{background-color:var(--color-brand-accent-50,#eef4ff);border-color:var(--color-brand-accent-200,#bfd7ff);color:var(--color-brand-accent-700,#0b4593)}.ivds-tag--primary:hover:not(:disabled){background-color:var(--color-brand-accent-100,#dbe9ff)}.ivds-tag--success{background-color:var(--color-semantic-success-50,#edf9f4);border-color:var(--color-ui-success-200,#b8e9d2);color:var(--color-semantic-success-700,#0a573a)}.ivds-tag--success:hover:not(:disabled){background-color:var(--color-ui-success-100,#d6f3e5)}.ivds-tag--warning{background-color:var(--color-semantic-warning-50,#fff8eb);border-color:var(--color-ui-warning-200,#f6d6a7);color:var(--color-semantic-warning-700,#834b08)}.ivds-tag--warning:hover:not(:disabled){background-color:var(--color-ui-warning-100,#fcebcf)}.ivds-tag--error{background-color:var(--color-semantic-error-50,#fff1f2);border-color:var(--color-ui-error-200,#f2b8c1);color:var(--color-semantic-error-700,#922036)}.ivds-tag--error:hover:not(:disabled){background-color:var(--color-ui-error-100,#f9dbe0)}.ivds-tag--info{background-color:var(--color-semantic-info-50,#edf4ff);border-color:var(--color-ui-info-200,#bfd7ff);color:var(--color-semantic-info-700,#003d99)}.ivds-tag--info:hover:not(:disabled){background-color:var(--color-ui-info-100,#dbe9ff)}.ivds-tag--outlined.ivds-tag{background-color:transparent;border-color:var(--ivds-border-strong,#a1adba);color:var(--ivds-text-secondary,#36414f)}.ivds-tag--outlined.ivds-tag:hover:not(:disabled){background-color:var(--ivds-surface-muted,#f1f3f5)}.ivds-tag--outlined.ivds-tag--primary{background-color:transparent;border-color:var(--color-brand-accent-300,#93bcff);color:var(--color-brand-accent-700,#0b4593)}.ivds-tag--outlined.ivds-tag--primary:hover:not(:disabled){background-color:var(--color-brand-accent-50,#eef4ff)}.ivds-tag--outlined.ivds-tag--success{background-color:transparent;border-color:var(--color-ui-success-300,#86d7b8);color:var(--color-semantic-success-700,#0a573a)}.ivds-tag--outlined.ivds-tag--success:hover:not(:disabled){background-color:var(--color-semantic-success-50,#edf9f4)}.ivds-tag--outlined.ivds-tag--warning{background-color:transparent;border-color:var(--color-ui-warning-300,#efbf76);color:var(--color-semantic-warning-700,#834b08)}.ivds-tag--outlined.ivds-tag--warning:hover:not(:disabled){background-color:var(--color-semantic-warning-50,#fff8eb)}.ivds-tag--outlined.ivds-tag--error{background-color:transparent;border-color:var(--color-ui-error-300,#e68f9d);color:var(--color-semantic-error-700,#922036)}.ivds-tag--outlined.ivds-tag--error:hover:not(:disabled){background-color:var(--color-semantic-error-50,#fff1f2)}.ivds-tag--outlined.ivds-tag--info{background-color:transparent;border-color:var(--color-ui-info-300,#93bcff);color:var(--color-semantic-info-700,#003d99)}.ivds-tag--outlined.ivds-tag--info:hover:not(:disabled){background-color:var(--color-semantic-info-50,#edf4ff)}.ivds-tag--solid.ivds-tag{background-color:var(--color-semantic-neutral-700,#36414f);border-color:var(--color-semantic-neutral-700,#36414f);color:#fff}.ivds-tag--solid.ivds-tag:hover:not(:disabled){background-color:var(--color-semantic-neutral-800,#202a36)}.ivds-tag--solid.ivds-tag--primary{background-color:var(--color-brand-accent-600,#1058b8);border-color:var(--color-brand-accent-600,#1058b8);color:#fff}.ivds-tag--solid.ivds-tag--primary:hover:not(:disabled){background-color:var(--color-brand-accent-700,#0b4593)}.ivds-tag--solid.ivds-tag--success{background-color:var(--color-semantic-success-600,#0f6f4a);border-color:var(--color-semantic-success-600,#0f6f4a);color:#fff}.ivds-tag--solid.ivds-tag--success:hover:not(:disabled){background-color:var(--color-semantic-success-700,#0a573a)}.ivds-tag--solid.ivds-tag--warning{background-color:var(--color-semantic-warning-600,#a76009);border-color:var(--color-semantic-warning-600,#a76009);color:#fff}.ivds-tag--solid.ivds-tag--warning:hover:not(:disabled){background-color:var(--color-semantic-warning-700,#834b08)}.ivds-tag--solid.ivds-tag--error{background-color:var(--color-semantic-error-600,#b72a41);border-color:var(--color-semantic-error-600,#b72a41);color:#fff}.ivds-tag--solid.ivds-tag--error:hover:not(:disabled){background-color:var(--color-semantic-error-700,#922036)}.ivds-tag--solid.ivds-tag--info{background-color:var(--color-semantic-info-600,#0050c8);border-color:var(--color-semantic-info-600,#0050c8);color:#fff}.ivds-tag--solid.ivds-tag--info:hover:not(:disabled){background-color:var(--color-semantic-info-700,#003d99)}.ivds-tag--small{font-size:var(--fontSize-xs,.75rem);min-height:20px;padding:var(--spacing-1,.25rem) var(--spacing-2,.5rem)}.ivds-tag--large{font-size:var(--fontSize-base,1rem);min-height:32px;padding:var(--spacing-2,.5rem) var(--spacing-4,1rem)}.ivds-tag--removable{padding-right:var(--spacing-1,.25rem)}.ivds-tag--removable .ivds-tag__remove{align-items:center;background-color:transparent;border:none;border-radius:var(--ivds-radius-xs,.125rem);color:currentcolor;cursor:pointer;display:inline-flex;justify-content:center;margin-left:var(--spacing-2,.5rem);padding:2px;transition:background-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease)}.ivds-tag--removable .ivds-tag__remove:hover{background-color:rgba(16,24,40,.08)}.ivds-tag--removable .ivds-tag__remove svg{height:14px;width:14px}.ivds-tag--link{cursor:pointer}.ivds-tag--link:hover:not(:disabled){border-color:var(--ivds-border-strong,#a1adba)}.ivds-tag--link:active:not(:disabled){opacity:.9}.ivds-tag--link{text-decoration:none}.ivds-tag--interactive{cursor:pointer}.ivds-tag--interactive:hover:not(:disabled){border-color:var(--ivds-border-strong,#a1adba)}.ivds-tag--interactive:active:not(:disabled){opacity:.9}.ivds-tag--new:before{background-color:var(--color-semantic-success-500,#16a34a)}.ivds-tag--new:before,.ivds-tag--updated:before{border-radius:var(--borderRadius-full,9999px);content:"";height:6px;margin-right:var(--spacing-2,.5rem);width:6px}.ivds-tag--updated:before{background-color:var(--color-semantic-info-500,#1f84d6)}.ivds-tag--disabled{cursor:not-allowed;opacity:.55;pointer-events:none}.ivds-tag-group{gap:var(--spacing-2,.5rem)}.ivds-tag-group,.ivds-tag-group--compact{align-items:center;display:flex;flex-wrap:wrap}.ivds-tag-group--compact{gap:var(--spacing-1,.25rem)}.ivds-tag-group--spacious{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-3,.75rem)}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/tag/tag.scss%23sass","../../../src/components/tag/tag.scss","../../../src/components/tag/_tag-mixin.scss","../../../src/base/_focus.scss"],"names":[],"mappings":"AAKA,UCFA,kBAAA,CCcE,4BAAA,CACA,0CAAA,CAZA,mBAAA,CAQA,0DAAA,CACA,0CAAA,CAPA,sBAAA,CAKA,oBAAA,CAGA,wCAAA,CALA,oBAAA,CACA,wBAAA,CAOA,4NACE,CAVF,wBAAA,CAAA,qBAAA,CAAA,gBAAA,CDLF,kBAWA,CEXE,wBAGE,eAAA,CAFA,iHAAA,CACA,gDFcJ,CEVE,oCAEE,eAAA,CADA,YFaJ,CDpBA,UEgEE,oCF9D4E,CE4C5E,0BADyB,CAsBvB,eAAA,CAJF,uDDrCF,CCsBE,0BAEE,kBAAA,CADA,mBAAA,CAGA,aAAA,CADA,sBDnBJ,CCsBI,8BAGE,iBAAA,CADA,UAAA,CADA,SDlBN,CDrCA,UEuBE,kDAAA,CAEA,8CFlBE,CCiCJ,wCAEA,CCdI,+BACE,0DDgBN,CDlCE,gBAEE,kBAAA,CADA,mBAAA,CAGA,aAAA,CCkCJ,sBAEA,CDlCI,oBAGE,iBAAA,CADA,UAAA,CADA,SCsCN,CDhCE,gBCkCF,MACA,CD/BE,kBAEE,kBAAA,CADA,mBAAA,CAGA,aAAA,CADA,sBCkCJ,CD/BI,sBCmCJ,iBAAA,CDjCM,aAAA,CC+BN,YAGA,CD5BA,mBEnBE,qDFqBE,CEnBF,kDAAA,CADA,2CDoDF,CChDI,wCDkDJ,sDACA,CD5BA,mBE5BE,yDF8BE,CE5BF,gDAAA,CADA,+CD6DF,CCzDI,wCD2DJ,oDACA,CD5BA,mBErCE,yDFuCE,CErCF,gDAAA,CADA,+CDsEF,CClEI,wCACE,oDDoEN,CD5BA,iBE9CE,uDFgDE,CE9CF,8CAAA,CADA,6CD+EF,CC3EI,sCACE,kDD6EN,CD5BA,gBEvDE,sDAAA,CAEA,6CFyDE,CE1DF,4CDwFF,CCpFI,qCACE,iDDsFN,CD3BE,6BEjEA,4BAAA,CAEA,8CAAA,CADA,wCDiGF,CC7FI,kDACE,kDD+FN,CD5BE,sCEzEA,4BAAA,CAEA,kDAAA,CADA,2CDyGF,CCrGI,2DACE,qDDuGN,CD5BE,sCEjFA,4BAAA,CAEA,gDFiFI,CC6BN,+CAEA,CC7GI,2DACE,yDD+GN,CD5BE,sCEzFA,4BAoGqB,CAlGrB,gDAAA,CADA,+CDyHF,CCrHI,2DACE,yDDuHN,CD5BE,oCEjGA,4BAoGqB,CAlGrB,8CAAA,CADA,6CDiIF,CC7HI,yDACE,uDD+HN,CD5BE,mCEzGA,4BAoGqB,CAlGrB,6CAAA,CADA,4CDyIF,CCrII,wDACE,sDDuIN,CD1BE,0BEnHA,0DAAA,CAEA,sDFmHI,CEpHJ,UDkJF,CC9II,+CACE,0DDgJN,CD3BE,mCE3HA,sDAAA,CAEA,kDF2HI,CE5HJ,UD0JF,CCtJI,wDACE,sDDwJN,CD3BE,mCEnIA,0DAAA,CDkKF,sDAAA,CCjKE,UDkKF,CC9JI,wDACE,0DDgKN,CD3BE,mCC6BF,0DAAA,CAEA,sDAAA,CCzKE,UD0KF,CCtKI,wDACE,0DDwKN,CD3BE,iCC6BF,wDAAA,CAEA,oDAAA,CCjLE,UDkLF,CC9KI,sDACE,wDDgLN,CD3BE,gCC6BF,uDAAA,CAEA,mDAAA,CCzLE,UD0LF,CCtLI,qDACE,uDDwLN,CD1BA,iBC8BA,mCAAA,CCtJI,eAuEkG,CA3EpG,sDD4JF,CD5BA,iBE/HE,mCAAA,CAGE,eAAA,CAJF,oDDkKF,CD9BA,qBE3HE,qCD6JF,CC3JE,uCAEE,kBAAA,CAMA,4BAAA,CAFA,WAAA,CACA,2CAAA,CAEA,kBAZoC,CAapC,cAAA,CATA,mBAAA,CAEA,sBAAA,CACA,kCAAA,CACA,WAAA,CAMA,qJD6JJ,CCzJI,6CACE,mCD2JN,CCxJI,2CAEE,WAAA,CADA,UD2JN,CDlDA,gBE9FE,cDoJF,CClJE,qCACE,8CDoJJ,CCjJE,sCACE,UDmJJ,CD5DA,gBEhFE,oBD+IF,CD3DA,uBElGE,cDiKF,CC/JE,4CACE,8CDiKJ,CC9JE,6CACE,UDgKJ,CC7OE,sBAME,0DDgPJ,CCtPE,gDAIE,6CAAA,CAHA,UAAA,CAEA,UAAA,CAEA,mCAAA,CAHA,SD6PJ,CC/PE,0BAME,uDDyPJ,CD3EA,oBE5DE,kBAAA,CADA,WAAA,CAEA,mBD4IF,CD7EA,gBErFE,0BDyKF,CDjFE,yCEzFA,kBAAA,CAFA,YAAA,CACA,cDiLF,CDvFE,yBExFA,2BD+KF,CDnFE,0BE7FA,kBAAA,CAFA,YAAA,CACA,cAAA,CAEA,2BDqLF","file":"tag.min.css","sourcesContent":["// Tag component styles\n// Institutional tags for status, metadata and filtering.\n\n@use '_tag-mixin' as tag;\n\n.ivds-tag {\n  @include tag.tag-base;\n  @include tag.tag-size(var(--spacing-1, 0.25rem), var(--spacing-3, 0.75rem), var(--fontSize-sm, 0.875rem), 24px);\n  @include tag.tag-with-icon;\n  @include tag.tag-variant(\n    var(--ivds-surface-muted, #f1f3f5),\n    var(--ivds-text-secondary, #36414f),\n    var(--ivds-border-subtle, #e2e7ec),\n    var(--color-semantic-neutral-200, #e2e7ec)\n  );\n\n  &__icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n\n    svg {\n      width: 1em;\n      height: 1em;\n      fill: currentcolor;\n    }\n  }\n\n  &__text {\n    flex: 1;\n  }\n\n  &__remove {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n\n    svg {\n      width: 0.875em;\n      height: 0.875em;\n      fill: currentcolor;\n    }\n  }\n}\n\n.ivds-tag--primary {\n  @include tag.tag-variant(\n    var(--color-brand-accent-50, #eef4ff),\n    var(--color-brand-accent-700, #0b4593),\n    var(--color-brand-accent-200, #bfd7ff),\n    var(--color-brand-accent-100, #dbe9ff)\n  );\n}\n\n.ivds-tag--success {\n  @include tag.tag-variant(\n    var(--color-semantic-success-50, #edf9f4),\n    var(--color-semantic-success-700, #0a573a),\n    var(--color-ui-success-200, #b8e9d2),\n    var(--color-ui-success-100, #d6f3e5)\n  );\n}\n\n.ivds-tag--warning {\n  @include tag.tag-variant(\n    var(--color-semantic-warning-50, #fff8eb),\n    var(--color-semantic-warning-700, #834b08),\n    var(--color-ui-warning-200, #f6d6a7),\n    var(--color-ui-warning-100, #fcebcf)\n  );\n}\n\n.ivds-tag--error {\n  @include tag.tag-variant(\n    var(--color-semantic-error-50, #fff1f2),\n    var(--color-semantic-error-700, #922036),\n    var(--color-ui-error-200, #f2b8c1),\n    var(--color-ui-error-100, #f9dbe0)\n  );\n}\n\n.ivds-tag--info {\n  @include tag.tag-variant(\n    var(--color-semantic-info-50, #edf4ff),\n    var(--color-semantic-info-700, #003d99),\n    var(--color-ui-info-200, #bfd7ff),\n    var(--color-ui-info-100, #dbe9ff)\n  );\n}\n\n.ivds-tag--outlined {\n  &.ivds-tag {\n    @include tag.tag-outlined(\n      var(--ivds-border-strong, #a1adba),\n      var(--ivds-text-secondary, #36414f),\n      var(--ivds-surface-muted, #f1f3f5)\n    );\n  }\n\n  &.ivds-tag--primary {\n    @include tag.tag-outlined(\n      var(--color-brand-accent-300, #93bcff),\n      var(--color-brand-accent-700, #0b4593),\n      var(--color-brand-accent-50, #eef4ff)\n    );\n  }\n\n  &.ivds-tag--success {\n    @include tag.tag-outlined(\n      var(--color-ui-success-300, #86d7b8),\n      var(--color-semantic-success-700, #0a573a),\n      var(--color-semantic-success-50, #edf9f4)\n    );\n  }\n\n  &.ivds-tag--warning {\n    @include tag.tag-outlined(\n      var(--color-ui-warning-300, #efbf76),\n      var(--color-semantic-warning-700, #834b08),\n      var(--color-semantic-warning-50, #fff8eb)\n    );\n  }\n\n  &.ivds-tag--error {\n    @include tag.tag-outlined(\n      var(--color-ui-error-300, #e68f9d),\n      var(--color-semantic-error-700, #922036),\n      var(--color-semantic-error-50, #fff1f2)\n    );\n  }\n\n  &.ivds-tag--info {\n    @include tag.tag-outlined(\n      var(--color-ui-info-300, #93bcff),\n      var(--color-semantic-info-700, #003d99),\n      var(--color-semantic-info-50, #edf4ff)\n    );\n  }\n}\n\n.ivds-tag--solid {\n  &.ivds-tag {\n    @include tag.tag-solid(\n      var(--color-semantic-neutral-700, #36414f),\n      #fff,\n      var(--color-semantic-neutral-800, #202a36)\n    );\n  }\n\n  &.ivds-tag--primary {\n    @include tag.tag-solid(\n      var(--color-brand-accent-600, #1058b8),\n      #fff,\n      var(--color-brand-accent-700, #0b4593)\n    );\n  }\n\n  &.ivds-tag--success {\n    @include tag.tag-solid(\n      var(--color-semantic-success-600, #0f6f4a),\n      #fff,\n      var(--color-semantic-success-700, #0a573a)\n    );\n  }\n\n  &.ivds-tag--warning {\n    @include tag.tag-solid(\n      var(--color-semantic-warning-600, #a76009),\n      #fff,\n      var(--color-semantic-warning-700, #834b08)\n    );\n  }\n\n  &.ivds-tag--error {\n    @include tag.tag-solid(\n      var(--color-semantic-error-600, #b72a41),\n      #fff,\n      var(--color-semantic-error-700, #922036)\n    );\n  }\n\n  &.ivds-tag--info {\n    @include tag.tag-solid(\n      var(--color-semantic-info-600, #0050c8),\n      #fff,\n      var(--color-semantic-info-700, #003d99)\n    );\n  }\n}\n\n.ivds-tag--small {\n  @include tag.tag-small;\n}\n\n.ivds-tag--large {\n  @include tag.tag-large;\n}\n\n.ivds-tag--removable {\n  @include tag.tag-removable;\n}\n\n.ivds-tag--link {\n  @include tag.tag-link;\n}\n\n.ivds-tag--interactive {\n  @include tag.tag-interactive;\n}\n\n.ivds-tag--new {\n  @include tag.tag-status-new;\n}\n\n.ivds-tag--updated {\n  @include tag.tag-status-updated;\n}\n\n.ivds-tag--disabled {\n  @include tag.tag-disabled;\n}\n\n.ivds-tag-group {\n  @include tag.tag-group;\n\n  &--compact {\n    @include tag.tag-group(var(--spacing-1, 0.25rem));\n  }\n\n  &--spacious {\n    @include tag.tag-group(var(--spacing-3, 0.75rem));\n  }\n}\n","// Tag component styles\n// Institutional tags for status, metadata and filtering.\n\n@use '_tag-mixin' as tag;\n\n.ivds-tag {\n  @include tag.tag-base;\n  @include tag.tag-size(var(--spacing-1, 0.25rem), var(--spacing-3, 0.75rem), var(--fontSize-sm, 0.875rem), 24px);\n  @include tag.tag-with-icon;\n  @include tag.tag-variant(\n    var(--ivds-surface-muted, #f1f3f5),\n    var(--ivds-text-secondary, #36414f),\n    var(--ivds-border-subtle, #e2e7ec),\n    var(--color-semantic-neutral-200, #e2e7ec)\n  );\n\n  &__icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n\n    svg {\n      width: 1em;\n      height: 1em;\n      fill: currentcolor;\n    }\n  }\n\n  &__text {\n    flex: 1;\n  }\n\n  &__remove {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n\n    svg {\n      width: 0.875em;\n      height: 0.875em;\n      fill: currentcolor;\n    }\n  }\n}\n\n.ivds-tag--primary {\n  @include tag.tag-variant(\n    var(--color-brand-accent-50, #eef4ff),\n    var(--color-brand-accent-700, #0b4593),\n    var(--color-brand-accent-200, #bfd7ff),\n    var(--color-brand-accent-100, #dbe9ff)\n  );\n}\n\n.ivds-tag--success {\n  @include tag.tag-variant(\n    var(--color-semantic-success-50, #edf9f4),\n    var(--color-semantic-success-700, #0a573a),\n    var(--color-ui-success-200, #b8e9d2),\n    var(--color-ui-success-100, #d6f3e5)\n  );\n}\n\n.ivds-tag--warning {\n  @include tag.tag-variant(\n    var(--color-semantic-warning-50, #fff8eb),\n    var(--color-semantic-warning-700, #834b08),\n    var(--color-ui-warning-200, #f6d6a7),\n    var(--color-ui-warning-100, #fcebcf)\n  );\n}\n\n.ivds-tag--error {\n  @include tag.tag-variant(\n    var(--color-semantic-error-50, #fff1f2),\n    var(--color-semantic-error-700, #922036),\n    var(--color-ui-error-200, #f2b8c1),\n    var(--color-ui-error-100, #f9dbe0)\n  );\n}\n\n.ivds-tag--info {\n  @include tag.tag-variant(\n    var(--color-semantic-info-50, #edf4ff),\n    var(--color-semantic-info-700, #003d99),\n    var(--color-ui-info-200, #bfd7ff),\n    var(--color-ui-info-100, #dbe9ff)\n  );\n}\n\n.ivds-tag--outlined {\n  &.ivds-tag {\n    @include tag.tag-outlined(\n      var(--ivds-border-strong, #a1adba),\n      var(--ivds-text-secondary, #36414f),\n      var(--ivds-surface-muted, #f1f3f5)\n    );\n  }\n\n  &.ivds-tag--primary {\n    @include tag.tag-outlined(\n      var(--color-brand-accent-300, #93bcff),\n      var(--color-brand-accent-700, #0b4593),\n      var(--color-brand-accent-50, #eef4ff)\n    );\n  }\n\n  &.ivds-tag--success {\n    @include tag.tag-outlined(\n      var(--color-ui-success-300, #86d7b8),\n      var(--color-semantic-success-700, #0a573a),\n      var(--color-semantic-success-50, #edf9f4)\n    );\n  }\n\n  &.ivds-tag--warning {\n    @include tag.tag-outlined(\n      var(--color-ui-warning-300, #efbf76),\n      var(--color-semantic-warning-700, #834b08),\n      var(--color-semantic-warning-50, #fff8eb)\n    );\n  }\n\n  &.ivds-tag--error {\n    @include tag.tag-outlined(\n      var(--color-ui-error-300, #e68f9d),\n      var(--color-semantic-error-700, #922036),\n      var(--color-semantic-error-50, #fff1f2)\n    );\n  }\n\n  &.ivds-tag--info {\n    @include tag.tag-outlined(\n      var(--color-ui-info-300, #93bcff),\n      var(--color-semantic-info-700, #003d99),\n      var(--color-semantic-info-50, #edf4ff)\n    );\n  }\n}\n\n.ivds-tag--solid {\n  &.ivds-tag {\n    @include tag.tag-solid(\n      var(--color-semantic-neutral-700, #36414f),\n      #fff,\n      var(--color-semantic-neutral-800, #202a36)\n    );\n  }\n\n  &.ivds-tag--primary {\n    @include tag.tag-solid(\n      var(--color-brand-accent-600, #1058b8),\n      #fff,\n      var(--color-brand-accent-700, #0b4593)\n    );\n  }\n\n  &.ivds-tag--success {\n    @include tag.tag-solid(\n      var(--color-semantic-success-600, #0f6f4a),\n      #fff,\n      var(--color-semantic-success-700, #0a573a)\n    );\n  }\n\n  &.ivds-tag--warning {\n    @include tag.tag-solid(\n      var(--color-semantic-warning-600, #a76009),\n      #fff,\n      var(--color-semantic-warning-700, #834b08)\n    );\n  }\n\n  &.ivds-tag--error {\n    @include tag.tag-solid(\n      var(--color-semantic-error-600, #b72a41),\n      #fff,\n      var(--color-semantic-error-700, #922036)\n    );\n  }\n\n  &.ivds-tag--info {\n    @include tag.tag-solid(\n      var(--color-semantic-info-600, #0050c8),\n      #fff,\n      var(--color-semantic-info-700, #003d99)\n    );\n  }\n}\n\n.ivds-tag--small {\n  @include tag.tag-small;\n}\n\n.ivds-tag--large {\n  @include tag.tag-large;\n}\n\n.ivds-tag--removable {\n  @include tag.tag-removable;\n}\n\n.ivds-tag--link {\n  @include tag.tag-link;\n}\n\n.ivds-tag--interactive {\n  @include tag.tag-interactive;\n}\n\n.ivds-tag--new {\n  @include tag.tag-status-new;\n}\n\n.ivds-tag--updated {\n  @include tag.tag-status-updated;\n}\n\n.ivds-tag--disabled {\n  @include tag.tag-disabled;\n}\n\n.ivds-tag-group {\n  @include tag.tag-group;\n\n  &--compact {\n    @include tag.tag-group(var(--spacing-1, 0.25rem));\n  }\n\n  &--spacious {\n    @include tag.tag-group(var(--spacing-3, 0.75rem));\n  }\n}\n","// Tag component mixins and private styles\n/* stylelint-disable no-descending-specificity */\n\n@use '../../base/focus' as *;\n\n@mixin tag-base {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  white-space: nowrap;\n  user-select: none;\n  text-decoration: none;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n  font-family: var(--fontFamily-primary, system-ui, sans-serif);\n  font-weight: var(--fontWeight-semibold, 600);\n  line-height: var(--lineHeight-tight, 1.25);\n  border: 1px solid transparent;\n  border-radius: var(--ivds-radius-s, 0.125rem);\n  transition:\n    background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n  @include focus-ring;\n}\n\n@mixin tag-variant($bg-color, $text-color, $border-color: transparent, $hover-bg: null) {\n  background-color: $bg-color;\n  color: $text-color;\n  border-color: $border-color;\n\n  @if $hover-bg {\n    &:hover:not(:disabled) {\n      background-color: $hover-bg;\n    }\n  }\n}\n\n@mixin tag-variant-dot($dot-color) {\n  &::before {\n    content: '';\n    width: 6px;\n    height: 6px;\n    border-radius: var(--borderRadius-full, 9999px);\n    margin-right: var(--spacing-2, 0.5rem);\n    background-color: $dot-color;\n  }\n}\n\n@mixin tag-with-icon($gap: var(--spacing-2, 0.5rem)) {\n  gap: $gap;\n\n  .ivds-tag__icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n\n    svg {\n      width: 1em;\n      height: 1em;\n      fill: currentcolor;\n    }\n  }\n}\n\n@mixin tag-size($padding-y, $padding-x, $font-size, $min-height: null) {\n  padding: $padding-y $padding-x;\n  font-size: $font-size;\n\n  @if $min-height {\n    min-height: $min-height;\n  }\n}\n\n@mixin tag-removable($remove-btn-color: currentcolor) {\n  padding-right: var(--spacing-1, 0.25rem);\n\n  .ivds-tag__remove {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    margin-left: var(--spacing-2, 0.5rem);\n    padding: 2px;\n    border: none;\n    border-radius: var(--ivds-radius-xs, 0.125rem);\n    background-color: transparent;\n    color: $remove-btn-color;\n    cursor: pointer;\n    transition:\n      background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n      color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n    &:hover {\n      background-color: rgba(16, 24, 40, 0.08);\n    }\n\n    svg {\n      width: 14px;\n      height: 14px;\n    }\n  }\n}\n\n@mixin tag-pill {\n  border-radius: var(--borderRadius-full, 9999px);\n}\n\n@mixin tag-interactive {\n  cursor: pointer;\n\n  &:hover:not(:disabled) {\n    border-color: var(--ivds-border-strong, #a1adba);\n  }\n\n  &:active:not(:disabled) {\n    opacity: 0.9;\n  }\n}\n\n@mixin tag-link {\n  @include tag-interactive;\n\n  text-decoration: none;\n}\n\n@mixin tag-outlined($border-color, $text-color, $hover-bg: null) {\n  @include tag-variant(transparent, $text-color, $border-color, $hover-bg);\n}\n\n@mixin tag-solid($bg-color, $text-color, $hover-bg: null) {\n  @include tag-variant($bg-color, $text-color, $bg-color, $hover-bg);\n}\n\n@mixin tag-group($gap: var(--spacing-2, 0.5rem)) {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: $gap;\n}\n\n@mixin tag-small {\n  @include tag-size(var(--spacing-1, 0.25rem), var(--spacing-2, 0.5rem), var(--fontSize-xs, 0.75rem), 20px);\n}\n\n@mixin tag-large {\n  @include tag-size(var(--spacing-2, 0.5rem), var(--spacing-4, 1rem), var(--fontSize-base, 1rem), 32px);\n}\n\n@mixin tag-status-new {\n  @include tag-variant-dot(var(--color-semantic-success-500, #16a34a));\n}\n\n@mixin tag-status-updated {\n  @include tag-variant-dot(var(--color-semantic-info-500, #1f84d6));\n}\n\n@mixin tag-disabled {\n  opacity: 0.55;\n  cursor: not-allowed;\n  pointer-events: none;\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"]}