@ivds/core 0.1.1

package/src/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/src/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; }
+}

package/src/utils/_layout.scss

@@ -0,0 +1,253 @@
+// Layout utility classes
+// Provides comprehensive display, position, and layout utilities
+
+@use '../variables/variables' as vars;
+
+// Display utilities
+.ivds-block { display: block !important; }
+.ivds-inline { display: inline !important; }
+.ivds-inline-block { display: inline-block !important; }
+.ivds-flex { display: flex !important; }
+.ivds-inline-flex { display: inline-flex !important; }
+.ivds-grid { display: grid !important; }
+.ivds-inline-grid { display: inline-grid !important; }
+.ivds-table { display: table !important; }
+.ivds-table-cell { display: table-cell !important; }
+.ivds-table-row { display: table-row !important; }
+.ivds-hidden { display: none !important; }
+
+// Position utilities
+.ivds-static { position: static !important; }
+.ivds-relative { position: relative !important; }
+.ivds-absolute { position: absolute !important; }
+.ivds-fixed { position: fixed !important; }
+.ivds-sticky { position: sticky !important; }
+
+// Top, right, bottom, left utilities
+.ivds-inset-0 { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }
+.ivds-inset-auto { top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; }
+
+.ivds-inset-x-0 { left: 0 !important; right: 0 !important; }
+.ivds-inset-x-auto { left: auto !important; right: auto !important; }
+.ivds-inset-y-0 { top: 0 !important; bottom: 0 !important; }
+.ivds-inset-y-auto { top: auto !important; bottom: auto !important; }
+
+.ivds-top-0 { top: 0 !important; }
+.ivds-top-auto { top: auto !important; }
+.ivds-right-0 { right: 0 !important; }
+.ivds-right-auto { right: auto !important; }
+.ivds-bottom-0 { bottom: 0 !important; }
+.ivds-bottom-auto { bottom: auto !important; }
+.ivds-left-0 { left: 0 !important; }
+.ivds-left-auto { left: auto !important; }
+
+// Overflow utilities
+.ivds-overflow-auto { overflow: auto !important; }
+.ivds-overflow-hidden { overflow: hidden !important; }
+.ivds-overflow-visible { overflow: visible !important; }
+.ivds-overflow-scroll { overflow: scroll !important; }
+
+.ivds-overflow-x-auto { overflow-x: auto !important; }
+.ivds-overflow-x-hidden { overflow-x: hidden !important; }
+.ivds-overflow-x-visible { overflow-x: visible !important; }
+.ivds-overflow-x-scroll { overflow-x: scroll !important; }
+
+.ivds-overflow-y-auto { overflow-y: auto !important; }
+.ivds-overflow-y-hidden { overflow-y: hidden !important; }
+.ivds-overflow-y-visible { overflow-y: visible !important; }
+.ivds-overflow-y-scroll { overflow-y: scroll !important; }
+
+// Visibility utilities
+.ivds-visible { visibility: visible !important; }
+.ivds-invisible { visibility: hidden !important; }
+
+// Z-index utilities
+.ivds-z-0 { z-index: 0 !important; }
+.ivds-z-10 { z-index: 10 !important; }
+.ivds-z-20 { z-index: 20 !important; }
+.ivds-z-30 { z-index: 30 !important; }
+.ivds-z-40 { z-index: 40 !important; }
+.ivds-z-50 { z-index: 50 !important; }
+.ivds-z-auto { z-index: auto !important; }
+
+// Float utilities
+.ivds-float-right { float: right !important; }
+.ivds-float-left { float: left !important; }
+.ivds-float-none { float: none !important; }
+
+// Clear utilities
+.ivds-clear-left { clear: left !important; }
+.ivds-clear-right { clear: right !important; }
+.ivds-clear-both { clear: both !important; }
+.ivds-clear-none { clear: none !important; }
+
+// Object fit utilities
+.ivds-object-contain { object-fit: contain !important; }
+.ivds-object-cover { object-fit: cover !important; }
+.ivds-object-fill { object-fit: fill !important; }
+.ivds-object-none { object-fit: none !important; }
+.ivds-object-scale-down { object-fit: scale-down !important; }
+
+// Object position utilities
+.ivds-object-bottom { object-position: bottom !important; }
+.ivds-object-center { object-position: center !important; }
+.ivds-object-left { object-position: left !important; }
+.ivds-object-left-bottom { object-position: left bottom !important; }
+.ivds-object-left-top { object-position: left top !important; }
+.ivds-object-right { object-position: right !important; }
+.ivds-object-right-bottom { object-position: right bottom !important; }
+.ivds-object-right-top { object-position: right top !important; }
+.ivds-object-top { object-position: top !important; }
+
+// Container utilities
+.ivds-container {
+  width: 100% !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+  padding-left: var(--spacing-4, 1rem) !important;
+  padding-right: var(--spacing-4, 1rem) !important;
+  
+  // Size variations
+  &--xs { max-width: 475px !important; }
+  &--sm { max-width: 640px !important; }
+  &--md { max-width: 768px !important; }
+  &--lg { max-width: 1024px !important; }
+  &--xl { max-width: 1280px !important; }
+  &--2xl { max-width: 1536px !important; }
+  
+  // Padding variations
+  &--no-padding {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+  
+  &--padding-sm {
+    padding-left: var(--spacing-2, 0.5rem) !important;
+    padding-right: var(--spacing-2, 0.5rem) !important;
+  }
+  
+  &--padding-lg {
+    padding-left: var(--spacing-8, 2rem) !important;
+    padding-right: var(--spacing-8, 2rem) !important;
+  }
+}
+
+// Width utilities
+.ivds-w-0 { width: 0 !important; }
+.ivds-w-auto { width: auto !important; }
+.ivds-w-full { width: 100% !important; }
+.ivds-w-screen { width: 100vw !important; }
+.ivds-w-min { width: min-content !important; }
+.ivds-w-max { width: max-content !important; }
+.ivds-w-fit { width: fit-content !important; }
+
+// Fractional widths
+.ivds-w-1-2 { width: 50% !important; }
+.ivds-w-1-3 { width: 33.3333% !important; }
+.ivds-w-2-3 { width: 66.6667% !important; }
+.ivds-w-1-4 { width: 25% !important; }
+.ivds-w-2-4 { width: 50% !important; }
+.ivds-w-3-4 { width: 75% !important; }
+.ivds-w-1-5 { width: 20% !important; }
+.ivds-w-2-5 { width: 40% !important; }
+.ivds-w-3-5 { width: 60% !important; }
+.ivds-w-4-5 { width: 80% !important; }
+.ivds-w-1-6 { width: 16.6667% !important; }
+.ivds-w-2-6 { width: 33.3333% !important; }
+.ivds-w-3-6 { width: 50% !important; }
+.ivds-w-4-6 { width: 66.6667% !important; }
+.ivds-w-5-6 { width: 83.3333% !important; }
+
+// Height utilities
+.ivds-h-0 { height: 0 !important; }
+.ivds-h-auto { height: auto !important; }
+.ivds-h-full { height: 100% !important; }
+.ivds-h-screen { height: 100vh !important; }
+.ivds-h-min { height: min-content !important; }
+.ivds-h-max { height: max-content !important; }
+.ivds-h-fit { height: fit-content !important; }
+
+// Fractional heights
+.ivds-h-1-2 { height: 50% !important; }
+.ivds-h-1-3 { height: 33.3333% !important; }
+.ivds-h-2-3 { height: 66.6667% !important; }
+.ivds-h-1-4 { height: 25% !important; }
+.ivds-h-2-4 { height: 50% !important; }
+.ivds-h-3-4 { height: 75% !important; }
+.ivds-h-1-5 { height: 20% !important; }
+.ivds-h-2-5 { height: 40% !important; }
+.ivds-h-3-5 { height: 60% !important; }
+.ivds-h-4-5 { height: 80% !important; }
+.ivds-h-1-6 { height: 16.6667% !important; }
+.ivds-h-5-6 { height: 83.3333% !important; }
+
+// Min/Max width utilities
+.ivds-min-w-0 { min-width: 0 !important; }
+.ivds-min-w-full { min-width: 100% !important; }
+.ivds-min-w-min { min-width: min-content !important; }
+.ivds-min-w-max { min-width: max-content !important; }
+.ivds-min-w-fit { min-width: fit-content !important; }
+
+.ivds-max-w-0 { max-width: 0 !important; }
+.ivds-max-w-none { max-width: none !important; }
+.ivds-max-w-xs { max-width: 20rem !important; }
+.ivds-max-w-sm { max-width: 24rem !important; }
+.ivds-max-w-md { max-width: 28rem !important; }
+.ivds-max-w-lg { max-width: 32rem !important; }
+.ivds-max-w-xl { max-width: 36rem !important; }
+.ivds-max-w-2xl { max-width: 42rem !important; }
+.ivds-max-w-3xl { max-width: 48rem !important; }
+.ivds-max-w-4xl { max-width: 56rem !important; }
+.ivds-max-w-5xl { max-width: 64rem !important; }
+.ivds-max-w-6xl { max-width: 72rem !important; }
+.ivds-max-w-7xl { max-width: 80rem !important; }
+.ivds-max-w-full { max-width: 100% !important; }
+.ivds-max-w-min { max-width: min-content !important; }
+.ivds-max-w-max { max-width: max-content !important; }
+.ivds-max-w-fit { max-width: fit-content !important; }
+
+// Min/Max height utilities
+.ivds-min-h-0 { min-height: 0 !important; }
+.ivds-min-h-full { min-height: 100% !important; }
+.ivds-min-h-screen { min-height: 100vh !important; }
+.ivds-min-h-min { min-height: min-content !important; }
+.ivds-min-h-max { min-height: max-content !important; }
+.ivds-min-h-fit { min-height: fit-content !important; }
+
+.ivds-max-h-0 { max-height: 0 !important; }
+.ivds-max-h-full { max-height: 100% !important; }
+.ivds-max-h-screen { max-height: 100vh !important; }
+.ivds-max-h-min { max-height: min-content !important; }
+.ivds-max-h-max { max-height: max-content !important; }
+.ivds-max-h-fit { max-height: fit-content !important; }
+
+// Responsive display utilities
+@media (min-width: 640px) {
+  .ivds-sm-block { display: block !important; }
+  .ivds-sm-inline { display: inline !important; }
+  .ivds-sm-inline-block { display: inline-block !important; }
+  .ivds-sm-flex { display: flex !important; }
+  .ivds-sm-inline-flex { display: inline-flex !important; }
+  .ivds-sm-grid { display: grid !important; }
+  .ivds-sm-hidden { display: none !important; }
+}
+
+@media (min-width: 768px) {
+  .ivds-md-block { display: block !important; }
+  .ivds-md-inline { display: inline !important; }
+  .ivds-md-inline-block { display: inline-block !important; }
+  .ivds-md-flex { display: flex !important; }
+  .ivds-md-inline-flex { display: inline-flex !important; }
+  .ivds-md-grid { display: grid !important; }
+  .ivds-md-hidden { display: none !important; }
+}
+
+@media (min-width: 1024px) {
+  .ivds-lg-block { display: block !important; }
+  .ivds-lg-inline { display: inline !important; }
+  .ivds-lg-inline-block { display: inline-block !important; }
+  .ivds-lg-flex { display: flex !important; }
+  .ivds-lg-inline-flex { display: inline-flex !important; }
+  .ivds-lg-grid { display: grid !important; }
+  .ivds-lg-hidden { display: none !important; }
+}