@ivds/core 0.1.1

package/lib/icons/icons.min.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ivds-icon--arrow-left{align-items:center;display:inline-flex;fill:currentcolor;flex-shrink:0;height:1em;justify-content:center;vertical-align:middle;width:1em}.ivds-icon--arrow-left svg{display:block;fill:inherit;height:100%;width:100%}.ivds-icon--arrow-left:before{font-feature-settings:normal;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.ivds-icon--arrow-left{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentcolor' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain}.ivds-icon--arrow-left:before{content:"←";font-size:inherit}.ivds-icon--arrow-left:not(.ivds-icon--no-svg):before{display:none}.ivds-icon--arrow-right{align-items:center;display:inline-flex;fill:currentcolor;flex-shrink:0;height:1em;justify-content:center;vertical-align:middle;width:1em}.ivds-icon--arrow-right svg{display:block;fill:inherit;height:100%;width:100%}.ivds-icon--arrow-right:before{font-feature-settings:normal;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.ivds-icon--arrow-right{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentcolor' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain}.ivds-icon--arrow-right:before{content:"→";font-size:inherit}.ivds-icon--arrow-right:not(.ivds-icon--no-svg):before{display:none}.ivds-icon--check{align-items:center;display:inline-flex;fill:currentcolor;flex-shrink:0;height:1em;justify-content:center;vertical-align:middle;width:1em}.ivds-icon--check svg{display:block;fill:inherit;height:100%;width:100%}.ivds-icon--check:before{font-feature-settings:normal;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.ivds-icon--check{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentcolor' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain}.ivds-icon--check:before{content:"✓";font-size:inherit}.ivds-icon--check:not(.ivds-icon--no-svg):before{display:none}.ivds-icon--close{align-items:center;display:inline-flex;fill:currentcolor;flex-shrink:0;height:1em;justify-content:center;vertical-align:middle;width:1em}.ivds-icon--close svg{display:block;fill:inherit;height:100%;width:100%}.ivds-icon--close:before{font-feature-settings:normal;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.ivds-icon--close{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentcolor' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain}.ivds-icon--close:before{content:"×";font-size:inherit;font-weight:700}.ivds-icon--close:not(.ivds-icon--no-svg):before{display:none}.ivds-icon--info{align-items:center;display:inline-flex;fill:currentcolor;flex-shrink:0;height:1em;justify-content:center;vertical-align:middle;width:1em}.ivds-icon--info svg{display:block;fill:inherit;height:100%;width:100%}.ivds-icon--info:before{font-feature-settings:normal;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.ivds-icon--info{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentcolor' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain}.ivds-icon--info:before{content:"ℹ";font-size:inherit;font-weight:700}.ivds-icon--info:not(.ivds-icon--no-svg):before{display:none}.ivds-icon--warning{align-items:center;display:inline-flex;fill:currentcolor;flex-shrink:0;height:1em;justify-content:center;vertical-align:middle;width:1em}.ivds-icon--warning svg{display:block;fill:inherit;height:100%;width:100%}.ivds-icon--warning:before{font-feature-settings:normal;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.ivds-icon--warning{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentcolor' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4M12 17h.01'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain}.ivds-icon--warning:before{content:"⚠";font-size:inherit}.ivds-icon--warning:not(.ivds-icon--no-svg):before{display:none}.ivds-icon--error{align-items:center;display:inline-flex;fill:currentcolor;flex-shrink:0;height:1em;justify-content:center;vertical-align:middle;width:1em}.ivds-icon--error svg{display:block;fill:inherit;height:100%;width:100%}.ivds-icon--error:before{font-feature-settings:normal;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.ivds-icon--error{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentcolor' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain}.ivds-icon--error:before{content:"✕";font-size:inherit;font-weight:700}.ivds-icon--error:not(.ivds-icon--no-svg):before{display:none}.ivds-icon{align-items:center;display:inline-flex;fill:currentcolor;flex-shrink:0;height:1em;justify-content:center;vertical-align:middle;width:1em}.ivds-icon svg{display:block;fill:inherit;height:100%;width:100%}.ivds-icon:before{font-feature-settings:normal;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.ivds-icon{font-size:var(--fontSize-base,1rem);height:var(--fontSize-base,1rem);width:var(--fontSize-base,1rem)}.ivds-icon--xs{font-size:var(--fontSize-xs,.75rem);height:var(--fontSize-xs,.75rem);width:var(--fontSize-xs,.75rem)}.ivds-icon--sm{font-size:var(--fontSize-sm,.875rem);height:var(--fontSize-sm,.875rem);width:var(--fontSize-sm,.875rem)}.ivds-icon--md{font-size:var(--fontSize-base,1rem);height:var(--fontSize-base,1rem);width:var(--fontSize-base,1rem)}.ivds-icon--lg{font-size:var(--fontSize-lg,1.125rem);height:var(--fontSize-lg,1.125rem);width:var(--fontSize-lg,1.125rem)}.ivds-icon--xl{font-size:var(--fontSize-xl,1.25rem);height:var(--fontSize-xl,1.25rem);width:var(--fontSize-xl,1.25rem)}.ivds-icon--2xl{font-size:var(--fontSize-2xl,1.5rem);height:var(--fontSize-2xl,1.5rem);width:var(--fontSize-2xl,1.5rem)}.ivds-icon--3xl{font-size:var(--fontSize-3xl,1.875rem);height:var(--fontSize-3xl,1.875rem);width:var(--fontSize-3xl,1.875rem)}.ivds-icon--primary{color:var(--color-brand-primary-500,#0ea5e9)}.ivds-icon--secondary{color:var(--color-semantic-neutral-600,#6b7280)}.ivds-icon--success{color:var(--color-semantic-success-500,#10b981)}.ivds-icon--warning{color:var(--color-semantic-warning-500,#f59e0b)}.ivds-icon--error{color:var(--color-semantic-error-500,#ef4444)}.ivds-icon--info{color:var(--color-brand-primary-500,#0ea5e9)}.ivds-icon--interactive{cursor:pointer;transition:color .15s ease-in-out,transform .15s ease-in-out}.ivds-icon--interactive:hover{transform:scale(1.1)}.ivds-icon--interactive:active{transform:scale(.95)}.ivds-icon--disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.ivds-icon--success{align-items:center;display:inline-flex;fill:currentcolor;flex-shrink:0;height:1em;justify-content:center;vertical-align:middle;width:1em}.ivds-icon--success svg{display:block;fill:inherit;height:100%;width:100%}.ivds-icon--success:before{font-feature-settings:normal;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.ivds-icon--success{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentcolor' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain}.ivds-icon--success:before{content:"✓";font-size:inherit}.ivds-icon--success:not(.ivds-icon--no-svg):before{display:none}

package/lib/utils/_flex.scss

@@ -0,0 +1,200 @@
+// Flexbox utility classes
+// Provides comprehensive flexbox utilities with responsive support
+
+@use '../variables/variables' as vars;
+
+.ivds-flex {
+  display: flex !important;
+  
+  // Direction
+  &--row { flex-direction: row !important; }
+  &--column { flex-direction: column !important; }
+  &--row-reverse { flex-direction: row-reverse !important; }
+  &--column-reverse { flex-direction: column-reverse !important; }
+  
+  // Wrap
+  &--wrap { flex-wrap: wrap !important; }
+  &--wrap-reverse { flex-wrap: wrap-reverse !important; }
+  &--nowrap { flex-wrap: nowrap !important; }
+  
+  // Justify content (main axis)
+  &--justify-normal { justify-content: normal !important; }
+  &--justify-start { justify-content: flex-start !important; }
+  &--justify-center { justify-content: center !important; }
+  &--justify-end { justify-content: flex-end !important; }
+  &--justify-between { justify-content: space-between !important; }
+  &--justify-around { justify-content: space-around !important; }
+  &--justify-evenly { justify-content: space-evenly !important; }
+  &--justify-stretch { justify-content: stretch !important; }
+  
+  // Align items (cross axis)
+  &--items-start { align-items: flex-start !important; }
+  &--items-center { align-items: center !important; }
+  &--items-end { align-items: flex-end !important; }
+  &--items-stretch { align-items: stretch !important; }
+  &--items-baseline { align-items: baseline !important; }
+  
+  // Align content (for wrapped lines)
+  &--content-normal { align-content: normal !important; }
+  &--content-center { align-content: center !important; }
+  &--content-start { align-content: flex-start !important; }
+  &--content-end { align-content: flex-end !important; }
+  &--content-between { align-content: space-between !important; }
+  &--content-around { align-content: space-around !important; }
+  &--content-evenly { align-content: space-evenly !important; }
+  &--content-stretch { align-content: stretch !important; }
+  
+  // Gap
+  &--gap-0 { gap: 0 !important; }
+  &--gap-1 { gap: var(--spacing-1, 0.25rem) !important; }
+  &--gap-2 { gap: var(--spacing-2, 0.5rem) !important; }
+  &--gap-3 { gap: var(--spacing-3, 0.75rem) !important; }
+  &--gap-4 { gap: var(--spacing-4, 1rem) !important; }
+  &--gap-5 { gap: var(--spacing-5, 1.25rem) !important; }
+  &--gap-6 { gap: var(--spacing-6, 1.5rem) !important; }
+  &--gap-8 { gap: var(--spacing-8, 2rem) !important; }
+  &--gap-10 { gap: var(--spacing-10, 2.5rem) !important; }
+  &--gap-12 { gap: var(--spacing-12, 3rem) !important; }
+  &--gap-16 { gap: var(--spacing-16, 4rem) !important; }
+  
+  // Column gap
+  &--gap-x-0 { column-gap: 0 !important; }
+  &--gap-x-1 { column-gap: var(--spacing-1, 0.25rem) !important; }
+  &--gap-x-2 { column-gap: var(--spacing-2, 0.5rem) !important; }
+  &--gap-x-3 { column-gap: var(--spacing-3, 0.75rem) !important; }
+  &--gap-x-4 { column-gap: var(--spacing-4, 1rem) !important; }
+  &--gap-x-6 { column-gap: var(--spacing-6, 1.5rem) !important; }
+  &--gap-x-8 { column-gap: var(--spacing-8, 2rem) !important; }
+  
+  // Row gap
+  &--gap-y-0 { row-gap: 0 !important; }
+  &--gap-y-1 { row-gap: var(--spacing-1, 0.25rem) !important; }
+  &--gap-y-2 { row-gap: var(--spacing-2, 0.5rem) !important; }
+  &--gap-y-3 { row-gap: var(--spacing-3, 0.75rem) !important; }
+  &--gap-y-4 { row-gap: var(--spacing-4, 1rem) !important; }
+  &--gap-y-6 { row-gap: var(--spacing-6, 1.5rem) !important; }
+  &--gap-y-8 { row-gap: var(--spacing-8, 2rem) !important; }
+}
+
+// Flex item utilities
+.ivds-flex-item {
+  // Flex grow
+  &--grow-0 { flex-grow: 0 !important; }
+  &--grow { flex-grow: 1 !important; }
+  
+  // Flex shrink
+  &--shrink-0 { flex-shrink: 0 !important; }
+  &--shrink { flex-shrink: 1 !important; }
+  
+  // Flex basis
+  &--basis-0 { flex-basis: 0% !important; }
+  &--basis-1 { flex-basis: var(--spacing-1, 0.25rem) !important; }
+  &--basis-2 { flex-basis: var(--spacing-2, 0.5rem) !important; }
+  &--basis-3 { flex-basis: var(--spacing-3, 0.75rem) !important; }
+  &--basis-4 { flex-basis: var(--spacing-4, 1rem) !important; }
+  &--basis-6 { flex-basis: var(--spacing-6, 1.5rem) !important; }
+  &--basis-8 { flex-basis: var(--spacing-8, 2rem) !important; }
+  &--basis-auto { flex-basis: auto !important; }
+  &--basis-full { flex-basis: 100% !important; }
+  
+  // Flex shorthand
+  &--flex-1 { flex: 1 1 0% !important; }
+  &--flex-auto { flex: 1 1 auto !important; }
+  &--flex-initial { flex: 0 1 auto !important; }
+  &--flex-none { flex: none !important; }
+  
+  // Align self
+  &--self-auto { align-self: auto !important; }
+  &--self-start { align-self: flex-start !important; }
+  &--self-center { align-self: center !important; }
+  &--self-end { align-self: flex-end !important; }
+  &--self-stretch { align-self: stretch !important; }
+  &--self-baseline { align-self: baseline !important; }
+  
+  // Order
+  &--order-1 { order: 1 !important; }
+  &--order-2 { order: 2 !important; }
+  &--order-3 { order: 3 !important; }
+  &--order-4 { order: 4 !important; }
+  &--order-5 { order: 5 !important; }
+  &--order-6 { order: 6 !important; }
+  &--order-7 { order: 7 !important; }
+  &--order-8 { order: 8 !important; }
+  &--order-9 { order: 9 !important; }
+  &--order-10 { order: 10 !important; }
+  &--order-11 { order: 11 !important; }
+  &--order-12 { order: 12 !important; }
+  &--order-first { order: -9999 !important; }
+  &--order-last { order: 9999 !important; }
+  &--order-none { order: 0 !important; }
+}
+
+// Responsive flexbox utilities
+@media (min-width: 640px) {
+  .ivds-sm-flex--row { flex-direction: row !important; }
+  .ivds-sm-flex--column { flex-direction: column !important; }
+  .ivds-sm-flex--row-reverse { flex-direction: row-reverse !important; }
+  .ivds-sm-flex--column-reverse { flex-direction: column-reverse !important; }
+  
+  .ivds-sm-flex--wrap { flex-wrap: wrap !important; }
+  .ivds-sm-flex--nowrap { flex-wrap: nowrap !important; }
+  
+  .ivds-sm-flex--justify-start { justify-content: flex-start !important; }
+  .ivds-sm-flex--justify-center { justify-content: center !important; }
+  .ivds-sm-flex--justify-end { justify-content: flex-end !important; }
+  .ivds-sm-flex--justify-between { justify-content: space-between !important; }
+  .ivds-sm-flex--justify-around { justify-content: space-around !important; }
+  .ivds-sm-flex--justify-evenly { justify-content: space-evenly !important; }
+  
+  .ivds-sm-flex--items-start { align-items: flex-start !important; }
+  .ivds-sm-flex--items-center { align-items: center !important; }
+  .ivds-sm-flex--items-end { align-items: flex-end !important; }
+  .ivds-sm-flex--items-stretch { align-items: stretch !important; }
+  .ivds-sm-flex--items-baseline { align-items: baseline !important; }
+}
+
+@media (min-width: 768px) {
+  .ivds-md-flex--row { flex-direction: row !important; }
+  .ivds-md-flex--column { flex-direction: column !important; }
+  .ivds-md-flex--row-reverse { flex-direction: row-reverse !important; }
+  .ivds-md-flex--column-reverse { flex-direction: column-reverse !important; }
+  
+  .ivds-md-flex--wrap { flex-wrap: wrap !important; }
+  .ivds-md-flex--nowrap { flex-wrap: nowrap !important; }
+  
+  .ivds-md-flex--justify-start { justify-content: flex-start !important; }
+  .ivds-md-flex--justify-center { justify-content: center !important; }
+  .ivds-md-flex--justify-end { justify-content: flex-end !important; }
+  .ivds-md-flex--justify-between { justify-content: space-between !important; }
+  .ivds-md-flex--justify-around { justify-content: space-around !important; }
+  .ivds-md-flex--justify-evenly { justify-content: space-evenly !important; }
+  
+  .ivds-md-flex--items-start { align-items: flex-start !important; }
+  .ivds-md-flex--items-center { align-items: center !important; }
+  .ivds-md-flex--items-end { align-items: flex-end !important; }
+  .ivds-md-flex--items-stretch { align-items: stretch !important; }
+  .ivds-md-flex--items-baseline { align-items: baseline !important; }
+}
+
+@media (min-width: 1024px) {
+  .ivds-lg-flex--row { flex-direction: row !important; }
+  .ivds-lg-flex--column { flex-direction: column !important; }
+  .ivds-lg-flex--row-reverse { flex-direction: row-reverse !important; }
+  .ivds-lg-flex--column-reverse { flex-direction: column-reverse !important; }
+  
+  .ivds-lg-flex--wrap { flex-wrap: wrap !important; }
+  .ivds-lg-flex--nowrap { flex-wrap: nowrap !important; }
+  
+  .ivds-lg-flex--justify-start { justify-content: flex-start !important; }
+  .ivds-lg-flex--justify-center { justify-content: center !important; }
+  .ivds-lg-flex--justify-end { justify-content: flex-end !important; }
+  .ivds-lg-flex--justify-between { justify-content: space-between !important; }
+  .ivds-lg-flex--justify-around { justify-content: space-around !important; }
+  .ivds-lg-flex--justify-evenly { justify-content: space-evenly !important; }
+  
+  .ivds-lg-flex--items-start { align-items: flex-start !important; }
+  .ivds-lg-flex--items-center { align-items: center !important; }
+  .ivds-lg-flex--items-end { align-items: flex-end !important; }
+  .ivds-lg-flex--items-stretch { align-items: stretch !important; }
+  .ivds-lg-flex--items-baseline { align-items: baseline !important; }
+}

package/lib/utils/_grid.scss

@@ -0,0 +1,211 @@
+// CSS Grid utility classes
+// Provides comprehensive grid system utilities with responsive support
+
+@use '../variables/variables' as vars;
+
+.ivds-grid {
+  display: grid !important;
+  gap: var(--spacing-4, 1rem);
+  
+  // Column variations
+  &--cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
+  &--cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
+  &--cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
+  &--cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
+  &--cols-5 { grid-template-columns: repeat(5, 1fr) !important; }
+  &--cols-6 { grid-template-columns: repeat(6, 1fr) !important; }
+  &--cols-7 { grid-template-columns: repeat(7, 1fr) !important; }
+  &--cols-8 { grid-template-columns: repeat(8, 1fr) !important; }
+  &--cols-9 { grid-template-columns: repeat(9, 1fr) !important; }
+  &--cols-10 { grid-template-columns: repeat(10, 1fr) !important; }
+  &--cols-11 { grid-template-columns: repeat(11, 1fr) !important; }
+  &--cols-12 { grid-template-columns: repeat(12, 1fr) !important; }
+  &--cols-none { grid-template-columns: none !important; }
+  
+  // Row variations
+  &--rows-1 { grid-template-rows: repeat(1, 1fr) !important; }
+  &--rows-2 { grid-template-rows: repeat(2, 1fr) !important; }
+  &--rows-3 { grid-template-rows: repeat(3, 1fr) !important; }
+  &--rows-4 { grid-template-rows: repeat(4, 1fr) !important; }
+  &--rows-5 { grid-template-rows: repeat(5, 1fr) !important; }
+  &--rows-6 { grid-template-rows: repeat(6, 1fr) !important; }
+  &--rows-none { grid-template-rows: none !important; }
+  
+  // Gap variations
+  &--gap-0 { gap: 0 !important; }
+  &--gap-1 { gap: var(--spacing-1, 0.25rem) !important; }
+  &--gap-2 { gap: var(--spacing-2, 0.5rem) !important; }
+  &--gap-3 { gap: var(--spacing-3, 0.75rem) !important; }
+  &--gap-4 { gap: var(--spacing-4, 1rem) !important; }
+  &--gap-5 { gap: var(--spacing-5, 1.25rem) !important; }
+  &--gap-6 { gap: var(--spacing-6, 1.5rem) !important; }
+  &--gap-8 { gap: var(--spacing-8, 2rem) !important; }
+  &--gap-10 { gap: var(--spacing-10, 2.5rem) !important; }
+  &--gap-12 { gap: var(--spacing-12, 3rem) !important; }
+  &--gap-16 { gap: var(--spacing-16, 4rem) !important; }
+  
+  // Column gap variations
+  &--gap-x-0 { column-gap: 0 !important; }
+  &--gap-x-1 { column-gap: var(--spacing-1, 0.25rem) !important; }
+  &--gap-x-2 { column-gap: var(--spacing-2, 0.5rem) !important; }
+  &--gap-x-3 { column-gap: var(--spacing-3, 0.75rem) !important; }
+  &--gap-x-4 { column-gap: var(--spacing-4, 1rem) !important; }
+  &--gap-x-6 { column-gap: var(--spacing-6, 1.5rem) !important; }
+  &--gap-x-8 { column-gap: var(--spacing-8, 2rem) !important; }
+  
+  // Row gap variations
+  &--gap-y-0 { row-gap: 0 !important; }
+  &--gap-y-1 { row-gap: var(--spacing-1, 0.25rem) !important; }
+  &--gap-y-2 { row-gap: var(--spacing-2, 0.5rem) !important; }
+  &--gap-y-3 { row-gap: var(--spacing-3, 0.75rem) !important; }
+  &--gap-y-4 { row-gap: var(--spacing-4, 1rem) !important; }
+  &--gap-y-6 { row-gap: var(--spacing-6, 1.5rem) !important; }
+  &--gap-y-8 { row-gap: var(--spacing-8, 2rem) !important; }
+}
+
+// Grid item utilities
+.ivds-grid-item {
+  // Column span
+  &--col-span-1 { grid-column: span 1 / span 1 !important; }
+  &--col-span-2 { grid-column: span 2 / span 2 !important; }
+  &--col-span-3 { grid-column: span 3 / span 3 !important; }
+  &--col-span-4 { grid-column: span 4 / span 4 !important; }
+  &--col-span-5 { grid-column: span 5 / span 5 !important; }
+  &--col-span-6 { grid-column: span 6 / span 6 !important; }
+  &--col-span-7 { grid-column: span 7 / span 7 !important; }
+  &--col-span-8 { grid-column: span 8 / span 8 !important; }
+  &--col-span-9 { grid-column: span 9 / span 9 !important; }
+  &--col-span-10 { grid-column: span 10 / span 10 !important; }
+  &--col-span-11 { grid-column: span 11 / span 11 !important; }
+  &--col-span-12 { grid-column: span 12 / span 12 !important; }
+  &--col-span-full { grid-column: 1 / -1 !important; }
+  
+  // Column start
+  &--col-start-1 { grid-column-start: 1 !important; }
+  &--col-start-2 { grid-column-start: 2 !important; }
+  &--col-start-3 { grid-column-start: 3 !important; }
+  &--col-start-4 { grid-column-start: 4 !important; }
+  &--col-start-5 { grid-column-start: 5 !important; }
+  &--col-start-6 { grid-column-start: 6 !important; }
+  &--col-start-7 { grid-column-start: 7 !important; }
+  &--col-start-8 { grid-column-start: 8 !important; }
+  &--col-start-9 { grid-column-start: 9 !important; }
+  &--col-start-10 { grid-column-start: 10 !important; }
+  &--col-start-11 { grid-column-start: 11 !important; }
+  &--col-start-12 { grid-column-start: 12 !important; }
+  &--col-start-13 { grid-column-start: 13 !important; }
+  &--col-start-auto { grid-column-start: auto !important; }
+  
+  // Column end
+  &--col-end-1 { grid-column-end: 1 !important; }
+  &--col-end-2 { grid-column-end: 2 !important; }
+  &--col-end-3 { grid-column-end: 3 !important; }
+  &--col-end-4 { grid-column-end: 4 !important; }
+  &--col-end-5 { grid-column-end: 5 !important; }
+  &--col-end-6 { grid-column-end: 6 !important; }
+  &--col-end-7 { grid-column-end: 7 !important; }
+  &--col-end-8 { grid-column-end: 8 !important; }
+  &--col-end-9 { grid-column-end: 9 !important; }
+  &--col-end-10 { grid-column-end: 10 !important; }
+  &--col-end-11 { grid-column-end: 11 !important; }
+  &--col-end-12 { grid-column-end: 12 !important; }
+  &--col-end-13 { grid-column-end: 13 !important; }
+  &--col-end-auto { grid-column-end: auto !important; }
+  
+  // Row span
+  &--row-span-1 { grid-row: span 1 / span 1 !important; }
+  &--row-span-2 { grid-row: span 2 / span 2 !important; }
+  &--row-span-3 { grid-row: span 3 / span 3 !important; }
+  &--row-span-4 { grid-row: span 4 / span 4 !important; }
+  &--row-span-5 { grid-row: span 5 / span 5 !important; }
+  &--row-span-6 { grid-row: span 6 / span 6 !important; }
+  &--row-span-full { grid-row: 1 / -1 !important; }
+  
+  // Row start
+  &--row-start-1 { grid-row-start: 1 !important; }
+  &--row-start-2 { grid-row-start: 2 !important; }
+  &--row-start-3 { grid-row-start: 3 !important; }
+  &--row-start-4 { grid-row-start: 4 !important; }
+  &--row-start-5 { grid-row-start: 5 !important; }
+  &--row-start-6 { grid-row-start: 6 !important; }
+  &--row-start-7 { grid-row-start: 7 !important; }
+  &--row-start-auto { grid-row-start: auto !important; }
+  
+  // Row end
+  &--row-end-1 { grid-row-end: 1 !important; }
+  &--row-end-2 { grid-row-end: 2 !important; }
+  &--row-end-3 { grid-row-end: 3 !important; }
+  &--row-end-4 { grid-row-end: 4 !important; }
+  &--row-end-5 { grid-row-end: 5 !important; }
+  &--row-end-6 { grid-row-end: 6 !important; }
+  &--row-end-7 { grid-row-end: 7 !important; }
+  &--row-end-auto { grid-row-end: auto !important; }
+}
+
+// Grid auto flow utilities
+.ivds-grid-flow-row { grid-auto-flow: row !important; }
+.ivds-grid-flow-col { grid-auto-flow: column !important; }
+.ivds-grid-flow-dense { grid-auto-flow: dense !important; }
+.ivds-grid-flow-row-dense { grid-auto-flow: row dense !important; }
+.ivds-grid-flow-col-dense { grid-auto-flow: column dense !important; }
+
+// Grid auto columns utilities
+.ivds-auto-cols-auto { grid-auto-columns: auto !important; }
+.ivds-auto-cols-min { grid-auto-columns: min-content !important; }
+.ivds-auto-cols-max { grid-auto-columns: max-content !important; }
+.ivds-auto-cols-fr { grid-auto-columns: minmax(0, 1fr) !important; }
+
+// Grid auto rows utilities
+.ivds-auto-rows-auto { grid-auto-rows: auto !important; }
+.ivds-auto-rows-min { grid-auto-rows: min-content !important; }
+.ivds-auto-rows-max { grid-auto-rows: max-content !important; }
+.ivds-auto-rows-fr { grid-auto-rows: minmax(0, 1fr) !important; }
+
+// Responsive grid utilities
+@media (min-width: 640px) {
+  .ivds-sm-grid--cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
+  .ivds-sm-grid--cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
+  .ivds-sm-grid--cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
+  .ivds-sm-grid--cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
+  .ivds-sm-grid--cols-6 { grid-template-columns: repeat(6, 1fr) !important; }
+  .ivds-sm-grid--cols-12 { grid-template-columns: repeat(12, 1fr) !important; }
+  
+  .ivds-sm-grid-item--col-span-1 { grid-column: span 1 / span 1 !important; }
+  .ivds-sm-grid-item--col-span-2 { grid-column: span 2 / span 2 !important; }
+  .ivds-sm-grid-item--col-span-3 { grid-column: span 3 / span 3 !important; }
+  .ivds-sm-grid-item--col-span-4 { grid-column: span 4 / span 4 !important; }
+  .ivds-sm-grid-item--col-span-6 { grid-column: span 6 / span 6 !important; }
+  .ivds-sm-grid-item--col-span-12 { grid-column: span 12 / span 12 !important; }
+}
+
+@media (min-width: 768px) {
+  .ivds-md-grid--cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
+  .ivds-md-grid--cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
+  .ivds-md-grid--cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
+  .ivds-md-grid--cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
+  .ivds-md-grid--cols-6 { grid-template-columns: repeat(6, 1fr) !important; }
+  .ivds-md-grid--cols-12 { grid-template-columns: repeat(12, 1fr) !important; }
+  
+  .ivds-md-grid-item--col-span-1 { grid-column: span 1 / span 1 !important; }
+  .ivds-md-grid-item--col-span-2 { grid-column: span 2 / span 2 !important; }
+  .ivds-md-grid-item--col-span-3 { grid-column: span 3 / span 3 !important; }
+  .ivds-md-grid-item--col-span-4 { grid-column: span 4 / span 4 !important; }
+  .ivds-md-grid-item--col-span-6 { grid-column: span 6 / span 6 !important; }
+  .ivds-md-grid-item--col-span-12 { grid-column: span 12 / span 12 !important; }
+}
+
+@media (min-width: 1024px) {
+  .ivds-lg-grid--cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
+  .ivds-lg-grid--cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
+  .ivds-lg-grid--cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
+  .ivds-lg-grid--cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
+  .ivds-lg-grid--cols-6 { grid-template-columns: repeat(6, 1fr) !important; }
+  .ivds-lg-grid--cols-12 { grid-template-columns: repeat(12, 1fr) !important; }
+  
+  .ivds-lg-grid-item--col-span-1 { grid-column: span 1 / span 1 !important; }
+  .ivds-lg-grid-item--col-span-2 { grid-column: span 2 / span 2 !important; }
+  .ivds-lg-grid-item--col-span-3 { grid-column: span 3 / span 3 !important; }
+  .ivds-lg-grid-item--col-span-4 { grid-column: span 4 / span 4 !important; }
+  .ivds-lg-grid-item--col-span-6 { grid-column: span 6 / span 6 !important; }
+  .ivds-lg-grid-item--col-span-12 { grid-column: span 12 / span 12 !important; }
+}