@semanticus/semanticus-css 0.7.0 → 0.9.0

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/_typography.css

@@ -1,146 +0,0 @@
-/**
- * Typography
- */
-b,
-strong {
-  font-weight: bolder;
-}
-
-sub,
-sup {
-  position: relative;
-  font-size: 0.75em;
-  line-height: 0;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-address,
-blockquote,
-dl,
-ol,
-p,
-pre,
-table,
-ul {
-  margin-top: 0;
-  margin-bottom: var(--typography-spacing-vertical);
-  color: var(--color-text);
-  font-style: normal;
-  font-weight: var(--font-weight);
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-top: 0;
-  margin-bottom: var(--typography-spacing-vertical);
-  color: var(--color-text);
-  font-weight: var(--font-weight);
-  font-size: var(--font-size);
-  line-height: var(--line-height);
-  font-family: var(--font-family);
-}
-
-/* Headings - progressive lightness using color-mix */
-h1 { --color-text: var(--color-heading-base); }
-h2 { --color-text: color-mix(in srgb, var(--color-heading-base), white 12%); }
-h3 { --color-text: color-mix(in srgb, var(--color-heading-base), white 22%); }
-h4 { --color-text: color-mix(in srgb, var(--color-heading-base), white 32%); }
-h5 { --color-text: color-mix(in srgb, var(--color-heading-base), white 45%); }
-h6 { --color-text: color-mix(in srgb, var(--color-heading-base), white 55%); }
-
-/* Dark mode headings - base is lightest, mix in black for lower levels */
-[data-theme="dark"] h1 { --color-text: var(--color-heading-base); }
-[data-theme="dark"] h2 { --color-text: color-mix(in srgb, var(--color-heading-base), black 8%); }
-[data-theme="dark"] h3 { --color-text: color-mix(in srgb, var(--color-heading-base), black 18%); }
-[data-theme="dark"] h4 { --color-text: color-mix(in srgb, var(--color-heading-base), black 28%); }
-[data-theme="dark"] h5 { --color-text: color-mix(in srgb, var(--color-heading-base), black 38%); }
-[data-theme="dark"] h6 { --color-text: color-mix(in srgb, var(--color-heading-base), black 48%); }
-
-:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul, hr) ~ :is(h1, h2, h3, h4, h5, h6) {
-  margin-top: var(--typography-spacing-top);
-}
-
-p {
-  margin-bottom: var(--typography-spacing-vertical);
-}
-
-hgroup {
-  margin-bottom: var(--typography-spacing-vertical);
-
-  & > * {
-    margin-top: 0;
-    margin-bottom: 0;
-
-    &:not(:first-child):last-child {
-      --color-text: var(--color-text-muted);
-      --font-weight: unset;
-      font-size: 1rem;
-    }
-  }
-}
-
-:where(ol, ul) li {
-  margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
-}
-
-:where(dl, ol, ul) :where(dl, ol, ul) {
-  margin: 0;
-  margin-top: calc(var(--typography-spacing-vertical) * 0.25);
-}
-
-ul li {
-  list-style: square;
-}
-
-mark {
-  padding: 0.125rem 0.25rem;
-  background-color: var(--color-mark-bg);
-  color: var(--color-mark-text);
-  vertical-align: baseline;
-}
-
-blockquote {
-  display: block;
-  margin: var(--typography-spacing-vertical) 0;
-  padding: var(--spacing);
-  border-right: none;
-  border-left: 0.25rem solid var(--blockquote-border-color);
-  border-inline-start: 0.25rem solid var(--blockquote-border-color);
-  border-inline-end: none;
-
-  & footer {
-    margin-top: calc(var(--typography-spacing-vertical) * 0.5);
-    color: var(--blockquote-footer-color);
-  }
-}
-
-abbr[title] {
-  border-bottom: 1px dotted;
-  text-decoration: none;
-  cursor: help;
-}
-
-ins {
-  color: rgb(var(--success-rgb));
-  text-decoration: none;
-}
-
-del {
-  color: rgb(var(--danger-rgb));
-}
-
-::selection {
-  background-color: var(--color-text-selection);
-}

package/src/sizes/slim.css

@@ -1,41 +0,0 @@
-/*
-  Semanticus CSS Size: Slim
-*/
-
-/* Shared variables */
-@import '../variables/_shared.css';
-
-:root,
-:host {
-  --font-size: 1rem;
-  --spacing: 0.75rem;
-  --block-spacing-vertical: 1.2rem;
-  --block-spacing-horizontal: 1.2rem;
-  --form-element-spacing-vertical: 0.5rem;
-  --form-element-spacing-horizontal: 0.7rem;
-}
-
-@media (--breakpoint-xl) {
-  :root,
-  :host {
-    --responsive-multiplier: 1.85;
-  }
-}
-
-@media (--breakpoint-xxl) {
-  :root,
-  :host {
-    --responsive-multiplier: 2;
-  }
-}
-
-[role="search"] button,
-[role="search"] [type="submit"],
-[role="search"] [type="button"],
-[role="search"] [role="button"],
-[role="group"] button,
-[role="group"] [type="submit"],
-[role="group"] [type="button"],
-[role="group"] [role="button"] {
-  --form-element-spacing-horizontal: 1rem;
-}

package/src/utilities/index.css

@@ -1,14 +0,0 @@
-/**
- * Semanticus CSS Utilities
- * Variables + Utility Classes
- * Perfect for utility-first development without semantic components
- */
-
-/* Variables */
-@import './_variables.css';
-
-/* Normalize */
-@import '../_normalize.css';
-
-/* Utility Modules */
-@import './modules.css';

package/src/variables/_shared.css

@@ -1,121 +0,0 @@
-:root {
-  --transparent: transparent;
-}
-
-/* ==========================================================================
-   Responsive Breakpoints (custom media queries)
-   Used consistently across semantics, variants, and utilities.
-   ========================================================================== */
-
-@custom-media --breakpoint-sm (min-width: 576px);
-@custom-media --breakpoint-md (min-width: 768px);
-@custom-media --breakpoint-lg (min-width: 1024px);
-@custom-media --breakpoint-xl (min-width: 1280px);
-@custom-media --breakpoint-xxl (min-width: 1536px);
-
-/* ==========================================================================
-   2. Typography & Layout Variables (from Pico Theme)
-   ========================================================================== */
-
-:root,
-:host {
-  /* Font Families */
-  --font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--font-family-emoji);
-  --font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--font-family-emoji);
-  --font-family: var(--font-family-sans-serif);
-
-  /* Typography – base defaults inherited by all elements */
-  --line-height: 1.5;
-  --font-weight: 400;
-  --font-size: 100%; /* Root font-size; overridden per breakpoint below and per element in §6 */
-  --text-underline-offset: 0.1rem;
-
-  /* Borders & Effects – global defaults for border-radius, border-width, outline, and transition */
-  --border-radius: 0.25rem;
-  --border-width: 0.0625rem; /* 1px – base border width used by forms, tables, etc. */
-  --outline-width: 0.125rem; /* 2px – focus-ring width */
-  --transition: 0.2s ease-in-out; /* Default transition timing for interactive state changes */
-
-  /* Spacing – shared base unit used for padding, margins, and gaps throughout the layout */
-  --spacing: 1rem;
-  --responsive-multiplier: 1; /* Multiplier applied to spacing for responsive adjustments at wider breakpoints */
-  --typography-spacing-vertical: 1rem; /* Vertical margin below typographic elements (p, lists, etc.) */
-  --block-spacing-vertical: var(--spacing); /* Vertical padding inside block-level components (cards, modals, etc.) */
-  --block-spacing-horizontal: var(--spacing); /* Horizontal padding inside block-level components */
-  --grid-column-gap: var(--spacing); /* Column gap in CSS Grid layouts */
-  --grid-row-gap: var(--spacing); /* Row gap in CSS Grid layouts */
-  --form-element-spacing-vertical: 0.75rem; /* Vertical padding inside form inputs, selects, and textareas */
-  --form-element-spacing-horizontal: 1rem; /* Horizontal padding inside form inputs, selects, and textareas */
-
-  /* Shadows – used by [role="group"] and [role="search"] button/input combos */
-  --group-shadow: 0 0 0 rgba(0, 0, 0, 0); /* Default (no shadow) */
-  --group-shadow-focus-with-button: 0 0 0 var(--outline-width) var(--color-primary-focus); /* Focus ring when a button inside the group is focused */
-  --group-shadow-focus-with-input: 0 0 0 0.0625rem var(--form-border-color); /* Focus ring when an input inside the group is focused */
-
-  /* Modal – backdrop overlay settings */
-  --modal-overlay-backdrop-filter: blur(0.375rem); /* Applies a blur behind the modal overlay */
-
-  /* Navigation – spacing and breadcrumb configuration */
-  --nav-link-spacing-vertical: 0.5rem; /* Vertical padding inside nav links */
-  --nav-link-spacing-horizontal: 0.5rem; /* Horizontal padding inside nav links */
-  --nav-breadcrumb-divider: ">"; /* Character displayed between breadcrumb items */
-
-  /* Icons – inline SVG data-URIs used by form elements and UI components */
-  --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); /* Checkmark for checked checkboxes */
-  --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); /* Minus icon for indeterminate checkboxes */
-  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); /* Dropdown arrow for <select> elements */
-  --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); /* Calendar icon for date inputs */
-  --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); /* Clock icon for time inputs */
-  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); /* Magnifying glass for search inputs */
-  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); /* X icon for close/dismiss actions (e.g. modal close button) */
-  --icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E"); /* Animated spinner for [aria-busy="true"] elements */
-
-  --sidebar-width: 25%; /* Sidebar width */
-}
-
-/* Responsive Font Sizes – progressively increase root font-size at wider viewports */
-@media (--breakpoint-sm) {
-  :root,
-  :host {
-    --font-size: 106.25%;
-    --sidebar-width: max(25%, 150px);
-    --responsive-multiplier: 1.25;
-  }
-}
-
-@media (--breakpoint-md) {
-  :root,
-  :host {
-    --font-size: 112.5%;
-    --sidebar-width: max(22%, 180px);
-    --responsive-multiplier: 1.5;
-  }
-}
-
-@media (--breakpoint-lg) {
-  :root,
-  :host {
-    --font-size: 118.75%;
-    --sidebar-width: max(20%, 200px);
-    --responsive-multiplier: 1.75;
-  }
-}
-
-@media (--breakpoint-xl) {
-  :root,
-  :host {
-    --font-size: 125%;
-    --sidebar-width: max(18%, 220px);
-    --responsive-multiplier: 2;
-  }
-}
-
-@media (--breakpoint-xxl) {
-  :root,
-  :host {
-    --font-size: 131.25%;
-    --sidebar-width: clamp(240px, 16%, 300px);
-    --responsive-multiplier: 2.25;
-  }
-}

package/src/variants/_card.css

@@ -1,45 +0,0 @@
-/**
- * Card (.card)
- * A container component for grouped content with visual card styling
- * Can be applied to any element (article, div, section, etc.)
- */
-.card {
-  --block-spacing-vertical: calc(var(--spacing) * var(--responsive-multiplier));
-  --block-spacing-horizontal: calc(var(--spacing) * var(--responsive-multiplier));
-
-  margin-bottom: var(--block-spacing-vertical);
-  padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
-  border-radius: var(--border-radius);
-  background: var(--card-bg);
-  box-shadow: var(--card-shadow);
-
-  & > header,
-  & > footer {
-    width: calc(100% + var(--block-spacing-horizontal) * 2);
-    margin-right: calc(var(--block-spacing-horizontal) * -1);
-    margin-left: calc(var(--block-spacing-horizontal) * -1);
-    padding: calc(var(--block-spacing-vertical) * 0.66) var(--block-spacing-horizontal);
-    background-color: var(--card-section-bg);
-  }
-
-  & > header {
-    margin-top: calc(var(--block-spacing-vertical) * -1);
-    margin-bottom: var(--block-spacing-vertical);
-    border-bottom: var(--border-width) solid var(--card-border);
-    border-top-right-radius: var(--border-radius);
-    border-top-left-radius: var(--border-radius);
-  }
-
-  & > footer {
-    margin-top: var(--block-spacing-vertical);
-    margin-bottom: calc(var(--block-spacing-vertical) * -1);
-    border-top: var(--border-width) solid var(--card-border);
-    border-bottom-right-radius: var(--border-radius);
-    border-bottom-left-radius: var(--border-radius);
-  }
-
-  & > header > :last-child,
-  & > footer > :last-child {
-    margin-bottom: 0;
-  }
-}

package/src/variants/_flow.css

@@ -1,15 +0,0 @@
-.flow-h {
-  align-items: flex-start;
-  display: flex;
-  flex-direction: row;
-  flex-grow: 1;
-  justify-content: stretch;
-}
-
-.flow-v {
-  align-items: stretch;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  justify-content: flex-start;
-}

package/src/variants/_panel.css

@@ -1,18 +0,0 @@
-/**
- * Panel akin to a flat card.
- */
-.panel {
-  --block-spacing-vertical: calc(var(--spacing) * var(--responsive-multiplier));
-  --block-spacing-horizontal: calc(var(--spacing) * var(--responsive-multiplier));
-
-  --color-background: var(--card-bg);
-  --border-color: var(--card-border);
-  --color-text: var(--color-text);
-
-  background-color: var(--color-background);
-  border-radius: var(--border-radius);
-  border: var(--border-width) solid var(--border-color);
-  color: var(--color-text);
-  margin-bottom: var(--block-spacing-vertical);
-  padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
-}

package/src/variants/index.css

@@ -1,9 +0,0 @@
-/**
- * Semanticus CSS Variants
- * Class-based variant styles that extend semantic
- */
-
-/* Shared variables */
-@import '../variables/_shared.css';
-
-@import "./modules.css";