@adnap/krysalicss 0.0.1

package/src/element/file/_plugin.scss

@@ -0,0 +1,45 @@
+@use "variables" as *;
+@use "../../variables";
+
+@if variables.$feature-element-file {
+  #{$selector} {
+    @include variables.backgroundColor(input-bg, transparent);
+    @include variables.textColor(input-fg, currentColor);
+    display: inline-block;
+    max-width: 100%;
+    padding: $padding-y $padding-x;
+    border: $border-width solid
+      color-mix(in srgb, currentColor #{$border-mix}, transparent);
+    border-radius: $border-radius;
+    font: inherit;
+    line-height: 1.4;
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: $focus-outline-width $focus-outline-style
+        var(--kc-fg, currentColor);
+      outline-offset: $focus-outline-offset;
+      border-color: var(--kc-fg, currentColor);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: $disabled-opacity;
+    }
+  }
+
+  // Vendor-specific button pseudo. Lives in its own rule block: listing
+  // ::file-selector-button alongside the standard selector causes browsers
+  // that don't recognise the pseudo to drop the entire selector list.
+  input[type="file"]::file-selector-button {
+    margin-inline-end: $padding-x;
+    padding: $button-padding-y $button-padding-x;
+    border: 1px solid
+      color-mix(in srgb, currentColor #{$border-mix}, transparent);
+    border-radius: $button-border-radius;
+    background-color: var(--kc-default-bg, transparent);
+    color: var(--kc-default-fg, currentColor);
+    font: inherit;
+    cursor: inherit;
+  }
+}

package/src/element/file/_variables.scss

@@ -0,0 +1,27 @@
+@use "sass:math";
+@use "../../variables";
+
+$selector: 'input[type="file"]' !default;
+
+$padding-y: variables.$size-extra-small !default;
+$padding-x: variables.$size-small !default;
+
+$border-radius: variables.$global-border-radius !default;
+$border-width: variables.$global-border-width !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;
+
+$disabled-opacity: variables.$global-disabled-opacity !default;
+$border-mix: variables.$global-border-mix !default;
+
+// Native UA chrome for the "Choose file" button differs (Chrome paints a
+// styled button, Safari paints plain bare text). Style only the wrapper:
+// portable, no surprises across browsers. Vendor pseudos (`::file-selector-
+// button`) get optional polish in their own rule blocks. The inner button
+// is intentionally tighter than a top-level `.button`; padding-y is half the
+// `extra-small` size token, padding-x rounds up to `small`.
+$button-padding-y: math.div(variables.$size-extra-small, 2) !default;
+$button-padding-x: variables.$size-small !default;
+$button-border-radius: variables.$global-border-radius !default;

package/src/element/progress/_index.scss

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

package/src/element/progress/_plugin.scss

@@ -0,0 +1,96 @@
+@use "sass:list";
+@use "sass:selector";
+@use "variables" as *;
+@use "../../variables";
+
+@if variables.$feature-element-progress {
+  #{$selector} {
+    // Native UA appearance varies wildly (bar in Chrome, ring in older Safari).
+    // Reset to a plain block so our rules below paint a consistent track.
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    display: block;
+    width: 100%;
+    height: $height;
+    border: none;
+    border-radius: $border-radius;
+    overflow: hidden;
+    // Track tint must derive from the page foreground, not currentColor:
+    // currentColor follows the combination fg (set below for .is-<combo>),
+    // and when that fg matches the page bg (e.g. white-on-white in default
+    // .is-primary, or black-on-black across every HC variant) the
+    // `color-mix(... transparent)` track collapses to the page bg and the
+    // bar disappears (WCAG 1.4.11 fails at 1:1). Using --kc-fg keeps the
+    // track aligned with the page contrast axis regardless of fill colour.
+    background-color: color-mix(
+      in srgb,
+      var(--kc-fg, currentColor) #{$track-mix},
+      transparent
+    );
+    // Bar fill resolves to combination BG (brand surface colour), not FG.
+    // Reason: FG is the text colour intended to read on top of BG; for
+    // progress the bar IS the visible surface, so BG carries the right
+    // semantic. Pre-fix, .is-primary's bar resolved to combination FG
+    // (white in default theme) and disappeared on a pale page bg
+    // (1.26:1, WCAG 1.4.11 fail). a11y audit, M2.
+    @include variables.textColor(default-bg, list.nth($default-combination, 1));
+
+    @include variables.combinations using ($label, $tuple) {
+      @include variables.textColor(#{$label}-bg, list.nth($tuple, 1));
+    }
+  }
+
+  // Vendor pseudo-elements MUST live in separate rule blocks: mixing
+  // ::-webkit-* and ::-moz-* in one selector list makes the engine that
+  // doesn't recognise the other pseudo drop the whole rule. Splitting
+  // keeps each rule independently parseable.
+  //
+  // selector.append() distributes the pseudo across every entry in the
+  // selector list (`progress, .progress` + `::-webkit-progress-bar` →
+  // `progress::-webkit-progress-bar, .progress::-webkit-progress-bar`).
+  // Naive interpolation `#{$selector}::pseudo` would attach the pseudo
+  // only to the last entry and leave the rest as bare selectors.
+  #{selector.append($selector, "::-webkit-progress-bar")} {
+    background: transparent;
+  }
+
+  #{selector.append($selector, "::-webkit-progress-value")} {
+    background-color: currentColor;
+    border-radius: $border-radius;
+  }
+
+  #{selector.append($selector, "::-moz-progress-bar")} {
+    background-color: currentColor;
+    border-radius: $border-radius;
+  }
+
+  // selector.nest() distributes the child combinator across every entry
+  // in the list (`progress, .progress` + `> .progress__value` →
+  // `progress > .progress__value, .progress > .progress__value`).
+  // Naive interpolation would attach `>` only to the last entry.
+  #{selector.nest($selector, "> #{$value-selector}")} {
+    display: block;
+    height: 100%;
+    background-color: currentColor;
+    border-radius: inherit;
+  }
+
+  // Forced-colors: the color-mix track collapses to a near-transparent system
+  // colour and the unfilled portion disappears. Force a solid CanvasText
+  // border so the bar boundary stays visible; bar fill maps to Highlight.
+  // WCAG 1.4.11.
+  @media (forced-colors: active) {
+    #{$selector} {
+      background-color: ButtonFace;
+      border: 1px solid CanvasText;
+    }
+    #{selector.append($selector, "::-webkit-progress-value")},
+    #{selector.nest($selector, "> #{$value-selector}")} {
+      background-color: Highlight;
+    }
+    #{selector.append($selector, "::-moz-progress-bar")} {
+      background-color: Highlight;
+    }
+  }
+}

package/src/element/progress/_variables.scss

@@ -0,0 +1,19 @@
+@use "../../variables";
+
+// Native + class selectors. `<progress>` ships UA styles we need to override;
+// the `.progress` class covers div-based fallbacks for cases where the
+// consumer cannot use the native element (e.g. determinate animation control).
+$selector: "progress, .progress" !default;
+$value-selector: ".progress__value" !default;
+
+$height: 0.5rem !default;
+$border-radius: variables.$global-max-border-radius !default;
+
+// Track defaults to the neutral combination so the bar reads against any
+// page bg; foreground (the filled value) draws from the active combination.
+$default-combination: variables.$color-combination-default !default;
+
+// Track tint relative to the page foreground. `color-mix` keeps the tint
+// theme-reactive (bg-mix derived from --kc-fg currentColor at 12 %) so the
+// track stays subtle in both light and dark.
+$track-mix: 12% !default;

package/src/element/radio/_index.scss

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

package/src/element/radio/_plugin.scss

@@ -0,0 +1,47 @@
+@use "variables" as *;
+@use "../../variables";
+@use "../../helper/controls" as controls;
+
+@if variables.$feature-element-radio {
+  #{$selector} {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    display: inline-block;
+    width: $size;
+    height: $size;
+    margin: 0;
+    padding: 0;
+    @include controls.borderWithMix($border-width, $border-mix);
+    border-radius: 50%;
+    background-color: transparent;
+    vertical-align: middle;
+    flex-shrink: 0;
+
+    &:checked {
+      border-color: var(--kc-primary-bg, currentColor);
+      // Radial gradient draws the inner dot without an extra pseudo-element,
+      // keeping the rule footprint tight. Hard stops at 50 % give a crisp
+      // edge without anti-aliasing fuzz.
+      background-image: radial-gradient(
+        circle,
+        var(--kc-primary-bg, currentColor) #{$dot-size},
+        transparent calc(#{$dot-size} + 1px)
+      );
+    }
+
+    &:focus-visible {
+      @include controls.focus-ring(
+        $focus-outline-width,
+        $focus-outline-style,
+        $focus-outline-offset,
+      );
+    }
+
+    @include controls.invalidControl();
+
+    &:disabled {
+      @include controls.disabledControl($disabled-opacity);
+    }
+  }
+}

package/src/element/radio/_variables.scss

@@ -0,0 +1,16 @@
+@use "../../variables";
+
+$selector: 'input[type="radio"]' !default;
+
+$size: 1rem !default;
+$border-width: variables.$global-border-width !default;
+// Inner dot diameter relative to the control. 50 % gives a clearly-checked
+// glyph without crowding the border.
+$dot-size: 50% !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;
+
+$disabled-opacity: variables.$global-disabled-opacity !default;
+$border-mix: variables.$global-border-mix !default;

package/src/element/range/_index.scss

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

package/src/element/range/_plugin.scss

@@ -0,0 +1,101 @@
+@use "sass:selector";
+@use "variables" as *;
+@use "../../variables";
+
+@if variables.$feature-element-range {
+  #{$selector} {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    width: 100%;
+    height: $thumb-size;
+    background: transparent;
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: $focus-outline-width $focus-outline-style
+        var(--kc-fg, currentColor);
+      outline-offset: $focus-outline-offset;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: $disabled-opacity;
+    }
+  }
+
+  // Vendor pseudo-elements MUST live in separate rule blocks: mixing
+  // ::-webkit-* and ::-moz-* in one selector list makes the engine that
+  // doesn't recognise the other pseudo drop the whole rule.
+  //
+  // selector.append() distributes the pseudo across every entry in
+  // `$selector` so rescoping (e.g. `'.kc-range, input.kc-range'`) keeps
+  // each entry validly paired with the pseudo. Naive interpolation
+  // `#{$selector}::pseudo` attaches the pseudo only to the last entry.
+  //
+  // The track and thumb bodies are identical across webkit/moz so we
+  // iterate over the per-engine pseudo names to keep the rules paired.
+
+  @each $track-pseudo
+    in ("::-webkit-slider-runnable-track", "::-moz-range-track") {
+    #{selector.append($selector, $track-pseudo)} {
+      height: $track-height;
+      border-radius: $track-radius;
+      background-color: color-mix(
+        in srgb,
+        currentColor #{$track-mix},
+        transparent
+      );
+    }
+  }
+
+  // Thumb fill is `--kc-fg` (not `--kc-primary-bg`). The brand primary is too
+  // dark on `#121417` (#21704f gave 1.90:1 vs the 18 %-mixed dark track:
+  // failed WCAG 1.4.11). Page-fg is the highest-contrast colour available in
+  // any theme by definition (~14.7:1 vs page bg in default, ~15.0:1 in dark),
+  // so the thumb is unambiguously distinguishable across themes and surfaces.
+  // The bg-coloured halo (`$thumb-border-width` solid `--kc-bg`) further
+  // separates the thumb from the track.
+  #{selector.append($selector, "::-webkit-slider-thumb")} {
+    appearance: none;
+    -webkit-appearance: none;
+    width: $thumb-size;
+    height: $thumb-size;
+    border-radius: 50%;
+    background-color: var(--kc-fg, currentColor);
+    border: $thumb-border-width solid var(--kc-bg, white);
+    // WebKit aligns thumb to the top of the track box: recenter manually.
+    margin-block-start: calc((#{$track-height} - #{$thumb-size}) / 2);
+    cursor: pointer;
+  }
+
+  #{selector.append($selector, "::-moz-range-thumb")} {
+    width: $thumb-size;
+    height: $thumb-size;
+    border-radius: 50%;
+    background-color: var(--kc-fg, currentColor);
+    border: $thumb-border-width solid var(--kc-bg, white);
+    cursor: pointer;
+  }
+
+  // Forced-colors: the color-mix track collapses to a near-transparent system
+  // colour and the unfilled portion disappears. Force a solid ButtonFace track
+  // with a CanvasText border so the trough stays visible; thumb maps to
+  // Highlight so the active position reads against the track. Kept in
+  // separate per-engine blocks for the same reason as above.
+  @media (forced-colors: active) {
+    @each $track-pseudo
+      in ("::-webkit-slider-runnable-track", "::-moz-range-track") {
+      #{selector.append($selector, $track-pseudo)} {
+        background-color: ButtonFace;
+        border: 1px solid CanvasText;
+      }
+    }
+    @each $thumb-pseudo in ("::-webkit-slider-thumb", "::-moz-range-thumb") {
+      #{selector.append($selector, $thumb-pseudo)} {
+        background-color: Highlight;
+        border-color: HighlightText;
+      }
+    }
+  }
+}

package/src/element/range/_variables.scss

@@ -0,0 +1,19 @@
+@use "../../variables";
+
+$selector: 'input[type="range"]' !default;
+
+$track-height: 0.375rem !default;
+$track-radius: variables.$global-max-border-radius !default;
+// Mix against currentColor so the track tint stays theme-reactive.
+$track-mix: 18% !default;
+
+$thumb-size: 1.125rem !default;
+// Thicker than the global 1px because the thumb sits over the track stripe;
+// at 1px the boundary collapses against `--kc-fg`-mixed track tints.
+$thumb-border-width: 2px !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;
+
+$disabled-opacity: variables.$global-disabled-opacity !default;

package/src/element/select/_index.scss

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

package/src/element/select/_plugin.scss

@@ -0,0 +1,58 @@
+@use "variables" as *;
+@use "../../variables";
+@use "../../helper/controls" as controls;
+
+@if variables.$feature-element-select {
+  #{$selector} {
+    @include variables.backgroundColor(input-bg, transparent);
+    @include variables.textColor(input-fg, currentColor);
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    display: inline-block;
+    width: 100%;
+    padding: $padding-y $padding-x-with-caret $padding-y $padding-x;
+    @include controls.borderWithMix($border-width, $border-mix);
+    border-radius: $border-radius;
+    font: inherit;
+    line-height: 1.4;
+    background-image: $caret-image;
+    background-repeat: no-repeat;
+    // `background-position` has no logical-axis keyword. Flip on `:dir(rtl)` so
+    // the caret sits on the inline-end edge in both directions.
+    background-position: right $padding-x center;
+    background-size: 0.75rem auto;
+
+    @if variables.$global-rtl {
+      &:dir(rtl) {
+        background-position: left $padding-x center;
+        padding-inline-start: $padding-x-with-caret;
+        padding-inline-end: $padding-x;
+      }
+    }
+
+    &:focus-visible {
+      @include controls.focus-ring(
+        $focus-outline-width,
+        $focus-outline-style,
+        $focus-outline-offset,
+      );
+      border-color: var(--kc-fg, currentColor);
+    }
+
+    @include controls.invalidControl();
+
+    &:disabled {
+      @include controls.disabledControl($disabled-opacity);
+    }
+
+    // `[multiple]` is a list, not a dropdown. No caret, native scroll, normal
+    // horizontal padding. Native focus on individual <option> children handles
+    // keyboard reach.
+    &[multiple] {
+      padding-inline-end: $padding-x;
+      background-image: none;
+      height: auto;
+    }
+  }
+}

package/src/element/select/_variables.scss

@@ -0,0 +1,26 @@
+@use "../../variables";
+
+$selector: "select" !default;
+
+$padding-y: variables.$size-extra-small !default;
+$padding-x: variables.$size-small !default;
+// Right padding leaves room for the custom caret SVG so long option text
+// doesn't overlap the chevron. Skipped for `[multiple]` (no caret).
+$padding-x-with-caret: 2rem !default;
+
+$border-radius: variables.$global-border-radius !default;
+$border-width: variables.$global-border-width !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;
+
+$disabled-opacity: variables.$global-disabled-opacity !default;
+$border-mix: variables.$global-border-mix !default;
+
+// Inline SVG chevron baked as a data URL so the framework stays asset-free.
+// `currentColor` would be ideal but `background-image` URLs can't reference
+// `currentColor`; the muted neutral reads acceptably in both themes against
+// the input bg. Consumers wanting a theme-reactive caret can override.
+$caret-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8" fill="none"><path d="M1 1.5l5 5 5-5" stroke="%23888" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>')
+  !default;

package/src/element/switch/_index.scss

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

package/src/element/switch/_plugin.scss

@@ -0,0 +1,105 @@
+@use "variables" as *;
+@use "../../variables";
+@use "../../helper/controls" as controls;
+
+@if variables.$feature-element-switch {
+  #{$selector} {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    position: relative;
+    display: inline-block;
+    width: $width;
+    height: $height;
+    margin: 0;
+    padding: 0;
+    @include controls.borderWithMix($border-width, $border-mix);
+    border-radius: variables.$global-max-border-radius;
+    background-color: color-mix(
+      in srgb,
+      currentColor #{$track-mix},
+      transparent
+    );
+    cursor: pointer;
+    vertical-align: middle;
+    flex-shrink: 0;
+    transition:
+      background-color $transition-duration ease,
+      border-color $transition-duration ease;
+
+    // Thumb is a centered pseudo-element. Anchored at inline-start; toggled by a
+    // translation along the inline axis. `translateX` is physical: RTL flips the
+    // sign via the `:dir(rtl)` companion below so the thumb travels toward the
+    // visual end-edge in both directions.
+    &::before {
+      content: "";
+      position: absolute;
+      inset-block-start: $thumb-inset;
+      inset-inline-start: $thumb-inset;
+      width: calc(#{$height} - 2 * #{$thumb-inset} - 2 * #{$border-width});
+      height: calc(#{$height} - 2 * #{$thumb-inset} - 2 * #{$border-width});
+      border-radius: 50%;
+      background-color: var(--kc-fg, currentColor);
+      transition: transform $transition-duration ease;
+    }
+
+    &:checked {
+      background-color: var(--kc-primary-bg, currentColor);
+      border-color: var(--kc-primary-bg, currentColor);
+    }
+
+    &:checked::before {
+      background-color: var(--kc-primary-fg, white);
+      transform: translateX(calc(#{$width} - #{$height}));
+    }
+
+    @if variables.$global-rtl {
+      &:dir(rtl):checked::before {
+        transform: translateX(calc(-1 * (#{$width} - #{$height})));
+      }
+    }
+
+    &:focus-visible {
+      @include controls.focus-ring(
+        $focus-outline-width,
+        $focus-outline-style,
+        $focus-outline-offset,
+      );
+    }
+
+    &:disabled {
+      @include controls.disabledControl($disabled-opacity);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+
+      &::before {
+        transition: none;
+      }
+    }
+
+    // Forced-colors: the color-mix track and border collapse to nearly-
+    // invisible system colours. Force solid ButtonFace track + CanvasText
+    // border for the off state; checked state maps to Highlight surface.
+    // Thumb position alone already conveys state, but we keep the colour
+    // cue in case a renderer flattens the position offset.
+    @media (forced-colors: active) {
+      background-color: ButtonFace;
+      border-color: CanvasText;
+
+      &::before {
+        background-color: CanvasText;
+      }
+
+      &:checked {
+        background-color: Highlight;
+        border-color: Highlight;
+      }
+
+      &:checked::before {
+        background-color: HighlightText;
+      }
+    }
+  }
+}

package/src/element/switch/_variables.scss

@@ -0,0 +1,28 @@
+@use "../../variables";
+
+// Visually a toggle, semantically still a checkbox: opt-in via `.switch` so
+// authors keep using `<input type="checkbox">` plus assistive-tech behaviour.
+$selector: 'input[type="checkbox"].switch' !default;
+
+// Pill dimensions. Width is 2x height by convention so the thumb has a full
+// diameter of travel.
+$height: 1.25rem !default;
+$width: 2.25rem !default;
+$thumb-inset: 2px !default;
+$border-width: variables.$global-border-width !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;
+
+$disabled-opacity: variables.$global-disabled-opacity !default;
+$border-mix: variables.$global-border-mix !default;
+// Track-off tint. 50 % is the smallest single value where the track itself
+// reads as a real surface against the page bg in both themes (3.04:1 default,
+// 4.53:1 dark) AND the thumb-on-track contrast clears 3:1 (4.85:1 default,
+// 3.32:1 dark). The earlier 18 % was effectively invisible against either bg.
+// At 50 % the off-state still reads distinctly off: it is darker than a
+// disabled (60 % opacity) thumb, not a half-on intermediate.
+$track-mix: 50% !default;
+
+$transition-duration: variables.$global-transition-duration !default;

package/src/element/text-input/_index.scss

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

package/src/element/text-input/_plugin.scss

@@ -0,0 +1,37 @@
+@use "variables" as *;
+@use "../../variables";
+@use "../../helper/controls" as controls;
+
+@if variables.$feature-element-text-input {
+  #{$selector} {
+    @include variables.backgroundColor(input-bg, transparent);
+    @include variables.textColor(input-fg, currentColor);
+    display: inline-block;
+    width: 100%;
+    padding: $padding-y $padding-x;
+    @include controls.borderWithMix($border-width, $border-mix);
+    border-radius: $border-radius;
+    font: inherit;
+    line-height: 1.4;
+
+    &:focus-visible {
+      @include controls.focus-ring(
+        $focus-outline-width,
+        $focus-outline-style,
+        $focus-outline-offset,
+      );
+      border-color: var(--kc-fg, currentColor);
+    }
+
+    @include controls.invalidControl();
+
+    &:disabled {
+      @include controls.disabledControl($disabled-opacity);
+    }
+
+    &::placeholder {
+      color: color-mix(in srgb, currentColor 65%, transparent);
+      opacity: 1;
+    }
+  }
+}