@jongh/ui 1.6.5 → 2.20260902.1

package/dist/recipes/layout-recipe.css

@@ -0,0 +1,427 @@
+@layer recipes {
+  @layer _base {
+    .layout {
+      --layout-color-base: initial;
+      --layout-color-sm: var(--layout-color-base, initial);
+      --layout-color-md: var(--layout-color-sm, initial);
+      --layout-color-lg: var(--layout-color-md, initial);
+      --layout-color-xl: var(--layout-color-lg, initial);
+      --layout-display-base: initial;
+      --layout-display-sm: var(--layout-display-base, initial);
+      --layout-display-md: var(--layout-display-sm, initial);
+      --layout-display-lg: var(--layout-display-md, initial);
+      --layout-display-xl: var(--layout-display-lg, initial);
+      --layout-flex-direction-base: initial;
+      --layout-flex-direction-sm: var(--layout-flex-direction-base, initial);
+      --layout-flex-direction-md: var(--layout-flex-direction-sm, initial);
+      --layout-flex-direction-lg: var(--layout-flex-direction-md, initial);
+      --layout-flex-direction-xl: var(--layout-flex-direction-lg, initial);
+      --layout-gap-base: initial;
+      --layout-gap-sm: var(--layout-gap-base, initial);
+      --layout-gap-md: var(--layout-gap-sm, initial);
+      --layout-gap-lg: var(--layout-gap-md, initial);
+      --layout-gap-xl: var(--layout-gap-lg, initial);
+      --layout-row-gap-base: initial;
+      --layout-row-gap-sm: var(--layout-row-gap-base, initial);
+      --layout-row-gap-md: var(--layout-row-gap-sm, initial);
+      --layout-row-gap-lg: var(--layout-row-gap-md, initial);
+      --layout-row-gap-xl: var(--layout-row-gap-lg, initial);
+      --layout-column-gap-base: initial;
+      --layout-column-gap-sm: var(--layout-column-gap-base, initial);
+      --layout-column-gap-md: var(--layout-column-gap-sm, initial);
+      --layout-column-gap-lg: var(--layout-column-gap-md, initial);
+      --layout-column-gap-xl: var(--layout-column-gap-lg, initial);
+      --layout-align-items-base: initial;
+      --layout-align-items-sm: var(--layout-align-items-base, initial);
+      --layout-align-items-md: var(--layout-align-items-sm, initial);
+      --layout-align-items-lg: var(--layout-align-items-md, initial);
+      --layout-align-items-xl: var(--layout-align-items-lg, initial);
+      --layout-justify-content-base: initial;
+      --layout-justify-content-sm: var(--layout-justify-content-base, initial);
+      --layout-justify-content-md: var(--layout-justify-content-sm, initial);
+      --layout-justify-content-lg: var(--layout-justify-content-md, initial);
+      --layout-justify-content-xl: var(--layout-justify-content-lg, initial);
+      --layout-justify-items-base: initial;
+      --layout-justify-items-sm: var(--layout-justify-items-base, initial);
+      --layout-justify-items-md: var(--layout-justify-items-sm, initial);
+      --layout-justify-items-lg: var(--layout-justify-items-md, initial);
+      --layout-justify-items-xl: var(--layout-justify-items-lg, initial);
+      --layout-flex-wrap-base: initial;
+      --layout-flex-wrap-sm: var(--layout-flex-wrap-base, initial);
+      --layout-flex-wrap-md: var(--layout-flex-wrap-sm, initial);
+      --layout-flex-wrap-lg: var(--layout-flex-wrap-md, initial);
+      --layout-flex-wrap-xl: var(--layout-flex-wrap-lg, initial);
+      --layout-flex-grow-base: initial;
+      --layout-flex-grow-sm: var(--layout-flex-grow-base, initial);
+      --layout-flex-grow-md: var(--layout-flex-grow-sm, initial);
+      --layout-flex-grow-lg: var(--layout-flex-grow-md, initial);
+      --layout-flex-grow-xl: var(--layout-flex-grow-lg, initial);
+      --layout-flex-shrink-base: initial;
+      --layout-flex-shrink-sm: var(--layout-flex-shrink-base, initial);
+      --layout-flex-shrink-md: var(--layout-flex-shrink-sm, initial);
+      --layout-flex-shrink-lg: var(--layout-flex-shrink-md, initial);
+      --layout-flex-shrink-xl: var(--layout-flex-shrink-lg, initial);
+      --layout-width-base: initial;
+      --layout-width-sm: var(--layout-width-base, initial);
+      --layout-width-md: var(--layout-width-sm, initial);
+      --layout-width-lg: var(--layout-width-md, initial);
+      --layout-width-xl: var(--layout-width-lg, initial);
+      --layout-min-width-base: initial;
+      --layout-min-width-sm: var(--layout-min-width-base, initial);
+      --layout-min-width-md: var(--layout-min-width-sm, initial);
+      --layout-min-width-lg: var(--layout-min-width-md, initial);
+      --layout-min-width-xl: var(--layout-min-width-lg, initial);
+      --layout-max-width-base: initial;
+      --layout-max-width-sm: var(--layout-max-width-base, initial);
+      --layout-max-width-md: var(--layout-max-width-sm, initial);
+      --layout-max-width-lg: var(--layout-max-width-md, initial);
+      --layout-max-width-xl: var(--layout-max-width-lg, initial);
+      --layout-height-base: initial;
+      --layout-height-sm: var(--layout-height-base, initial);
+      --layout-height-md: var(--layout-height-sm, initial);
+      --layout-height-lg: var(--layout-height-md, initial);
+      --layout-height-xl: var(--layout-height-lg, initial);
+      --layout-min-height-base: initial;
+      --layout-min-height-sm: var(--layout-min-height-base, initial);
+      --layout-min-height-md: var(--layout-min-height-sm, initial);
+      --layout-min-height-lg: var(--layout-min-height-md, initial);
+      --layout-min-height-xl: var(--layout-min-height-lg, initial);
+      --layout-max-height-base: initial;
+      --layout-max-height-sm: var(--layout-max-height-base, initial);
+      --layout-max-height-md: var(--layout-max-height-sm, initial);
+      --layout-max-height-lg: var(--layout-max-height-md, initial);
+      --layout-max-height-xl: var(--layout-max-height-lg, initial);
+      --layout-padding-base: initial;
+      --layout-padding-sm: var(--layout-padding-base, initial);
+      --layout-padding-md: var(--layout-padding-sm, initial);
+      --layout-padding-lg: var(--layout-padding-md, initial);
+      --layout-padding-xl: var(--layout-padding-lg, initial);
+      --layout-padding-x-base: initial;
+      --layout-padding-x-sm: var(--layout-padding-x-base, initial);
+      --layout-padding-x-md: var(--layout-padding-x-sm, initial);
+      --layout-padding-x-lg: var(--layout-padding-x-md, initial);
+      --layout-padding-x-xl: var(--layout-padding-x-lg, initial);
+      --layout-padding-y-base: initial;
+      --layout-padding-y-sm: var(--layout-padding-y-base, initial);
+      --layout-padding-y-md: var(--layout-padding-y-sm, initial);
+      --layout-padding-y-lg: var(--layout-padding-y-md, initial);
+      --layout-padding-y-xl: var(--layout-padding-y-lg, initial);
+      --layout-padding-top-base: initial;
+      --layout-padding-top-sm: var(--layout-padding-top-base, initial);
+      --layout-padding-top-md: var(--layout-padding-top-sm, initial);
+      --layout-padding-top-lg: var(--layout-padding-top-md, initial);
+      --layout-padding-top-xl: var(--layout-padding-top-lg, initial);
+      --layout-padding-right-base: initial;
+      --layout-padding-right-sm: var(--layout-padding-right-base, initial);
+      --layout-padding-right-md: var(--layout-padding-right-sm, initial);
+      --layout-padding-right-lg: var(--layout-padding-right-md, initial);
+      --layout-padding-right-xl: var(--layout-padding-right-lg, initial);
+      --layout-padding-bottom-base: initial;
+      --layout-padding-bottom-sm: var(--layout-padding-bottom-base, initial);
+      --layout-padding-bottom-md: var(--layout-padding-bottom-sm, initial);
+      --layout-padding-bottom-lg: var(--layout-padding-bottom-md, initial);
+      --layout-padding-bottom-xl: var(--layout-padding-bottom-lg, initial);
+      --layout-padding-left-base: initial;
+      --layout-padding-left-sm: var(--layout-padding-left-base, initial);
+      --layout-padding-left-md: var(--layout-padding-left-sm, initial);
+      --layout-padding-left-lg: var(--layout-padding-left-md, initial);
+      --layout-padding-left-xl: var(--layout-padding-left-lg, initial);
+      --layout-margin-base: initial;
+      --layout-margin-sm: var(--layout-margin-base, initial);
+      --layout-margin-md: var(--layout-margin-sm, initial);
+      --layout-margin-lg: var(--layout-margin-md, initial);
+      --layout-margin-xl: var(--layout-margin-lg, initial);
+      --layout-margin-x-base: initial;
+      --layout-margin-x-sm: var(--layout-margin-x-base, initial);
+      --layout-margin-x-md: var(--layout-margin-x-sm, initial);
+      --layout-margin-x-lg: var(--layout-margin-x-md, initial);
+      --layout-margin-x-xl: var(--layout-margin-x-lg, initial);
+      --layout-margin-y-base: initial;
+      --layout-margin-y-sm: var(--layout-margin-y-base, initial);
+      --layout-margin-y-md: var(--layout-margin-y-sm, initial);
+      --layout-margin-y-lg: var(--layout-margin-y-md, initial);
+      --layout-margin-y-xl: var(--layout-margin-y-lg, initial);
+      --layout-margin-top-base: initial;
+      --layout-margin-top-sm: var(--layout-margin-top-base, initial);
+      --layout-margin-top-md: var(--layout-margin-top-sm, initial);
+      --layout-margin-top-lg: var(--layout-margin-top-md, initial);
+      --layout-margin-top-xl: var(--layout-margin-top-lg, initial);
+      --layout-margin-right-base: initial;
+      --layout-margin-right-sm: var(--layout-margin-right-base, initial);
+      --layout-margin-right-md: var(--layout-margin-right-sm, initial);
+      --layout-margin-right-lg: var(--layout-margin-right-md, initial);
+      --layout-margin-right-xl: var(--layout-margin-right-lg, initial);
+      --layout-margin-bottom-base: initial;
+      --layout-margin-bottom-sm: var(--layout-margin-bottom-base, initial);
+      --layout-margin-bottom-md: var(--layout-margin-bottom-sm, initial);
+      --layout-margin-bottom-lg: var(--layout-margin-bottom-md, initial);
+      --layout-margin-bottom-xl: var(--layout-margin-bottom-lg, initial);
+      --layout-margin-left-base: initial;
+      --layout-margin-left-sm: var(--layout-margin-left-base, initial);
+      --layout-margin-left-md: var(--layout-margin-left-sm, initial);
+      --layout-margin-left-lg: var(--layout-margin-left-md, initial);
+      --layout-margin-left-xl: var(--layout-margin-left-lg, initial);
+      --layout-grid-template-columns-base: initial;
+      --layout-grid-template-columns-sm: var(--layout-grid-template-columns-base, initial);
+      --layout-grid-template-columns-md: var(--layout-grid-template-columns-sm, initial);
+      --layout-grid-template-columns-lg: var(--layout-grid-template-columns-md, initial);
+      --layout-grid-template-columns-xl: var(--layout-grid-template-columns-lg, initial);
+      --layout-grid-template-rows-base: initial;
+      --layout-grid-template-rows-sm: var(--layout-grid-template-rows-base, initial);
+      --layout-grid-template-rows-md: var(--layout-grid-template-rows-sm, initial);
+      --layout-grid-template-rows-lg: var(--layout-grid-template-rows-md, initial);
+      --layout-grid-template-rows-xl: var(--layout-grid-template-rows-lg, initial);
+      --layout-grid-auto-flow-base: initial;
+      --layout-grid-auto-flow-sm: var(--layout-grid-auto-flow-base, initial);
+      --layout-grid-auto-flow-md: var(--layout-grid-auto-flow-sm, initial);
+      --layout-grid-auto-flow-lg: var(--layout-grid-auto-flow-md, initial);
+      --layout-grid-auto-flow-xl: var(--layout-grid-auto-flow-lg, initial);
+      --layout-grid-auto-columns-base: initial;
+      --layout-grid-auto-columns-sm: var(--layout-grid-auto-columns-base, initial);
+      --layout-grid-auto-columns-md: var(--layout-grid-auto-columns-sm, initial);
+      --layout-grid-auto-columns-lg: var(--layout-grid-auto-columns-md, initial);
+      --layout-grid-auto-columns-xl: var(--layout-grid-auto-columns-lg, initial);
+      --layout-grid-auto-rows-base: initial;
+      --layout-grid-auto-rows-sm: var(--layout-grid-auto-rows-base, initial);
+      --layout-grid-auto-rows-md: var(--layout-grid-auto-rows-sm, initial);
+      --layout-grid-auto-rows-lg: var(--layout-grid-auto-rows-md, initial);
+      --layout-grid-auto-rows-xl: var(--layout-grid-auto-rows-lg, initial);
+      --layout-color: var(--layout-color-base, initial);
+      --layout-display: var(--layout-display-base, initial);
+      --layout-flex-direction: var(--layout-flex-direction-base, initial);
+      --layout-gap: var(--layout-gap-base, initial);
+      --layout-row-gap: var(--layout-row-gap-base, initial);
+      --layout-column-gap: var(--layout-column-gap-base, initial);
+      --layout-align-items: var(--layout-align-items-base, initial);
+      --layout-justify-content: var(--layout-justify-content-base, initial);
+      --layout-justify-items: var(--layout-justify-items-base, initial);
+      --layout-flex-wrap: var(--layout-flex-wrap-base, initial);
+      --layout-flex-grow: var(--layout-flex-grow-base, initial);
+      --layout-flex-shrink: var(--layout-flex-shrink-base, initial);
+      --layout-width: var(--layout-width-base, initial);
+      --layout-min-width: var(--layout-min-width-base, initial);
+      --layout-max-width: var(--layout-max-width-base, initial);
+      --layout-height: var(--layout-height-base, initial);
+      --layout-min-height: var(--layout-min-height-base, initial);
+      --layout-max-height: var(--layout-max-height-base, initial);
+      --layout-padding: var(--layout-padding-base, initial);
+      --layout-padding-x: var(--layout-padding-x-base, initial);
+      --layout-padding-y: var(--layout-padding-y-base, initial);
+      --layout-padding-top: var(--layout-padding-top-base, initial);
+      --layout-padding-right: var(--layout-padding-right-base, initial);
+      --layout-padding-bottom: var(--layout-padding-bottom-base, initial);
+      --layout-padding-left: var(--layout-padding-left-base, initial);
+      --layout-margin: var(--layout-margin-base, initial);
+      --layout-margin-x: var(--layout-margin-x-base, initial);
+      --layout-margin-y: var(--layout-margin-y-base, initial);
+      --layout-margin-top: var(--layout-margin-top-base, initial);
+      --layout-margin-right: var(--layout-margin-right-base, initial);
+      --layout-margin-bottom: var(--layout-margin-bottom-base, initial);
+      --layout-margin-left: var(--layout-margin-left-base, initial);
+      --layout-grid-template-columns: var(--layout-grid-template-columns-base, initial);
+      --layout-grid-template-rows: var(--layout-grid-template-rows-base, initial);
+      --layout-grid-auto-flow: var(--layout-grid-auto-flow-base, initial);
+      --layout-grid-auto-columns: var(--layout-grid-auto-columns-base, initial);
+      --layout-grid-auto-rows: var(--layout-grid-auto-rows-base, initial);
+      gap: var(--layout-gap);
+      color: var(--layout-color);
+      display: var(--layout-display);
+      flex-direction: var(--layout-flex-direction);
+      row-gap: var(--layout-row-gap, var(--layout-gap));
+      column-gap: var(--layout-column-gap, var(--layout-gap));
+      align-items: var(--layout-align-items);
+      justify-content: var(--layout-justify-content);
+      justify-items: var(--layout-justify-items);
+      flex-wrap: var(--layout-flex-wrap);
+      flex-grow: var(--layout-flex-grow);
+      flex-shrink: var(--layout-flex-shrink);
+      grid-template-columns: var(--layout-grid-template-columns);
+      grid-template-rows: var(--layout-grid-template-rows);
+      grid-auto-flow: var(--layout-grid-auto-flow);
+      grid-auto-columns: var(--layout-grid-auto-columns);
+      grid-auto-rows: var(--layout-grid-auto-rows);
+      width: var(--layout-width);
+      min-width: var(--layout-min-width);
+      max-width: var(--layout-max-width);
+      height: var(--layout-height);
+      min-height: var(--layout-min-height);
+      max-height: var(--layout-max-height);
+      padding-top: var(--layout-padding-top, var(--layout-padding-y, var(--layout-padding)));
+      padding-right: var(--layout-padding-right, var(--layout-padding-x, var(--layout-padding)));
+      padding-bottom: var(--layout-padding-bottom, var(--layout-padding-y, var(--layout-padding)));
+      padding-left: var(--layout-padding-left, var(--layout-padding-x, var(--layout-padding)));
+      margin-top: var(--layout-margin-top, var(--layout-margin-y, var(--layout-margin)));
+      margin-right: var(--layout-margin-right, var(--layout-margin-x, var(--layout-margin)));
+      margin-bottom: var(--layout-margin-bottom, var(--layout-margin-y, var(--layout-margin)));
+      margin-left: var(--layout-margin-left, var(--layout-margin-x, var(--layout-margin)));
+}
+
+    @container style(--breakpoint-active: lg) {
+      .layout {
+        --layout-color: var(--layout-color-lg, initial);
+        --layout-display: var(--layout-display-lg, initial);
+        --layout-flex-direction: var(--layout-flex-direction-lg, initial);
+        --layout-gap: var(--layout-gap-lg, initial);
+        --layout-row-gap: var(--layout-row-gap-lg, initial);
+        --layout-column-gap: var(--layout-column-gap-lg, initial);
+        --layout-align-items: var(--layout-align-items-lg, initial);
+        --layout-justify-content: var(--layout-justify-content-lg, initial);
+        --layout-justify-items: var(--layout-justify-items-lg, initial);
+        --layout-flex-wrap: var(--layout-flex-wrap-lg, initial);
+        --layout-flex-grow: var(--layout-flex-grow-lg, initial);
+        --layout-flex-shrink: var(--layout-flex-shrink-lg, initial);
+        --layout-width: var(--layout-width-lg, initial);
+        --layout-min-width: var(--layout-min-width-lg, initial);
+        --layout-max-width: var(--layout-max-width-lg, initial);
+        --layout-height: var(--layout-height-lg, initial);
+        --layout-min-height: var(--layout-min-height-lg, initial);
+        --layout-max-height: var(--layout-max-height-lg, initial);
+        --layout-padding: var(--layout-padding-lg, initial);
+        --layout-padding-x: var(--layout-padding-x-lg, initial);
+        --layout-padding-y: var(--layout-padding-y-lg, initial);
+        --layout-padding-top: var(--layout-padding-top-lg, initial);
+        --layout-padding-right: var(--layout-padding-right-lg, initial);
+        --layout-padding-bottom: var(--layout-padding-bottom-lg, initial);
+        --layout-padding-left: var(--layout-padding-left-lg, initial);
+        --layout-margin: var(--layout-margin-lg, initial);
+        --layout-margin-x: var(--layout-margin-x-lg, initial);
+        --layout-margin-y: var(--layout-margin-y-lg, initial);
+        --layout-margin-top: var(--layout-margin-top-lg, initial);
+        --layout-margin-right: var(--layout-margin-right-lg, initial);
+        --layout-margin-bottom: var(--layout-margin-bottom-lg, initial);
+        --layout-margin-left: var(--layout-margin-left-lg, initial);
+        --layout-grid-template-columns: var(--layout-grid-template-columns-lg, initial);
+        --layout-grid-template-rows: var(--layout-grid-template-rows-lg, initial);
+        --layout-grid-auto-flow: var(--layout-grid-auto-flow-lg, initial);
+        --layout-grid-auto-columns: var(--layout-grid-auto-columns-lg, initial);
+        --layout-grid-auto-rows: var(--layout-grid-auto-rows-lg, initial);
+}
+}
+
+    @container style(--breakpoint-active: md) {
+      .layout {
+        --layout-color: var(--layout-color-md, initial);
+        --layout-display: var(--layout-display-md, initial);
+        --layout-flex-direction: var(--layout-flex-direction-md, initial);
+        --layout-gap: var(--layout-gap-md, initial);
+        --layout-row-gap: var(--layout-row-gap-md, initial);
+        --layout-column-gap: var(--layout-column-gap-md, initial);
+        --layout-align-items: var(--layout-align-items-md, initial);
+        --layout-justify-content: var(--layout-justify-content-md, initial);
+        --layout-justify-items: var(--layout-justify-items-md, initial);
+        --layout-flex-wrap: var(--layout-flex-wrap-md, initial);
+        --layout-flex-grow: var(--layout-flex-grow-md, initial);
+        --layout-flex-shrink: var(--layout-flex-shrink-md, initial);
+        --layout-width: var(--layout-width-md, initial);
+        --layout-min-width: var(--layout-min-width-md, initial);
+        --layout-max-width: var(--layout-max-width-md, initial);
+        --layout-height: var(--layout-height-md, initial);
+        --layout-min-height: var(--layout-min-height-md, initial);
+        --layout-max-height: var(--layout-max-height-md, initial);
+        --layout-padding: var(--layout-padding-md, initial);
+        --layout-padding-x: var(--layout-padding-x-md, initial);
+        --layout-padding-y: var(--layout-padding-y-md, initial);
+        --layout-padding-top: var(--layout-padding-top-md, initial);
+        --layout-padding-right: var(--layout-padding-right-md, initial);
+        --layout-padding-bottom: var(--layout-padding-bottom-md, initial);
+        --layout-padding-left: var(--layout-padding-left-md, initial);
+        --layout-margin: var(--layout-margin-md, initial);
+        --layout-margin-x: var(--layout-margin-x-md, initial);
+        --layout-margin-y: var(--layout-margin-y-md, initial);
+        --layout-margin-top: var(--layout-margin-top-md, initial);
+        --layout-margin-right: var(--layout-margin-right-md, initial);
+        --layout-margin-bottom: var(--layout-margin-bottom-md, initial);
+        --layout-margin-left: var(--layout-margin-left-md, initial);
+        --layout-grid-template-columns: var(--layout-grid-template-columns-md, initial);
+        --layout-grid-template-rows: var(--layout-grid-template-rows-md, initial);
+        --layout-grid-auto-flow: var(--layout-grid-auto-flow-md, initial);
+        --layout-grid-auto-columns: var(--layout-grid-auto-columns-md, initial);
+        --layout-grid-auto-rows: var(--layout-grid-auto-rows-md, initial);
+}
+}
+
+    @container style(--breakpoint-active: sm) {
+      .layout {
+        --layout-color: var(--layout-color-sm, initial);
+        --layout-display: var(--layout-display-sm, initial);
+        --layout-flex-direction: var(--layout-flex-direction-sm, initial);
+        --layout-gap: var(--layout-gap-sm, initial);
+        --layout-row-gap: var(--layout-row-gap-sm, initial);
+        --layout-column-gap: var(--layout-column-gap-sm, initial);
+        --layout-align-items: var(--layout-align-items-sm, initial);
+        --layout-justify-content: var(--layout-justify-content-sm, initial);
+        --layout-justify-items: var(--layout-justify-items-sm, initial);
+        --layout-flex-wrap: var(--layout-flex-wrap-sm, initial);
+        --layout-flex-grow: var(--layout-flex-grow-sm, initial);
+        --layout-flex-shrink: var(--layout-flex-shrink-sm, initial);
+        --layout-width: var(--layout-width-sm, initial);
+        --layout-min-width: var(--layout-min-width-sm, initial);
+        --layout-max-width: var(--layout-max-width-sm, initial);
+        --layout-height: var(--layout-height-sm, initial);
+        --layout-min-height: var(--layout-min-height-sm, initial);
+        --layout-max-height: var(--layout-max-height-sm, initial);
+        --layout-padding: var(--layout-padding-sm, initial);
+        --layout-padding-x: var(--layout-padding-x-sm, initial);
+        --layout-padding-y: var(--layout-padding-y-sm, initial);
+        --layout-padding-top: var(--layout-padding-top-sm, initial);
+        --layout-padding-right: var(--layout-padding-right-sm, initial);
+        --layout-padding-bottom: var(--layout-padding-bottom-sm, initial);
+        --layout-padding-left: var(--layout-padding-left-sm, initial);
+        --layout-margin: var(--layout-margin-sm, initial);
+        --layout-margin-x: var(--layout-margin-x-sm, initial);
+        --layout-margin-y: var(--layout-margin-y-sm, initial);
+        --layout-margin-top: var(--layout-margin-top-sm, initial);
+        --layout-margin-right: var(--layout-margin-right-sm, initial);
+        --layout-margin-bottom: var(--layout-margin-bottom-sm, initial);
+        --layout-margin-left: var(--layout-margin-left-sm, initial);
+        --layout-grid-template-columns: var(--layout-grid-template-columns-sm, initial);
+        --layout-grid-template-rows: var(--layout-grid-template-rows-sm, initial);
+        --layout-grid-auto-flow: var(--layout-grid-auto-flow-sm, initial);
+        --layout-grid-auto-columns: var(--layout-grid-auto-columns-sm, initial);
+        --layout-grid-auto-rows: var(--layout-grid-auto-rows-sm, initial);
+}
+}
+
+    @container style(--breakpoint-active: xl) {
+      .layout {
+        --layout-color: var(--layout-color-xl, initial);
+        --layout-display: var(--layout-display-xl, initial);
+        --layout-flex-direction: var(--layout-flex-direction-xl, initial);
+        --layout-gap: var(--layout-gap-xl, initial);
+        --layout-row-gap: var(--layout-row-gap-xl, initial);
+        --layout-column-gap: var(--layout-column-gap-xl, initial);
+        --layout-align-items: var(--layout-align-items-xl, initial);
+        --layout-justify-content: var(--layout-justify-content-xl, initial);
+        --layout-justify-items: var(--layout-justify-items-xl, initial);
+        --layout-flex-wrap: var(--layout-flex-wrap-xl, initial);
+        --layout-flex-grow: var(--layout-flex-grow-xl, initial);
+        --layout-flex-shrink: var(--layout-flex-shrink-xl, initial);
+        --layout-width: var(--layout-width-xl, initial);
+        --layout-min-width: var(--layout-min-width-xl, initial);
+        --layout-max-width: var(--layout-max-width-xl, initial);
+        --layout-height: var(--layout-height-xl, initial);
+        --layout-min-height: var(--layout-min-height-xl, initial);
+        --layout-max-height: var(--layout-max-height-xl, initial);
+        --layout-padding: var(--layout-padding-xl, initial);
+        --layout-padding-x: var(--layout-padding-x-xl, initial);
+        --layout-padding-y: var(--layout-padding-y-xl, initial);
+        --layout-padding-top: var(--layout-padding-top-xl, initial);
+        --layout-padding-right: var(--layout-padding-right-xl, initial);
+        --layout-padding-bottom: var(--layout-padding-bottom-xl, initial);
+        --layout-padding-left: var(--layout-padding-left-xl, initial);
+        --layout-margin: var(--layout-margin-xl, initial);
+        --layout-margin-x: var(--layout-margin-x-xl, initial);
+        --layout-margin-y: var(--layout-margin-y-xl, initial);
+        --layout-margin-top: var(--layout-margin-top-xl, initial);
+        --layout-margin-right: var(--layout-margin-right-xl, initial);
+        --layout-margin-bottom: var(--layout-margin-bottom-xl, initial);
+        --layout-margin-left: var(--layout-margin-left-xl, initial);
+        --layout-grid-template-columns: var(--layout-grid-template-columns-xl, initial);
+        --layout-grid-template-rows: var(--layout-grid-template-rows-xl, initial);
+        --layout-grid-auto-flow: var(--layout-grid-auto-flow-xl, initial);
+        --layout-grid-auto-columns: var(--layout-grid-auto-columns-xl, initial);
+        --layout-grid-auto-rows: var(--layout-grid-auto-rows-xl, initial);
+}
+}
+    }
+}

package/dist/recipes/select-recipe.css

@@ -0,0 +1,175 @@
+@layer recipes.slots {
+  @layer _base {
+    .select__trigger {
+      background: var(--colors-bg-layer);
+      padding-inline: var(--spacing-2);
+      border-radius: var(--radii-r1_5);
+      border-width: 1px;
+      border-color: var(--colors-stroke-neutral-weak);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: var(--font-sizes-t4);
+      line-height: var(--line-heights-t4);
+      font-weight: var(--font-weights-bold);
+      cursor: pointer;
+      height: 2.5rem;
+      width: 100%;
+}
+
+    .select__trigger::placeholder,.select__trigger[data-placeholder] {
+      color: var(--colors-fg-placeholder);
+}
+
+    .select__trigger:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      cursor: not-allowed;
+      opacity: 0.5;
+}
+
+    .select__trigger:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--colors-stroke-focus-ring);
+      outline-offset: var(--spacing-0\.5);
+}
+
+    .select__viewport:is([data-position=popper]) {
+      height: var(--radix-select-trigger-height);
+      width: 100%;
+      min-width: var(--radix-select-trigger-width);
+}
+
+    .select__content {
+      background: var(--colors-bg-layer-floating);
+      overflow: hidden;
+      border-radius: var(--radii-r1_5);
+      border-width: 1px;
+      border-color: var(--colors-stroke-neutral-weak);
+      padding-block: var(--spacing-1);
+      position: relative;
+      z-index: 100;
+      box-shadow: var(--shadows-s2);
+      color: var(--colors-fg-neutral);
+      transform-origin: var(--radix-select-content-transform-origin);
+      min-width: 100%;
+      max-height: 24rem;
+}
+
+    .select__content:is([data-state=open]) {
+      animation-name: selectContentShow;
+      animation-duration: var(--durations-d5);
+      animation-timing-function: var(--easings-enter);
+}
+
+    .select__content:is([data-state=closed]) {
+      animation-name: selectContentHide;
+      animation-duration: var(--durations-d3);
+      animation-timing-function: var(--easings-exit);
+}
+
+    .select__content:is([data-position=popper]):is([data-side=top]) {
+      --translate-y: calc(var(--spacing-1) * -1);
+}
+
+    .select__content:is([data-position=popper]):is([data-side=bottom]) {
+      --translate-y: var(--spacing-1);
+}
+
+    .select__content:is([data-position=popper]):is([data-side=left]) {
+      --translate-x: calc(var(--spacing-1) * -1);
+}
+
+    .select__content:is([data-position=popper]):is([data-side=right]) {
+      --translate-x: var(--spacing-1);
+}
+
+    .select__scrollUpButton {
+      position: absolute;
+      z-index: 1;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 1.5rem;
+}
+
+    .select__scrollUpButton::before {
+      inset: 0;
+      background: linear-gradient(to bottom,var(--colors-bg-layer-floating),transparent);
+      content: "";
+      position: absolute;
+      pointer-events: none;
+}
+
+    .select__scrollDownButton {
+      position: absolute;
+      z-index: 1;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      height: 1.5rem;
+}
+
+    .select__scrollDownButton::before {
+      inset: 0;
+      background: linear-gradient(to bottom,transparent,var(--colors-bg-layer-floating));
+      content: "";
+      position: absolute;
+      pointer-events: none;
+}
+
+    .select__label {
+      font-weight: var(--font-weights-bold);
+}
+
+    .select__label,.select__item {
+      padding-block: var(--spacing-1\.5);
+      font-size: var(--font-sizes-t4);
+      line-height: var(--line-heights-t4);
+      padding-left: var(--spacing-8);
+      padding-right: var(--spacing-2);
+}
+
+    .select__item {
+      border-radius: var(--radii-r1);
+      position: relative;
+      display: flex;
+      align-items: center;
+      font-weight: var(--font-weights-regular);
+}
+
+    .select__item[data-highlighted] {
+      background-color: var(--colors-bg-layer-floating-pressed);
+}
+
+    .select__item[data-disabled] {
+      pointer-events: none;
+      opacity: 0.5;
+}
+
+    .select__item:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--colors-stroke-focus-ring);
+      outline-offset: calc(var(--spacing-0\.5) * -1);
+}
+
+    .select__item:is(:hover, [data-hover]) {
+      background-color: var(--colors-bg-layer-floating-pressed);
+}
+
+    .select__itemIndicator {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      left: var(--spacing-2);
+      height: 0.875rem;
+      width: 0.875rem;
+}
+
+    .select__separator {
+      background: var(--colors-stroke-neutral-subtle);
+      margin-inline: calc(var(--spacing-1) * -1);
+      margin-block: var(--spacing-1);
+      height: 0.25rem;
+}
+    }
+}

package/dist/recipes/slider-recipe.css

@@ -0,0 +1,60 @@
+@layer recipes.slots {
+  @layer _base {
+    .slider__root {
+      position: relative;
+      display: flex;
+      touch-action: none;
+      -webkit-user-select: none;
+      user-select: none;
+      align-items: center;
+}
+
+    .slider__track {
+      background: var(--colors-bg-neutral-weak);
+      overflow: hidden;
+      border-radius: var(--radii-full);
+      position: relative;
+      flex-grow: 1;
+      height: 0.375rem;
+      width: 100%;
+}
+
+    .slider__track:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      background: var(--colors-bg-disabled);
+}
+
+    .slider__range {
+      background: var(--colors-bg-brand-solid);
+      position: absolute;
+      height: 100%;
+}
+
+    .slider__range:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      background: var(--colors-bg-disabled);
+}
+
+    .slider__thumb {
+      background: var(--colors-palette-static-white);
+      border-radius: var(--radii-full);
+      border-width: 1px;
+      border-style: solid;
+      border-color: var(--colors-stroke-neutral-weak);
+      display: block;
+      cursor: pointer;
+      box-shadow: var(--shadows-s1);
+      height: 1rem;
+      width: 1rem;
+}
+
+    .slider__thumb:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      background: var(--colors-bg-disabled);
+      pointer-events: none;
+}
+
+    .slider__thumb:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--colors-stroke-focus-ring);
+      outline-offset: var(--spacing-0\.5);
+}
+    }
+}