yattho_view_components 0.0.1

data/app/components/yattho/alpha/layout.css

@@ -0,0 +1,398 @@
+/* Layout */
+
+.Layout {
+  display: grid;
+
+  --Layout-sidebar-width: 220px;
+  --Layout-gutter: 16px;
+}
+
+@media (max-width: calc(544px - 0.02px)) {
+
+.Layout {
+    grid-template-columns: 1fr !important;
+}
+
+.Layout {
+    grid-auto-flow: row;
+}
+    .Layout .Layout-sidebar,
+  .Layout .Layout-divider,
+  .Layout .Layout-main {
+    width: 100% !important;
+    grid-column: 1 !important;
+  }
+    .Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar {
+      grid-row: 1;
+    }
+
+    .Layout.Layout--sidebarPosition-flowRow-start .Layout-main {
+      grid-row: 2 / span 2;
+    }
+    .Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
+      grid-row: 2 / span 2;
+    }
+
+    .Layout.Layout--sidebarPosition-flowRow-end .Layout-main {
+      grid-row: 1;
+    }
+    .Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar {
+      display: none;
+    }
+    .Layout.Layout--divided {
+    --Layout-gutter: 0;
+  }
+    .Layout.Layout--divided .Layout-divider {
+    height: 1px;
+    grid-row: 2;
+  }
+
+    .Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden {
+      display: none;
+    }
+
+    .Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow {
+      height: 8px;
+      margin-right: 0;
+      background: var(--color-canvas-inset);
+      border-color: var(--color-border-default);
+      border-style: solid;
+      border-width: var(--yattho-borderWidth-thin, 1px) 0;
+    }
+
+    .Layout.Layout--divided .Layout-main {
+      grid-row: 3 / span 1;
+    }
+      .Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
+        grid-row: 3 / span 1;
+      }
+
+      .Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main {
+        grid-row: 1;
+      }
+  }
+
+@media (max-width: calc(768px - 0.02px)) {
+
+.Layout.Layout--flowRow-until-md {
+      grid-template-columns: 1fr !important;
+  }
+
+.Layout.Layout--flowRow-until-md {
+      grid-auto-flow: row;
+  }
+      .Layout.Layout--flowRow-until-md .Layout-sidebar,
+  .Layout.Layout--flowRow-until-md .Layout-divider,
+  .Layout.Layout--flowRow-until-md .Layout-main {
+    width: 100% !important;
+    grid-column: 1 !important;
+  }
+    .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar {
+      grid-row: 1;
+    }
+
+    .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main {
+      grid-row: 2 / span 2;
+    }
+    .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
+      grid-row: 2 / span 2;
+    }
+
+    .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main {
+      grid-row: 1;
+    }
+    .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar {
+      display: none;
+    }
+      .Layout.Layout--flowRow-until-md.Layout--divided {
+    --Layout-gutter: 0;
+  }
+    .Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider {
+    height: 1px;
+    grid-row: 2;
+  }
+
+    .Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden {
+      display: none;
+    }
+
+    .Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow {
+      height: 8px;
+      margin-right: 0;
+      background: var(--color-canvas-inset);
+      border-color: var(--color-border-default);
+      border-style: solid;
+      border-width: var(--yattho-borderWidth-thin, 1px) 0;
+    }
+
+    .Layout.Layout--flowRow-until-md.Layout--divided .Layout-main {
+      grid-row: 3 / span 1;
+    }
+      .Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
+        grid-row: 3 / span 1;
+      }
+
+      .Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main {
+        grid-row: 1;
+      }
+    }
+
+@media (max-width: calc(1012px - 0.02px)) {
+
+.Layout.Layout--flowRow-until-lg {
+      grid-template-columns: 1fr !important;
+  }
+
+.Layout.Layout--flowRow-until-lg {
+      grid-auto-flow: row;
+  }
+      .Layout.Layout--flowRow-until-lg .Layout-sidebar,
+  .Layout.Layout--flowRow-until-lg .Layout-divider,
+  .Layout.Layout--flowRow-until-lg .Layout-main {
+    width: 100% !important;
+    grid-column: 1 !important;
+  }
+    .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar {
+      grid-row: 1;
+    }
+
+    .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main {
+      grid-row: 2 / span 2;
+    }
+    .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
+      grid-row: 2 / span 2;
+    }
+
+    .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main {
+      grid-row: 1;
+    }
+    .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar {
+      display: none;
+    }
+      .Layout.Layout--flowRow-until-lg.Layout--divided {
+    --Layout-gutter: 0;
+  }
+    .Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider {
+    height: 1px;
+    grid-row: 2;
+  }
+
+    .Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden {
+      display: none;
+    }
+
+    .Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow {
+      height: 8px;
+      margin-right: 0;
+      background: var(--color-canvas-inset);
+      border-color: var(--color-border-default);
+      border-style: solid;
+      border-width: var(--yattho-borderWidth-thin, 1px) 0;
+    }
+
+    .Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main {
+      grid-row: 3 / span 1;
+    }
+      .Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
+        grid-row: 3 / span 1;
+      }
+
+      .Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main {
+        grid-row: 1;
+      }
+    }
+
+.Layout {
+
+  /* Flow as column */
+
+  grid-auto-flow: column;
+  grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */
+  grid-gap: var(--Layout-gutter);
+}
+
+.Layout .Layout-sidebar {
+    grid-column: 1;
+  }
+
+.Layout .Layout-divider {
+    display: none;
+  }
+
+.Layout .Layout-main {
+    grid-column: 2 / span 2;
+  }
+
+/* Gutter spacing */
+
+@media (min-width: 1012px) {
+
+.Layout {
+    --Layout-gutter: 24px;
+}
+  }
+
+.Layout.Layout--gutter-none {
+    /* stylelint-disable-next-line length-zero-no-unit */
+    --Layout-gutter: 0px; /* Neds px in value */
+  }
+
+.Layout.Layout--gutter-condensed {
+    --Layout-gutter: 16px;
+  }
+
+@media (min-width: 1012px) {
+
+.Layout.Layout--gutter-spacious {
+      --Layout-gutter: 32px;
+  }
+    }
+
+@media (min-width: 1280px) {
+
+.Layout.Layout--gutter-spacious {
+      --Layout-gutter: 40px;
+  }
+    }
+
+/* Sidebar width */
+
+@media (min-width: 544px) {
+
+.Layout {
+    --Layout-sidebar-width: 220px;
+}
+  }
+
+@media (min-width: 768px) {
+
+.Layout {
+    --Layout-sidebar-width: 256px;
+}
+  }
+
+@media (min-width: 1012px) {
+
+.Layout {
+    --Layout-sidebar-width: 296px;
+}
+  }
+
+@media (min-width: 768px) {
+
+.Layout.Layout--sidebar-narrow {
+      --Layout-sidebar-width: 240px;
+  }
+    }
+
+@media (min-width: 1012px) {
+
+.Layout.Layout--sidebar-narrow {
+      --Layout-sidebar-width: 256px;
+  }
+    }
+
+@media (min-width: 1012px) {
+
+.Layout.Layout--sidebar-wide {
+      --Layout-sidebar-width: 320px;
+  }
+    }
+
+@media (min-width: 1280px) {
+
+.Layout.Layout--sidebar-wide {
+      --Layout-sidebar-width: 336px;
+  }
+    }
+
+/* Sidebar position */
+
+.Layout.Layout--sidebarPosition-start .Layout-sidebar {
+      grid-column: 1;
+    }
+
+.Layout.Layout--sidebarPosition-start .Layout-main {
+      grid-column: 2 / span 2;
+    }
+
+.Layout.Layout--sidebarPosition-end {
+    grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;
+  }
+
+.Layout.Layout--sidebarPosition-end .Layout-main {
+      grid-column: 1;
+    }
+
+.Layout.Layout--sidebarPosition-end .Layout-sidebar {
+      grid-column: 2 / span 2;
+    }
+
+/* Sidebar divider */
+
+.Layout.Layout--divided .Layout-divider {
+      display: block;
+      grid-column: 2;
+      width: 1px;
+      margin-right: -1px;
+      background: var(--color-border-default);
+    }
+
+.Layout.Layout--divided .Layout-main {
+      grid-column: 3 / span 1;
+    }
+
+.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar {
+        grid-column: 3 / span 1;
+      }
+
+.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main {
+        grid-column: 1;
+      }
+
+.Layout-divider {
+  display: none;
+  width: 1px;
+}
+
+.Layout-sidebar {
+  width: var(--Layout-sidebar-width);
+}
+
+.Layout-main {
+  min-width: 0;
+
+  /* Centered main column
+  ** FIXME: right-aligned sidebar */
+}
+
+.Layout-main .Layout-main-centered-md,
+  .Layout-main .Layout-main-centered-lg,
+  .Layout-main .Layout-main-centered-xl {
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+.Layout-main .Layout-main-centered-md > .container-md,
+    .Layout-main .Layout-main-centered-lg > .container-md,
+    .Layout-main .Layout-main-centered-xl > .container-md,
+    .Layout-main .Layout-main-centered-md > .container-lg,
+    .Layout-main .Layout-main-centered-lg > .container-lg,
+    .Layout-main .Layout-main-centered-xl > .container-lg,
+    .Layout-main .Layout-main-centered-md > .container-xl,
+    .Layout-main .Layout-main-centered-lg > .container-xl,
+    .Layout-main .Layout-main-centered-xl > .container-xl {
+      margin-left: 0;
+    }
+
+.Layout-main .Layout-main-centered-md {
+    max-width: calc(var(--yattho-breakpoint-medium, 768px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }
+
+.Layout-main .Layout-main-centered-lg {
+    max-width: calc(var(--yattho-breakpoint-large, 1012px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }
+
+.Layout-main .Layout-main-centered-xl {
+    max-width: calc(var(--yattho-breakpoint-xlarge, 1280px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }

data/app/components/yattho/alpha/layout.css.json

@@ -0,0 +1 @@
+{"name":"alpha/layout","selectors":[".Layout",".Layout .Layout-sidebar","\n  .Layout .Layout-divider","\n  .Layout .Layout-main",".Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar",".Layout.Layout--sidebarPosition-flowRow-start .Layout-main",".Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar",".Layout.Layout--divided",".Layout.Layout--divided .Layout-divider",".Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",".Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",".Layout.Layout--divided .Layout-main",".Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-md",".Layout.Layout--flowRow-until-md .Layout-sidebar","\n  .Layout.Layout--flowRow-until-md .Layout-divider","\n  .Layout.Layout--flowRow-until-md .Layout-main",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--divided",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-main",".Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-lg",".Layout.Layout--flowRow-until-lg .Layout-sidebar","\n  .Layout.Layout--flowRow-until-lg .Layout-divider","\n  .Layout.Layout--flowRow-until-lg .Layout-main",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--divided",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main",".Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout .Layout-divider",".Layout .Layout-main",".Layout.Layout--gutter-none",".Layout.Layout--gutter-condensed",".Layout.Layout--gutter-spacious",".Layout.Layout--sidebar-narrow",".Layout.Layout--sidebar-wide",".Layout.Layout--sidebarPosition-start .Layout-sidebar",".Layout.Layout--sidebarPosition-start .Layout-main",".Layout.Layout--sidebarPosition-end",".Layout.Layout--sidebarPosition-end .Layout-main",".Layout.Layout--sidebarPosition-end .Layout-sidebar",".Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar",".Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main",".Layout-divider",".Layout-sidebar",".Layout-main",".Layout-main .Layout-main-centered-md","\n  .Layout-main .Layout-main-centered-lg","\n  .Layout-main .Layout-main-centered-xl",".Layout-main .Layout-main-centered-md > .container-md","\n    .Layout-main .Layout-main-centered-lg > .container-md","\n    .Layout-main .Layout-main-centered-xl > .container-md","\n    .Layout-main .Layout-main-centered-md > .container-lg","\n    .Layout-main .Layout-main-centered-lg > .container-lg","\n    .Layout-main .Layout-main-centered-xl > .container-lg","\n    .Layout-main .Layout-main-centered-md > .container-xl","\n    .Layout-main .Layout-main-centered-lg > .container-xl","\n    .Layout-main .Layout-main-centered-xl > .container-xl",".Layout-main .Layout-main-centered-lg",".Layout-main .Layout-main-centered-xl"]}

data/app/components/yattho/alpha/layout.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["layout.pcss"],"names":[],"mappings":"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","file":"layout.css","sourcesContent":["/* Layout */\n\n@define-mixin flow-as-row {\n  grid-auto-flow: row;\n  grid-template-columns: 1fr !important;\n\n  & .Layout-sidebar,\n  & .Layout-divider,\n  & .Layout-main {\n    width: 100% !important;\n    grid-column: 1 !important;\n  }\n\n  &.Layout--sidebarPosition-flowRow-start {\n    & .Layout-sidebar {\n      grid-row: 1;\n    }\n\n    & .Layout-main {\n      grid-row: 2 / span 2;\n    }\n  }\n\n  &.Layout--sidebarPosition-flowRow-end {\n    & .Layout-sidebar {\n      grid-row: 2 / span 2;\n    }\n\n    & .Layout-main {\n      grid-row: 1;\n    }\n  }\n\n  &.Layout--sidebarPosition-flowRow-none {\n    & .Layout-sidebar {\n      display: none;\n    }\n  }\n\n  &.Layout--divided {\n    @mixin flow-as-row-divider;\n\n    & .Layout-main {\n      grid-row: 3 / span 1;\n    }\n\n    &.Layout--sidebarPosition-flowRow-end {\n      & .Layout-sidebar {\n        grid-row: 3 / span 1;\n      }\n\n      & .Layout-main {\n        grid-row: 1;\n      }\n    }\n  }\n}\n\n@define-mixin flow-as-row-divider {\n  --Layout-gutter: 0;\n\n  & .Layout-divider {\n    height: 1px;\n    grid-row: 2;\n\n    &.Layout-divider--flowRow-hidden {\n      display: none;\n    }\n\n    &.Layout-divider--flowRow-shallow {\n      height: 8px;\n      margin-right: 0;\n      background: var(--color-canvas-inset);\n      border-color: var(--color-border-default);\n      border-style: solid;\n      border-width: var(--yattho-borderWidth-thin, 1px) 0;\n    }\n  }\n}\n\n.Layout {\n  display: grid;\n\n  --Layout-sidebar-width: 220px;\n  --Layout-gutter: 16px;\n\n  @media (max-width: calc(544px - 0.02px)) {\n    @mixin flow-as-row;\n  }\n\n  &.Layout--flowRow-until-md {\n    @media (max-width: calc(768px - 0.02px)) {\n      @mixin flow-as-row;\n    }\n  }\n\n  &.Layout--flowRow-until-lg {\n    @media (max-width: calc(1012px - 0.02px)) {\n      @mixin flow-as-row;\n    }\n  }\n\n  /* Flow as column */\n\n  grid-auto-flow: column;\n  grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */\n  grid-gap: var(--Layout-gutter);\n\n  & .Layout-sidebar {\n    grid-column: 1;\n  }\n\n  & .Layout-divider {\n    display: none;\n  }\n\n  & .Layout-main {\n    grid-column: 2 / span 2;\n  }\n\n  /* Gutter spacing */\n\n  @media (min-width: 1012px) {\n    --Layout-gutter: 24px;\n  }\n\n  &.Layout--gutter-none {\n    /* stylelint-disable-next-line length-zero-no-unit */\n    --Layout-gutter: 0px; /* Neds px in value */\n  }\n\n  &.Layout--gutter-condensed {\n    --Layout-gutter: 16px;\n  }\n\n  &.Layout--gutter-spacious {\n    @media (min-width: 1012px) {\n      --Layout-gutter: 32px;\n    }\n\n    @media (min-width: 1280px) {\n      --Layout-gutter: 40px;\n    }\n  }\n\n  /* Sidebar width */\n  @media (min-width: 544px) {\n    --Layout-sidebar-width: 220px;\n  }\n\n  @media (min-width: 768px) {\n    --Layout-sidebar-width: 256px;\n  }\n\n  @media (min-width: 1012px) {\n    --Layout-sidebar-width: 296px;\n  }\n\n  &.Layout--sidebar-narrow {\n    @media (min-width: 768px) {\n      --Layout-sidebar-width: 240px;\n    }\n\n    @media (min-width: 1012px) {\n      --Layout-sidebar-width: 256px;\n    }\n  }\n\n  &.Layout--sidebar-wide {\n    @media (min-width: 1012px) {\n      --Layout-sidebar-width: 320px;\n    }\n\n    @media (min-width: 1280px) {\n      --Layout-sidebar-width: 336px;\n    }\n  }\n\n  /* Sidebar position */\n\n  &.Layout--sidebarPosition-start {\n    & .Layout-sidebar {\n      grid-column: 1;\n    }\n\n    & .Layout-main {\n      grid-column: 2 / span 2;\n    }\n  }\n\n  &.Layout--sidebarPosition-end {\n    grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;\n\n    & .Layout-main {\n      grid-column: 1;\n    }\n\n    & .Layout-sidebar {\n      grid-column: 2 / span 2;\n    }\n  }\n\n  /* Sidebar divider */\n\n  &.Layout--divided {\n    & .Layout-divider {\n      display: block;\n      grid-column: 2;\n      width: 1px;\n      margin-right: -1px;\n      background: var(--color-border-default);\n    }\n\n    & .Layout-main {\n      grid-column: 3 / span 1;\n    }\n\n    &.Layout--sidebarPosition-end {\n      & .Layout-sidebar {\n        grid-column: 3 / span 1;\n      }\n\n      & .Layout-main {\n        grid-column: 1;\n      }\n    }\n  }\n}\n\n.Layout-divider {\n  display: none;\n  width: 1px;\n}\n\n.Layout-sidebar {\n  width: var(--Layout-sidebar-width);\n}\n\n.Layout-main {\n  min-width: 0;\n\n  /* Centered main column\n  ** FIXME: right-aligned sidebar */\n  & .Layout-main-centered-md,\n  & .Layout-main-centered-lg,\n  & .Layout-main-centered-xl {\n    margin-right: auto;\n    margin-left: auto;\n\n    & > .container-md,\n    & > .container-lg,\n    & > .container-xl {\n      margin-left: 0;\n    }\n  }\n\n  & .Layout-main-centered-md {\n    max-width: calc(var(--yattho-breakpoint-medium, 768px) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n\n  & .Layout-main-centered-lg {\n    max-width: calc(var(--yattho-breakpoint-large, 1012px) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n\n  & .Layout-main-centered-xl {\n    max-width: calc(var(--yattho-breakpoint-xlarge, 1280px) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n}"]}

data/app/components/yattho/alpha/layout.html.erb

@@ -0,0 +1,5 @@
+<%= render Yattho::BaseComponent.new(**@system_arguments) do %>
+  <% if @first_in_source == :main %><%= main %><% end %>
+  <%= sidebar %>
+  <% if @first_in_source == :sidebar %><%= main %><% end %>
+<% end %>

data/app/components/yattho/alpha/layout.pcss

@@ -0,0 +1,268 @@
+/* Layout */
+
+@define-mixin flow-as-row {
+  grid-auto-flow: row;
+  grid-template-columns: 1fr !important;
+
+  & .Layout-sidebar,
+  & .Layout-divider,
+  & .Layout-main {
+    width: 100% !important;
+    grid-column: 1 !important;
+  }
+
+  &.Layout--sidebarPosition-flowRow-start {
+    & .Layout-sidebar {
+      grid-row: 1;
+    }
+
+    & .Layout-main {
+      grid-row: 2 / span 2;
+    }
+  }
+
+  &.Layout--sidebarPosition-flowRow-end {
+    & .Layout-sidebar {
+      grid-row: 2 / span 2;
+    }
+
+    & .Layout-main {
+      grid-row: 1;
+    }
+  }
+
+  &.Layout--sidebarPosition-flowRow-none {
+    & .Layout-sidebar {
+      display: none;
+    }
+  }
+
+  &.Layout--divided {
+    @mixin flow-as-row-divider;
+
+    & .Layout-main {
+      grid-row: 3 / span 1;
+    }
+
+    &.Layout--sidebarPosition-flowRow-end {
+      & .Layout-sidebar {
+        grid-row: 3 / span 1;
+      }
+
+      & .Layout-main {
+        grid-row: 1;
+      }
+    }
+  }
+}
+
+@define-mixin flow-as-row-divider {
+  --Layout-gutter: 0;
+
+  & .Layout-divider {
+    height: 1px;
+    grid-row: 2;
+
+    &.Layout-divider--flowRow-hidden {
+      display: none;
+    }
+
+    &.Layout-divider--flowRow-shallow {
+      height: 8px;
+      margin-right: 0;
+      background: var(--color-canvas-inset);
+      border-color: var(--color-border-default);
+      border-style: solid;
+      border-width: var(--yattho-borderWidth-thin, 1px) 0;
+    }
+  }
+}
+
+.Layout {
+  display: grid;
+
+  --Layout-sidebar-width: 220px;
+  --Layout-gutter: 16px;
+
+  @media (max-width: calc(544px - 0.02px)) {
+    @mixin flow-as-row;
+  }
+
+  &.Layout--flowRow-until-md {
+    @media (max-width: calc(768px - 0.02px)) {
+      @mixin flow-as-row;
+    }
+  }
+
+  &.Layout--flowRow-until-lg {
+    @media (max-width: calc(1012px - 0.02px)) {
+      @mixin flow-as-row;
+    }
+  }
+
+  /* Flow as column */
+
+  grid-auto-flow: column;
+  grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */
+  grid-gap: var(--Layout-gutter);
+
+  & .Layout-sidebar {
+    grid-column: 1;
+  }
+
+  & .Layout-divider {
+    display: none;
+  }
+
+  & .Layout-main {
+    grid-column: 2 / span 2;
+  }
+
+  /* Gutter spacing */
+
+  @media (min-width: 1012px) {
+    --Layout-gutter: 24px;
+  }
+
+  &.Layout--gutter-none {
+    /* stylelint-disable-next-line length-zero-no-unit */
+    --Layout-gutter: 0px; /* Neds px in value */
+  }
+
+  &.Layout--gutter-condensed {
+    --Layout-gutter: 16px;
+  }
+
+  &.Layout--gutter-spacious {
+    @media (min-width: 1012px) {
+      --Layout-gutter: 32px;
+    }
+
+    @media (min-width: 1280px) {
+      --Layout-gutter: 40px;
+    }
+  }
+
+  /* Sidebar width */
+  @media (min-width: 544px) {
+    --Layout-sidebar-width: 220px;
+  }
+
+  @media (min-width: 768px) {
+    --Layout-sidebar-width: 256px;
+  }
+
+  @media (min-width: 1012px) {
+    --Layout-sidebar-width: 296px;
+  }
+
+  &.Layout--sidebar-narrow {
+    @media (min-width: 768px) {
+      --Layout-sidebar-width: 240px;
+    }
+
+    @media (min-width: 1012px) {
+      --Layout-sidebar-width: 256px;
+    }
+  }
+
+  &.Layout--sidebar-wide {
+    @media (min-width: 1012px) {
+      --Layout-sidebar-width: 320px;
+    }
+
+    @media (min-width: 1280px) {
+      --Layout-sidebar-width: 336px;
+    }
+  }
+
+  /* Sidebar position */
+
+  &.Layout--sidebarPosition-start {
+    & .Layout-sidebar {
+      grid-column: 1;
+    }
+
+    & .Layout-main {
+      grid-column: 2 / span 2;
+    }
+  }
+
+  &.Layout--sidebarPosition-end {
+    grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;
+
+    & .Layout-main {
+      grid-column: 1;
+    }
+
+    & .Layout-sidebar {
+      grid-column: 2 / span 2;
+    }
+  }
+
+  /* Sidebar divider */
+
+  &.Layout--divided {
+    & .Layout-divider {
+      display: block;
+      grid-column: 2;
+      width: 1px;
+      margin-right: -1px;
+      background: var(--color-border-default);
+    }
+
+    & .Layout-main {
+      grid-column: 3 / span 1;
+    }
+
+    &.Layout--sidebarPosition-end {
+      & .Layout-sidebar {
+        grid-column: 3 / span 1;
+      }
+
+      & .Layout-main {
+        grid-column: 1;
+      }
+    }
+  }
+}
+
+.Layout-divider {
+  display: none;
+  width: 1px;
+}
+
+.Layout-sidebar {
+  width: var(--Layout-sidebar-width);
+}
+
+.Layout-main {
+  min-width: 0;
+
+  /* Centered main column
+  ** FIXME: right-aligned sidebar */
+  & .Layout-main-centered-md,
+  & .Layout-main-centered-lg,
+  & .Layout-main-centered-xl {
+    margin-right: auto;
+    margin-left: auto;
+
+    & > .container-md,
+    & > .container-lg,
+    & > .container-xl {
+      margin-left: 0;
+    }
+  }
+
+  & .Layout-main-centered-md {
+    max-width: calc(var(--yattho-breakpoint-medium, 768px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }
+
+  & .Layout-main-centered-lg {
+    max-width: calc(var(--yattho-breakpoint-large, 1012px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }
+
+  & .Layout-main-centered-xl {
+    max-width: calc(var(--yattho-breakpoint-xlarge, 1280px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }
+}