@gridui/grid 2.3.5 → 3.0.0

package/dist/styles.css

@@ -1,195 +1,195 @@
-/*! tailwindcss v4.3.4 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.5 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer utilities {
-  .gridui-u-\@container {
+  .gridui-u-grid--\@container {
     container-type: inline-size;
   }
-  .gridui-u-relative {
+  .gridui-u-grid--relative {
     position: relative;
   }
-  .gridui-u-z-\(--gridui-z-interaction\) {
+  .gridui-u-grid--z-\(--gridui-z-interaction\) {
     z-index: var(--gridui-z-interaction);
   }
-  .gridui-u-box-border {
+  .gridui-u-grid--box-border {
     box-sizing: border-box;
   }
-  .gridui-u-block {
+  .gridui-u-grid--block {
     display: block;
   }
-  .gridui-u-flex {
+  .gridui-u-grid--flex {
     display: flex;
   }
-  .gridui-u-grid {
+  .gridui-u-grid--grid {
     display: grid;
   }
-  .gridui-u-h-full {
+  .gridui-u-grid--h-full {
     height: 100%;
   }
-  .gridui-u-min-h-svh {
+  .gridui-u-grid--min-h-svh {
     min-height: 100svh;
   }
-  .gridui-u-min-w-0 {
+  .gridui-u-grid--min-w-0 {
     min-width: 0px;
   }
-  .gridui-u-flex-col {
+  .gridui-u-grid--flex-col {
     flex-direction: column;
   }
-  .gridui-u-items-center {
+  .gridui-u-grid--items-center {
     align-items: center;
   }
-  .gridui-u-justify-center {
+  .gridui-u-grid--justify-center {
     justify-content: center;
   }
-  .gridui-u-justify-end {
+  .gridui-u-grid--justify-end {
     justify-content: flex-end;
   }
-  .gridui-u-gap-gridui-24 {
+  .gridui-u-grid--gap-gridui-24 {
     gap: var(--gridui-space-24);
   }
-  .gridui-u-overflow-hidden {
+  .gridui-u-grid--overflow-hidden {
     overflow: hidden;
   }
-  .gridui-u-border-x {
+  .gridui-u-grid--border-x {
     border-inline-style: var(--tw-border-style);
     border-inline-width: 1px;
   }
-  .gridui-u-border-x-0 {
+  .gridui-u-grid--border-x-0 {
     border-inline-style: var(--tw-border-style);
     border-inline-width: 0px;
   }
-  .gridui-u-border-t {
+  .gridui-u-grid--border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
   }
-  .gridui-u-border-l {
+  .gridui-u-grid--border-l {
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
-  .gridui-u-border-solid {
+  .gridui-u-grid--border-solid {
     --tw-border-style: solid;
     border-style: solid;
   }
-  .gridui-u-border-border {
+  .gridui-u-grid--border-border {
     border-color: var(--gridui-border);
   }
-  .gridui-u-bg-border {
+  .gridui-u-grid--bg-border {
     background-color: var(--gridui-border);
   }
-  .gridui-u-bg-inherit {
+  .gridui-u-grid--bg-inherit {
     background-color: inherit;
   }
-  .gridui-u-bg-transparent {
+  .gridui-u-grid--bg-transparent {
     background-color: transparent;
   }
-  .gridui-u-px-gridui-24 {
+  .gridui-u-grid--px-gridui-24 {
     padding-inline: var(--gridui-space-24);
   }
-  .gridui-u-py-gridui-24 {
+  .gridui-u-grid--py-gridui-24 {
     padding-block: var(--gridui-space-24);
   }
-  .gridui-u-py-gridui-32 {
+  .gridui-u-grid--py-gridui-32 {
     padding-block: var(--gridui-space-32);
   }
-  .gridui-u-pb-0 {
+  .gridui-u-grid--pb-0 {
     padding-bottom: 0px;
   }
-  .gridui-u-type-eyebrow {
+  .gridui-u-grid--type-eyebrow {
     font: var(--gridui-type-eyebrow);
     letter-spacing: 0.08em;
   }
-  .gridui-u-wrap-anywhere {
+  .gridui-u-grid--wrap-anywhere {
     overflow-wrap: anywhere;
   }
-  .gridui-u-text-muted {
+  .gridui-u-grid--text-muted {
     color: var(--gridui-muted);
   }
-  .gridui-u-\[--gridui-dashboard-compact-end-minimum\:0px\] {
+  .gridui-u-grid--\[--gridui-dashboard-compact-end-minimum\:0px\] {
     --gridui-dashboard-compact-end-minimum: 0px;
   }
-  .gridui-u-\[--gridui-dashboard-compact-end\:0px\] {
+  .gridui-u-grid--\[--gridui-dashboard-compact-end\:0px\] {
     --gridui-dashboard-compact-end: 0px;
   }
-  .gridui-u-\[--gridui-dashboard-compact-end\:var\(--gridui-space-8\)\] {
+  .gridui-u-grid--\[--gridui-dashboard-compact-end\:var\(--gridui-space-8\)\] {
     --gridui-dashboard-compact-end: var(--gridui-space-8);
   }
-  .gridui-u-\[--gridui-dashboard-compact-end\:var\(--gridui-space-16\)\] {
+  .gridui-u-grid--\[--gridui-dashboard-compact-end\:var\(--gridui-space-16\)\] {
     --gridui-dashboard-compact-end: var(--gridui-space-16);
   }
-  .gridui-u-\[--gridui-dashboard-compact-end\:var\(--gridui-space-24\)\] {
+  .gridui-u-grid--\[--gridui-dashboard-compact-end\:var\(--gridui-space-24\)\] {
     --gridui-dashboard-compact-end: var(--gridui-space-24);
   }
-  .gridui-u-\[--gridui-dashboard-compact-start-minimum\:0px\] {
+  .gridui-u-grid--\[--gridui-dashboard-compact-start-minimum\:0px\] {
     --gridui-dashboard-compact-start-minimum: 0px;
   }
-  .gridui-u-\[--gridui-dashboard-compact-start\:0px\] {
+  .gridui-u-grid--\[--gridui-dashboard-compact-start\:0px\] {
     --gridui-dashboard-compact-start: 0px;
   }
-  .gridui-u-\[--gridui-dashboard-compact-start\:var\(--gridui-space-8\)\] {
+  .gridui-u-grid--\[--gridui-dashboard-compact-start\:var\(--gridui-space-8\)\] {
     --gridui-dashboard-compact-start: var(--gridui-space-8);
   }
-  .gridui-u-\[--gridui-dashboard-compact-start\:var\(--gridui-space-16\)\] {
+  .gridui-u-grid--\[--gridui-dashboard-compact-start\:var\(--gridui-space-16\)\] {
     --gridui-dashboard-compact-start: var(--gridui-space-16);
   }
-  .gridui-u-\[--gridui-dashboard-compact-start\:var\(--gridui-space-24\)\] {
+  .gridui-u-grid--\[--gridui-dashboard-compact-start\:var\(--gridui-space-24\)\] {
     --gridui-dashboard-compact-start: var(--gridui-space-24);
   }
-  .gridui-u-\[--gridui-dashboard-end-minimum\:0px\] {
+  .gridui-u-grid--\[--gridui-dashboard-end-minimum\:0px\] {
     --gridui-dashboard-end-minimum: 0px;
   }
-  .gridui-u-\[--gridui-dashboard-end\:0px\] {
+  .gridui-u-grid--\[--gridui-dashboard-end\:0px\] {
     --gridui-dashboard-end: 0px;
   }
-  .gridui-u-\[--gridui-dashboard-end\:var\(--gridui-space-8\)\] {
+  .gridui-u-grid--\[--gridui-dashboard-end\:var\(--gridui-space-8\)\] {
     --gridui-dashboard-end: var(--gridui-space-8);
   }
-  .gridui-u-\[--gridui-dashboard-end\:var\(--gridui-space-16\)\] {
+  .gridui-u-grid--\[--gridui-dashboard-end\:var\(--gridui-space-16\)\] {
     --gridui-dashboard-end: var(--gridui-space-16);
   }
-  .gridui-u-\[--gridui-dashboard-end\:var\(--gridui-space-24\)\] {
+  .gridui-u-grid--\[--gridui-dashboard-end\:var\(--gridui-space-24\)\] {
     --gridui-dashboard-end: var(--gridui-space-24);
   }
-  .gridui-u-\[--gridui-dashboard-start-minimum\:0px\] {
+  .gridui-u-grid--\[--gridui-dashboard-start-minimum\:0px\] {
     --gridui-dashboard-start-minimum: 0px;
   }
-  .gridui-u-\[--gridui-dashboard-start\:0px\] {
+  .gridui-u-grid--\[--gridui-dashboard-start\:0px\] {
     --gridui-dashboard-start: 0px;
   }
-  .gridui-u-\[--gridui-dashboard-start\:var\(--gridui-space-8\)\] {
+  .gridui-u-grid--\[--gridui-dashboard-start\:var\(--gridui-space-8\)\] {
     --gridui-dashboard-start: var(--gridui-space-8);
   }
-  .gridui-u-\[--gridui-dashboard-start\:var\(--gridui-space-16\)\] {
+  .gridui-u-grid--\[--gridui-dashboard-start\:var\(--gridui-space-16\)\] {
     --gridui-dashboard-start: var(--gridui-space-16);
   }
-  .gridui-u-\[--gridui-dashboard-start\:var\(--gridui-space-24\)\] {
+  .gridui-u-grid--\[--gridui-dashboard-start\:var\(--gridui-space-24\)\] {
     --gridui-dashboard-start: var(--gridui-space-24);
   }
-  .gridui-u-\[\&\>\.gridui-frame-rail-content\]\:sticky > .gridui-frame-rail-content {
+  .gridui-u-grid--\[\&\>\.gridui-frame-rail-content\]\:sticky > .gridui-frame-rail-content {
     position: sticky;
   }
-  .gridui-u-\[\&\>span\]\:block > span {
+  .gridui-u-grid--\[\&\>span\]\:block > span {
     display: block;
   }
-  .gridui-u-\[\&\>span\]\:text-center > span {
+  .gridui-u-grid--\[\&\>span\]\:text-center > span {
     text-align: center;
   }
-  .gridui-u-\[\&\>span\]\:font-display > span {
+  .gridui-u-grid--\[\&\>span\]\:font-display > span {
     font-family: var(--gridui-font-display);
   }
-  .gridui-u-\[\&\>span\]\:leading-none > span {
+  .gridui-u-grid--\[\&\>span\]\:leading-none > span {
     --tw-leading: 1;
     line-height: 1;
   }
-  .gridui-u-\[\&\>span\]\:whitespace-nowrap > span {
+  .gridui-u-grid--\[\&\>span\]\:whitespace-nowrap > span {
     white-space: nowrap;
   }
-  .gridui-u-\[\&\>span\]\:text-transparent > span {
+  .gridui-u-grid--\[\&\>span\]\:text-transparent > span {
     color: transparent;
   }
-  .gridui-u-\[\&\>svg\]\:h-auto > svg {
+  .gridui-u-grid--\[\&\>svg\]\:h-auto > svg {
     height: auto;
   }
-  .gridui-u-\[\&\>svg\]\:opacity-30 > svg {
+  .gridui-u-grid--\[\&\>svg\]\:opacity-30 > svg {
     opacity: 30%;
   }
 }
@@ -301,6 +301,11 @@
     align-content: start;
   }
   @media (min-width: 40rem) {
+    .gridui-frame-main {
+      --gridui-page-gutter-start: var(--gridui-main-gutter-start-sm, var(--gridui-page-gutter));
+    }
+  }
+  @media (min-width: 48rem) {
     .gridui-frame-main {
       --gridui-page-gutter-start: var(--gridui-main-gutter-start-md, var(--gridui-page-gutter));
     }
@@ -315,6 +320,12 @@
     padding-block: var(--gridui-section-padding-block);
   }
   @media (min-width: 40rem) {
+    .gridui-frame-section > .gridui-frame-surface {
+      padding-inline: var(--gridui-section-padding-inline-sm);
+      padding-block: var(--gridui-section-padding-block-sm);
+    }
+  }
+  @media (min-width: 48rem) {
     .gridui-frame-section > .gridui-frame-surface {
       padding-inline: var(--gridui-section-padding-inline-md);
       padding-block: var(--gridui-section-padding-block-md);
@@ -352,6 +363,12 @@
     bottom: max(var(--gridui-space-16), env(safe-area-inset-bottom));
   }
   @media (min-width: 40rem) {
+    .gridui-frame-rail-group {
+      --gridui-frame-rail-width: var(--gridui-rail-width-sm);
+      --gridui-frame-rail-display: var(--gridui-rail-display-sm);
+    }
+  }
+  @media (min-width: 48rem) {
     .gridui-frame-rail-group {
       --gridui-frame-rail-width: var(--gridui-rail-width-md);
       --gridui-frame-rail-display: var(--gridui-rail-display-md);
@@ -518,7 +535,7 @@
     grid-column: var(--gridui-span);
     padding: var(--gridui-padding);
   }
-  .gridui-grid-cells > .gridui-grid-item {
+  .gridui-grid-all > .gridui-grid-item {
     border-right: 1px solid var(--gridui-border);
     border-bottom: 1px solid var(--gridui-border);
   }
@@ -533,6 +550,16 @@
     z-index: var(--gridui-z-interaction);
   }
   @media (min-width: 40rem) {
+    .gridui-grid {
+      grid-template-columns: var(--gridui-grid-template-sm);
+      gap: var(--gridui-gap-sm);
+    }
+    .gridui-grid-item {
+      grid-column: var(--gridui-span-sm);
+      padding: var(--gridui-padding-sm);
+    }
+  }
+  @media (min-width: 48rem) {
     .gridui-grid {
       grid-template-columns: var(--gridui-grid-template-md);
       gap: var(--gridui-gap-md);
@@ -556,6 +583,11 @@
     gap: var(--gridui-gap);
   }
   @media (min-width: 40rem) {
+    .gridui-stack {
+      gap: var(--gridui-gap-sm);
+    }
+  }
+  @media (min-width: 48rem) {
     .gridui-stack {
       gap: var(--gridui-gap-md);
     }
@@ -580,6 +612,11 @@
     display: block;
   }
   @media (min-width: 40rem) {
+    .gridui-frame-chrome {
+      padding: var(--gridui-chrome-padding-sm);
+    }
+  }
+  @media (min-width: 48rem) {
     .gridui-frame-chrome {
       padding: var(--gridui-chrome-padding-md);
     }
@@ -654,6 +691,49 @@
     border-right-width: 1px;
   }
   @media (min-width: 40rem) {
+    .gridui-split[data-direction-sm="row"] {
+      flex-direction: row;
+    }
+    .gridui-split[data-direction-sm="column"] {
+      flex-direction: column;
+    }
+    .gridui-split[data-direction-sm="row-reverse"] {
+      flex-direction: row-reverse;
+    }
+    .gridui-split[data-direction-sm="column-reverse"] {
+      flex-direction: column-reverse;
+    }
+    .gridui-split[data-direction-sm][data-seam-sm] > :where(:not([hidden]) ~ :not([hidden])) {
+      border: 0 solid var(--gridui-border);
+    }
+    .gridui-split[data-direction-sm="row"][data-seam-sm="line"] > :where(:not([hidden]) ~ :not([hidden])) {
+      border-inline-start-width: 1px;
+    }
+    .gridui-split[data-direction-sm="column"][data-seam-sm="line"] > :where(:not([hidden]) ~ :not([hidden])) {
+      border-block-start-width: 1px;
+    }
+    .gridui-split[data-direction-sm="row-reverse"][data-seam-sm="line"] > :where(:not([hidden]) ~ :not([hidden])) {
+      border-inline-end-width: 1px;
+    }
+    .gridui-split[data-direction-sm="column-reverse"][data-seam-sm="line"] > :where(:not([hidden]) ~ :not([hidden])) {
+      border-block-end-width: 1px;
+    }
+    .gridui-split[data-direction-sm="row"]:where([data-order="physical"]:dir(rtl)) {
+      flex-direction: row-reverse;
+    }
+    .gridui-split[data-direction-sm="row"]:where([data-order="physical"]:dir(rtl))[data-seam-sm="line"] > :where(:not([hidden]) ~ :not([hidden])) {
+      border: 0 solid var(--gridui-border);
+      border-left-width: 1px;
+    }
+    .gridui-split[data-direction-sm="row-reverse"]:where([data-order="physical"]:dir(rtl)) {
+      flex-direction: row;
+    }
+    .gridui-split[data-direction-sm="row-reverse"]:where([data-order="physical"]:dir(rtl))[data-seam-sm="line"] > :where(:not([hidden]) ~ :not([hidden])) {
+      border: 0 solid var(--gridui-border);
+      border-right-width: 1px;
+    }
+  }
+  @media (min-width: 48rem) {
     .gridui-split[data-direction-md="row"] {
       flex-direction: row;
     }