@toybreaker/fiko 0.6.4 → 0.7.0

package/index.css

@@ -50,5 +50,7 @@
 @import url(omg/utils/aspect.css) layer(utilities);
 @import url(omg/utils/gradients.css) layer(utilities);
 @import url(omg/utils/misc.css) layer(utilities);
+@import url(omg/utils/animation.css) layer(utilities);
+@import url(omg/utils/transitions.css) layer(utilities);
 
 @import url(omg/utils/fiko.css) layer(utilities);

package/omg/0reset.css

@@ -10,7 +10,8 @@
   background-repeat: no-repeat;
 }
 
-html {
+html,
+body {
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
   scroll-behavior: smooth;

package/omg/1vars.css

@@ -3,6 +3,8 @@
 /* Brand palette overrides live in branding/palette.css */
 
 :root {
+  color-scheme: light dark;
+
   /* ── COLOR NEUTRALS ──────────────────────────── */
   --dark:    oklch(0.20 0 0);
   --darkT25: color-mix(in oklch, var(--dark),  transparent 75%);
@@ -19,10 +21,15 @@
   /* ── SIZING ─────────────────────────────────── */
   --tap_size:             clamp(42px, 5vw, 52px);
   --radius:               6px;
-  --borderpx:             3px;
+  --radius_sm:            3px;
+  --borderpx:             1px;
   --sticky_header_height: 88px;  /* override in 000/ per client */
+  --sticky_z:             20;
   --maximise:             -1.5rem; /* negative container bleed  */
 
+  /* ── TYPOGRAPHY EXTRAS ───────────────────────── */
+  --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
+
   /* ── SPACING ─────────────────────────────────── */
   --spaceH: 1.75svw;
   --spaceV: 1.5svh;

package/omg/3base.css

@@ -90,7 +90,7 @@ blockquote {
 
 cite {
     display: block;
-    padding-top: var(--spaceV);
+    padding-block-start: var(--spaceV);
     font-size: 77%;
     text-transform: capitalize;
 }

package/omg/4layout.css

@@ -1,126 +1,42 @@
 /*! 🐉 404.css | MIT License */
-/* 4layout.css */
+/* 4layout.css — semantic element layout defaults */
 
-/* Container implementation using container queries */
-.container {
-  /* Container query setup */
-  container-type: inline-size;
-  container-name: main-container;
+/* ── NAV ────────────────────────────────────────── */
+/* Single scrollable row, no visible scrollbar */
 
-  /* Simplified width calculation using the pre-defined container width variables */
-  width: min(100% - (var(--breath) * 2), var(--container_xl));
-  margin-inline: auto;
-}
-
-/* Modern grid system with CSS Grid */
-.grid {
-  display: grid;
-  grid-template-columns: repeat(var(--grid_cols, 1), 1fr);
-  gap: var(--breath);
-}
-
-/* Responsive grid using container queries
-     This leverages the breakpoint variables defined in 1vars.css */
-@container main-container (min-width: var(--bp_sm)) {
-  .grid {
-    --grid_cols: 2;
-  }
-}
-
-@container main-container (min-width: var(--bp_md)) {
-  .grid {
-    --grid_cols: 3;
-  }
-}
-
-@container main-container (min-width: var(--bp_lg)) {
-  .grid {
-    --grid_cols: 4;
-  }
+nav {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: var(--spaceH);
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;    /* Firefox */
 }
 
-/* Modern navigation layout */
-nav {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1px;
+nav::-webkit-scrollbar {
+    display: none;            /* Chrome / Safari */
 }
 
 nav ul,
 nav ol {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 0;
-  margin: 0;
-  list-style: none;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: var(--spaceH);
+    padding: 0;
+    margin: 0;
+    list-style: none;
 }
 
 nav li {
-  display: flex;
-  align-items: center;
-}
-
-/* Optional: Add responsive navigation behavior */
-@container main-container (max-width: var(--bp_sm)) {
-  nav {
-    flex-direction: column;
-  }
-
-  nav ul,
-  nav ol {
-    flex-direction: column;
-    width: 100%;
-  }
-}
-
-/* ── BENTO BOX ──────────────────────────────────── */
-/* Mosaic product grid. Wrap cards in <div class="bento">
- *
- * Token-driven: adjust --bento_cols / --bento_rows at any level.
- * aspect-ratio keeps cells proportional automatically.
- * grid-auto-flow: dense fills gaps — add items in any order.
- *
- * Quick override examples:
- *   style="--bento_cols:4; --bento_rows:2"   → 4×2 landscape
- *   style="--bento_cols:2; --bento_rows:4"   → 2×4 portrait
- *
- * Span modifiers on children:
- *   .bento_col_2 / .bento_col_3   → span N columns
- *   .bento_row_2 / .bento_row_3   → span N rows
- *   .bento_full                    → full width
- */
-
-.bento {
-  --bento_cols: 3;
-  --bento_rows: 3;
-  display: grid;
-  grid-template-columns: repeat(var(--bento_cols), 1fr);
-  grid-template-rows: repeat(var(--bento_rows), 1fr);
-  grid-auto-flow: dense;
-  gap: calc(var(--spaceV) * 0.5) calc(var(--spaceH) * 0.5);
-  width: 100%;
-  aspect-ratio: var(--bento_cols) / var(--bento_rows);
-}
-
-/* Featured first child: 2×2 */
-.bento > :first-child { grid-column: span 2; grid-row: span 2; }
-
-/* ── Span modifiers ─────────────────────────────── */
-.bento > .bento_col_2  { grid-column: span 2; }
-.bento > .bento_col_3  { grid-column: span 3; }
-.bento > .bento_full   { grid-column: 1 / -1; }
-.bento > .bento_row_2  { grid-row: span 2; }
-.bento > .bento_row_3  { grid-row: span 3; }
-
-/* ── Responsive defaults ────────────────────────── */
-@container main-container (max-width: 479px) {
-  .bento { --bento_cols: 1; --bento_rows: 6; }
-  .bento > :first-child { grid-column: span 1; grid-row: span 1; }
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    white-space: nowrap;
 }
 
-@container main-container (min-width: 480px) and (max-width: 639px) {
-  .bento { --bento_cols: 2; --bento_rows: 4; }
-  .bento > :first-child { grid-column: span 2; grid-row: span 2; }
+nav a {
+    white-space: nowrap;
 }

package/omg/5components.css

@@ -1,7 +1,8 @@
 /*! 🐉 404.css | MIT License */
-/* 5components.css — interactive elements */
+/* 5components.css — interactive element defaults and component classes */
+
+/* ── BUTTON / INPUT ─────────────────────────────── */
 
-/* BUTTON / INPUT — shape & layout */
 button,
 .button input[type="submit"],
 input[type="button"],
@@ -26,7 +27,7 @@ input[type="reset"],
     user-select: none;
 }
 
-/* BUTTON CLASS — wraps a <button> inside an <a> */
+/* .button — wraps a <button> inside an <a> */
 .button {
     border: none;
     border-radius: var(--radius);
@@ -45,7 +46,8 @@ button:hover {
     transform: translateY(3px);
 }
 
-/* LINK defaults */
+/* ── LINK ───────────────────────────────────────── */
+
 a:not(.underline),
 [role="link"] {
     outline: none;
@@ -71,7 +73,9 @@ a input[type="reset"] {
     user-select: none;
 }
 
-/* CTA BUTTON — filled, primary action */
+/* ── CTA BUTTON ─────────────────────────────────── */
+/* .button_cta — filled primary action */
+
 .button_cta button {
     background-color: var(--cta);
     border-color: var(--cta);
@@ -82,12 +86,15 @@ a input[type="reset"] {
     border-color: var(--cta_hover);
 }
 
-/* SVG overflow fix */
+/* ── SVG ────────────────────────────────────────── */
+
 svg:not(:root) {
     overflow: hidden;
 }
 
-/* STICKY HEADER */
+/* ── CONTROLS ───────────────────────────────────── */
+/* Sticky header shell — fixed height for layout stability */
+
 .controls {
     height: var(--sticky_header_height);
     min-height: var(--sticky_header_height);
@@ -100,90 +107,14 @@ svg:not(:root) {
     z-index: 20;
 }
 
-/* ── HEADING SCALE ──────────────────────────────── */
-
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6 {
-    user-select: none !important;
-    line-height: 1.2 !important;
-    font-family: var(--font_family) !important;
-}
-.h1 {
-    font-size: calc(var(--font_size) * 2.5) !important;
-    font-weight: var(--weight_light) !important;
-}
-.h2 {
-    font-size: calc(var(--font_size) * 2) !important;
-    font-weight: var(--weight_light) !important;
-}
-.h3 {
-    font-size: calc(var(--font_size) * 1.75) !important;
-    font-weight: var(--weight_thin) !important;
-}
-.h4 {
-    font-size: calc(var(--font_size) * 1.5) !important;
-    font-weight: var(--weight_thin) !important;
-}
-.h5 {
-    font-size: calc(var(--font_size) * 1.25) !important;
-    font-weight: var(--weight_thin) !important;
-}
-.h6 {
-    font-size: calc(var(--font_size) * 1) !important;
-    font-weight: var(--weight_light) !important;
-}
-
-/* ── TEXT UTILITIES ─────────────────────────────── */
-
-.dim {
-    color: var(--text);
-    font-size: calc(var(--font_size) * 0.95);
-}
-
-.underline {
-    text-decoration: underline;
-    text-underline-offset: 3px;
-}
-
-.prose {
-    max-width: 66ch;
-    margin-inline: auto;
-}
-
-.typewriter {
-    font-family: var(--font_serif);
-}
-
-.cat {
-    text-transform: capitalize;
-}
-
-/* ── LAYOUT UTILITIES ───────────────────────────── */
-
-.maximise {
-    margin-left: var(--maximise);
-    margin-right: var(--maximise);
-}
-
-.clipped_circle {
-    clip-path: circle(50px at center);
-}
-
 /* ── ACCORDION ──────────────────────────────────── */
 /* Usage: <details class="accordion"><summary>Title</summary><div>…</div></details>
- * Icon tokens: --accordion_icon_open / --accordion_icon_closed (default + / ×)
- * Override per-element: style="--accordion_icon_closed: '▶'; --accordion_icon_open: '▼'"
+ * Chevron rotates 180° when open. Use .dotted modifier for dot-leader.
+ * Use .accordion_chevron modifier for right-pointing arrow style.
  */
 
-details.accordion {
-    border-bottom: var(--borderpx) solid var(--border_color);
-}
-
 details.accordion > summary {
+    border-bottom: var(--borderpx) solid var(--border_color);
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -228,7 +159,7 @@ details.accordion > summary::after {
     transform: rotate(0deg);
     transition: transform var(--transition);
     order: 2;
-    margin-left: auto;
+    margin-inline-start: auto;
 }
 
 details.accordion[open] > summary::after {
@@ -243,66 +174,193 @@ details.accordion > :not(summary) {
     padding: var(--spaceV) var(--spaceH);
 }
 
-/* ── ACCORDION DOTTED — dot-leader modifier ─────── */
-/* Usage: <details class="accordion dotted">
+/* ── ACCORDION DOTTED ───────────────────────────── */
+/* Modifier: <details class="accordion dotted">
  * Adds a dotted leader between the label and the chevron.
  */
 
+details.accordion.dotted > summary {
+    border-bottom: none;
+}
+
 details.accordion.dotted > summary::before {
     content: "";
     flex: 1;
-    border-bottom: var(--borderpx) dotted currentColor;
+    border-bottom: max(2px, var(--borderpx)) dotted currentColor;
     margin-inline: 0.5rem;
     align-self: center;
     opacity: 0.3;
     order: 1;
 }
 
-/* ── ACCORDION CHEVRON — SVG arrow marker ────────── */
-/* Modifier: <details class="accordion accordion_chevron">
- * Overrides default down-chevron with a right-pointing SVG arrow.
- * Closed: → pointing right. Open: rotated 90° pointing down.
- * Composable: stack with other modifiers for full editorial style.
- * Color: currentColor by default; override with CSS custom property.
+/* ── ACCORDION PLUS/MINUS ───────────────────────── */
+/* Modifier: <details class="accordion accordion_pm">
+ * Plus when closed, minus when open. No rotation — clean toggle symbol.
  */
 
-details.accordion.accordion_chevron > summary::after,
-details.accordion.accordion_chevron[open] > summary::after {
+details.accordion.accordion_pm > summary::after {
+    content: "+";
+    background-color: transparent;
+    -webkit-mask-image: none;
+    mask-image: none;
+    width: auto;
+    height: auto;
+    font-size: 1.75em;
+    font-weight: var(--weight_thin);
+    line-height: 1;
+    color: var(--primary);
+    transition: color var(--transition);
+    transform: none;
+}
+
+details.accordion.accordion_pm[open] > summary::after {
+    content: "−";
+    transform: none;
+}
+
+/* ── FORM ELEMENTS ──────────────────────────────── */
+/* Inputs, textarea, select. Wrap with .field for labelled stacks. */
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="url"],
+input[type="number"],
+input[type="date"],
+select {
+    height: var(--tap_size);
+    padding-inline: var(--spaceH);
+    padding-block: var(--spaceV);
+    border: var(--borderpx) solid var(--border_color);
+    border-radius: var(--radius);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    outline: none;
+    transition: border-color var(--transition);
+    width: 100%;
+}
+
+textarea {
+    min-height: calc(var(--tap_size) * 2);
+    padding-inline: var(--spaceH);
+    padding-block: var(--spaceV);
+    border: var(--borderpx) solid var(--border_color);
+    border-radius: var(--radius);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    outline: none;
+    resize: vertical;
+    transition: border-color var(--transition);
+    width: 100%;
+}
+
+/* focus — highlight border, suppress default outline (reset handles :focus-visible) */
+input[type="text"]:focus-visible,
+input[type="email"]:focus-visible,
+input[type="password"]:focus-visible,
+input[type="search"]:focus-visible,
+input[type="tel"]:focus-visible,
+input[type="url"]:focus-visible,
+input[type="number"]:focus-visible,
+input[type="date"]:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+    border-color: var(--primary);
+}
+
+/* disabled */
+input[type="text"]:disabled,
+input[type="email"]:disabled,
+input[type="password"]:disabled,
+input[type="search"]:disabled,
+input[type="tel"]:disabled,
+input[type="url"]:disabled,
+input[type="number"]:disabled,
+input[type="date"]:disabled,
+textarea:disabled,
+select:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+}
+
+/* invalid — semantic red (OKLCH) */
+input[type="text"]:invalid,
+input[type="email"]:invalid,
+input[type="password"]:invalid,
+input[type="search"]:invalid,
+input[type="tel"]:invalid,
+input[type="url"]:invalid,
+input[type="number"]:invalid,
+input[type="date"]:invalid,
+textarea:invalid,
+select:invalid,
+input[type="text"][aria-invalid="true"],
+input[type="email"][aria-invalid="true"],
+input[type="password"][aria-invalid="true"],
+input[type="search"][aria-invalid="true"],
+input[type="tel"][aria-invalid="true"],
+input[type="url"][aria-invalid="true"],
+input[type="number"][aria-invalid="true"],
+input[type="date"][aria-invalid="true"],
+textarea[aria-invalid="true"],
+select[aria-invalid="true"] {
+    border-color: oklch(0.6 0.22 25);
+}
+
+/* select — hide native arrow, inject currentColor chevron via mask */
+select {
+    appearance: none;
+    -webkit-appearance: none;
+    padding-inline-end: calc(var(--spaceH) + 1.75em);
+    background-image: none;
+    /* chevron pseudo not possible on replaced elements; use wrapper .select_wrap instead */
+}
+
+/* .select_wrap — wraps <select> to inject a currentColor chevron via ::after */
+.select_wrap {
+    position: relative;
+    display: inline-flex;
+    width: 100%;
+}
+
+.select_wrap select {
+    width: 100%;
+}
+
+.select_wrap::after {
     content: "";
-    display: block;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: var(--spaceH);
     width: 1.25em;
     height: 1.25em;
-    flex-shrink: 0;
+    margin-block: auto;
     background-color: currentColor;
-    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 6L15 12L9 18'/%3E%3C/svg%3E");
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9'/%3E%3C/svg%3E");
     -webkit-mask-size: contain;
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-position: center;
-    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 6L15 12L9 18'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9'/%3E%3C/svg%3E");
     mask-size: contain;
     mask-repeat: no-repeat;
     mask-position: center;
-    transform: rotate(0deg);
-    transition:
-        transform 200ms ease,
-        background-color var(--transition);
-    line-height: 1;
-    font-size: 1em;
+    pointer-events: none;
 }
 
-details.accordion.accordion_chevron[open] > summary::after {
-    transform: rotate(90deg);
-}
+/* ── FIELD WRAPPER ──────────────────────────────── */
+/* Usage: <div class="field"><label>…</label><input …></div> */
 
-/* ── DOT LEADER ─────────────────────────────────── */
-/* Usage: <span class="dots"> between label and value in menus/TOC */
+.field {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spaceV) * 0.5);
+}
 
-.dots {
-    flex: 8;
-    border-bottom: var(--borderpx) dotted currentColor;
-    margin: 0 0 0 8px;
-    height: var(--borderpx);
-    position: relative;
-    top: 0;
-    opacity: 0.25;
+.field label {
+    font-weight: var(--weight_regular);
+    user-select: none;
 }

package/omg/utils/animation.css

@@ -0,0 +1,54 @@
+/*! 🐉 404.css | MIT License */
+/* utils/animation.css — @starting-style on-enter helpers */
+
+/* ── ENTER TRANSITIONS ── */
+/* Apply to any element that should animate in when first rendered.
+ * Requires a transition on the property being animated.
+ * Usage: <div class="fade_in"> or <dialog class="slide_up">
+ */
+
+.fade_in {
+    opacity: 1;
+    transition: opacity var(--transition);
+}
+@starting-style {
+    .fade_in {
+        opacity: 0;
+    }
+}
+
+.slide_up {
+    translate: 0 0;
+    opacity: 1;
+    transition: translate var(--transition), opacity var(--transition);
+}
+@starting-style {
+    .slide_up {
+        translate: 0 1rem;
+        opacity: 0;
+    }
+}
+
+.slide_down {
+    translate: 0 0;
+    opacity: 1;
+    transition: translate var(--transition), opacity var(--transition);
+}
+@starting-style {
+    .slide_down {
+        translate: 0 -1rem;
+        opacity: 0;
+    }
+}
+
+.scale_in {
+    scale: 1;
+    opacity: 1;
+    transition: scale var(--transition), opacity var(--transition);
+}
+@starting-style {
+    .scale_in {
+        scale: 0.95;
+        opacity: 0;
+    }
+}