@ivds/core 0.1.1

package/lib/components/radio-button/radio-button.css

@@ -0,0 +1,326 @@
+@charset "UTF-8";
+/* Radio button component styles*/
+/* Provides styling for the IVDS radio button component with all variants, sizes, and states*/
+/* Radio Button Base*/
+.ivds-radio-button {
+  position: relative;
+  display: inline-flex;
+  align-items: flex-start;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.ivds-radio-button:hover .ivds-radio-button__circle {
+  border-color: var(--color-brand-primary-400, #38bdf8);
+}
+.ivds-radio-button {
+  /* Radio button circle*/
+}
+.ivds-radio-button__circle {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  min-width: 18px;
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
+  border-radius: 50%;
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  transition: all 0.15s ease-in-out;
+}
+.ivds-radio-button__circle::after {
+  content: "";
+  position: absolute;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background-color: transparent;
+  transform: scale(0);
+  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
+}
+.ivds-radio-button {
+  /* Hidden input*/
+}
+.ivds-radio-button__input {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  overflow: hidden;
+  /* Checked state*/
+}
+.ivds-radio-button__input:checked + .ivds-radio-button__circle {
+  background-color: var(--color-brand-primary-500, #0ea5e9);
+  border-color: var(--color-brand-primary-500, #0ea5e9);
+}
+.ivds-radio-button__input:checked + .ivds-radio-button__circle::after {
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  transform: scale(1);
+}
+.ivds-radio-button__input {
+  /* Focus state*/
+}
+.ivds-radio-button__input:focus + .ivds-radio-button__circle {
+  outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
+  outline-offset: 2px;
+}
+.ivds-radio-button {
+  /* Radio button label*/
+}
+.ivds-radio-button__label {
+  margin-left: var(--spacing-3, 0.75rem);
+  font-size: var(--fontSize-base, 1rem);
+  color: var(--color-semantic-neutral-900, #0f172a);
+  line-height: var(--lineHeight-normal, 1.5);
+}
+.ivds-radio-button {
+  /* Radio button description*/
+}
+.ivds-radio-button__description {
+  margin-top: var(--spacing-1, 0.25rem);
+  margin-left: calc(18px + var(--spacing-3, 0.75rem));
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-neutral-600, #4b5563);
+  line-height: var(--lineHeight-relaxed, 1.625);
+}
+.ivds-radio-button {
+  /* Disabled state*/
+}
+.ivds-radio-button--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.ivds-radio-button--disabled .ivds-radio-button__circle {
+  background-color: var(--color-semantic-neutral-100, #f1f5f9);
+  border-color: var(--color-semantic-neutral-200, #e2e8f0);
+  cursor: not-allowed;
+}
+.ivds-radio-button--disabled .ivds-radio-button__label {
+  color: var(--color-semantic-neutral-500, #64748b);
+  cursor: not-allowed;
+}
+.ivds-radio-button {
+  /* Error state*/
+}
+.ivds-radio-button--error .ivds-radio-button__circle {
+  border-color: var(--color-semantic-error-500, #ef4444);
+}
+.ivds-radio-button--error:hover .ivds-radio-button__circle {
+  border-color: var(--color-semantic-error-600, #dc2626);
+}
+.ivds-radio-button--error .ivds-radio-button__input:checked + .ivds-radio-button__circle {
+  background-color: var(--color-semantic-error-500, #ef4444);
+  border-color: var(--color-semantic-error-500, #ef4444);
+}
+.ivds-radio-button--error .ivds-radio-button__input:focus + .ivds-radio-button__circle {
+  outline-color: var(--color-semantic-error-500, #ef4444);
+}
+.ivds-radio-button {
+  /* Success state*/
+}
+.ivds-radio-button--success .ivds-radio-button__circle {
+  border-color: var(--color-semantic-success-500, #10b981);
+}
+.ivds-radio-button--success:hover .ivds-radio-button__circle {
+  border-color: var(--color-semantic-success-600, #059669);
+}
+.ivds-radio-button--success .ivds-radio-button__input:checked + .ivds-radio-button__circle {
+  background-color: var(--color-semantic-success-500, #10b981);
+  border-color: var(--color-semantic-success-500, #10b981);
+}
+.ivds-radio-button--success .ivds-radio-button__input:focus + .ivds-radio-button__circle {
+  outline-color: var(--color-semantic-success-500, #10b981);
+}
+/* Radio Button Sizes*/
+.ivds-radio-button--small .ivds-radio-button__circle {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  min-width: 14px;
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
+  border-radius: 50%;
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  transition: all 0.15s ease-in-out;
+}
+.ivds-radio-button--small .ivds-radio-button__circle::after {
+  content: "";
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background-color: transparent;
+  transform: scale(0);
+  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
+}
+.ivds-radio-button--small .ivds-radio-button__label {
+  margin-left: var(--spacing-2, 0.5rem);
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-neutral-900, #0f172a);
+  line-height: var(--lineHeight-normal, 1.5);
+}
+.ivds-radio-button--large .ivds-radio-button__circle {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  min-width: 22px;
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
+  border-radius: 50%;
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  transition: all 0.15s ease-in-out;
+}
+.ivds-radio-button--large .ivds-radio-button__circle::after {
+  content: "";
+  position: absolute;
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  background-color: transparent;
+  transform: scale(0);
+  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
+}
+.ivds-radio-button--large .ivds-radio-button__label {
+  margin-left: var(--spacing-4, 1rem);
+  font-size: var(--fontSize-lg, 1.125rem);
+  color: var(--color-semantic-neutral-900, #0f172a);
+  line-height: var(--lineHeight-normal, 1.5);
+}
+/* Radio Button Group*/
+.ivds-radio-button-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3, 0.75rem);
+}
+.ivds-radio-button-group--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--spacing-6, 1.5rem);
+}
+.ivds-radio-button-group--horizontal {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3, 0.75rem);
+}
+.ivds-radio-button-group--horizontal--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--spacing-6, 1.5rem);
+}
+.ivds-radio-button-group--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--spacing-6, 1.5rem);
+}
+.ivds-radio-button-group {
+  /* Group label*/
+}
+.ivds-radio-button-group__label {
+  display: block;
+  font-size: var(--fontSize-base, 1rem);
+  font-weight: var(--fontWeight-medium, 500);
+  color: var(--color-semantic-neutral-900, #0f172a);
+  margin-bottom: var(--spacing-3, 0.75rem);
+}
+.ivds-radio-button-group__label--required::after {
+  content: " *";
+  color: var(--color-semantic-error-500, #ef4444);
+}
+.ivds-radio-button-group {
+  /* Group description*/
+}
+.ivds-radio-button-group__description {
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-neutral-600, #4b5563);
+  margin-bottom: var(--spacing-3, 0.75rem);
+}
+.ivds-radio-button-group {
+  /* Group error message*/
+}
+.ivds-radio-button-group__error {
+  margin-top: var(--spacing-2, 0.5rem);
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-error-600, #dc2626);
+}
+.ivds-radio-button-group__error::before {
+  content: "⚠ ";
+  margin-right: var(--spacing-1, 0.25rem);
+}
+/* Radio Button Card variant (for more prominent selections)*/
+.ivds-radio-button--card {
+  padding: var(--spacing-4, 1rem);
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+  border-radius: var(--borderRadius-md, 0.375rem);
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  transition: all 0.15s ease-in-out;
+}
+.ivds-radio-button--card:hover {
+  border-color: var(--color-brand-primary-300, #7dd3fc);
+  background-color: var(--color-brand-primary-50, #eff6ff);
+}
+.ivds-radio-button__input:checked ~ .ivds-radio-button--card {
+  border-color: var(--color-brand-primary-500, #0ea5e9);
+  background-color: var(--color-brand-primary-50, #eff6ff);
+}
+.ivds-radio-button__input:focus ~ .ivds-radio-button--card {
+  outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
+  outline-offset: 2px;
+}
+/* Legacy support for existing .ivds-radio class*/
+.ivds-radio {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+.ivds-radio__input {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+}
+.ivds-radio__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
+  border-radius: 50%;
+  background-color: var(--color-semantic-neutral-25, #fcfcfd);
+  transition: all 0.2s ease-in-out;
+}
+.ivds-radio__label {
+  margin-left: var(--spacing-2, 0.5rem);
+  font-size: var(--fontSize-base, 1rem);
+  color: var(--color-semantic-neutral-900, #0f172a);
+}
+.ivds-radio__input:checked + .ivds-radio__button {
+  border-color: var(--color-brand-primary-500, #0ea5e9);
+}
+.ivds-radio__input:checked + .ivds-radio__button::after {
+  content: "";
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background-color: var(--color-brand-primary-500, #0ea5e9);
+}
+.ivds-radio__input:focus + .ivds-radio__button {
+  outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
+  outline-offset: 2px;
+}
+.ivds-radio__input:disabled + .ivds-radio__button {
+  background-color: var(--color-semantic-neutral-100, #f1f5f9);
+  border-color: var(--color-semantic-neutral-200, #e2e8f0);
+  cursor: not-allowed;
+}

package/lib/components/radio-button/radio-button.min.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ivds-radio-button{align-items:flex-start;cursor:pointer;display:inline-flex;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ivds-radio-button:hover .ivds-radio-button__circle{border-color:var(--color-brand-primary-400,#38bdf8)}.ivds-radio-button__circle{align-items:center;background-color:var(--color-semantic-neutral-50,#f8fafc);border:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-300,#cbd5e1);border-radius:50%;display:flex;height:18px;justify-content:center;min-width:18px;position:relative;transition:all .15s ease-in-out;width:18px}.ivds-radio-button__circle:after{background-color:transparent;border-radius:50%;content:"";height:9px;position:absolute;transform:scale(0);transition:transform .15s ease-in-out,background-color .15s ease-in-out;width:9px}.ivds-radio-button__input{border:0;height:1px;margin:0;opacity:0;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);overflow:hidden}.ivds-radio-button__input:checked+.ivds-radio-button__circle{background-color:var(--color-brand-primary-500,#0ea5e9);border-color:var(--color-brand-primary-500,#0ea5e9)}.ivds-radio-button__input:checked+.ivds-radio-button__circle:after{background-color:var(--color-semantic-neutral-50,#f8fafc);transform:scale(1)}.ivds-radio-button__input:focus+.ivds-radio-button__circle{outline:2px solid var(--color-brand-primary-500,#0ea5e9);outline-offset:2px}.ivds-radio-button__label{color:var(--color-semantic-neutral-900,#0f172a);font-size:var(--fontSize-base,1rem);line-height:var(--lineHeight-normal,1.5);margin-left:var(--spacing-3,.75rem)}.ivds-radio-button__description{color:var(--color-semantic-neutral-600,#4b5563);font-size:var(--fontSize-sm,.875rem);line-height:var(--lineHeight-relaxed,1.625);margin-left:calc(18px + var(--spacing-3, .75rem));margin-top:var(--spacing-1,.25rem)}.ivds-radio-button--disabled{cursor:not-allowed;opacity:.6}.ivds-radio-button--disabled .ivds-radio-button__circle{background-color:var(--color-semantic-neutral-100,#f1f5f9);border-color:var(--color-semantic-neutral-200,#e2e8f0);cursor:not-allowed}.ivds-radio-button--disabled .ivds-radio-button__label{color:var(--color-semantic-neutral-500,#64748b);cursor:not-allowed}.ivds-radio-button--error .ivds-radio-button__circle{border-color:var(--color-semantic-error-500,#ef4444)}.ivds-radio-button--error:hover .ivds-radio-button__circle{border-color:var(--color-semantic-error-600,#dc2626)}.ivds-radio-button--error .ivds-radio-button__input:checked+.ivds-radio-button__circle{background-color:var(--color-semantic-error-500,#ef4444);border-color:var(--color-semantic-error-500,#ef4444)}.ivds-radio-button--error .ivds-radio-button__input:focus+.ivds-radio-button__circle{outline-color:var(--color-semantic-error-500,#ef4444)}.ivds-radio-button--success .ivds-radio-button__circle{border-color:var(--color-semantic-success-500,#10b981)}.ivds-radio-button--success:hover .ivds-radio-button__circle{border-color:var(--color-semantic-success-600,#059669)}.ivds-radio-button--success .ivds-radio-button__input:checked+.ivds-radio-button__circle{background-color:var(--color-semantic-success-500,#10b981);border-color:var(--color-semantic-success-500,#10b981)}.ivds-radio-button--success .ivds-radio-button__input:focus+.ivds-radio-button__circle{outline-color:var(--color-semantic-success-500,#10b981)}.ivds-radio-button--small .ivds-radio-button__circle{align-items:center;background-color:var(--color-semantic-neutral-50,#f8fafc);border:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-300,#cbd5e1);border-radius:50%;display:flex;height:14px;justify-content:center;min-width:14px;position:relative;transition:all .15s ease-in-out;width:14px}.ivds-radio-button--small .ivds-radio-button__circle:after{background-color:transparent;border-radius:50%;content:"";height:7px;position:absolute;transform:scale(0);transition:transform .15s ease-in-out,background-color .15s ease-in-out;width:7px}.ivds-radio-button--small .ivds-radio-button__label{color:var(--color-semantic-neutral-900,#0f172a);font-size:var(--fontSize-sm,.875rem);line-height:var(--lineHeight-normal,1.5);margin-left:var(--spacing-2,.5rem)}.ivds-radio-button--large .ivds-radio-button__circle{align-items:center;background-color:var(--color-semantic-neutral-50,#f8fafc);border:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-300,#cbd5e1);border-radius:50%;display:flex;height:22px;justify-content:center;min-width:22px;position:relative;transition:all .15s ease-in-out;width:22px}.ivds-radio-button--large .ivds-radio-button__circle:after{background-color:transparent;border-radius:50%;content:"";height:11px;position:absolute;transform:scale(0);transition:transform .15s ease-in-out,background-color .15s ease-in-out;width:11px}.ivds-radio-button--large .ivds-radio-button__label{color:var(--color-semantic-neutral-900,#0f172a);font-size:var(--fontSize-lg,1.125rem);line-height:var(--lineHeight-normal,1.5);margin-left:var(--spacing-4,1rem)}.ivds-radio-button-group,.ivds-radio-button-group--horizontal{display:flex;flex-direction:column;gap:var(--spacing-3,.75rem)}.ivds-radio-button-group--horizontal,.ivds-radio-button-group--horizontal--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--spacing-6,1.5rem)}.ivds-radio-button-group__label{color:var(--color-semantic-neutral-900,#0f172a);display:block;font-size:var(--fontSize-base,1rem);font-weight:var(--fontWeight-medium,500);margin-bottom:var(--spacing-3,.75rem)}.ivds-radio-button-group__label--required:after{color:var(--color-semantic-error-500,#ef4444);content:" *"}.ivds-radio-button-group__description{color:var(--color-semantic-neutral-600,#4b5563);font-size:var(--fontSize-sm,.875rem);margin-bottom:var(--spacing-3,.75rem)}.ivds-radio-button-group__error{color:var(--color-semantic-error-600,#dc2626);font-size:var(--fontSize-sm,.875rem);margin-top:var(--spacing-2,.5rem)}.ivds-radio-button-group__error:before{content:"⚠ ";margin-right:var(--spacing-1,.25rem)}.ivds-radio-button--card{background-color:var(--color-semantic-neutral-50,#f8fafc);border:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-200,#e2e8f0);border-radius:var(--borderRadius-md,.375rem);padding:var(--spacing-4,1rem);transition:all .15s ease-in-out}.ivds-radio-button--card:hover{background-color:var(--color-brand-primary-50,#eff6ff);border-color:var(--color-brand-primary-300,#7dd3fc)}.ivds-radio-button__input:checked~.ivds-radio-button--card{background-color:var(--color-brand-primary-50,#eff6ff);border-color:var(--color-brand-primary-500,#0ea5e9)}.ivds-radio-button__input:focus~.ivds-radio-button--card{outline:2px solid var(--color-brand-primary-500,#0ea5e9);outline-offset:2px}.ivds-radio{align-items:center;cursor:pointer;display:inline-flex;position:relative}.ivds-radio__input{height:1px;opacity:0;position:absolute;width:1px}.ivds-radio__button{align-items:center;background-color:var(--color-semantic-neutral-25,#fcfcfd);border:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-300,#cbd5e1);border-radius:50%;display:flex;height:1rem;justify-content:center;transition:all .2s ease-in-out;width:1rem}.ivds-radio__label{color:var(--color-semantic-neutral-900,#0f172a);font-size:var(--fontSize-base,1rem);margin-left:var(--spacing-2,.5rem)}.ivds-radio__input:checked+.ivds-radio__button{border-color:var(--color-brand-primary-500,#0ea5e9)}.ivds-radio__input:checked+.ivds-radio__button:after{background-color:var(--color-brand-primary-500,#0ea5e9);border-radius:50%;content:"";height:.5rem;width:.5rem}.ivds-radio__input:focus+.ivds-radio__button{outline:2px solid var(--color-brand-primary-500,#0ea5e9);outline-offset:2px}.ivds-radio__input:disabled+.ivds-radio__button{background-color:var(--color-semantic-neutral-100,#f1f5f9);border-color:var(--color-semantic-neutral-200,#e2e8f0);cursor:not-allowed}

package/lib/components/tag/tag.css

@@ -0,0 +1,367 @@
+/* Tag component styles*/
+/* Provides styling for the IVDS tag component with all variants, sizes, and removable functionality*/
+/* Tag Base*/
+.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;
+  white-space: nowrap;
+  transition: all 0.15s ease-in-out;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.ivds-tag:focus-within {
+  outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
+  outline-offset: 2px;
+}
+.ivds-tag {
+  padding: var(--spacing-1, 0.25rem) var(--spacing-3, 0.75rem);
+  font-size: var(--fontSize-sm, 0.875rem);
+  min-height: 24px;
+  gap: var(--spacing-2, 0.5rem);
+}
+.ivds-tag .ivds-tag__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.ivds-tag .ivds-tag__icon svg {
+  width: 1em;
+  height: 1em;
+  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);
+}
+.ivds-tag {
+  /* Tag elements*/
+}
+.ivds-tag__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.ivds-tag__icon svg {
+  width: 1em;
+  height: 1em;
+  fill: currentcolor;
+}
+.ivds-tag__text {
+  flex: 1;
+}
+.ivds-tag__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.ivds-tag__remove svg {
+  width: 0.875em;
+  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;
+}
+.ivds-tag--primary:hover {
+  background-color: var(--color-brand-primary-200, #fed7aa);
+}
+.ivds-tag--success {
+  background-color: var(--color-semantic-success-100, #dcfce7);
+  color: var(--color-semantic-success-700, #15803d);
+  border-color: transparent;
+}
+.ivds-tag--success:hover {
+  background-color: var(--color-semantic-success-200, #bbf7d0);
+}
+.ivds-tag--warning {
+  background-color: var(--color-semantic-warning-100, #fef3c7);
+  color: var(--color-semantic-warning-700, #b45309);
+  border-color: transparent;
+}
+.ivds-tag--warning:hover {
+  background-color: var(--color-semantic-warning-200, #fed7aa);
+}
+.ivds-tag--error {
+  background-color: var(--color-semantic-error-100, #fee2e2);
+  color: var(--color-semantic-error-700, #b91c1c);
+  border-color: transparent;
+}
+.ivds-tag--error:hover {
+  background-color: var(--color-semantic-error-200, #fecaca);
+}
+.ivds-tag--info {
+  background-color: var(--color-semantic-info-100, #dbeafe);
+  color: var(--color-semantic-info-700, #1d4ed8);
+  border-color: transparent;
+}
+.ivds-tag--info:hover {
+  background-color: var(--color-semantic-info-200, #bfdbfe);
+}
+/* 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);
+}
+.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);
+  color: var(--color-semantic-neutral-50, #f8fafc);
+  border-color: var(--color-semantic-neutral-600, #475569);
+}
+.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);
+  color: var(--color-semantic-neutral-50, #fafafa);
+  border-color: var(--color-brand-primary-600, #ea580c);
+}
+.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);
+  color: var(--color-semantic-neutral-50, #f8fafc);
+  border-color: var(--color-semantic-success-600, #16a34a);
+}
+.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);
+  color: var(--color-semantic-neutral-50, #f8fafc);
+  border-color: var(--color-semantic-warning-600, #d97706);
+}
+.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);
+  color: var(--color-semantic-neutral-50, #f8fafc);
+  border-color: var(--color-semantic-error-600, #dc2626);
+}
+.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);
+  color: var(--color-semantic-neutral-50, #f8fafc);
+  border-color: var(--color-semantic-info-600, #2563eb);
+}
+.ivds-tag--solid.ivds-tag--info:hover {
+  background-color: var(--color-semantic-info-700, #1d4ed8);
+  border-color: var(--color-semantic-info-700, #1d4ed8);
+}
+/* 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);
+}
+.ivds-tag--removable .ivds-tag__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: var(--spacing-2, 0.5rem);
+  padding: var(--spacing-1, 0.25rem);
+  background: transparent;
+  border: none;
+  border-radius: var(--borderRadius-sm, 0.25rem);
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.7;
+  transition: opacity 0.15s ease-in-out, background-color 0.15s ease-in-out;
+}
+.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);
+}
+.ivds-tag--removable .ivds-tag__remove svg {
+  width: 0.875em;
+  height: 0.875em;
+  fill: currentcolor;
+}
+.ivds-tag--link {
+  cursor: pointer;
+  text-decoration: none;
+}
+.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 {
+  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);
+}
+/* Tag Status Variants*/
+.ivds-tag--new {
+  position: relative;
+}
+.ivds-tag--new::after {
+  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;
+}
+.ivds-tag--updated::after {
+  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);
+}
+/* Tag State Variants*/
+.ivds-tag--disabled {
+  opacity: 0.5;
+  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;
+}
+.ivds-tag-group--compact {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-1, 0.25rem);
+  align-items: center;
+}
+.ivds-tag-group--spacious {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-3, 0.75rem);
+  align-items: center;
+}