@semanticus/semanticus-css 0.3.0

package/src/semantics/_details.css

@@ -0,0 +1,292 @@
+/**
+ * Accordion (<details>)
+ */
+details {
+  display: block;
+  margin-bottom: var(--spacing);
+
+  & summary {
+    line-height: 1rem;
+    list-style-type: none;
+    cursor: pointer;
+    transition: color var(--transition);
+
+    &:not([role]) {
+      color: var(--accordion-closed-summary);
+    }
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &::marker {
+      display: none;
+    }
+
+    &::-moz-list-bullet {
+      list-style-type: none;
+    }
+
+    &::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);
+    }
+
+    &:focus {
+      outline: none;
+
+      &:not([role]) {
+        color: var(--accordion-active-summary);
+      }
+    }
+
+    &:focus-visible:not([role]) {
+      outline: var(--outline-width) solid var(--color-primary-focus);
+      outline-offset: calc(var(--spacing, 1rem) * 0.5);
+      color: var(--color-primary);
+    }
+
+    &[role=button] {
+      width: 100%;
+      text-align: left;
+
+      &:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-focus);
+        outline-offset: calc(var(--spacing, 1rem) * 0.5);
+      }
+
+      &::after {
+        height: calc(1rem * var(--line-height, 1.5));
+        filter: brightness(0) invert(1);
+      }
+    }
+  }
+
+  &[open] > summary {
+    margin-bottom: var(--spacing);
+
+    &:not([role]):not(:focus) {
+      color: var(--accordion-open-summary);
+    }
+
+    &::after {
+      transform: rotate(0);
+    }
+  }
+}
+
+[dir=rtl] details summary {
+  text-align: right;
+
+  &::after {
+    float: left;
+    background-position: left center;
+  }
+}
+
+/**
+ * Dropdown (details with summary[aria-haspopup="menu"])
+ */
+details:has(> summary[aria-haspopup="menu"]) {
+  position: relative;
+  border-bottom: none;
+
+  & > summary::after,
+  & > button::after,
+  & > a::after {
+    display: block;
+    width: 1rem;
+    height: calc(1rem * var(--line-height, 1.5));
+    margin-inline-start: 0.25rem;
+    margin-left: auto;
+    float: right;
+    transform: rotate(0deg) translateX(0.2rem);
+    background-image: var(--icon-chevron);
+    background-position: right center;
+    background-size: 1rem auto;
+    background-repeat: no-repeat;
+    content: "";
+  }
+
+  & summary:not([role="button"]) {
+    --outline-width: 0.0625rem;
+  }
+
+  & > :where(summary:not([role])) {
+    display: flex;
+    align-items: center;
+    height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
+    padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
+    border: var(--border-width) solid var(--form-border-color);
+    border-radius: var(--border-radius);
+    background-color: var(--form-bg);
+    color: var(--form-placeholder-color);
+    line-height: inherit;
+    cursor: pointer;
+    user-select: none;
+    transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
+  }
+
+  & > :where(summary:not([role]):active, summary:not([role]):focus) {
+    border-color: var(--form-active-border);
+    background-color: var(--form-active-bg);
+  }
+
+  & > :where(summary:not([role]):focus) {
+    box-shadow: 0 0 0 var(--outline-width) var(--form-focus);
+  }
+
+  & > :where(summary:not([role]):focus-visible) {
+    outline: none;
+  }
+
+  & > :where(summary:not([role])[aria-invalid=false]) {
+    --form-border-color: var(--form-valid-border);
+    --form-active-border: var(--form-valid-focus);
+    --form-focus: var(--form-valid-focus);
+  }
+
+  & > :where(summary:not([role])[aria-invalid=true]) {
+    --form-border-color: var(--form-invalid-border);
+    --form-active-border: var(--form-invalid-focus);
+    --form-focus: var(--form-invalid-focus);
+  }
+
+  & > :where(summary + ul[role="menu"]) {
+    display: flex;
+    z-index: 99;
+    position: absolute;
+    left: 0;
+    flex-direction: column;
+    width: 100%;
+    min-width: fit-content;
+    margin: 0;
+    margin-top: var(--outline-width);
+    padding: 0;
+    border: var(--border-width) solid var(--dropdown-border);
+    border-radius: var(--border-radius);
+    background-color: var(--dropdown-bg);
+    box-shadow: var(--dropdown-shadow);
+    color: var(--dropdown-text);
+    white-space: nowrap;
+    opacity: 0;
+    transition: opacity var(--transition), transform 0s ease-in-out 1s;
+  }
+
+  & > :where(summary + ul[role="menu"][dir=rtl]) {
+    right: 0;
+    left: auto;
+  }
+
+  & > summary + ul[role="menu"] li {
+    width: 100%;
+    margin-bottom: 0;
+    padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
+    list-style: none;
+
+    &:first-of-type {
+      margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
+    }
+
+    &:last-of-type {
+      margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
+    }
+
+    & a {
+      display: block;
+      margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1);
+      padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
+      overflow: hidden;
+      border-radius: 0;
+      color: var(--dropdown-text);
+      text-decoration: none;
+      text-overflow: ellipsis;
+
+      &:hover,
+      &:focus,
+      &:active,
+      &:focus-visible,
+      &[aria-current]:not([aria-current=false]) {
+        background-color: var(--dropdown-hover-bg);
+      }
+    }
+
+    & label {
+      width: 100%;
+    }
+
+    &:has(label):hover {
+      background-color: var(--dropdown-hover-bg);
+    }
+  }
+
+  &[open] > summary {
+    margin-bottom: 0;
+  }
+
+  &[open] > summary + ul[role="menu"] {
+    transform: scaleY(1);
+    opacity: 1;
+    transition: opacity var(--transition), transform 0s ease-in-out 0s;
+  }
+
+  &[open] > summary::before {
+    display: block;
+    z-index: 1;
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    inset: 0;
+    background: none;
+    content: "";
+    cursor: default;
+  }
+}
+
+nav details:has(> summary[aria-haspopup="menu"]) {
+  margin-bottom: 0;
+  display: inline;
+  margin: calc(var(--nav-element-spacing-vertical) * -1) 0;
+
+  & > summary::after {
+    transform: rotate(0deg) translateX(0rem);
+  }
+
+  & > :where(summary:not([role])) {
+    display: flex;
+    align-items: center;
+    height: calc(1rem * var(--line-height) + var(--nav-link-spacing-vertical) * 2);
+    padding: calc(var(--nav-link-spacing-vertical) - var(--border-width) * 2) var(--nav-link-spacing-horizontal);
+  }
+
+  & > :where(summary:not([role]):focus-visible) {
+    box-shadow: 0 0 0 var(--outline-width) var(--color-primary-focus);
+  }
+
+  & summary:focus-visible {
+    --outline-width: 0.125rem;
+  }
+
+  /* Styles for dropdowns with role="button" inside nav */
+  & > summary[role="button"] {
+    display: flex;
+    align-items: center;
+    width: auto;
+    height: calc(1rem * var(--line-height) + var(--nav-link-spacing-vertical) * 2);
+    padding: calc(var(--nav-link-spacing-vertical) - var(--border-width) * 2) var(--nav-link-spacing-horizontal);
+  }
+}
+
+label > details:has(> summary[aria-haspopup="menu"]) {
+  margin-top: calc(var(--spacing) * 0.25);
+}

package/src/semantics/_dialog.css

@@ -0,0 +1,163 @@
+/**
+ * Modal (<dialog>)
+ */
+
+/* Prevent body scroll and interaction when modal is open */
+/* Uses :has() for automatic detection - no classes needed */
+/* Accounts for both [open] attribute (JS) and :target (CSS-only) */
+body:has(dialog[open]),
+body:has(dialog:target) {
+  overflow: hidden;
+  pointer-events: none;
+  touch-action: none;
+
+  & dialog[open],
+  & dialog:target {
+    pointer-events: auto;
+    touch-action: auto;
+  }
+}
+
+dialog {
+  display: flex;
+  z-index: 999;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  align-items: center;
+  justify-content: center;
+  width: inherit;
+  min-width: 100%;
+  height: inherit;
+  min-height: 100%;
+  padding: 0;
+  border: 0;
+  backdrop-filter: var(--modal-overlay-backdrop-filter);
+  background-color: var(--modal-overlay-bg);
+  color: var(--color-text);
+
+  /* Modal content box - styled like a card */
+  /* Works with: <dialog><article>...</article></dialog> */
+  & > article {
+    width: 100%;
+    max-height: calc(100vh - var(--spacing) * 2);
+    margin: var(--spacing);
+    padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
+    overflow: auto;
+    border-radius: var(--border-radius);
+    background: var(--card-bg);
+    box-shadow: var(--card-shadow);
+
+    @media (min-width: 576px) {
+      max-width: 510px;
+    }
+
+    @media (min-width: 768px) {
+      max-width: 700px;
+    }
+
+    /* Header styling */
+    & > header {
+      margin: calc(var(--block-spacing-vertical) * -1) calc(var(--block-spacing-horizontal) * -1) var(--block-spacing-vertical);
+      padding: calc(var(--block-spacing-vertical) * 0.66) var(--block-spacing-horizontal);
+      background-color: var(--card-section-bg);
+      border-bottom: var(--border-width) solid var(--card-border);
+      border-top-right-radius: var(--border-radius);
+      border-top-left-radius: var(--border-radius);
+
+      & > * {
+        margin-bottom: 0;
+      }
+    }
+
+    /* Footer styling */
+    & > footer {
+      margin: var(--block-spacing-vertical) calc(var(--block-spacing-horizontal) * -1) calc(var(--block-spacing-vertical) * -1);
+      padding: calc(var(--block-spacing-vertical) * 0.66) var(--block-spacing-horizontal);
+      background-color: var(--card-section-bg);
+      border-top: var(--border-width) solid var(--card-border);
+      border-bottom-right-radius: var(--border-radius);
+      border-bottom-left-radius: var(--border-radius);
+      text-align: right;
+
+      & :where(button, [role=button]) {
+        margin-bottom: 0;
+
+        &:not(:first-of-type) {
+          margin-left: calc(var(--spacing) * 0.5);
+        }
+      }
+    }
+
+    /* Close button in header */
+    & > header :is(a, button)[rel=prev] {
+      margin: 0;
+      margin-left: var(--spacing);
+      padding: 0;
+      float: right;
+    }
+
+    /* Close button styling */
+    & :is(a, button)[rel=prev] {
+      display: block;
+      width: 1rem;
+      height: 1rem;
+      margin-top: calc(var(--spacing) * -1);
+      margin-bottom: var(--spacing);
+      margin-left: auto;
+      border: none;
+      border-radius: 0;
+      background-image: var(--icon-close);
+      background-position: center;
+      background-size: auto 1rem;
+      background-repeat: no-repeat;
+      background-color: transparent;
+      box-shadow: none;
+      opacity: 0.5;
+      transition: opacity var(--transition);
+    }
+
+    & :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
+      --color-background: transparent;
+      --border-color: transparent;
+      box-shadow: none;
+      opacity: 1;
+    }
+  }
+
+  /* Hidden state */
+  &:not([open]),
+  &[open=false] {
+    display: none;
+  }
+
+  /* CSS-only modal triggering using :target pseudo-class */
+  /* When dialog is targeted via anchor link (e.g., <a href="#modal-id">) */
+  &:target {
+    display: flex;
+  }
+}
+
+/* Opening animation using @starting-style (Chrome 117+, Firefox 129+, Safari 17.4+) */
+/* Gracefully degrades to instant appearance in unsupported browsers */
+dialog {
+  transition: opacity 0.2s ease-in-out, backdrop-filter 0.2s ease-in-out;
+}
+
+dialog > article {
+  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+}
+
+@starting-style {
+  dialog {
+    backdrop-filter: none;
+    background-color: transparent;
+  }
+
+  dialog > article {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+}

package/src/semantics/_document.css

@@ -0,0 +1,18 @@
+/**
+ * Document
+ * Semantic document-level styles (variables applied)
+ */
+
+:where(:root),
+:where(:host) {
+  background-color: var(--color-background);
+  color: var(--color-text);
+  font-weight: var(--font-weight);
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  font-family: var(--font-family);
+  text-underline-offset: var(--text-underline-offset);
+  text-rendering: optimizeLegibility;
+  overflow-wrap: break-word;
+  tab-size: 4;
+}

package/src/semantics/_embedded.css

@@ -0,0 +1,41 @@
+/**
+ * Embedded content
+ */
+:where(audio, canvas, iframe, img, svg, video) {
+  vertical-align: middle;
+}
+
+audio,
+video {
+  display: inline-block;
+}
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+:where(iframe) {
+  border-style: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  border-style: none;
+}
+
+:where(svg:not([fill])) {
+  fill: currentColor;
+}
+
+svg {
+  &:not(:root),
+  &:not(:host) {
+    overflow: hidden;
+  }
+}
+
+canvas {
+  display: inline-block;
+}

package/src/semantics/_figure.css

@@ -0,0 +1,13 @@
+/**
+ * Figure
+ */
+figure {
+  display: block;
+  margin: 0;
+  padding: 0;
+
+  & figcaption {
+    padding: calc(var(--spacing) * 0.5) 0;
+    color: var(--color-text-muted);
+  }
+}

package/src/semantics/_hidden.css

@@ -0,0 +1,7 @@
+/**
+ * Hidden elements
+ */
+[hidden],
+template {
+  display: none !important;
+}

package/src/semantics/_hr.css

@@ -0,0 +1,10 @@
+/**
+ * Misc
+ */
+hr {
+  height: 0;
+  margin: var(--typography-spacing-vertical) 0;
+  border: 0;
+  border-top: 1px solid var(--color-border-muted);
+  color: inherit;
+}