@cirthcss/cirth 0.6.0 → 0.8.0

package/dist/cirth.css

@@ -44,55 +44,48 @@ section {
 }
 
 .container, .container-fluid {
-  width: 100%;
-  padding-inline: var(--cirth-spacing);
-  margin-inline: auto;
-}
-
-@media (min-width: 576px) {
-  .container {
-    max-width: 510px;
-    padding-inline: 0;
-  }
+  grid-template-columns: minmax(var(--cirth-spacing), 1fr) minmax(0, 1fr) minmax(var(--cirth-spacing), 1fr);
+  display: grid;
 }
 
-@media (min-width: 768px) {
-  .container {
-    max-width: 700px;
-  }
+.container > *, .container-fluid > * {
+  grid-column: 2;
 }
 
-@media (min-width: 1024px) {
-  .container {
-    max-width: 950px;
-  }
+.container {
+  grid-template-columns: minmax(var(--cirth-spacing), 1fr) minmax(0, var(--cirth-container-max-width)) minmax(var(--cirth-spacing), 1fr);
 }
 
-@media (min-width: 1280px) {
-  .container {
-    max-width: 1200px;
-  }
+.breakout {
+  grid-column: 1 / -1;
 }
 
-@media (min-width: 1536px) {
-  .container {
-    max-width: 1450px;
-  }
-}
-
-.grid {
-  grid-column-gap: var(--cirth-grid-column-gap);
-  grid-row-gap: var(--cirth-grid-row-gap);
+.row {
+  gap: var(--cirth-grid-row-gap) var(--cirth-grid-column-gap);
   grid-template-columns: 1fr;
   display: grid;
 }
 
 @media (min-width: 768px) {
-  .grid {
+  .row {
     grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
   }
 }
 
+.row > * {
+  min-width: 0;
+}
+
+.row > :where(button, [type="submit"], [type="reset"], [role="button"], input:not([type="checkbox"], [type="radio"]), select, textarea) {
+  margin-bottom: 0;
+}
+
+.grid {
+  gap: var(--cirth-grid-row-gap) var(--cirth-grid-column-gap);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cirth-grid-min-column)), 1fr));
+  display: grid;
+}
+
 .grid > * {
   min-width: 0;
 }
@@ -296,7 +289,6 @@ button {
   text-transform: none;
   margin: 0;
   font-family: inherit;
-  overflow: visible;
 }
 
 button, [type="submit"], [type="reset"], [type="button"] {
@@ -499,6 +491,7 @@ button:focus-visible, button[aria-current]:not([aria-current="false"]):focus-vis
   border-collapse: collapse;
   border-spacing: 0;
   text-indent: 0;
+  border-color: currentColor;
   width: 100%;
 }
 
@@ -524,21 +517,11 @@ table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd)
   vertical-align: middle;
 }
 
-audio, video {
-  display: inline-block;
-}
-
-audio:not([controls]) {
-  height: 0;
-  display: none;
-}
-
 :where(iframe) {
   border-style: none;
 }
 
 img {
-  border-style: none;
   max-width: 100%;
 }
 
@@ -550,10 +533,6 @@ img:where(:not([height]), [width][height]) {
   fill: currentColor;
 }
 
-svg:not(:root), svg:not(:host) {
-  overflow: hidden;
-}
-
 pre, code, kbd, samp {
   font-size: .875em;
   font-family: var(--cirth-font-family);
@@ -565,7 +544,6 @@ pre code, pre samp {
 }
 
 pre {
-  -ms-overflow-style: scrollbar;
   overflow: auto;
 }
 
@@ -627,14 +605,10 @@ hr {
   color: inherit;
 }
 
-[hidden], template {
+[hidden]:where(:not([hidden="until-found"])) {
   display: none;
 }
 
-canvas {
-  display: inline-block;
-}
-
 input, optgroup, select, textarea {
   font-size: var(--cirth-font-size-md);
   line-height: var(--cirth-line-height);
@@ -643,26 +617,7 @@ input, optgroup, select, textarea {
   font-family: inherit;
 }
 
-input {
-  overflow: visible;
-}
-
-select {
-  text-transform: none;
-}
-
 legend {
-  max-width: 100%;
-  color: inherit;
-  white-space: normal;
-  padding: 0;
-}
-
-textarea {
-  overflow: auto;
-}
-
-[type="checkbox"], [type="radio"] {
   padding: 0;
 }
 
@@ -683,28 +638,15 @@ textarea {
   -webkit-appearance: none;
 }
 
-::-webkit-file-upload-button {
+::file-selector-button {
   -webkit-appearance: button;
   font: inherit;
 }
 
-::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-:-moz-focusring {
-  outline: none;
-}
-
 :-moz-ui-invalid {
   box-shadow: none;
 }
 
-::-ms-expand {
-  display: none;
-}
-
 [type="file"], [type="range"] {
   border-width: 0;
   padding: 0;
@@ -781,11 +723,10 @@ label[aria-disabled="true"] input[disabled] {
 }
 
 :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid] {
+  padding-inline: var(--cirth-form-element-spacing-horizontal) calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
   background-position: center right var(--cirth-space-3);
   background-size: var(--cirth-size-4) auto;
   background-repeat: no-repeat;
-  padding-inline-start: var(--cirth-form-element-spacing-horizontal);
-  padding-inline-end: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
 }
 
 :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid="false"]:not(select) {
@@ -835,32 +776,16 @@ input::placeholder, textarea::placeholder, select:invalid {
   opacity: 1;
 }
 
-input::-webkit-input-placeholder {
-  color: var(--cirth-form-element-placeholder-color);
-  opacity: 1;
-}
-
-textarea::-webkit-input-placeholder {
-  color: var(--cirth-form-element-placeholder-color);
-  opacity: 1;
-}
-
 input:not([type="checkbox"], [type="radio"]), select, textarea {
   margin-bottom: var(--cirth-spacing);
 }
 
-select::-ms-expand {
-  background-color: #0000;
-  border: 0;
-}
-
 select:not([multiple], [size]) {
+  padding-inline: var(--cirth-form-element-spacing-horizontal) calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
   background-image: var(--cirth-icon-chevron);
   background-position: center right var(--cirth-space-3);
   background-size: var(--cirth-size-4) auto;
   background-repeat: no-repeat;
-  padding-inline-start: var(--cirth-form-element-spacing-horizontal);
-  padding-inline-end: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
 }
 
 select[multiple] option:checked {
@@ -885,7 +810,7 @@ textarea[aria-invalid] {
   background-size: var(--cirth-size-4) var(--cirth-icon-height);
 }
 
-:where(input, select, textarea, fieldset, .grid) + small {
+:where(input, select, textarea, fieldset, .row) + small {
   width: 100%;
   margin-top: calc(var(--cirth-spacing) * -.75);
   margin-bottom: var(--cirth-spacing);
@@ -893,11 +818,11 @@ textarea[aria-invalid] {
   display: block;
 }
 
-:where(input, select, textarea, fieldset, .grid)[aria-invalid="false"] + small {
+:where(input, select, textarea, fieldset, .row)[aria-invalid="false"] + small {
   color: var(--cirth-ins-color);
 }
 
-:where(input, select, textarea, fieldset, .grid)[aria-invalid="true"] + small {
+:where(input, select, textarea, fieldset, .row)[aria-invalid="true"] + small {
   color: var(--cirth-del-color);
 }
 
@@ -1060,39 +985,42 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
   background-image: var(--cirth-icon-time);
 }
 
+::-webkit-date-and-time-value {
+  text-align: inherit;
+}
+
+::-webkit-datetime-edit {
+  padding-block: 0;
+}
+
 [type="date"]::-webkit-calendar-picker-indicator {
   width: var(--cirth-icon-width);
+  margin-inline: var(--cirth-icon-position) calc(var(--cirth-icon-width) * -1);
   opacity: 0;
-  margin-inline-start: var(--cirth-icon-position);
-  margin-inline-end: calc(var(--cirth-icon-width) * -1);
 }
 
 [type="datetime-local"]::-webkit-calendar-picker-indicator {
   width: var(--cirth-icon-width);
+  margin-inline: var(--cirth-icon-position) calc(var(--cirth-icon-width) * -1);
   opacity: 0;
-  margin-inline-start: var(--cirth-icon-position);
-  margin-inline-end: calc(var(--cirth-icon-width) * -1);
 }
 
 [type="month"]::-webkit-calendar-picker-indicator {
   width: var(--cirth-icon-width);
+  margin-inline: var(--cirth-icon-position) calc(var(--cirth-icon-width) * -1);
   opacity: 0;
-  margin-inline-start: var(--cirth-icon-position);
-  margin-inline-end: calc(var(--cirth-icon-width) * -1);
 }
 
 [type="time"]::-webkit-calendar-picker-indicator {
   width: var(--cirth-icon-width);
+  margin-inline: var(--cirth-icon-position) calc(var(--cirth-icon-width) * -1);
   opacity: 0;
-  margin-inline-start: var(--cirth-icon-position);
-  margin-inline-end: calc(var(--cirth-icon-width) * -1);
 }
 
 [type="week"]::-webkit-calendar-picker-indicator {
   width: var(--cirth-icon-width);
+  margin-inline: var(--cirth-icon-position) calc(var(--cirth-icon-width) * -1);
   opacity: 0;
-  margin-inline-start: var(--cirth-icon-position);
-  margin-inline-end: calc(var(--cirth-icon-width) * -1);
 }
 
 @-moz-document url-prefix() {
@@ -1832,7 +1760,7 @@ dialog:not([open]), dialog[open="false"] {
 .modal-is-open {
   pointer-events: none;
   touch-action: none;
-  padding-inline-end: var(--cirth-scrollbar-width, 0px);
+  padding-inline-end: var(--cirth-scrollbar-width, 0);
   overflow: hidden;
 }
 
@@ -2189,7 +2117,7 @@ progress::-moz-progress-bar {
     opacity: 0;
   }
 
-  to {
+  100% {
     transform: var(--cirth-tooltip-caret-slide-to);
     opacity: 1;
   }
@@ -2208,14 +2136,10 @@ progress::-moz-progress-bar {
 }
 
 [aria-hidden="false"][hidden]:not(:focus) {
-  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
   position: absolute;
 }
 
-a, area, button, input, label, select, summary, textarea, [tabindex] {
-  -ms-touch-action: manipulation;
-}
-
 [dir="rtl"] {
   direction: rtl;
 }
@@ -2232,6 +2156,34 @@ a, area, button, input, label, select, summary, textarea, [tabindex] {
   }
 }
 
+.sr-only {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+.sr-only-focusable:focus, .sr-only-focusable:focus-within {
+  clip-path: none;
+  white-space: normal;
+  width: auto;
+  height: auto;
+  margin: 0;
+  position: static;
+  overflow: visible;
+}
+
+.truncate {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
 :root, :host {
   --cirth-color-black: #000;
   --cirth-color-white: #fff;
@@ -2344,8 +2296,10 @@ a, area, button, input, label, select, summary, textarea, [tabindex] {
   --cirth-typography-spacing-vertical: var(--cirth-space-4);
   --cirth-block-spacing-vertical: var(--cirth-spacing);
   --cirth-block-spacing-horizontal: var(--cirth-spacing);
+  --cirth-container-max-width: 60rem;
   --cirth-grid-column-gap: var(--cirth-spacing);
   --cirth-grid-row-gap: var(--cirth-spacing);
+  --cirth-grid-min-column: 12rem;
   --cirth-form-element-spacing-vertical: var(--cirth-space-2);
   --cirth-form-element-spacing-horizontal: var(--cirth-space-4);
   --cirth-form-label-font-weight: var(--cirth-font-weight);
@@ -2376,6 +2330,7 @@ a, a.secondary, a.contrast {
 
 small {
   --cirth-font-size: .875em;
+  font-size: var(--cirth-font-size);
 }
 
 h1, h2, h3 {