@ivds/core 0.1.1

package/lib/components/card/card.css

@@ -0,0 +1,236 @@
+/* Card component styles*/
+/* Provides styling for the IVDS card component with all variants, sections, and states*/
+/* Card Base*/
+.ivds-card {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-semantic-neutral-50, #fafafa);
+  border-radius: var(--borderRadius-xl, 0.75rem);
+  overflow: hidden;
+  transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
+  box-shadow: var(--shadow-sm, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1));
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+  /* Card sections*/
+}
+.ivds-card__header {
+  padding: var(--spacing-6, 1.5rem);
+  border-bottom: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+}
+.ivds-card__body {
+  padding: var(--spacing-6, 1.5rem);
+  flex: 1;
+}
+.ivds-card__footer {
+  padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);
+  background-color: var(--color-semantic-neutral-100, #f1f5f9);
+  border-top: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+}
+.ivds-card__media {
+  position: relative;
+  overflow: hidden;
+}
+.ivds-card__media img,
+.ivds-card__media video {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  display: block;
+}
+.ivds-card {
+  /* Card content elements*/
+}
+.ivds-card__title {
+  margin: 0 0 var(--spacing-2, 0.5rem) 0;
+  font-size: var(--fontSize-lg, 1.125rem);
+  font-weight: var(--fontWeight-semibold, 600);
+  color: var(--color-semantic-neutral-900, #0f172a);
+  line-height: var(--lineHeight-tight, 1.25);
+}
+.ivds-card__subtitle {
+  margin: 0 0 var(--spacing-3, 0.75rem) 0;
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-neutral-600, #4b5563);
+  line-height: var(--lineHeight-normal, 1.5);
+}
+.ivds-card__content {
+  margin: 0;
+  color: var(--color-semantic-neutral-700, #334155);
+  line-height: var(--lineHeight-relaxed, 1.625);
+}
+.ivds-card__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--spacing-3, 0.75rem);
+  margin-top: var(--spacing-4, 1rem);
+}
+.ivds-card {
+  /* Content wrapper for horizontal cards*/
+}
+.ivds-card__content-wrapper {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.ivds-card {
+  /* Overlay for media cards*/
+}
+.ivds-card__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: var(--spacing-6, 1.5rem);
+  color: var(--color-semantic-neutral-50, #f8fafc);
+}
+.ivds-card__overlay .ivds-card__title,
+.ivds-card__overlay .ivds-card__subtitle,
+.ivds-card__overlay .ivds-card__content {
+  color: inherit;
+}
+/* Card Variants*/
+.ivds-card--flat {
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  border: var(--borderWidth-1, 1px) solid transparent;
+  box-shadow: none;
+}
+.ivds-card--bordered {
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
+  box-shadow: none;
+}
+.ivds-card--elevated {
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
+}
+.ivds-card--floating {
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  border: var(--borderWidth-1, 1px) solid transparent;
+  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
+}
+/* Interactive card*/
+.ivds-card--interactive {
+  cursor: pointer;
+}
+.ivds-card--interactive:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
+}
+.ivds-card--interactive:active {
+  transform: translateY(0);
+}
+.ivds-card--interactive:focus {
+  outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
+  outline-offset: 2px;
+}
+/* Card sizes*/
+.ivds-card--compact .ivds-card__header {
+  padding: var(--spacing-4, 1rem);
+  border-bottom: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+}
+.ivds-card--compact .ivds-card__body {
+  padding: var(--spacing-4, 1rem);
+  flex: 1;
+}
+.ivds-card--compact .ivds-card__footer {
+  padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
+  background-color: var(--color-semantic-neutral-100, #f1f5f9);
+  border-top: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+}
+.ivds-card--spacious .ivds-card__header {
+  padding: var(--spacing-8, 2rem);
+  border-bottom: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+}
+.ivds-card--spacious .ivds-card__body {
+  padding: var(--spacing-8, 2rem);
+  flex: 1;
+}
+.ivds-card--spacious .ivds-card__footer {
+  padding: var(--spacing-6, 1.5rem) var(--spacing-8, 2rem);
+  background-color: var(--color-semantic-neutral-100, #f1f5f9);
+  border-top: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+}
+/* Card layouts*/
+.ivds-card--horizontal {
+  flex-direction: row;
+}
+.ivds-card--horizontal .ivds-card__media {
+  flex-shrink: 0;
+  width: 200px;
+}
+.ivds-card--horizontal .ivds-card__content-wrapper {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.ivds-card--overlay {
+  position: relative;
+}
+.ivds-card--overlay .ivds-card__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: var(--spacing-6, 1.5rem);
+  color: var(--color-semantic-neutral-50, #f8fafc);
+}
+.ivds-card--overlay .ivds-card__overlay .ivds-card__title,
+.ivds-card--overlay .ivds-card__overlay .ivds-card__subtitle,
+.ivds-card--overlay .ivds-card__overlay .ivds-card__content {
+  color: inherit;
+}
+/* Card semantic variants*/
+.ivds-card--success {
+  background-color: var(--color-semantic-success-50, #ecfdf5);
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-success-200, #bbf7d0);
+}
+.ivds-card--success .ivds-card__title {
+  color: var(--color-semantic-success-800, #166534);
+}
+.ivds-card--success .ivds-card__content {
+  color: var(--color-semantic-success-700, #15803d);
+}
+.ivds-card--warning {
+  background-color: var(--color-semantic-warning-50, #fffbeb);
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-warning-200, #fed7aa);
+}
+.ivds-card--warning .ivds-card__title {
+  color: var(--color-semantic-warning-800, #92400e);
+}
+.ivds-card--warning .ivds-card__content {
+  color: var(--color-semantic-warning-700, #b45309);
+}
+.ivds-card--error {
+  background-color: var(--color-semantic-error-50, #fef2f2);
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-error-200, #fecaca);
+}
+.ivds-card--error .ivds-card__title {
+  color: var(--color-semantic-error-800, #991b1b);
+}
+.ivds-card--error .ivds-card__content {
+  color: var(--color-semantic-error-700, #b91c1c);
+}
+.ivds-card--info {
+  background-color: var(--color-semantic-info-50, #eff6ff);
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-info-200, #bfdbfe);
+}
+.ivds-card--info .ivds-card__title {
+  color: var(--color-semantic-info-800, #1e40af);
+}
+.ivds-card--info .ivds-card__content {
+  color: var(--color-semantic-info-700, #1d4ed8);
+}

package/lib/components/card/card.min.css

@@ -0,0 +1 @@
+.ivds-card{background-color:var(--color-semantic-neutral-50,#fafafa);background-color:var(--color-semantic-neutral-50,#f8fafc);border:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-200,#e2e8f0);border-radius:var(--borderRadius-xl,.75rem);box-shadow:var(--shadow-sm,0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1));box-shadow:var(--shadow-sm,0 1px 2px 0 rgba(0,0,0,.05));display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .15s ease-in-out,transform .15s ease-in-out}.ivds-card__header{border-bottom:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-200,#e2e8f0);padding:var(--spacing-6,1.5rem)}.ivds-card__body{flex:1;padding:var(--spacing-6,1.5rem)}.ivds-card__footer{background-color:var(--color-semantic-neutral-100,#f1f5f9);border-top:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-200,#e2e8f0);padding:var(--spacing-4,1rem) var(--spacing-6,1.5rem)}.ivds-card__media{overflow:hidden;position:relative}.ivds-card__media img,.ivds-card__media video{display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.ivds-card__title{color:var(--color-semantic-neutral-900,#0f172a);font-size:var(--fontSize-lg,1.125rem);font-weight:var(--fontWeight-semibold,600);line-height:var(--lineHeight-tight,1.25);margin:0 0 var(--spacing-2,.5rem) 0}.ivds-card__subtitle{color:var(--color-semantic-neutral-600,#4b5563);font-size:var(--fontSize-sm,.875rem);line-height:var(--lineHeight-normal,1.5);margin:0 0 var(--spacing-3,.75rem) 0}.ivds-card__content{color:var(--color-semantic-neutral-700,#334155);line-height:var(--lineHeight-relaxed,1.625);margin:0}.ivds-card__actions{align-items:center;display:flex;gap:var(--spacing-3,.75rem);justify-content:flex-start;margin-top:var(--spacing-4,1rem)}.ivds-card__content-wrapper{display:flex;flex:1;flex-direction:column}.ivds-card__overlay{background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.7));bottom:0;color:var(--color-semantic-neutral-50,#f8fafc);display:flex;flex-direction:column;justify-content:flex-end;left:0;padding:var(--spacing-6,1.5rem);position:absolute;right:0;top:0}.ivds-card__overlay .ivds-card__content,.ivds-card__overlay .ivds-card__subtitle,.ivds-card__overlay .ivds-card__title{color:inherit}.ivds-card--flat{border:var(--borderWidth-1,1px) solid transparent}.ivds-card--bordered,.ivds-card--flat{background-color:var(--color-semantic-neutral-50,#f8fafc);box-shadow:none}.ivds-card--bordered{border:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-300,#cbd5e1)}.ivds-card--elevated{border:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-200,#e2e8f0);box-shadow:var(--shadow-md,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06))}.ivds-card--elevated,.ivds-card--floating{background-color:var(--color-semantic-neutral-50,#f8fafc)}.ivds-card--floating{border:var(--borderWidth-1,1px) solid transparent;box-shadow:var(--shadow-lg,0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05))}.ivds-card--interactive{cursor:pointer}.ivds-card--interactive:hover{box-shadow:var(--shadow-lg,0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05));transform:translateY(-2px)}.ivds-card--interactive:active{transform:translateY(0)}.ivds-card--interactive:focus{outline:2px solid var(--color-brand-primary-500,#0ea5e9);outline-offset:2px}.ivds-card--compact .ivds-card__header{border-bottom:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-200,#e2e8f0);padding:var(--spacing-4,1rem)}.ivds-card--compact .ivds-card__body{flex:1;padding:var(--spacing-4,1rem)}.ivds-card--compact .ivds-card__footer{background-color:var(--color-semantic-neutral-100,#f1f5f9);border-top:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-200,#e2e8f0);padding:var(--spacing-3,.75rem) var(--spacing-4,1rem)}.ivds-card--spacious .ivds-card__header{border-bottom:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-200,#e2e8f0);padding:var(--spacing-8,2rem)}.ivds-card--spacious .ivds-card__body{flex:1;padding:var(--spacing-8,2rem)}.ivds-card--spacious .ivds-card__footer{background-color:var(--color-semantic-neutral-100,#f1f5f9);border-top:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-200,#e2e8f0);padding:var(--spacing-6,1.5rem) var(--spacing-8,2rem)}.ivds-card--horizontal{flex-direction:row}.ivds-card--horizontal .ivds-card__media{flex-shrink:0;width:200px}.ivds-card--horizontal .ivds-card__content-wrapper{display:flex;flex:1;flex-direction:column}.ivds-card--overlay{position:relative}.ivds-card--overlay .ivds-card__overlay{background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.7));bottom:0;color:var(--color-semantic-neutral-50,#f8fafc);display:flex;flex-direction:column;justify-content:flex-end;left:0;padding:var(--spacing-6,1.5rem);position:absolute;right:0;top:0}.ivds-card--overlay .ivds-card__overlay .ivds-card__content,.ivds-card--overlay .ivds-card__overlay .ivds-card__subtitle,.ivds-card--overlay .ivds-card__overlay .ivds-card__title{color:inherit}.ivds-card--success{background-color:var(--color-semantic-success-50,#ecfdf5);border:var(--borderWidth-1,1px) solid var(--color-semantic-success-200,#bbf7d0)}.ivds-card--success .ivds-card__title{color:var(--color-semantic-success-800,#166534)}.ivds-card--success .ivds-card__content{color:var(--color-semantic-success-700,#15803d)}.ivds-card--warning{background-color:var(--color-semantic-warning-50,#fffbeb);border:var(--borderWidth-1,1px) solid var(--color-semantic-warning-200,#fed7aa)}.ivds-card--warning .ivds-card__title{color:var(--color-semantic-warning-800,#92400e)}.ivds-card--warning .ivds-card__content{color:var(--color-semantic-warning-700,#b45309)}.ivds-card--error{background-color:var(--color-semantic-error-50,#fef2f2);border:var(--borderWidth-1,1px) solid var(--color-semantic-error-200,#fecaca)}.ivds-card--error .ivds-card__title{color:var(--color-semantic-error-800,#991b1b)}.ivds-card--error .ivds-card__content{color:var(--color-semantic-error-700,#b91c1c)}.ivds-card--info{background-color:var(--color-semantic-info-50,#eff6ff);border:var(--borderWidth-1,1px) solid var(--color-semantic-info-200,#bfdbfe)}.ivds-card--info .ivds-card__title{color:var(--color-semantic-info-800,#1e40af)}.ivds-card--info .ivds-card__content{color:var(--color-semantic-info-700,#1d4ed8)}

package/lib/components/checkbox/checkbox.css

@@ -0,0 +1,305 @@
+@charset "UTF-8";
+/* Checkbox component styles*/
+/* Provides styling for the IVDS checkbox component with all variants, sizes, and states*/
+/* Checkbox Base*/
+.ivds-checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: flex-start;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.ivds-checkbox:hover .ivds-checkbox__box {
+  border-color: var(--color-brand-primary-400, #fb923c);
+}
+.ivds-checkbox {
+  /* Checkbox box*/
+}
+.ivds-checkbox__box {
+  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: var(--borderRadius-sm, 0.125rem);
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  transition: all 0.15s ease-in-out;
+}
+.ivds-checkbox__box::after {
+  content: "";
+  position: absolute;
+  width: 10px;
+  height: 6px;
+  border: 2px solid transparent;
+  border-top: none;
+  border-right: none;
+  transform: rotate(-45deg) scale(0);
+  transition: transform 0.15s ease-in-out;
+}
+.ivds-checkbox {
+  /* Hidden input*/
+}
+.ivds-checkbox__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-checkbox__input:checked + .ivds-checkbox__box {
+  background-color: var(--color-brand-primary-500, #f97316);
+  border-color: var(--color-brand-primary-500, #f97316);
+}
+.ivds-checkbox__input:checked + .ivds-checkbox__box::after {
+  border-color: var(--color-semantic-neutral-50, #f8fafc);
+  transform: rotate(-45deg) scale(1);
+}
+.ivds-checkbox__input {
+  /* Focus state*/
+}
+.ivds-checkbox__input:focus + .ivds-checkbox__box {
+  outline: 2px solid var(--color-brand-primary-500, #f97316);
+  outline-offset: 2px;
+}
+.ivds-checkbox__input {
+  /* Indeterminate state*/
+}
+.ivds-checkbox__input:indeterminate + .ivds-checkbox__box {
+  background-color: var(--color-brand-primary-500, #f97316);
+  border-color: var(--color-brand-primary-500, #f97316);
+}
+.ivds-checkbox__input:indeterminate + .ivds-checkbox__box::after {
+  content: "";
+  width: 8px;
+  height: 2px;
+  border: none;
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  transform: none;
+  border-radius: 1px;
+}
+.ivds-checkbox {
+  /* Checkbox label*/
+}
+.ivds-checkbox__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-checkbox {
+  /* Checkbox description*/
+}
+.ivds-checkbox__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-checkbox {
+  /* Disabled state*/
+}
+.ivds-checkbox--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.ivds-checkbox--disabled .ivds-checkbox__box {
+  background-color: var(--color-semantic-neutral-100, #f1f5f9);
+  border-color: var(--color-semantic-neutral-200, #e2e8f0);
+  cursor: not-allowed;
+}
+.ivds-checkbox--disabled .ivds-checkbox__label {
+  color: var(--color-semantic-neutral-500, #64748b);
+  cursor: not-allowed;
+}
+.ivds-checkbox {
+  /* Error state*/
+}
+.ivds-checkbox--error .ivds-checkbox__box {
+  border-color: var(--color-semantic-error-500, #ef4444);
+}
+.ivds-checkbox--error:hover .ivds-checkbox__box {
+  border-color: var(--color-semantic-error-600, #dc2626);
+}
+.ivds-checkbox--error .ivds-checkbox__input:checked + .ivds-checkbox__box {
+  background-color: var(--color-semantic-error-500, #ef4444);
+  border-color: var(--color-semantic-error-500, #ef4444);
+}
+.ivds-checkbox--error .ivds-checkbox__input:focus + .ivds-checkbox__box {
+  outline-color: var(--color-semantic-error-500, #ef4444);
+}
+.ivds-checkbox {
+  /* Success state*/
+}
+.ivds-checkbox--success .ivds-checkbox__box {
+  border-color: var(--color-semantic-success-500, #10b981);
+}
+.ivds-checkbox--success:hover .ivds-checkbox__box {
+  border-color: var(--color-semantic-success-600, #059669);
+}
+.ivds-checkbox--success .ivds-checkbox__input:checked + .ivds-checkbox__box {
+  background-color: var(--color-semantic-success-500, #10b981);
+  border-color: var(--color-semantic-success-500, #10b981);
+}
+.ivds-checkbox--success .ivds-checkbox__input:focus + .ivds-checkbox__box {
+  outline-color: var(--color-semantic-success-500, #10b981);
+}
+/* Checkbox Sizes*/
+.ivds-checkbox--small .ivds-checkbox__box {
+  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: var(--borderRadius-sm, 0.125rem);
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  transition: all 0.15s ease-in-out;
+}
+.ivds-checkbox--small .ivds-checkbox__box::after {
+  content: "";
+  position: absolute;
+  width: 10px;
+  height: 6px;
+  border: 2px solid transparent;
+  border-top: none;
+  border-right: none;
+  transform: rotate(-45deg) scale(0);
+  transition: transform 0.15s ease-in-out;
+}
+.ivds-checkbox--small .ivds-checkbox__box::after {
+  width: 7px;
+  height: 4px;
+}
+.ivds-checkbox--small .ivds-checkbox__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-checkbox--large .ivds-checkbox__box {
+  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: var(--borderRadius-sm, 0.125rem);
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  transition: all 0.15s ease-in-out;
+}
+.ivds-checkbox--large .ivds-checkbox__box::after {
+  content: "";
+  position: absolute;
+  width: 10px;
+  height: 6px;
+  border: 2px solid transparent;
+  border-top: none;
+  border-right: none;
+  transform: rotate(-45deg) scale(0);
+  transition: transform 0.15s ease-in-out;
+}
+.ivds-checkbox--large .ivds-checkbox__box::after {
+  width: 12px;
+  height: 8px;
+}
+.ivds-checkbox--large .ivds-checkbox__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);
+}
+/* Checkbox Group*/
+.ivds-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3, 0.75rem);
+}
+.ivds-checkbox-group--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--spacing-6, 1.5rem);
+}
+.ivds-checkbox-group--horizontal {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3, 0.75rem);
+}
+.ivds-checkbox-group--horizontal--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--spacing-6, 1.5rem);
+}
+.ivds-checkbox-group--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--spacing-6, 1.5rem);
+}
+.ivds-checkbox-group {
+  /* Group label*/
+}
+.ivds-checkbox-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-checkbox-group__label--required::after {
+  content: " *";
+  color: var(--color-semantic-error-500, #ef4444);
+}
+.ivds-checkbox-group {
+  /* Group description*/
+}
+.ivds-checkbox-group__description {
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-neutral-600, #4b5563);
+  margin-bottom: var(--spacing-3, 0.75rem);
+}
+.ivds-checkbox-group {
+  /* Group error message*/
+}
+.ivds-checkbox-group__error {
+  margin-top: var(--spacing-2, 0.5rem);
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-error-600, #dc2626);
+}
+.ivds-checkbox-group__error::before {
+  content: "⚠ ";
+  margin-right: var(--spacing-1, 0.25rem);
+}
+/* Checkbox Card variant (for more prominent selections)*/
+.ivds-checkbox--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-checkbox--card:hover {
+  border-color: var(--color-brand-primary-300, #fdba74);
+  background-color: var(--color-brand-primary-50, #fff7ed);
+}
+.ivds-checkbox__input:checked ~ .ivds-checkbox--card {
+  border-color: var(--color-brand-primary-500, #f97316);
+  background-color: var(--color-brand-primary-50, #fff7ed);
+}
+.ivds-checkbox__input:focus ~ .ivds-checkbox--card {
+  outline: 2px solid var(--color-brand-primary-500, #f97316);
+  outline-offset: 2px;
+}

package/lib/components/checkbox/checkbox.min.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ivds-checkbox{align-items:flex-start;cursor:pointer;display:inline-flex;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ivds-checkbox:hover .ivds-checkbox__box{border-color:var(--color-brand-primary-400,#fb923c)}.ivds-checkbox__box{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:var(--borderRadius-sm,.125rem);display:flex;height:18px;justify-content:center;min-width:18px;position:relative;transition:all .15s ease-in-out;width:18px}.ivds-checkbox__box:after{border:2px solid transparent;border-right:none;border-top:none;content:"";height:6px;position:absolute;transform:rotate(-45deg) scale(0);transition:transform .15s ease-in-out;width:10px}.ivds-checkbox__input{border:0;height:1px;margin:0;opacity:0;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);overflow:hidden}.ivds-checkbox__input:checked+.ivds-checkbox__box{background-color:var(--color-brand-primary-500,#f97316);border-color:var(--color-brand-primary-500,#f97316)}.ivds-checkbox__input:checked+.ivds-checkbox__box:after{border-color:var(--color-semantic-neutral-50,#f8fafc);transform:rotate(-45deg) scale(1)}.ivds-checkbox__input:focus+.ivds-checkbox__box{outline:2px solid var(--color-brand-primary-500,#f97316);outline-offset:2px}.ivds-checkbox__input:indeterminate+.ivds-checkbox__box{background-color:var(--color-brand-primary-500,#f97316);border-color:var(--color-brand-primary-500,#f97316)}.ivds-checkbox__input:indeterminate+.ivds-checkbox__box:after{background-color:var(--color-semantic-neutral-50,#f8fafc);border:none;border-radius:1px;content:"";height:2px;transform:none;width:8px}.ivds-checkbox__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-checkbox__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-checkbox--disabled{cursor:not-allowed;opacity:.6}.ivds-checkbox--disabled .ivds-checkbox__box{background-color:var(--color-semantic-neutral-100,#f1f5f9);border-color:var(--color-semantic-neutral-200,#e2e8f0);cursor:not-allowed}.ivds-checkbox--disabled .ivds-checkbox__label{color:var(--color-semantic-neutral-500,#64748b);cursor:not-allowed}.ivds-checkbox--error .ivds-checkbox__box{border-color:var(--color-semantic-error-500,#ef4444)}.ivds-checkbox--error:hover .ivds-checkbox__box{border-color:var(--color-semantic-error-600,#dc2626)}.ivds-checkbox--error .ivds-checkbox__input:checked+.ivds-checkbox__box{background-color:var(--color-semantic-error-500,#ef4444);border-color:var(--color-semantic-error-500,#ef4444)}.ivds-checkbox--error .ivds-checkbox__input:focus+.ivds-checkbox__box{outline-color:var(--color-semantic-error-500,#ef4444)}.ivds-checkbox--success .ivds-checkbox__box{border-color:var(--color-semantic-success-500,#10b981)}.ivds-checkbox--success:hover .ivds-checkbox__box{border-color:var(--color-semantic-success-600,#059669)}.ivds-checkbox--success .ivds-checkbox__input:checked+.ivds-checkbox__box{background-color:var(--color-semantic-success-500,#10b981);border-color:var(--color-semantic-success-500,#10b981)}.ivds-checkbox--success .ivds-checkbox__input:focus+.ivds-checkbox__box{outline-color:var(--color-semantic-success-500,#10b981)}.ivds-checkbox--small .ivds-checkbox__box{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:var(--borderRadius-sm,.125rem);display:flex;height:14px;justify-content:center;min-width:14px;position:relative;transition:all .15s ease-in-out;width:14px}.ivds-checkbox--small .ivds-checkbox__box:after{border:2px solid transparent;border-right:none;border-top:none;content:"";height:6px;height:4px;position:absolute;transform:rotate(-45deg) scale(0);transition:transform .15s ease-in-out;width:10px;width:7px}.ivds-checkbox--small .ivds-checkbox__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-checkbox--large .ivds-checkbox__box{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:var(--borderRadius-sm,.125rem);display:flex;height:22px;justify-content:center;min-width:22px;position:relative;transition:all .15s ease-in-out;width:22px}.ivds-checkbox--large .ivds-checkbox__box:after{border:2px solid transparent;border-right:none;border-top:none;content:"";height:6px;height:8px;position:absolute;transform:rotate(-45deg) scale(0);transition:transform .15s ease-in-out;width:10px;width:12px}.ivds-checkbox--large .ivds-checkbox__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-checkbox-group,.ivds-checkbox-group--horizontal{display:flex;flex-direction:column;gap:var(--spacing-3,.75rem)}.ivds-checkbox-group--horizontal,.ivds-checkbox-group--horizontal--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--spacing-6,1.5rem)}.ivds-checkbox-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-checkbox-group__label--required:after{color:var(--color-semantic-error-500,#ef4444);content:" *"}.ivds-checkbox-group__description{color:var(--color-semantic-neutral-600,#4b5563);font-size:var(--fontSize-sm,.875rem);margin-bottom:var(--spacing-3,.75rem)}.ivds-checkbox-group__error{color:var(--color-semantic-error-600,#dc2626);font-size:var(--fontSize-sm,.875rem);margin-top:var(--spacing-2,.5rem)}.ivds-checkbox-group__error:before{content:"⚠ ";margin-right:var(--spacing-1,.25rem)}.ivds-checkbox--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-checkbox--card:hover{background-color:var(--color-brand-primary-50,#fff7ed);border-color:var(--color-brand-primary-300,#fdba74)}.ivds-checkbox__input:checked~.ivds-checkbox--card{background-color:var(--color-brand-primary-50,#fff7ed);border-color:var(--color-brand-primary-500,#f97316)}.ivds-checkbox__input:focus~.ivds-checkbox--card{outline:2px solid var(--color-brand-primary-500,#f97316);outline-offset:2px}