css-zero 3.0.1 → 4.0.0

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/flash.css

@@ -1,47 +1,66 @@
 .flash {
-  animation: appear-then-fade 4s 300ms both;
-  background-color: var(--flash-background, var(--color-text));
-  border-radius: var(--rounded-full);
-  color: var(--flash-color, var(--color-text-reversed));
-  margin-block-start: var(--flash-position, var(--size-5));
-  margin-inline: auto;
+  animation: flash-in-out 5s both;
+  animation-timing-function: var(--ease-bounce-2);
+  background-color: var(--color-surface);
+  border-radius: var(--rounded-lg);
+  border-width: var(--border);
+  box-shadow: var(--shadow-md);
+  color: var(--color-text);
+  font-size: var(--text-sm);
+  inline-size: var(--size-full);
+  margin: var(--flash-position, var(--size-6)) auto auto;
+  max-inline-size: calc(100% - 2rem);
 
   &:is(:hover, :focus-within) {
     animation-play-state: paused;
   }
-}
-
-.flash__content {
-  align-items: center;
-  column-gap: var(--size-2);
-  display: flex;
-  font-size: var(--text-fluid-base);
-  justify-content: center;
-  line-height: var(--leading-none);
-  min-block-size: var(--size-11);
-  padding: var(--size-1) var(--size-4);
-  text-align: center;
-}
 
-.flash--positive {
-  --flash-color: light-dark(var(--green-400), var(--green-600));
+  @media (width >= 40rem) {
+    max-inline-size: var(--flash-size, var(--max-i-sm));
+  }
 }
 
-.flash--negative {
-  --flash-color: light-dark(var(--red-400), var(--red-600));
+.flash__content {
+  padding: var(--size-4);
 }
 
 .flash--extended {
   animation-duration: 12s;
-  animation-name: appear-then-fade-extended;
+  animation-name: flash-in-out-extended;
 }
 
-@keyframes appear-then-fade {
-  0%, 100% { opacity: 0; }
-  5%, 60%  { opacity: 1; }
+@keyframes flash-in-out {
+  0% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+
+  8%, 92% {
+    opacity: 1;
+    transform: translateY(0);
+    animation-timing-function: ease-out;
+  }
+
+  100% { 
+    opacity: 0;
+    transform: translateY(-100%);
+  }
 }
 
-@keyframes appear-then-fade-extended {
-  0%, 100% { opacity: 0; }
-  2%, 90% { opacity: 1; }
+@keyframes flash-in-out-extended {
+  0% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+
+  3.3%, 96.7% {
+    opacity: 1;
+    transform: translateY(0);
+    animation-timing-function: ease-out;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
 }

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/group.css

@@ -2,6 +2,7 @@
   align-items: stretch;
   display: flex;
   flex-direction: row;
+  inline-size: fit-content;
 
   > :not(:first-child) {
     border-end-start-radius: 0;
@@ -15,6 +16,7 @@
   }
 
   > :focus-visible {
+    position: relative;
     z-index: 1;
   }
 }
@@ -23,6 +25,7 @@
   align-items: stretch;
   display: flex;
   flex-direction: column;
+  inline-size: fit-content;
 
   > :not(:first-child) {
     border-block-start: 0;
@@ -36,6 +39,7 @@
   }
 
   > :focus-visible {
+    position: relative;
     z-index: 1;
   }
 }

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/icons.css

@@ -7,7 +7,7 @@
   mask-image: var(--svg);
   mask-position: center;
   mask-repeat: no-repeat;
-  mask-size: var(--icon-size, 1em);
+  mask-size: var(--icon-size, 1rem);
   pointer-events: none;
   user-select: none;
 }
@@ -35,9 +35,9 @@ img.icon {
 .icon--copy { --svg: url("copy.svg"); }
 .icon--download { --svg: url("download.svg"); }
 .icon--ellipsis { --svg: url("ellipsis.svg"); }
-.icon--menu { --svg: url("menu.svg"); }
 .icon--minus { --svg: url("minus.svg"); }
 .icon--moon { --svg: url("moon.svg"); }
+.icon--panel-left { --svg: url("panel-left.svg"); }
 .icon--search { --svg: url("search.svg"); }
 .icon--share { --svg: url("share.svg"); }
 .icon--sun { --svg: url("sun.svg"); }

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css

@@ -8,7 +8,7 @@
     box-shadow: var(--input-box-shadow, var(--shadow-xs));
     font-size: var(--input-font-size, var(--text-sm));
     inline-size: var(--input-inline-size, var(--size-full));
-    padding: var(--input-padding, .375rem .75rem);
+    padding: var(--input-padding, .25rem .625rem);
   }
 
   &:is([type="checkbox"], [type="radio"]) {

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input_clearable.css

@@ -2,6 +2,6 @@
   display: none;
 }
 
-.input--clearable ::-webkit-search-cancel-button {
+.input--clearable > ::-webkit-search-cancel-button {
   display: none;
 }

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/keyboard.css

@@ -0,0 +1,21 @@
+.kbd {
+  align-items: center;
+  background-color: var(--kbd-background, var(--color-secondary));
+  border-radius: var(--kbd-radius, var(--rounded-md));
+  color: var(--kbd-color, var(--color-text-subtle));
+  display: inline-flex;
+  font-family: inherit;
+  font-size: var(--kbd-font-size, var(--text-xs));
+  font-weight: var(--font-medium);
+  column-gap: var(--size-1);
+  justify-content: center;
+  padding-inline: var(--kbd-padding, var(--size-1));
+  pointer-events: none;
+  user-select: none;
+}
+
+.kbd--tooltip {
+  --kbd-background: rgb(from var(--color-text-reversed) r g b / .2);
+  --kbd-color: var(--color-text-reversed);
+}
+

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/layouts.css

@@ -5,6 +5,12 @@
   grid-template-columns: var(--sidebar-width, 0) 1fr;
   grid-template-rows: auto 1fr;
 
+  &.closed {
+    --sidebar-border-width: 0;
+    --sidebar-padding: 0;
+    --sidebar-width: 0;
+  }
+
   @media (width >= 48rem) {
     --sidebar-border-width: var(--border);
     --sidebar-padding: var(--size-2);
@@ -58,8 +64,8 @@
 #main {
   display: flex;
   flex-direction: column;
-  gap: var(--size-4);
   grid-area: main;
   overflow: auto;
   padding: var(--size-4);
+  row-gap: var(--size-4);
 }

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/lexxy.css

@@ -0,0 +1,46 @@
+@import url("https://esm.sh/@37signals/lexxy@0.9.24/dist/stylesheets/lexxy.css");
+
+:root {
+  --lexxy-color-ink: var(--color-text);
+  --lexxy-color-ink-medium: var(--color-text-subtle);
+  --lexxy-color-ink-light: var(--color-border-dark);
+  --lexxy-color-ink-lighter: var(--color-border);
+  --lexxy-color-ink-lightest: var(--color-border-light);
+  --lexxy-color-ink-inverted: var(--color-text-reversed);
+  --lexxy-color-accent-dark: var(--color-link);
+  --lexxy-color-accent-medium: var(--lexxy-color-accent-dark);
+  --lexxy-color-accent-light: var(--color-border-light);
+  --lexxy-color-accent-lightest: var(--lexxy-color-accent-light);
+  --lexxy-font-base: var(--font-system-ui);
+  --lexxy-font-mono: var(--font-monospace-code);
+}
+
+:where(lexxy-toolbar) {
+  background: var(--lexxy-color-canvas);
+  border-color: var(--lexxy-color-ink-lighter);
+  border-start-end-radius: .35rem;
+  border-start-start-radius: .35rem;
+  font-size: var(--text-base);
+  line-height: var(--leading-none);
+}
+
+.lexxy-editor__content {
+  outline: 0;
+}
+
+.lexxy-editor__toolbar-button::after {
+  box-sizing: content-box;
+}
+
+.lexxy-code-language-picker {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23808080'/%3E%3C/svg%3E");
+}
+
+.lexxy--borderless {
+  lexxy-toolbar { border-radius: 0; }
+  lexxy-editor  { border-block-end: 0; border-inline: 0; border-radius: 0; }
+}
+
+.lexxy--sticky-toolbar {
+  lexxy-toolbar { inset-block-start: 0; position: sticky; z-index: 10; }
+}

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/lightbox.css

@@ -2,8 +2,8 @@
   background-color: rgba(0, 0, 0, .8);
   block-size: 100dvh;
   inline-size: 100dvw;
-  max-block-size: unset;
-  max-inline-size: unset;
+  max-block-size: none;
+  max-inline-size: none;
   padding: var(--size-4);
 
   &[open] {

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/list.css

@@ -7,7 +7,7 @@
 .list-row {
   background-color: var(--item-background, transparent);
   border: 1px solid var(--item-border-color, var(--color-border));
-  border-radius: var(--rounded-lg);
+  border-radius: var(--rounded-xl);
   font-size: var(--text-sm);
   padding: var(--size-4);
 }

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/menu.css

@@ -7,9 +7,10 @@
 }
 
 .menu__header {
-  font-size: var(--text-sm);
+  color: var(--color-text-subtle);
+  font-size: var(--text-xs);
   font-weight: var(--font-medium);
-  padding: var(--size-1_5) var(--size-2);
+  padding: var(--size-1) var(--size-1_5);
 }
 
 .menu__group {
@@ -28,7 +29,8 @@
   --btn-font-weight: var(--font-normal);
   --btn-justify-content: start;
   --btn-outline-size: 0;
-  --btn-padding: var(--size-1_5) var(--size-2);
+  --btn-padding: var(--size-1) var(--size-1_5);
+  --btn-radius: var(--rounded-md);
 
   &:focus-visible {
     --btn-background: var(--color-border-light);

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/pagination.css

@@ -0,0 +1,17 @@
+.pagination {
+  align-items: center;
+  column-gap: var(--size-1);
+  display: flex;
+}
+
+.pagination__button {
+  --btn-background: transparent;
+  --btn-border-color: transparent;
+  --btn-box-shadow: none;
+  --btn-cursor: pointer;
+
+  &[aria-current="page"] {
+    --btn-border-color: var(--color-border);
+  }
+}
+

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/popover.css

@@ -1,19 +1,24 @@
 .popover {
   background-color: var(--color-surface);
-  border-radius: var(--rounded-md);
+  border-radius: var(--rounded-lg);
   border-width: var(--border);
   box-shadow: var(--shadow-md);
   color: var(--color-text);
   inline-size: var(--popover-size, max-content);
 
+  /* Anchor position */
+  position-area: var(--popover-position, block-end);
+  position-try-fallbacks: var(--popover-position-try-fallbacks, flip-block);
+  margin-block: var(--popover-margin-block, .25rem 0);
+
   /* Setup transition */
   transition-behavior: allow-discrete;
-  transition-duration: var(--time-150);
-  transition-property: display, overlay, opacity, transform;
+  transition-duration: var(--time-300);
+  transition-property: display, opacity, overlay, transform;
+  transition-timing-function: var(--ease-spring-2);
 
   /* Exit stage to */
-  opacity: 0;
-  transform: var(--scale-95);
+  opacity: 0; transform: var(--scale-95);
 
   /* On stage */
   &:popover-open {
@@ -26,4 +31,45 @@
       opacity: 0; transform: var(--scale-95);
     }
   }
+
+  @supports (-webkit-hyphens: none) {
+    transition-behavior: normal;
+  }
+}
+
+.popover--unanchored {
+  --popover-position: none;
+  --popover-position-try-fallbacks: none;
+  --popover-margin-block: 0;
+}
+
+.popover--block-end-center {
+  --popover-position: block-end;
+  --popover-margin-block: .25rem 0;
+}
+
+.popover--block-end-start {
+  --popover-position: block-end span-inline-end;
+  --popover-margin-block: .25rem 0;
 }
+
+.popover--block-end-end {
+  --popover-position: block-end span-inline-start;
+  --popover-margin-block: .25rem 0;
+}
+
+.popover--block-start-center {
+  --popover-position: block-start;
+  --popover-margin-block: 0 .25rem;
+}
+
+.popover--block-start-start {
+  --popover-position: block-start span-inline-end;
+  --popover-margin-block: 0 .25rem;
+}
+
+.popover--block-start-end {
+  --popover-position: block-start span-inline-start;
+  --popover-margin-block: 0 .25rem;
+}
+

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css

@@ -1,27 +1,27 @@
 .progress {
-  --progress: var(--color-primary);
-  --track: rgb(from var(--color-primary) r g b / .2);
+  --progress-bar-color: rgb(from var(--color-primary) r g b / .2);
+  --progress-value-color: var(--color-primary);
 
-  background-color: var(--track);
+  background-color: var(--progress-bar-color);
   block-size: var(--size-2);
   border-radius: var(--rounded-full);
   inline-size: var(--size-full);
   overflow: hidden;
 
   &:indeterminate {
-    animation: progress-loading 2s infinite;
-    background: linear-gradient(to right, var(--track) 45%, var(--progress) 0%, var(--progress) 55%, var(--track) 0%);
+    animation: progress-loading 2s linear infinite;
+    background: linear-gradient(to right, var(--progress-bar-color) 45%, var(--progress-value-color) 0%, var(--progress-value-color) 55%, var(--progress-bar-color) 0%);
     background-position: right;
     background-size: 225% 100%;
   }
 
   /*  Safari/Chromium  */
   &::-webkit-progress-bar {
-    background-color: var(--track);
+    background-color: var(--progress-bar-color);
   }
 
   &::-webkit-progress-value {
-    background-color: var(--progress);
+    background-color: var(--progress-value-color);
   }
 
   &:indeterminate::-webkit-progress-bar {
@@ -30,7 +30,7 @@
 
   /* Firefox */
   &::-moz-progress-bar {
-    background-color: var(--progress);
+    background-color: var(--progress-value-color);
   }
 
   &:indeterminate::-moz-progress-bar {

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/separator.css

@@ -1,13 +1,13 @@
 .separator {
-  background-color: var(--color-border-dark);
+  background-color: var(--sep-color, var(--color-border));
   block-size: 1px;
   flex-shrink: 0;
-  inline-size: var(--size-full);
+  inline-size: var(--sep-size, var(--size-full));
 }
 
 .separator-vertical {
-  background-color: var(--color-border-dark);
-  block-size: var(--size-full);
+  background-color: var(--sep-color, var(--color-border));
+  block-size: var(--sep-size, var(--size-full));
   flex-shrink: 0;
   inline-size: 1px;
 }

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css

@@ -5,36 +5,42 @@
   box-shadow: var(--shadow-lg);
   color: var(--color-text);
   inline-size: var(--sheet-size, var(--size-3-4));
-  margin-inline: var(--sheet-margin);
-  max-block-size: unset;
+  margin-inline: var(--sheet-margin-inline);
+  max-block-size: none;
 
   &::backdrop {
-    background-color: rgba(0, 0, 0, .5);
+    backdrop-filter: var(--blur-xs);
   }
 
   /* Setup transition */
   transition-behavior: allow-discrete;
   transition-duration: var(--time-300);
-  transition-property: display, overlay, transform;
+  transition-property: display, overlay, opacity, transform;
+  transition-timing-function: var(--ease-spring-2);
 
   &::backdrop {
     transition-behavior: allow-discrete;
     transition-duration: var(--time-150);
     transition-property: display, overlay, opacity;
+    transition-timing-function: var(--ease-out-3);
   }
 
   /* Exit stage to */
-  & { transform: var(--sheet-transform); }
+  & { opacity: 0; transform: var(--sheet-transform); }
   &::backdrop { opacity: 0; }
 
   /* On stage */
-  &[open] { transform: translateX(0); }
+  &[open] { opacity: 1; transform: translateX(0); }
   &[open]::backdrop { opacity: 1; }
 
   /* Enter stage from */
   @starting-style {
-    &[open] { transform: var(--sheet-transform); }
-    &[open]::backdrop { opacity: 0;}
+    &[open] { opacity: 0; transform: var(--sheet-transform); }
+    &[open]::backdrop { opacity: 0; }
+  }
+
+  @supports (-webkit-hyphens: none) {
+    transition-behavior: normal;
   }
 
   @media (width >= 40rem) {
@@ -44,14 +50,14 @@
 
 .sheet--left {
   --sheet-border: 0 1px;
-  --sheet-margin: 0 auto;
-  --sheet-transform: translateX(-100%);
+  --sheet-margin-inline: 0 auto;
+  --sheet-transform: translateX(-2.5rem);
 }
 
 .sheet--right {
   --sheet-border: 1px 0;
-  --sheet-margin: auto 0;
-  --sheet-transform: translateX(100%);
+  --sheet-margin-inline: auto 0;
+  --sheet-transform: translateX(2.5rem);
 }
 
 .sheet__content {

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/sidebar_menu.css

@@ -33,7 +33,9 @@
       mask-image: url("chevron-right.svg");
       mask-size: cover;
       min-inline-size: var(--size-4);
-      transition: transform var(--time-200);
+      transition-duration: var(--time-300);
+      transition-property: transform;
+      transition-timing-function: var(--ease-spring-2);
     }
 
     details[open] > &::after {

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css

@@ -1,29 +1,39 @@
 .switch {
+  --switch-size: var(--size-4);
+  --switch-block-size: calc(var(--switch-size) + var(--border) * 2);
+  --switch-inline-size: calc(var(--switch-size) * 2);
+
+  align-items: center;
   appearance: none;
   background-color: var(--color-border);
   border-color: transparent;
   border-radius: var(--rounded-full);
-  border-width: var(--border-2);
-  block-size: var(--size-5);
-  inline-size: var(--size-9);
-  transition: background-color var(--time-150);
+  border-width: var(--border);
+  block-size: var(--switch-block-size);
+  display: inline-flex;
+  inline-size: var(--switch-inline-size);
+  transition-duration: var(--time-150);
+  transition-property: background-color;
+  transition-timing-function: var(--ease-out-3);
 
   &:checked {
     background-color: var(--color-primary);
   }
 
   &:checked::before {
-    margin-inline-start: var(--size-4);
+    translate: calc(100% - var(--border) * 2);
   }
 
   &::before {
     aspect-ratio: var(--aspect-square);
     background-color: var(--color-text-reversed);
-    block-size: var(--size-full);
+    block-size: var(--switch-size);
     border-radius: var(--rounded-full);
     content: "";
     display: block;
-    transition: margin var(--time-150);
+    transition-duration: var(--time-300);
+    transition-property: translate;
+    transition-timing-function: var(--ease-spring-2);
   }
 
   &:focus-visible {

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/tabs.css

@@ -5,13 +5,28 @@
 }
 
 .tabs__list {
+  align-self: start;
   background-color: var(--color-border-light);
-  block-size: var(--size-9);
-  border-radius: var(--rounded-md);
+  block-size: var(--size-8);
+  border-radius: var(--rounded-lg);
   color: var(--color-text-subtle);
-  column-gap: var(--size-2);
+  column-gap: var(--size-1);
   display: inline-flex;
   padding: var(--size-1);
+  position: relative;
+
+  &::before {
+    background-color: var(--color-bg);
+    border-radius: var(--rounded-lg);
+    box-shadow: var(--shadow-sm);
+    content: "";
+    inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
+    position: absolute;
+    position-anchor: --tabs-selected;
+    transition-duration: var(--time-300);
+    transition-property: inset;
+    transition-timing-function: var(--ease-spring-2);
+  }
 }
 
 .tabs__button {
@@ -19,11 +34,12 @@
   --btn-border-color: transparent;
   --btn-box-shadow: none;
   --btn-hover-color: transparent;
-  --btn-inline-size: var(--size-full);
 
-  &:is([aria-selected="true"], [aria-current="page"]) {
-    --btn-background: var(--color-bg);
-    --btn-box-shadow: var(--shadow-sm);
-    --btn-hover-color: var(--color-bg);
+  &[aria-selected="true"] {
+    anchor-name: --tabs-selected;
+  }
+
+  &[aria-current="page"] {
+    anchor-name: --tabs-selected;
   }
 }

data/lib/generators/css_zero/add/templates/app/javascript/controllers/autosave_controller.js

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import { FetchRequest } from "https://esm.sh/@rails/request.js@0.0.12?standalone"
+import { FetchRequest } from "https://esm.sh/@rails/request.js@0.0.13?standalone"
 
 const AUTOSAVE_INTERVAL = 3000