@semanticus/semanticus-css 0.3.0

package/src/semantics/_input.css

@@ -0,0 +1,306 @@
+/**
+ * Basics form elements
+ */
+input,
+optgroup,
+select,
+textarea {
+  margin: 0;
+  font-size: 1rem;
+  line-height: var(--line-height);
+  font-family: inherit;
+  letter-spacing: inherit;
+}
+
+input {
+  overflow: visible;
+}
+
+select {
+  text-transform: none;
+}
+
+legend {
+  max-width: 100%;
+  padding: 0;
+  color: inherit;
+  white-space: normal;
+}
+
+textarea {
+  overflow: auto;
+}
+
+[type=checkbox],
+[type=radio] {
+  padding: 0;
+}
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type=search] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+
+  &::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+:-moz-focusring {
+  outline: none;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+::-ms-expand {
+  display: none;
+}
+
+[type=file],
+[type=range] {
+  padding: 0;
+  border-width: 0;
+}
+
+input:not([type=checkbox], [type=radio], [type=range]) {
+  height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
+}
+
+fieldset {
+  width: 100%;
+  margin: 0;
+  margin-bottom: var(--spacing);
+  padding: 0;
+  border: 0;
+}
+
+label,
+fieldset legend {
+  display: block;
+  margin-bottom: calc(var(--spacing) * 0.375);
+  color: var(--color-text);
+  font-weight: var(--form-label-font-weight, var(--font-weight));
+}
+
+fieldset legend {
+  margin-bottom: calc(var(--spacing) * 0.5);
+}
+
+input:not([type=checkbox], [type=radio]),
+button[type=submit],
+select,
+textarea {
+  width: 100%;
+}
+
+input:not([type=checkbox], [type=radio], [type=range], [type=file]),
+select,
+textarea {
+  appearance: none;
+  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
+}
+
+input,
+select,
+textarea {
+  --color-background: var(--form-bg);
+  --border-color: var(--form-border-color);
+  --color-text: var(--form-text-color);
+  --shadow-lg: none;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius);
+  outline: none;
+  background-color: var(--color-background);
+  box-shadow: var(--shadow-lg);
+  color: var(--color-text);
+  font-weight: var(--font-weight);
+  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
+}
+
+input:not([type=submit],
+[type=button],
+[type=reset],
+[type=checkbox],
+[type=radio],
+[readonly]):is(:active, :focus),
+:where(select, textarea):not([readonly]):is(:active, :focus) {
+  --color-background: var(--form-active-bg);
+}
+
+input:not([type=submit], [type=button], [type=reset], [role=switch], [readonly]):is(:active, :focus),
+:where(select, textarea):not([readonly]):is(:active, :focus) {
+  --border-color: var(--form-active-border);
+}
+
+input:not([type=submit],
+[type=button],
+[type=reset],
+[type=range],
+[type=file],
+[readonly]):focus,
+:where(select, textarea):not([readonly]):focus {
+  --shadow-lg: 0 0 0 var(--outline-width) var(--form-focus);
+}
+
+input:not([type=submit], [type=button], [type=reset])[disabled],
+select[disabled],
+textarea[disabled],
+label[aria-disabled=true],
+:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
+  opacity: var(--form-disabled-opacity);
+  pointer-events: none;
+}
+
+label[aria-disabled=true] input[disabled] {
+  opacity: 1;
+}
+
+:where(:is(input, select, textarea):not([type=checkbox],
+ [type=radio],
+ [type=date],
+ [type=datetime-local],
+ [type=month],
+ [type=time],
+ [type=week],
+ [type=range])[aria-invalid]) {
+  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+  padding-left: var(--form-element-spacing-horizontal);
+  padding-inline-start: var(--form-element-spacing-horizontal);
+  padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+  background-position: center right 0.75rem;
+  background-size: 1rem auto;
+  background-repeat: no-repeat;
+}
+:where(input:not([type=checkbox],
+ [type=radio],
+ [type=date],
+ [type=datetime-local],
+ [type=month],
+ [type=time],
+ [type=week],
+ [type=range])[aria-invalid=false], textarea[aria-invalid=false]) {
+  background-image: var(--icon-valid);
+}
+:where(input:not([type=checkbox],
+ [type=radio],
+ [type=date],
+ [type=datetime-local],
+ [type=month],
+ [type=time],
+ [type=week],
+ [type=range])[aria-invalid=true], textarea[aria-invalid=true]) {
+  background-image: var(--icon-invalid);
+}
+
+:is(input, select, textarea)[aria-invalid=false] {
+  --border-color: var(--form-valid-border);
+}
+:is(input, select, textarea)[aria-invalid=false]:is(:active, :focus) {
+  --border-color: var(--form-valid-active-border);
+}
+input:not([type=checkbox], [type=radio])[aria-invalid=false]:is(:active, :focus), select[aria-invalid=false]:is(:active, :focus), textarea[aria-invalid=false]:is(:active, :focus) {
+  --shadow-lg: 0 0 0 var(--outline-width) var(--form-valid-focus);
+}
+
+:is(input, select, textarea)[aria-invalid=true] {
+  --border-color: var(--form-invalid-border);
+}
+:is(input, select, textarea)[aria-invalid=true]:is(:active, :focus) {
+  --border-color: var(--form-invalid-active-border);
+}
+input:not([type=checkbox], [type=radio])[aria-invalid=true]:is(:active, :focus), select[aria-invalid=true]:is(:active, :focus), textarea[aria-invalid=true]:is(:active, :focus) {
+  --shadow-lg: 0 0 0 var(--outline-width) var(--form-invalid-focus);
+}
+
+:where([dir=rtl] :is(input, select, textarea):not([type=checkbox], [type=radio]):is([aria-invalid], [aria-invalid=true], [aria-invalid=false])) {
+  background-position: center left 0.75rem;
+}
+
+input::placeholder,
+input::-webkit-input-placeholder,
+textarea::placeholder,
+textarea::-webkit-input-placeholder,
+select:invalid {
+  color: var(--form-placeholder-color);
+  opacity: 1;
+}
+
+input:not([type=checkbox], [type=radio]),
+select,
+textarea {
+  margin-bottom: var(--spacing);
+}
+
+select {
+  &::-ms-expand {
+    border: 0;
+    background-color: transparent;
+  }
+
+  &:not([multiple], [size]) {
+    padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+    padding-left: var(--form-element-spacing-horizontal);
+    padding-inline-start: var(--form-element-spacing-horizontal);
+    padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+    background-image: var(--icon-chevron);
+    background-position: center right 0.75rem;
+    background-size: 1rem auto;
+    background-repeat: no-repeat;
+  }
+
+  &[multiple] option:checked {
+    background: var(--form-selected-bg);
+    color: var(--form-text-color);
+  }
+}
+
+[dir=rtl] select:not([multiple], [size]) {
+  background-position: center left 0.75rem;
+}
+
+textarea {
+  display: block;
+  resize: vertical;
+}
+
+:where(textarea[aria-invalid]) {
+  --icon-height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
+  background-position: top right 0.75rem;
+  background-size: 1rem var(--icon-height);
+}
+
+:where(input, select, textarea, fieldset) + small {
+  display: block;
+  width: 100%;
+  margin-top: calc(var(--spacing) * -0.75);
+  margin-bottom: var(--spacing);
+  color: var(--color-text-muted);
+}
+
+:where(input, select, textarea, fieldset)[aria-invalid=false] + small {
+  color: rgb(var(--success-rgb));
+}
+
+:where(input, select, textarea, fieldset)[aria-invalid=true] + small {
+  color: rgb(var(--danger-rgb));
+}
+
+label > :where(input, select, textarea) {
+  margin-top: calc(var(--spacing) * 0.25);
+}

package/src/semantics/_links.css

@@ -0,0 +1,33 @@
+/**
+ * Link
+ */
+:where(a:not([role=button])),
+[role=link] {
+  --color-text: var(--color-primary);
+  --color-background: transparent;
+  --underline: var(--color-primary-underline);
+  outline: none;
+  background-color: var(--color-background);
+  color: var(--color-text);
+  text-decoration: var(--text-decoration);
+  text-decoration-color: var(--underline);
+  text-underline-offset: 0.125em;
+  transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
+}
+
+:where(a:not([role=button])),
+[role=link] {
+  &:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
+    --color-text: var(--color-primary-hover);
+    --underline: var(--color-primary-hover-underline);
+    --text-decoration: underline;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 var(--outline-width) var(--color-primary-focus);
+  }
+}
+
+a[role=button] {
+  display: inline-block;
+}

package/src/semantics/_main.css

@@ -0,0 +1,3 @@
+main {
+  display: block;
+}

package/src/semantics/_nav.css

@@ -0,0 +1,116 @@
+@charset "UTF-8";
+/**
+ * Nav
+ */
+:where(nav li)::before {
+  float: left;
+  content: "​";
+}
+
+:where(nav, nav ul) {
+  display: flex;
+}
+
+:where(nav) {
+  justify-content: space-between;
+  overflow: visible;
+}
+
+:where(nav ol, nav ul) {
+  align-items: center;
+  margin-bottom: 0;
+  padding: 0;
+  list-style: none;
+}
+
+:where(nav ol:first-of-type, nav ul:first-of-type) {
+  margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
+}
+
+:where(nav ol:last-of-type, nav ul:last-of-type) {
+  margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
+}
+
+:where(nav li) {
+  display: inline-block;
+  margin: 0;
+  padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
+}
+
+nav li {
+  & :where(a, [role=link]) {
+    display: inline-block;
+    margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
+    padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
+    border-radius: var(--border-radius);
+
+    &:not(:hover) {
+      text-decoration: none;
+    }
+  }
+
+  & :where(button, [role=button], [type=button], input:not([type=checkbox], [type=radio], [type=range], [type=file]), select) {
+    height: auto;
+    margin-right: inherit;
+    margin-bottom: 0;
+    margin-left: inherit;
+    padding: calc(var(--nav-link-spacing-vertical) - var(--border-width) * 2) var(--nav-link-spacing-horizontal);
+  }
+}
+
+:where(nav[aria-label=breadcrumb]) {
+  align-items: center;
+  justify-content: start;
+
+  & ul li {
+    &:not(:first-child) {
+      margin-inline-start: var(--nav-link-spacing-horizontal);
+    }
+
+    & :where(a, [role=link]) {
+      margin: calc(var(--nav-link-spacing-vertical) * -1) 0;
+      margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
+    }
+
+    &:not(:last-child)::after {
+      display: inline-block;
+      position: absolute;
+      width: calc(var(--nav-link-spacing-horizontal) * 4);
+      margin: 0 calc(var(--nav-link-spacing-horizontal) * -1);
+      content: var(--nav-breadcrumb-divider);
+      color: var(--color-text-muted);
+      text-align: center;
+      text-decoration: none;
+      white-space: nowrap;
+    }
+  }
+
+  & :where(a[aria-current]:not([aria-current=false]), [role=link][aria-current]:not([aria-current=false])) {
+    background-color: transparent;
+    color: inherit;
+    text-decoration: none;
+    pointer-events: none;
+  }
+}
+
+:where(aside nav, aside ol, aside ul, aside li) {
+  display: block;
+}
+
+:where(aside li) {
+  padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal);
+}
+
+aside li {
+  & :where(a, [role=link], [role=button], button, [type=button]) {
+    display: block;
+  }
+
+  & :where([role=button], button, [type=button]) {
+    margin: inherit;
+  }
+}
+
+[dir=rtl] :where(nav[aria-label=breadcrumb]) ul li:not(:last-child)::after {
+  content: "\\";
+}

package/src/semantics/_progress.css

@@ -0,0 +1,62 @@
+/**
+ * Progress
+ */
+progress {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  display: inline-block;
+  appearance: none;
+  width: 100%;
+  height: 0.5rem;
+  margin-bottom: calc(var(--spacing) * 0.5);
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--border-radius);
+  background-color: var(--progress-bg);
+  color: var(--progress-fill);
+  vertical-align: baseline;
+  accent-color: var(--color-primary);
+
+  &::-webkit-progress-bar {
+    border-radius: var(--border-radius);
+    background: none;
+  }
+
+  &[value]::-webkit-progress-value {
+    background-color: var(--progress-fill);
+    transition: inline-size var(--transition);
+  }
+
+  &::-moz-progress-bar {
+    background-color: var(--progress-fill);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  progress:indeterminate {
+    background: var(--progress-bg) linear-gradient(to right, var(--progress-fill) 30%, var(--progress-bg) 30%) top left/150% 150% no-repeat;
+    animation: progress-indeterminate 1s linear infinite;
+
+    &[value]::-webkit-progress-value {
+      background-color: transparent;
+    }
+
+    &::-moz-progress-bar {
+      background-color: transparent;
+    }
+  }
+
+  [dir=rtl] progress:indeterminate {
+    animation-direction: reverse;
+  }
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}

package/src/semantics/_role-group-search.css

@@ -0,0 +1,129 @@
+/**
+ * Group ([role="group"], [role="search"])
+ */
+[role="search"],
+[role="group"] {
+  display: inline-flex;
+  position: relative;
+  width: 100%;
+  margin-bottom: var(--spacing);
+  border-radius: var(--border-radius);
+  box-shadow: var(--group-shadow, 0 0 0 rgba(0, 0, 0, 0));
+  vertical-align: middle;
+  transition: box-shadow var(--transition);
+
+  & > *:not(details),
+  & input:not([type="checkbox"], [type="radio"]),
+  & select {
+    position: relative;
+    flex: 1 1 auto;
+    margin-bottom: 0;
+
+    &:not(:first-child) {
+      margin-left: calc(var(--border-width) * -1);
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:focus {
+      z-index: 2;
+    }
+  }
+
+  & button,
+  & [type="submit"],
+  & [type="reset"],
+  & [type="button"],
+  & [role="button"] {
+    width: auto;
+  }
+
+  /* Details dropdown inside group */
+  & > details {
+    position: relative;
+    margin-bottom: 0;
+    /* Constrain details height to just the button, not the dropdown menu */
+    height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
+    overflow: visible;
+
+    &:not(:first-child) {
+      margin-left: calc(var(--border-width) * -1);
+
+      & > summary {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+
+    &:not(:last-child) > summary {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    & > summary:focus {
+      z-index: 2;
+    }
+
+    /* Ensure consistent height with other form elements in the group */
+    & > summary[role="button"] {
+      display: flex;
+      align-items: center;
+      height: 100%;
+
+      &::after {
+        height: calc(1rem * var(--line-height, 1.5));
+      }
+    }
+  }
+}
+
+@supports selector(:has(*)) {
+  [role="search"],
+  [role="group"] {
+    &:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
+      --group-shadow: var(--group-shadow-focus-with-button);
+
+      & input:not([type="checkbox"], [type="radio"]),
+      & select {
+        border-color: transparent;
+      }
+    }
+
+    &:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
+      --group-shadow: var(--group-shadow-focus-with-input);
+
+      & button,
+      & [type="submit"],
+      & [type="button"],
+      & [role="button"] {
+        --button-shadow: 0 0 0 var(--border-width) var(--color-primary-border);
+        --button-shadow-hover: 0 0 0 var(--border-width) var(--color-primary-hover-border);
+      }
+    }
+
+    & button:focus,
+    & [type="submit"]:focus,
+    & [type="reset"]:focus,
+    & [type="button"]:focus,
+    & [role="button"]:focus {
+      box-shadow: none;
+    }
+  }
+}
+
+[role="search"] {
+  & > :first-child {
+    border-top-left-radius: 5rem;
+    border-bottom-left-radius: 5rem;
+  }
+
+  & > :last-child {
+    border-top-right-radius: 5rem;
+    border-bottom-right-radius: 5rem;
+  }
+}

package/src/semantics/_role-toolbar.css

@@ -0,0 +1,17 @@
+/**
+ * Minimal grid system with auto-layout columns
+ */
+[role="toolbar"] {
+  grid-column-gap: var(--grid-column-gap);
+  grid-row-gap: var(--grid-row-gap);
+  display: grid;
+  grid-template-columns: 1fr;
+
+  @media (min-width: 425px) {
+    grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
+  }
+
+  & > * {
+    min-width: 0;
+  }
+}