@adnap/krysalicss 0.0.1

package/src/module/field/_variables.scss

@@ -0,0 +1,26 @@
+@use "../../variables";
+
+$selector: ".field" !default;
+$label-selector: ".field__label" !default;
+$help-selector: ".field__help" !default;
+$invalid-selector: "#{variables.$selector-prefix-is}invalid" !default;
+$disabled-selector: "#{variables.$selector-prefix-is}disabled" !default;
+
+// Vertical rhythm: gap stacks label + control + help with consistent spacing.
+$gap: variables.$size-extra-small !default;
+
+// Help text de-emphasised vs. body copy.
+$help-font-size: 0.85em !default;
+$help-mix: 70% !default;
+
+// Bottom margin between adjacent fields. Equal to the global gap so successive
+// `.field`s in a flow read as a coherent stack.
+$margin-bottom: variables.$global-gap !default;
+
+// Non-colour cue prepended to the label when the field contains an invalid
+// control. Satisfies WCAG 1.4.1 (Use of Colour): the danger-tinted border
+// alone is colour-only AND only 2.8:1 in light theme (misses 1.4.11). The
+// glyph reuses the `--kc-state-icon-danger` custom-property hook from
+// `helper/state` so consumers swapping the global icon get it here too.
+// Trailing space is U+0020 so the icon visually separates from the label.
+$invalid-icon: "✕ " !default;

package/src/module/modal/_index.scss

@@ -0,0 +1,2 @@
+@forward "variables";
+@forward "plugin";

package/src/module/modal/_plugin.scss

@@ -0,0 +1,137 @@
+@use "sass:list";
+@use "variables" as *;
+@use "../../variables";
+
+@mixin _backdrop-styles {
+  @include variables.backgroundColor(modal-backdrop, $backdrop-color);
+  @if $backdrop-blur != 0 {
+    backdrop-filter: blur($backdrop-blur);
+    -webkit-backdrop-filter: blur($backdrop-blur);
+  }
+}
+
+@if variables.$feature-module-modal {
+  // `:target`-driven open state. `<a href="#dialog-id">` triggers the
+  // browser to skip `display: none` on the matched <dialog>. Pulled out of
+  // the framework when `$controls` doesn't include `'css'`.
+  @if variables.has-controls("css", $controls) {
+    // Reserve scrollbar gutter on any page containing a modal so opening a
+    // :target-opened modal (which sets `overflow: hidden` to lock background
+    // scroll) doesn't yank the scrollbar away and shift page content right.
+    // showModal() doesn't need this because the UA handles scroll lock
+    // internally without touching layout.
+    html:has(#{$selector}) {
+      scrollbar-gutter: stable;
+    }
+
+    // Backdrop + scroll lock for :target-opened modals. The backdrop pseudo
+    // lives on `html`, NOT on the dialog itself: keeping it outside the
+    // dialog's stacking context matches how the UA's ::backdrop sits
+    // relative to a showModal()-opened dialog. If the backdrop pseudo sat
+    // inside the dialog (z-index: -1 under z-index: 100), the dialog's
+    // `box-shadow` would paint in the same context, extending outside the
+    // dialog box and compositing with the backdrop below: a visibly darker
+    // ring around the modal that didn't appear on the showModal() version.
+    html:has(#{$selector}:target) {
+      overflow: hidden;
+
+      &::before {
+        content: "";
+        position: fixed;
+        inset: 0;
+        @include _backdrop-styles;
+        z-index: 99;
+        pointer-events: none;
+      }
+    }
+  }
+
+  #{$selector} {
+    @include variables.backgroundColor(
+      modal-bg,
+      list.nth($default-combination, 1),
+    );
+    @include variables.textColor(modal-fg, list.nth($default-combination, 2));
+    width: min(100% - 2rem, $max-width);
+    padding: $padding;
+    border: $border;
+    border-radius: $border-radius;
+    box-shadow: 0 12px 32px color-mix(in srgb, #000000 32%, transparent);
+
+    // Native `dialog::backdrop` for `showModal()`-opened dialogs. Only
+    // emitted when `$controls` includes `'js'`: a `:target`-only build
+    // never invokes `.showModal()`, so the UA pseudo never paints.
+    @if variables.has-controls("js", $controls) {
+      &::backdrop {
+        @include _backdrop-styles;
+      }
+    }
+
+    #{$content-selector} {
+      display: flex;
+      flex-direction: column;
+      gap: $gap;
+    }
+
+    #{$header-selector} {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: $gap;
+    }
+
+    #{$body-selector} {
+      flex: 1 1 auto;
+    }
+
+    #{$footer-selector} {
+      display: flex;
+      flex-wrap: wrap;
+      gap: $gap;
+      justify-content: flex-end;
+    }
+
+    // JS-free reveal + click-outside dismiss. Backdrop and scroll lock are
+    // emitted on `html` above so the dialog's stacking context stays clean
+    // (avoids the `box-shadow` + backdrop compositing ring). Trade-offs vs
+    // showModal() (no focus trap, no ESC-to-close, no inert background) are
+    // documented in the modal reference page.
+    @if variables.has-controls("css", $controls) {
+      &:target {
+        display: block;
+        // Match the UA `:modal` centring used by showModal()-opened dialogs:
+        // fixed, all four insets at 0, then margin: auto distributes the
+        // leftover viewport space on both axes around the content-sized
+        // dialog. Same anchor point and same pixel rounding as the JS path,
+        // so the two demos are visually identical.
+        position: fixed;
+        inset: 0;
+        margin: auto;
+        // Width is shared with the base rule; height shrinks to content so
+        // margin-block: auto can distribute vertical space.
+        height: fit-content;
+        z-index: 100;
+
+        // Opt-in click-outside-to-close. The consumer adds an
+        // `<a href="#" class="modal__dismiss" aria-label="Close"></a>`
+        // anywhere inside the dialog; it stretches to cover the viewport
+        // behind the content and a click navigates the hash away.
+        #{$dismiss-selector} {
+          display: block;
+          position: fixed;
+          inset: 0;
+          z-index: -1;
+        }
+      }
+
+      // The dismiss anchor is irrelevant outside the `:target` open path
+      // (showModal() consumers use ESC or a close button); collapse it so
+      // it doesn't claim layout while the modal is closed or
+      // showModal()-opened. Paired with `:target` above so a JS-only build
+      // doesn't bother emitting the rule.
+      #{$dismiss-selector} {
+        display: none;
+      }
+    }
+  }
+}

package/src/module/modal/_variables.scss

@@ -0,0 +1,39 @@
+@use "../../variables";
+
+$selector: ".modal" !default;
+$content-selector: ".modal__content" !default;
+$header-selector: ".modal__header" !default;
+$body-selector: ".modal__body" !default;
+$footer-selector: ".modal__footer" !default;
+
+// Optional click-outside dismiss anchor for the `:target` open path.
+// When the consumer places `<a href="#" class="modal__dismiss"></a>`
+// inside the dialog, it stretches to fill the viewport behind the
+// content and clicking it navigates the hash away (closing the modal).
+$dismiss-selector: ".modal__dismiss" !default;
+
+$max-width: 32rem !default;
+$padding: variables.$size-normal !default;
+$gap: variables.$size-small !default;
+$border-radius: variables.$global-border-radius !default;
+
+// `<dialog>` UA styles place a thin black border on Chromium; reset it.
+$border: 0 !default;
+
+// Backdrop tint. SCSS literal here is the fallback; the plugin layers the
+// `--kc-modal-backdrop` custom property over it so themes can flip the
+// backdrop per scheme (dark theme uses a translucent-light wash so the
+// dark surface stands out) without recompiling consumers.
+$backdrop-color: color-mix(in srgb, #000000 55%, transparent) !default;
+
+// Blur applied to content behind the backdrop. Set to `0` to disable.
+$backdrop-blur: 6px !default;
+
+$default-combination: variables.$color-combination-default !default;
+
+// Reveal mechanism for the modal. `'css'` emits the JS-free `:target` path
+// (backdrop, scroll lock, centring, click-outside dismiss). `'js'` emits the
+// `dialog[open]` companion plus the native `::backdrop` pseudo for
+// `showModal()`-opened dialogs. Defaults to `$global-controls`; override to
+// `'js'` for a JS-only build that strips the `:target` rules.
+$controls: variables.$global-controls !default;

package/src/module/navbar/_index.scss

@@ -0,0 +1,2 @@
+@forward "variables";
+@forward "plugin";

package/src/module/navbar/_plugin.scss

@@ -0,0 +1,186 @@
+@use "sass:list";
+@use "variables" as *;
+@use "../../variables";
+@use "../../helper/breakpoints" as breakpoints;
+
+@if variables.$feature-module-navbar {
+  #{$selector} {
+    // Track (--kc-bg, --kc-fg) by default so the navbar follows the active
+    // theme. Pre-fix the navbar pinned to the default combination
+    // (white, near-black) regardless of theme, which painted near-black
+    // text on a near-black header in dark themes (1.25:1, WCAG 1.4.3 fail).
+    // To restore brand-pinned behaviour, use a combination modifier
+    // (`<nav class="navbar is-primary">`) or override --kc-navbar-bg /
+    // --kc-navbar-fg directly.
+    @include variables.backgroundColor(
+      navbar-bg,
+      var(--kc-bg, #{list.nth($default-combination, 1)}),
+    );
+    @include variables.textColor(
+      navbar-fg,
+      var(--kc-fg, #{list.nth($default-combination, 2)}),
+    );
+    display: flex;
+    align-items: center;
+    gap: $gap;
+    padding: $padding-y $padding-x;
+    border-radius: $border-radius;
+
+    // Shared affordance for any anchor / button / label that acts as
+    // navigation chrome (brand + items). Without this the brand inherits
+    // the global `<a>` underline and `--kc-link` colour, which clashes
+    // with the navbar surface — and goes near-invisible against pinned
+    // brand backgrounds (`.is-primary` paints `--kc-link` on its own
+    // base colour).
+    #{$brand-selector},
+    #{$link-selector} {
+      display: inline-block;
+      padding: $item-padding-y $item-padding-x;
+      border-radius: $border-radius;
+      text-decoration: none;
+      color: inherit;
+
+      &:focus-visible {
+        outline: $focus-outline-width $focus-outline-style
+          var(--kc-focus-ring, currentColor);
+        outline-offset: $focus-outline-offset;
+      }
+
+      &:hover {
+        background: $hover-bg;
+      }
+    }
+
+    #{$brand-selector} {
+      font-weight: 600;
+      flex: 0 0 auto;
+    }
+
+    #{$menu-selector} {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-wrap: wrap;
+      gap: $gap;
+      flex: 1 1 auto;
+    }
+
+    #{$item-selector} {
+      position: relative;
+    }
+
+    #{$link-selector} {
+      // When the navbar link is a <button> (typical for a dropdown trigger),
+      // opt out of the framework's `button, .button` defaults so it reads
+      // as a menu item, not a chunky button. Overrides background, border,
+      // min-width, font, and cursor that the button rule would otherwise
+      // apply at equal specificity.
+      background: transparent;
+      border: 0;
+      min-width: 0;
+      font: inherit;
+      cursor: pointer;
+    }
+
+    #{$item-selector}#{$has-dropdown-modifier} {
+      // Visually hide the toggle but keep it focusable / clickable via the
+      // paired <label for>. Same clip-rect technique as `tabs/_plugin.scss`.
+      #{$dropdown-toggle-selector} {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+      }
+
+      #{$dropdown-selector} {
+        display: none;
+        position: absolute;
+        inset-block-start: 100%;
+        inset-inline-start: 0;
+        min-width: $dropdown-min-width;
+        padding: $dropdown-padding;
+        margin: 0;
+        list-style: none;
+        border-radius: $border-radius;
+        // Track (--kc-bg, --kc-fg) so the dropdown panel matches the
+        // active theme. The navbar surface itself was made theme-reactive
+        // earlier; the dropdown panel was left pinned to the default
+        // combination, which painted white-on-near-black in dark theme
+        // against a dark navbar (visually jarring, near-illegible).
+        @include variables.backgroundColor(
+          navbar-dropdown-bg,
+          var(--kc-bg, #{list.nth($default-combination, 1)}),
+        );
+        @include variables.textColor(
+          navbar-dropdown-fg,
+          var(--kc-fg, #{list.nth($default-combination, 2)}),
+        );
+        border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+        box-shadow: 0 4px 12px
+          color-mix(in srgb, currentColor 18%, transparent);
+        z-index: 10;
+      }
+
+      @if variables.has-controls("css", $controls) {
+        &:has(#{$dropdown-toggle-selector}:checked) #{$dropdown-selector} {
+          display: block;
+        }
+      }
+
+      @if variables.has-controls("js", $controls) {
+        &:has([aria-expanded="true"]) #{$dropdown-selector} {
+          display: block;
+        }
+      }
+
+      @if variables.has-controls("css", $controls) {
+        &#{$hoverable-modifier} {
+          &:hover #{$dropdown-selector},
+          &:focus-within #{$dropdown-selector} {
+            display: block;
+          }
+        }
+      }
+    }
+
+    #{$toggle-selector} {
+      display: none;
+      flex: 0 0 auto;
+      margin-inline-start: auto;
+    }
+
+    @include breakpoints.until($mobile-breakpoint) {
+      flex-wrap: wrap;
+
+      #{$toggle-selector} {
+        display: inline-block;
+      }
+
+      // The default mobile layout assumes the menu is wrapped in a
+      // `<details>` so its `<summary>` provides the toggle. The menu sits
+      // below the brand row and stacks vertically.
+      #{$menu-selector} {
+        flex-direction: column;
+        flex-basis: 100%;
+        gap: $item-padding-y;
+      }
+
+      #{$item-selector}#{$has-dropdown-modifier} #{$dropdown-selector} {
+        position: static;
+        box-shadow: none;
+        border: 0;
+      }
+    }
+
+    @include variables.combinations using ($label, $tuple) {
+      @include variables.backgroundColor(#{$label}-bg, list.nth($tuple, 1));
+      @include variables.textColor(#{$label}-fg, list.nth($tuple, 2));
+    }
+  }
+}

package/src/module/navbar/_variables.scss

@@ -0,0 +1,49 @@
+@use "../../variables";
+
+$selector: ".navbar" !default;
+$brand-selector: ".navbar__brand" !default;
+$menu-selector: ".navbar__menu" !default;
+$item-selector: ".navbar__item" !default;
+$link-selector: ".navbar__link" !default;
+$dropdown-selector: ".navbar__dropdown" !default;
+$toggle-selector: ".navbar__toggle" !default;
+$dropdown-toggle-selector: ".navbar__dropdown-toggle" !default;
+$hoverable-modifier: ".hoverable" !default;
+
+// Modifier on `$item-selector` that opts the row into a focus-within
+// dropdown. Without it, items render inline only: adding the dropdown
+// styles unconditionally would force every link into an over-tall row.
+$has-dropdown-modifier: ".has-dropdown" !default;
+
+// Below this device, the menu collapses behind a `<details>` toggle.
+// Above, it renders inline horizontally.
+$mobile-breakpoint: tablet !default;
+
+$gap: variables.$global-gap !default;
+$padding-y: variables.$size-small !default;
+$padding-x: variables.$size-normal !default;
+$item-padding-y: variables.$size-extra-small !default;
+$item-padding-x: variables.$size-small !default;
+$border-radius: variables.$global-border-radius !default;
+
+$focus-outline-width: variables.$global-focus-outline-width !default;
+$focus-outline-style: variables.$global-focus-outline-style !default;
+$focus-outline-offset: variables.$global-focus-outline-offset !default;
+
+// Subtle on-hover backdrop tint for links + brand. `currentColor` is
+// theme-reactive (it follows the navbar fg), and the low alpha keeps
+// the affordance unobtrusive against any combination surface.
+$hover-bg: color-mix(in srgb, currentColor 8%, transparent) !default;
+
+// Stack distance for an open dropdown panel; mirrors `.card`'s edge so
+// the menu visually clears the trigger row without a manual offset.
+$dropdown-min-width: 12rem !default;
+$dropdown-padding: variables.$size-extra-small !default;
+
+$default-combination: variables.$color-combination-default !default;
+
+// Reveal mechanism for the dropdown panel. Defaults to the framework-wide
+// `$global-controls`, but can be retuned per-component (e.g. ship the
+// navbar with JS hooks only while the rest of the framework keeps the CSS
+// branch).
+$controls: variables.$global-controls !default;

package/src/module/tabs/_index.scss

@@ -0,0 +1,2 @@
+@forward "variables";
+@forward "plugin";

package/src/module/tabs/_plugin.scss

@@ -0,0 +1,106 @@
+@use "sass:list";
+@use "variables" as *;
+@use "../../variables";
+@use "../../helper/controls" as controls;
+
+// JS-free pattern. Markup contract: each tab is a flat sequence of
+// input → label → panel siblings inside `.tabs`. The visible panel is
+// the one immediately following the checked input's label.
+//
+//   <div class="tabs">
+//     <input class="tabs__input" type="radio" name="t" id="t-1" checked>
+//     <label class="tabs__tab" for="t-1">One</label>
+//     <div class="tabs__panel">Panel 1</div>
+//
+//     <input class="tabs__input" type="radio" name="t" id="t-2">
+//     <label class="tabs__tab" for="t-2">Two</label>
+//     <div class="tabs__panel">Panel 2</div>
+//   </div>
+//
+// This avoids per-index enumeration: the adjacent-sibling chain
+// `input:checked + label + panel` matches whichever pair is active,
+// regardless of how many tabs the markup contains.
+
+@if variables.$feature-module-tabs {
+  #{$selector} {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $gap;
+
+    // Visually hidden but kept focusable / clickable via the paired
+    // <label for>. position: absolute takes the input out of flex flow
+    // so it doesn't claim a row of its own.
+    #{$input-selector} {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    #{$tab-selector} {
+      display: inline-block;
+      padding: $padding-y $padding-x;
+      // Top corners only: the bottom edge sits on the active-tab underline.
+      // `border-start-start-radius` / `border-start-end-radius` keep that
+      // shape correct in any writing-mode (top corners flip with vertical-rl).
+      border-start-start-radius: $border-radius;
+      border-start-end-radius: $border-radius;
+      // Explicitly square the bottom corners so a `<button class="tabs__tab">`
+      // (JS-enhanced WAI-ARIA tablist variant) doesn't inherit the UA's
+      // four-corner radius and end up shaped differently from a `<label>`.
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+      cursor: pointer;
+      // Reset the UA chrome so `<button>` and `<label>` render identically:
+      // transparent fill (no UA "ButtonFace" + hover bg), inherited typography
+      // (UA forces small-caps font on buttons), and only the active-tab
+      // underline as a visible edge.
+      appearance: none;
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      border: 0;
+      border-block-end: 2px solid transparent;
+      user-select: none;
+    }
+
+    #{$input-selector}:checked + #{$tab-selector} {
+      @include variables.backgroundColor(
+        tabs-active-bg,
+        list.nth($active-combination, 1),
+      );
+      @include variables.textColor(
+        tabs-active-fg,
+        list.nth($active-combination, 2),
+      );
+      border-block-end-color: currentColor;
+    }
+
+    #{$input-selector}:focus-visible + #{$tab-selector} {
+      @include controls.focus-ring();
+    }
+
+    // `order: 999` keeps every panel after all tabs in the visual flex
+    // order, regardless of DOM position. flex: 1 1 100% claims the whole
+    // row, so the visible panel wraps to its own line beneath the tab
+    // strip; hidden panels (display: none) are out of flow.
+    #{$panel-selector} {
+      order: 999;
+      flex: 1 1 100%;
+      padding: $panel-padding;
+      display: none;
+    }
+
+    // Single reveal rule, no enumeration: when an input is checked, the
+    // immediately-following label and that label's immediately-following
+    // panel paint. Works for any number of tabs.
+    #{$input-selector}:checked + #{$tab-selector} + #{$panel-selector} {
+      display: block;
+    }
+  }
+}

package/src/module/tabs/_variables.scss

@@ -0,0 +1,16 @@
+@use "../../variables";
+
+$selector: ".tabs" !default;
+$input-selector: ".tabs__input" !default;
+$tab-selector: ".tabs__tab" !default;
+$panel-selector: ".tabs__panel" !default;
+
+$gap: variables.$size-extra-small !default;
+$padding-y: variables.$size-small !default;
+$padding-x: variables.$size-small !default;
+$border-radius: variables.$global-border-radius !default;
+$panel-padding: variables.$size-normal !default;
+
+// Active tab adopts the default combination; inactive tabs stay
+// transparent so the row reads as an underline list.
+$active-combination: variables.$color-combination-default !default;

package/src/theme/_create.scss

@@ -0,0 +1,74 @@
+@use "sass:list";
+@use "sass:map";
+@use "../variables/color" as color;
+@use "../variables/default" as default-vars;
+
+// Single source of truth for the custom-property prefix lives in
+// variables/_default.scss; kept here as a forwarded alias only.
+$prefix: default-vars.$prefix;
+
+// $name              theme name string. Reserved for diagnostics; currently
+//                      unused but kept for API stability.
+// $variables         map of scalar token short-name → value (no `--kc-`
+//                      prefix). Optional — keys absent from the map are not
+//                      emitted; consumers fall back to each component's
+//                      hardcoded SCSS-time default. Typos produce silent
+//                      partial themes, not compile errors.
+// $combinations      map of combination label → (bg, fg) tuple. Optional;
+//                      same fallback semantics. Use
+//                      `map.merge(variables.$color-combinations, …)` to
+//                      override individual entries while keeping the rest.
+// $is-default        emit unconditionally on :root when true.
+// $root-when         optional media-query string ("prefers-color-scheme: dark");
+//                      when set, tokens are also emitted under that @media :root.
+// $modifier-class    optional class selector (".theme-dark"); when set, tokens
+//                      are also emitted there for explicit overrides.
+@mixin theme(
+  $name,
+  $variables: (),
+  $combinations: (),
+  $is-default: false,
+  $root-when: null,
+  $modifier-class: null,
+) {
+  // When a theme ships its own `$combinations` map, surface any key drift
+  // against the canonical roster as a `@warn`. Silent partial-themes are
+  // intentional (consumers may opt out of certain combinations), so this
+  // is non-fatal — but a missing `success` / `warning` / `danger` key on
+  // a theme that's otherwise complete is almost always a typo.
+  @if list.length(map.keys($combinations)) > 0 {
+    @each $key in color.$combinations-keys {
+      @if not map.has-key($combinations, $key) {
+        @warn 'theme(#{$name}): $combinations is missing key "#{$key}"; consumers will fall back to component defaults for `.is-#{$key}`.';
+      }
+    }
+  }
+
+  @if $is-default {
+    :root {
+      @include _emit($variables, $combinations);
+    }
+  }
+  @if $root-when {
+    @media (#{$root-when}) {
+      :root {
+        @include _emit($variables, $combinations);
+      }
+    }
+  }
+  @if $modifier-class {
+    #{$modifier-class} {
+      @include _emit($variables, $combinations);
+    }
+  }
+}
+
+@mixin _emit($variables, $combinations) {
+  @each $key, $value in $variables {
+    #{$prefix}#{$key}: #{$value};
+  }
+  @each $label, $tuple in $combinations {
+    #{$prefix}#{$label}-bg: #{list.nth($tuple, 1)};
+    #{$prefix}#{$label}-fg: #{list.nth($tuple, 2)};
+  }
+}