@cirthcss/cirth 0.6.0 → 0.8.0

package/dist/cirth.classless.scoped.css

@@ -33,40 +33,13 @@
 }
 
 .cirth > header, .cirth > main, .cirth > footer {
-  width: 100%;
-  padding: var(--cirth-block-spacing-vertical) var(--cirth-block-spacing-horizontal);
-  margin-inline: auto;
+  grid-template-columns: minmax(var(--cirth-spacing), 1fr) minmax(0, var(--cirth-container-max-width)) minmax(var(--cirth-spacing), 1fr);
+  padding-block: var(--cirth-block-spacing-vertical);
+  display: grid;
 }
 
-@media (min-width: 576px) {
-  .cirth > header, .cirth > main, .cirth > footer {
-    max-width: 510px;
-    padding-inline: 0;
-  }
-}
-
-@media (min-width: 768px) {
-  .cirth > header, .cirth > main, .cirth > footer {
-    max-width: 700px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .cirth > header, .cirth > main, .cirth > footer {
-    max-width: 950px;
-  }
-}
-
-@media (min-width: 1280px) {
-  .cirth > header, .cirth > main, .cirth > footer {
-    max-width: 1200px;
-  }
-}
-
-@media (min-width: 1536px) {
-  .cirth > header, .cirth > main, .cirth > footer {
-    max-width: 1450px;
-  }
+.cirth > header > *, .cirth > main > *, .cirth > footer > * {
+  grid-column: 2;
 }
 
 .cirth section {
@@ -244,7 +217,6 @@
   text-transform: none;
   margin: 0;
   font-family: inherit;
-  overflow: visible;
 }
 
 .cirth button, .cirth [type="submit"], .cirth [type="reset"], .cirth [type="button"] {
@@ -393,6 +365,7 @@
   border-collapse: collapse;
   border-spacing: 0;
   text-indent: 0;
+  border-color: currentColor;
   width: 100%;
 }
 
@@ -414,21 +387,11 @@
   vertical-align: middle;
 }
 
-.cirth audio, .cirth video {
-  display: inline-block;
-}
-
-.cirth audio:not([controls]) {
-  height: 0;
-  display: none;
-}
-
 .cirth :where(iframe) {
   border-style: none;
 }
 
 .cirth img {
-  border-style: none;
   max-width: 100%;
 }
 
@@ -440,10 +403,6 @@
   fill: currentColor;
 }
 
-.cirth svg:not(:root), .cirth svg:not(:host) {
-  overflow: hidden;
-}
-
 .cirth pre, .cirth code, .cirth kbd, .cirth samp {
   font-size: .875em;
   font-family: var(--cirth-font-family);
@@ -455,7 +414,6 @@
 }
 
 .cirth pre {
-  -ms-overflow-style: scrollbar;
   overflow: auto;
 }
 
@@ -517,14 +475,10 @@
   color: inherit;
 }
 
-.cirth [hidden], .cirth template {
+.cirth [hidden]:where(:not([hidden="until-found"])) {
   display: none;
 }
 
-.cirth canvas {
-  display: inline-block;
-}
-
 .cirth input, .cirth optgroup, .cirth select, .cirth textarea {
   font-size: var(--cirth-font-size-md);
   line-height: var(--cirth-line-height);
@@ -533,26 +487,7 @@
   font-family: inherit;
 }
 
-.cirth input {
-  overflow: visible;
-}
-
-.cirth select {
-  text-transform: none;
-}
-
 .cirth legend {
-  max-width: 100%;
-  color: inherit;
-  white-space: normal;
-  padding: 0;
-}
-
-.cirth textarea {
-  overflow: auto;
-}
-
-.cirth [type="checkbox"], .cirth [type="radio"] {
   padding: 0;
 }
 
@@ -573,28 +508,15 @@
   -webkit-appearance: none;
 }
 
-.cirth ::-webkit-file-upload-button {
+.cirth ::file-selector-button {
   -webkit-appearance: button;
   font: inherit;
 }
 
-.cirth ::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.cirth :-moz-focusring {
-  outline: none;
-}
-
 .cirth :-moz-ui-invalid {
   box-shadow: none;
 }
 
-.cirth ::-ms-expand {
-  display: none;
-}
-
 .cirth [type="file"], .cirth [type="range"] {
   border-width: 0;
   padding: 0;
@@ -671,11 +593,10 @@
 }
 
 .cirth :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));
 }
 
 .cirth :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) {
@@ -725,32 +646,16 @@
   opacity: 1;
 }
 
-.cirth input::-webkit-input-placeholder {
-  color: var(--cirth-form-element-placeholder-color);
-  opacity: 1;
-}
-
-.cirth textarea::-webkit-input-placeholder {
-  color: var(--cirth-form-element-placeholder-color);
-  opacity: 1;
-}
-
 .cirth input:not([type="checkbox"], [type="radio"]), .cirth select, .cirth textarea {
   margin-bottom: var(--cirth-spacing);
 }
 
-.cirth select::-ms-expand {
-  background-color: #0000;
-  border: 0;
-}
-
 .cirth 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));
 }
 
 .cirth select[multiple] option:checked {
@@ -950,39 +855,42 @@
   background-image: var(--cirth-icon-time);
 }
 
+.cirth ::-webkit-date-and-time-value {
+  text-align: inherit;
+}
+
+.cirth ::-webkit-datetime-edit {
+  padding-block: 0;
+}
+
 .cirth [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);
 }
 
 .cirth [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);
 }
 
 .cirth [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);
 }
 
 .cirth [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);
 }
 
 .cirth [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() {
@@ -1854,7 +1762,7 @@
     opacity: 0;
   }
 
-  to {
+  100% {
     transform: var(--cirth-tooltip-caret-slide-to);
     opacity: 1;
   }
@@ -1873,14 +1781,10 @@
 }
 
 .cirth [aria-hidden="false"][hidden]:not(:focus) {
-  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
   position: absolute;
 }
 
-.cirth a, .cirth area, .cirth button, .cirth input, .cirth label, .cirth select, .cirth summary, .cirth textarea, .cirth [tabindex] {
-  -ms-touch-action: manipulation;
-}
-
 .cirth [dir="rtl"] {
   direction: rtl;
 }
@@ -2009,6 +1913,7 @@
   --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-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);
@@ -2039,6 +1944,7 @@
 
 .cirth small {
   --cirth-font-size: .875em;
+  font-size: var(--cirth-font-size);
 }
 
 .cirth h1, .cirth h2, .cirth h3 {