@semanticus/semanticus-css 0.8.0 → 1.0.0

package/src/_normalize.css

@@ -1,214 +0,0 @@
-/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
-
-/*
-Document
-========
-*/
-
-/**
-Use a better box model (opinionated).
-*/
-
-*,
-::before,
-::after {
-	box-sizing: border-box;
-}
-
-html {
-	/* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
-	font-family:
-		system-ui,
-		'Segoe UI',
-		Roboto,
-		Helvetica,
-		Arial,
-		sans-serif,
-		'Apple Color Emoji',
-		'Segoe UI Emoji';
-	line-height: 1.15; /* 1. Correct the line height in all browsers. */
-	-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
-	tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
-}
-
-/*
-Sections
-========
-*/
-
-body {
-	margin: 0; /* Remove the margin in all browsers. */
-}
-
-/*
-Text-level semantics
-====================
-*/
-
-/**
-Add the correct font weight in Chrome and Safari.
-*/
-
-b,
-strong {
-	font-weight: bolder;
-}
-
-/**
-1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
-2. Correct the odd 'em' font sizing in all browsers.
-*/
-
-code,
-kbd,
-samp,
-pre {
-	font-family:
-		ui-monospace,
-		SFMono-Regular,
-		Consolas,
-		'Liberation Mono',
-		Menlo,
-		monospace; /* 1 */
-
-	font-size: 1em; /* 2 */
-}
-
-/**
-Add the correct font size in all browsers.
-*/
-
-small {
-	font-size: 80%;
-}
-
-/**
-Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
-*/
-
-sub,
-sup {
-	font-size: 75%;
-	line-height: 0;
-	position: relative;
-	vertical-align: baseline;
-}
-
-sub {
-	bottom: -0.25em;
-}
-
-sup {
-	top: -0.5em;
-}
-
-/*
-Tabular data
-============
-*/
-
-/**
-Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
-*/
-
-table {
-	border-color: currentcolor;
-}
-
-/*
-Forms
-=====
-*/
-
-/**
-1. Change the font styles in all browsers.
-2. Remove the margin in Firefox and Safari.
-*/
-
-button,
-input,
-optgroup,
-select,
-textarea {
-	font-family: inherit; /* 1 */
-	font-size: 100%; /* 1 */
-	line-height: 1.15; /* 1 */
-	margin: 0; /* 2 */
-}
-
-/**
-Correct the inability to style clickable types in iOS and Safari.
-*/
-
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
-	-webkit-appearance: button;
-}
-
-/**
-Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
-*/
-
-legend {
-	padding: 0;
-}
-
-/**
-Add the correct vertical alignment in Chrome and Firefox.
-*/
-
-progress {
-	vertical-align: baseline;
-}
-
-/**
-Correct the cursor style of increment and decrement buttons in Safari.
-*/
-
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-	height: auto;
-}
-
-/**
-1. Correct the odd appearance in Chrome and Safari.
-2. Correct the outline style in Safari.
-*/
-
-[type='search'] {
-	-webkit-appearance: textfield; /* 1 */
-	outline-offset: -2px; /* 2 */
-}
-
-/**
-Remove the inner padding in Chrome and Safari on macOS.
-*/
-
-::-webkit-search-decoration {
-	-webkit-appearance: none;
-}
-
-/**
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Change font properties to 'inherit' in Safari.
-*/
-
-::-webkit-file-upload-button {
-	-webkit-appearance: button; /* 1 */
-	font: inherit; /* 2 */
-}
-
-/*
-Interactive
-===========
-*/
-
-/*
-Add the correct display in Chrome and Safari.
-*/
-
-summary {
-	display: list-item;
-}

package/src/semantics/_article.css

@@ -1,12 +0,0 @@
-/**
- * Article fills up the available width, and stretches to fill the available height.
- * Stacks its children vertically.
- */
-article {
-  --block-spacing-vertical: calc(var(--spacing) * var(--responsive-multiplier));
-  --block-spacing-horizontal: calc(var(--spacing) * var(--responsive-multiplier));
-
-  width: 100%;
-  padding-block: var(--block-spacing-vertical);
-  padding-inline: var(--block-spacing-horizontal);
-}

package/src/semantics/_aside.css

@@ -1,16 +0,0 @@
-/**
- * Aside its width changes according to certain breakpoints,
- * and its height grows to fill the available space,
- * and stacks its children in a column with space between them (like a <nav> would).
- * In case of a single child, this child will fill the entire height.
- */
-aside {
-  padding-inline: var(--block-spacing-horizontal);
-  width: var(--sidebar-width) !important;
-
-  :where(ol, ul, li) {
-    align-items: stretch !important;
-    display: flex;
-    flex-direction: column;
-  }
-}

package/src/semantics/_body.css

@@ -1,8 +0,0 @@
-/**
- * Body fills up the available width, and has the same height as the viewport.
- * Stacks its children vertically.
- */
-body {
-  width: 100%;
-  min-height: 100svh;
-}

package/src/semantics/_dialog.css

@@ -1,157 +0,0 @@
-/**
- * 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 {
-    position: relative;
-    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 (--breakpoint-sm) {
-      max-width: 510px;
-    }
-
-    @media (--breakpoint-md) {
-      max-width: 700px;
-    }
-
-    /* Header styling */
-    & > header {
-      width: calc(100% + var(--block-spacing-horizontal) * 2);
-      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 {
-      width: calc(100% + var(--block-spacing-horizontal) * 2);
-      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 styling */
-    & :is(a, button)[rel=prev]:not([role=button]) {
-      margin: 0;
-      padding: 0;
-      position: absolute;
-      display: block;
-      width: 1rem;
-      height: 1rem;
-      top: calc(var(--block-spacing-vertical) * .66);
-      right: var(--block-spacing-horizontal);
-      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);
-
-      &:hover {
-        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/_footer.css

@@ -1,12 +0,0 @@
-/**
- * Footer
- */
-footer {
-  --typography-spacing-vertical: 0;
-  --typography-headings-top: 0;
-  --block-spacing-vertical: calc(var(--spacing) * var(--responsive-multiplier));
-  --block-spacing-horizontal: calc(var(--spacing) * var(--responsive-multiplier));
-
-  width: 100%;
-  padding-block: var(--block-spacing-vertical);
-}

package/src/semantics/_header.css

@@ -1,12 +0,0 @@
-/**
- * Header
- */
-header {
-  --typography-spacing-vertical: 0;
-  --typography-headings-top: 0;
-  --block-spacing-vertical: calc(var(--spacing) * var(--responsive-multiplier));
-  --block-spacing-horizontal: calc(var(--spacing) * var(--responsive-multiplier));
-
-  width: 100%;
-  padding-block: var(--block-spacing-vertical);
-}

package/src/semantics/_links.css

@@ -1,50 +0,0 @@
-/**
- * Link
- */
-:where(a:not([role=button])),
-[role=link] {
-  --color-text: rgb(var(--color-primary-rgb));
-  --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;
-}
-
-aside {
-  nav {
-    a:not([role=button]), [role=link] {
-      display: block !important;
-      width: 100%;
-    }
-  }
-}
-
-nav {
-  a:not([role=button]), [role=link] {
-    &:not(:hover) {
-      text-decoration: none;
-    }
-  }
-}

package/src/semantics/_main.css

@@ -1,10 +0,0 @@
-/**
- * Main fills up the available width, and has a height defined by its content.
- * Stacks its children vertically.
- */
-main {
-  --block-spacing-vertical: calc(var(--spacing) * var(--responsive-multiplier));
-  --block-spacing-horizontal: calc(var(--spacing) * var(--responsive-multiplier));
-
-  width: 100%;
-}

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

@@ -1,129 +0,0 @@
-/**
- * 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/_section.css

@@ -1,9 +0,0 @@
-/**
- * Section
- */
-section {
-  --block-spacing-vertical: calc(var(--spacing) * var(--responsive-multiplier));
-  --block-spacing-horizontal: calc(var(--spacing) * var(--responsive-multiplier));
-
-  margin-bottom: var(--block-spacing-vertical);
-}

package/src/semantics/_type-file.css

@@ -1,26 +0,0 @@
-/**
- * Input type file
- */
-[type=file] {
-  --color-text: var(--color-text-muted);
-  margin-left: calc(var(--outline-width) * -1);
-  padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
-  padding-left: var(--outline-width);
-  border: 0;
-  border-radius: 0;
-  background: none;
-
-  &::file-selector-button {
-    margin-right: calc(var(--spacing) / 2);
-    padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
-  }
-
-  &:is(:hover, :active, :focus)::file-selector-button {
-    --color-background: var(--color-secondary-hover-bg);
-    --border-color: var(--color-secondary-hover-border);
-  }
-
-  &:focus::file-selector-button {
-    --shadow-lg: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--color-secondary-focus);
-  }
-}

package/src/semantics/_type-search.css

@@ -1,34 +0,0 @@
-/**
- * Input type search
- *
- */
-input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
-  padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
-  background-image: var(--icon-search);
-  background-position: left calc(var(--form-element-spacing-horizontal) + 0.125rem) center;
-  background-size: 1rem auto;
-  background-repeat: no-repeat;
-
-  &[aria-invalid] {
-    padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
-    /* Using calc with var to workaround LightningCSS minification bug with 3-value syntax */
-    background-position: left calc(var(--form-element-spacing-horizontal) * 0 + 1.125rem) center, right calc(var(--form-element-spacing-horizontal) * 0 + 0.75rem) center;
-  }
-
-  &[aria-invalid=false] {
-    background-image: var(--icon-search), var(--icon-valid);
-  }
-
-  &[aria-invalid=true] {
-    background-image: var(--icon-search), var(--icon-invalid);
-  }
-}
-
-[dir=rtl] input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
-  background-position: right calc(var(--form-element-spacing-horizontal) * 0 + 1.125rem) center;
-
-  &[aria-invalid] {
-    /* Using calc with var to workaround LightningCSS minification bug with 3-value syntax */
-    background-position: right calc(var(--form-element-spacing-horizontal) * 0 + 1.125rem) center, left calc(var(--form-element-spacing-horizontal) * 0 + 0.75rem) center;
-  }
-}