Jiffies CSS - Complete Browser Reset

accessibility.js

@@ -0,0 +1,20 @@
+function tabChange(event) {
+  [
+    ...document.querySelectorAll(
+      `input[type="radio"][name="${event.target.name}"]`
+    ),
+  ].forEach(setTab);
+}
+
+function setTab(radio) {
+  let node = radio;
+  while (node.getAttribute("role") != "tab") node = node.parentNode;
+  node.setAttribute("aria-selected", radio.checked ?? false);
+}
+
+[...document.querySelectorAll('[role="tab"] input[type="radio"]')].forEach(
+  (tab) => {
+    tab.addEventListener("change", tabChange);
+    setTab(tab);
+  }
+);

component/accordian.css

@@ -0,0 +1,87 @@
+details {
+  display: block;
+  margin-bottom: var(--spacing);
+  padding-bottom: var(--spacing);
+  border-bottom: var(--border-width) solid var(--accordion-border-color);
+}
+
+details summary {
+  line-height: 1rem;
+  list-style-type: none;
+  cursor: pointer;
+}
+
+details summary:not([role]) {
+  color: var(--accordion-close-summary-color);
+  transition: color var(--transition);
+}
+
+details summary:not([role])::-webkit-details-marker {
+  display: none;
+}
+
+details summary:not([role])::marker {
+  display: none;
+}
+
+details summary:not([role])::-moz-list-bullet {
+  list-style-type: none;
+}
+
+details summary:not([role])::after {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
+  float: right;
+  transform: rotate(-90deg);
+  background-image: var(--icon-chevron);
+  background-position: right center;
+  background-size: 1rem auto;
+  background-repeat: no-repeat;
+  content: "";
+  transition: transform var(--transition);
+}
+
+details summary:not([role]):focus {
+  outline: none;
+}
+
+details summary:not([role]):focus:not([role="button"]) {
+  color: var(--accordion-active-summary-color);
+}
+
+details summary:not([role])[role="button"] {
+  width: 100%;
+  text-align: left;
+}
+
+details summary[role="button"]::after {
+  height: calc(1rem * var(--line-height, 1.5));
+  background-image: var(--icon-chevron-button);
+}
+
+details summary[role="button"]:not(.outline).contrast::after {
+  background-image: var(--icon-chevron-button-inverse);
+}
+
+details[open] > summary {
+  margin-bottom: var(--spacing);
+}
+
+details[open] > summary:not(:focus) {
+  color: var(--color-accordion-open-summary);
+}
+
+details[open] > summary::after {
+  transform: rotate(0);
+}
+
+[dir="rtl"] details summary {
+  text-align: right;
+}
+
+[dir="rtl"] details summary::after {
+  float: left;
+  background-position: left center;
+}

component/card.css

@@ -0,0 +1,30 @@
+:root {
+  --card-background-color: var(--white);
+}
+
+/** Articles are Material cards */
+
+article {
+  box-shadow: var(--card-box-shadow);
+  border-radius: var(--sizing-border-radius);
+  margin: var(--spacing-block-vertical) 0;
+  --card-inner-border: var(--border-muted);
+  background-color: var(--card-background-color);
+}
+
+article > header {
+  /* margin-bottom: var(--spacing-block-vertical); */
+  padding: var(--spacing-block-vertical) var(--spacing-block-horizontal);
+  padding-bottom: 0;
+  border-bottom: var(--card-inner-border);
+}
+
+article > main {
+  padding: var(--spacing-block-vertical) var(--spacing-block-horizontal);
+}
+
+article > footer {
+  border-top: var(--cord-border);
+  margin-top: var(--spacing-block-vertical);
+  padding: var(--spacing-block-vertical) var(--spacing-block-horizontal);
+}

component/component.css

@@ -0,0 +1,11 @@
+/* Card & Panel {article, section} > {main, header, footer} */
+@import "./card.css";
+@import "./accordian.css"; /* Accordion details, summary */
+@import "./tabs.css"; /* Tab details[role=tablist] summary[role=tab] */
+@import "./form-grid.css";
+/* Modal dialog */
+/* Navigation nav > ol, ul */
+@import "./navigation.css"; /* Progress progress */
+@import "./property.css"; /* Property Sheet dl, dt, dd */
+
+/* Form group fieldset[role=group] */

component/form-grid.css

@@ -0,0 +1,14 @@
+fieldset {
+  --grid-column-count: 2;
+  display: grid;
+  grid-template-columns: repeat(var(--grid-column-count), 1fr);
+  gap: var(--spacing-block-vertical) var(--spacing-block-horizontal);
+}
+
+fieldset input[type="submit"] {
+  grid-row: -1;
+}
+
+fieldset > :has(textarea) {
+  grid-column: 1 / -1;
+}

component/navigation.css

@@ -0,0 +1,105 @@
+:root {
+  --header-nav-background-color: var(--color-primary);
+  --header-nav-color: var(--color-primary-inverse);
+  --header-border-color: var(--color-accent);
+  --header-border-width: calc(var(--border-width) * 2);
+  --header-border-style: var(--border-style);
+}
+
+:is(body, #body) > header:has(> nav) {
+  background-color: var(--header-nav-background-color);
+  color: var(--header-nav-color);
+  border-bottom: var(--header-border-width) var(--header-border-style)
+    var(--header-border-color);
+
+  box-shadow: var(--box-shadow-elevation-2);
+}
+
+:is(body, #body) > footer:has(> nav) {
+  background-color: var(--header-nav-background-color);
+  --color: var(--header-nav-color);
+  border-top: var(--header-border-width) var(--header-border-style)
+    var(--header-border-color);
+}
+
+:is(body, #body):has(> aside) {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+:is(body, #body):has(> aside) :is(header, footer) {
+  flex-basis: 100%;
+  flex-grow: 1;
+}
+
+:is(body, #body):has(> aside) main {
+  flex: 1;
+}
+
+:is(body, #body) > aside:has(> nav) {
+  float: left;
+}
+
+nav,
+nav > ul {
+  display: flex;
+}
+
+nav > ul:first-of-type {
+  margin-top: var(--spacing-block-vertical);
+}
+
+nav > ul:not(:last-of-type) {
+  margin-bottom: var(--spacing-block-vertical);
+}
+
+aside :is(nav, nav > ul) {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+aside nav {
+  position: sticky;
+  top: calc(var(--spacing-block-vertical));
+}
+
+aside nav ul li a {
+  color: var(--color);
+  padding: var(--spacing-nav-item-vertical) var(--spacing-nav-item-horizontal);
+}
+
+nav {
+  justify-content: space-between;
+}
+
+nav > ul {
+  align-items: center;
+  margin-bottom: 0;
+  padding: 0;
+  list-style: none;
+  width: 100%;
+}
+
+nav > ul li {
+  display: inline-block;
+  margin: 0;
+  width: 100%;
+  padding: var(--spacing-nav-item-vertical) var(--spacing-nav-item-horizontal);
+  transition: background-color var(--timing) ease-in-out;
+  --background-color: transparent;
+  background-color: var(--background-color);
+}
+
+nav > ul li a {
+  color: var(--header-nav-color);
+  font-size: var(--font-size-larger);
+  transition: color 0s linear;
+}
+
+nav > ul li:has(a:hover) {
+  --background-color: var(--color-primary-hover);
+}
+
+nav > ul li a:hover {
+  --color: var(--color-primary-inverse);
+}

component/property.css

@@ -0,0 +1,37 @@
+dl {
+  display: grid;
+  grid-template-columns: minmax(max-content, 1fr) minmax(auto, 2fr);
+}
+
+dt {
+  grid-column-start: 1;
+}
+
+dd {
+  grid-column-start: 2;
+  margin: 0;
+}
+
+dl > header {
+  grid-column: 1 / span 2;
+  font-weight: bold;
+  background-color: var(--color-muted);
+  color: var(--color-primary-inverse);
+  padding: var(--spacing-form-element-vertical)
+    var(--spacing-form-element-horizontal);
+}
+
+dd,
+dt {
+  padding: var(--spacing-form-element-vertical)
+    var(--spacing-form-element-horizontal);
+  border: 1px solid var(--color-muted-border-color);
+}
+
+:is(dd, dt):nth-of-type(odd) {
+  background-color: var(--table-row-stripped-odd-background-color);
+}
+
+:is(dd, dt):nth-of-type(even) {
+  background-color: var(--table-row-stripped-even-background-color);
+}