@adnap/krysalicss 0.0.1 → 0.1.0

package/src/module/dropdown/_variables.scss

@@ -0,0 +1,50 @@
+@use "../../variables";
+
+// Documentation: ../../../docs/src/pages/reference/components/module/dropdown.mdx
+
+$selector: ".dropdown" !default;
+$toggle-selector: ".dropdown__toggle" !default;
+$trigger-selector: ".dropdown__trigger" !default;
+$menu-selector: ".dropdown__menu" !default;
+
+$hoverable-modifier: "#{variables.$selector-prefix-is}hoverable" !default;
+
+$right-modifier: "#{variables.$selector-prefix-is}right" !default;
+
+$up-modifier: "#{variables.$selector-prefix-is}up" !default;
+
+$active-modifier: "#{variables.$selector-prefix-is}active" !default;
+
+$arrow: true !default;
+
+$arrow-size: 0.3em !default;
+
+$arrow-gap: 0.5em !default;
+
+$gap: variables.$size-extra-small !default;
+$padding: variables.$size-extra-small !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 inside the panel. `currentColor` is
+// theme-reactive (it follows the panel fg) and the low alpha keeps the
+// affordance unobtrusive against any combination surface.
+$hover-bg: color-mix(in srgb, currentColor 8%, transparent) !default;
+
+$min-width: 12rem !default;
+
+$offset: 2px !default;
+
+$z-index: 10 !default;
+
+$default-combination: variables.$color-combination-default !default;
+
+// Subtle-border tint for the panel edge. Tracks `$global-subtle-border-mix`.
+$border-mix: variables.$global-subtle-border-mix !default;
+
+$controls: variables.$global-controls !default;

package/src/module/field/_plugin.scss

@@ -1,6 +1,8 @@
 @use "variables" as *;
 @use "../../variables";
 
+// Documentation: ../../../docs/src/pages/reference/components/module/field.mdx
+
 @if variables.$feature-module-field {
   #{$selector} {
     display: flex;

package/src/module/modal/_plugin.scss

@@ -2,6 +2,8 @@
 @use "variables" as *;
 @use "../../variables";
 
+// Documentation: ../../../docs/src/pages/reference/components/module/modal.mdx
+
 @mixin _backdrop-styles {
   @include variables.backgroundColor(modal-backdrop, $backdrop-color);
   @if $backdrop-blur != 0 {

package/src/module/navbar/_plugin.scss

@@ -3,6 +3,8 @@
 @use "../../variables";
 @use "../../helper/breakpoints" as breakpoints;
 
+// Documentation: ../../../docs/src/pages/reference/components/module/navbar.mdx
+
 @if variables.$feature-module-navbar {
   #{$selector} {
     // Track (--kc-bg, --kc-fg) by default so the navbar follows the active
@@ -121,7 +123,8 @@
           navbar-dropdown-fg,
           var(--kc-fg, #{list.nth($default-combination, 2)}),
         );
-        border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+        border: 1px solid
+          color-mix(in srgb, currentColor #{$border-mix}, transparent);
         box-shadow: 0 4px 12px
           color-mix(in srgb, currentColor 18%, transparent);
         z-index: 10;

package/src/module/navbar/_variables.scss

@@ -8,12 +8,12 @@ $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;
+$hoverable-modifier: "#{variables.$selector-prefix-is}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;
+$has-dropdown-modifier: "#{variables.$selector-prefix-has}dropdown" !default;
 
 // Below this device, the menu collapses behind a `<details>` toggle.
 // Above, it renders inline horizontally.
@@ -42,6 +42,10 @@ $dropdown-padding: variables.$size-extra-small !default;
 
 $default-combination: variables.$color-combination-default !default;
 
+// Subtle-border tint for the dropdown panel edge. Tracks the
+// framework-wide `$global-subtle-border-mix`.
+$border-mix: variables.$global-subtle-border-mix !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

package/src/module/pagination/_index.scss

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

package/src/module/pagination/_plugin.scss

@@ -0,0 +1,276 @@
+@use "sass:list";
+@use "variables" as *;
+@use "../../variables";
+@use "../../helper/controls-internal" as controls;
+
+// Documentation: ../../../docs/src/pages/reference/components/module/pagination.mdx
+
+@if variables.$feature-module-pagination {
+  #{$selector} {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: $gap;
+    font-size: inherit;
+    line-height: 1;
+
+    // Selector doubled on `#{$selector}` so the list reset survives
+    // host typography rules with class+element specificity — e.g.
+    // `.content ol:not(:last-child) { margin-block-end: 1em }` from the
+    // framework's own `typography/content` slice, or any docs / prose
+    // reset that ships `<ol>`/`<li>` block margins. Without the double-
+    // class chain the host rule wins on specificity and the numbered
+    // tiles render visibly lower than the prev/next slots.
+    &#{$selector} #{$list-selector},
+    &#{$selector} > ol,
+    &#{$selector} > ul {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: stretch;
+      gap: $gap;
+      // Logical longhands so host typography styles that target
+      // `margin-block-end` on `<ol>` / `<ul>` can't bleed in.
+      margin-block: 0;
+      margin-inline: 0;
+      padding: 0;
+      list-style: none;
+      line-height: 1;
+    }
+
+    &#{$selector} #{$list-selector} > li,
+    &#{$selector} > ol > li,
+    &#{$selector} > ul > li {
+      display: flex;
+      align-items: stretch;
+      // Defensive: host stylesheets that put `margin-bottom` on every
+      // `<li>` would otherwise push the list's intrinsic height taller
+      // than the prev/next slots and visibly drop the numbered tiles
+      // relative to them.
+      margin-block: 0;
+      margin-inline: 0;
+    }
+
+    // Shared box. `display: inline-grid` + `place-items: center` is the
+    // most bulletproof centering pattern — no flex baseline edge cases,
+    // no inline-baseline shift, no asymmetric padding interaction.
+    // `height: $min-width` (not min-height) locks every cell to the
+    // exact same height regardless of content; the row stays a clean
+    // grid of identical-height pills.
+    #{$link-selector},
+    #{$previous-selector},
+    #{$next-selector},
+    #{$ellipsis-selector} {
+      box-sizing: border-box;
+      display: inline-grid;
+      grid-auto-flow: column;
+      place-items: center;
+      gap: $chevron-gap;
+      min-width: $min-width;
+      height: $min-width;
+      padding: 0 $padding-x;
+      border-radius: $border-radius;
+      line-height: 1;
+      font-variant-numeric: tabular-nums;
+      text-align: center;
+      vertical-align: middle;
+      white-space: nowrap;
+    }
+
+    #{$link-selector} {
+      border: 1px solid
+        color-mix(
+          in srgb,
+          var(--kc-fg, currentColor) #{$border-mix},
+          transparent
+        );
+      background: transparent;
+      color: inherit;
+      text-decoration: none;
+      cursor: pointer;
+      user-select: none;
+
+      &:hover {
+        background: color-mix(
+          in srgb,
+          currentColor #{$hover-mix},
+          transparent
+        );
+      }
+
+      &:focus-visible {
+        @include controls.focus-ring();
+      }
+    }
+
+    #{$previous-selector},
+    #{$next-selector} {
+      padding-inline-start: $nav-padding-x;
+      padding-inline-end: $nav-padding-x;
+      background: transparent;
+      color: inherit;
+      text-decoration: none;
+      cursor: pointer;
+      user-select: none;
+
+      @if $nav-ghost {
+        border: 1px solid transparent;
+      } @else {
+        border: 1px solid
+          color-mix(
+            in srgb,
+            var(--kc-fg, currentColor) #{$border-mix},
+            transparent
+          );
+      }
+
+      &:hover {
+        background: color-mix(
+          in srgb,
+          currentColor #{$hover-mix},
+          transparent
+        );
+      }
+
+      &:focus-visible {
+        @include controls.focus-ring();
+      }
+    }
+
+    @if $chevrons {
+      // Grid `gap` on the parent handles chevron <-> label spacing, so
+      // the pseudo only needs its shape + rotation.
+      #{$previous-selector}::before,
+      #{$next-selector}::after {
+        content: "";
+        width: $chevron-size;
+        height: $chevron-size;
+        border-block-start: $chevron-thickness solid currentColor;
+        border-inline-end: $chevron-thickness solid currentColor;
+      }
+
+      #{$previous-selector}::before {
+        transform: rotate(-135deg);
+      }
+
+      #{$next-selector}::after {
+        transform: rotate(45deg);
+      }
+    }
+
+    #{$link-selector}[aria-current="page"],
+    #{$link-selector}#{$current-selector} {
+      @include variables.backgroundColor(
+        pagination-current-bg,
+        list.nth($current-combination, 1),
+      );
+      @include variables.textColor(
+        pagination-current-fg,
+        list.nth($current-combination, 2),
+      );
+      border-color: transparent;
+      font-weight: 600;
+      &:hover {
+        background: var(
+          --kc-pagination-current-bg,
+          #{list.nth($current-combination, 1)}
+        );
+      }
+    }
+
+    #{$link-selector}[disabled],
+    #{$link-selector}[aria-disabled="true"],
+    #{$link-selector}#{$disabled-selector},
+    #{$previous-selector}[disabled],
+    #{$previous-selector}[aria-disabled="true"],
+    #{$previous-selector}#{$disabled-selector},
+    #{$next-selector}[disabled],
+    #{$next-selector}[aria-disabled="true"],
+    #{$next-selector}#{$disabled-selector} {
+      @include controls.disabledControl();
+      &:hover {
+        background: transparent;
+      }
+    }
+
+    #{$ellipsis-selector} {
+      border: 1px solid
+        color-mix(
+          in srgb,
+          var(--kc-fg, currentColor) #{$ellipsis-border-mix},
+          transparent
+        );
+      color: color-mix(
+        in srgb,
+        var(--kc-fg, currentColor) #{$ellipsis-fg-mix},
+        transparent
+      );
+      user-select: none;
+    }
+
+    &#{$rounded-selector} {
+      #{$link-selector},
+      #{$previous-selector},
+      #{$next-selector},
+      #{$ellipsis-selector} {
+        border-radius: variables.$global-max-border-radius;
+      }
+    }
+
+    // Alignment runs on the outer flex container so prev/next slots
+    // (which sit outside the list in the markup) align with the numbered
+    // links.
+    &#{$centered-selector} {
+      justify-content: center;
+    }
+
+    &#{$right-selector} {
+      justify-content: flex-end;
+    }
+
+    &#{$small-selector} {
+      font-size: $small-font-size;
+
+      #{$link-selector},
+      #{$previous-selector},
+      #{$next-selector},
+      #{$ellipsis-selector} {
+        min-width: $small-min-width;
+        min-height: $small-min-width;
+      }
+    }
+
+    &#{$large-selector} {
+      font-size: $large-font-size;
+
+      #{$link-selector},
+      #{$previous-selector},
+      #{$next-selector},
+      #{$ellipsis-selector} {
+        min-width: $large-min-width;
+        min-height: $large-min-width;
+      }
+    }
+  }
+
+  @media (forced-colors: active) {
+    #{$selector} {
+      #{$link-selector},
+      #{$previous-selector},
+      #{$next-selector},
+      #{$ellipsis-selector} {
+        border-color: CanvasText;
+      }
+
+      #{$ellipsis-selector} {
+        color: CanvasText;
+      }
+
+      #{$link-selector}[aria-current="page"],
+      #{$link-selector}#{$current-selector} {
+        background: Highlight;
+        color: HighlightText;
+        border-color: Highlight;
+      }
+    }
+  }
+}

package/src/module/pagination/_variables.scss

@@ -0,0 +1,64 @@
+@use "sass:map";
+@use "../../variables";
+
+// Documentation: ../../../docs/src/pages/reference/components/module/pagination.mdx
+
+// Resolve the current-link surface tuple from the canonical combinations
+// map. Falls back to the default combination when the consumer's map omits
+// `primary`. Computed at module load, not on every selector emission.
+@function _resolve-current-combination() {
+  $primary: map.get(variables.$color-combinations, primary);
+  @if $primary != null {
+    @return $primary;
+  }
+  @return variables.$color-combination-default;
+}
+
+$selector: ".pagination" !default;
+$list-selector: ".pagination__list" !default;
+$link-selector: ".pagination__link" !default;
+$previous-selector: ".pagination__previous" !default;
+$next-selector: ".pagination__next" !default;
+$ellipsis-selector: ".pagination__ellipsis" !default;
+
+$current-selector: "#{variables.$selector-prefix-is}current" !default;
+$disabled-selector: "#{variables.$selector-prefix-is}disabled" !default;
+$rounded-selector: "#{variables.$selector-prefix-is}rounded" !default;
+$centered-selector: "#{variables.$selector-prefix-is}centered" !default;
+$right-selector: "#{variables.$selector-prefix-is}right" !default;
+$small-selector: "#{variables.$selector-prefix-is}small" !default;
+$large-selector: "#{variables.$selector-prefix-is}large" !default;
+
+$gap: variables.$size-extra-small !default;
+
+// Tracks `$global-min-touch-target` (2.75rem / 44px) so each tile clears
+// WCAG 2.5.5 AAA on its own without relying on the inter-tile `$gap`
+// satisfying the 2.5.5 spacing exception. Consumers building dense pager
+// strips can override to `2.5rem` (still AA) or `0` to opt out entirely.
+$min-width: variables.$global-min-touch-target !default;
+$padding-y: variables.$size-extra-small !default;
+$padding-x: variables.$size-extra-small !default;
+$border-radius: variables.$global-border-radius !default;
+
+$border-mix: 35% !default;
+
+$ellipsis-border-mix: 15% !default;
+$ellipsis-fg-mix: 50% !default;
+
+$current-combination: _resolve-current-combination() !default;
+
+$hover-mix: 8% !default;
+
+$nav-ghost: false !default;
+
+$nav-padding-x: variables.$size-normal !default;
+
+$chevrons: true !default;
+$chevron-size: 0.5em !default;
+$chevron-thickness: 0.125em !default;
+$chevron-gap: variables.$size-extra-small !default;
+
+$small-min-width: 2rem !default;
+$small-font-size: variables.$size-small !default;
+$large-min-width: 3rem !default;
+$large-font-size: variables.$size-medium !default;

package/src/module/popover/_index.scss

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

package/src/module/popover/_plugin.scss

@@ -0,0 +1,183 @@
+@use "sass:list";
+@use "variables" as *;
+@use "../../variables";
+@use "../../helper/controls-internal" as controls;
+
+// Documentation: ../../../docs/src/pages/reference/components/module/popover.mdx
+
+@if variables.$feature-module-popover {
+  #{$selector} {
+    position: relative;
+    display: inline-block;
+
+    #{$panel-selector} {
+      @include variables.backgroundColor(
+        popover-bg,
+        list.nth($default-combination, 1),
+      );
+      @include variables.textColor(
+        popover-fg,
+        list.nth($default-combination, 2),
+      );
+      position: absolute;
+      visibility: hidden;
+      opacity: 0;
+      z-index: $z-index;
+      min-width: $min-width;
+      max-width: $max-width;
+      border: 1px solid
+        color-mix(in srgb, currentColor #{$border-mix}, transparent);
+      border-radius: $border-radius;
+      box-shadow: $shadow;
+      inset-block-end: 100%;
+      inset-inline-start: 50%;
+      transform: translate(-50%, -#{$offset});
+      transition:
+        opacity $transition-duration ease,
+        visibility $transition-duration ease;
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+
+      #{$header-selector} {
+        padding: $padding-y $padding-x;
+        border-block-end: 1px solid
+          color-mix(in srgb, currentColor #{$border-mix}, transparent);
+        font-weight: 600;
+      }
+
+      #{$body-selector} {
+        padding: $padding-y $padding-x;
+      }
+
+      @if $arrow {
+        // CSS arrow trick: a 0×0 box with $arrow-size borders on all
+        // four sides forms four right triangles meeting at the centre.
+        // Colouring exactly one side reveals one triangle pointing
+        // AWAY from that side. Every modifier below sets
+        // `border-color: transparent` first then colours one side so
+        // no leftover colour from the base bleeds into the arrow
+        // (e.g. `.is-right` showing a stray top triangle, or
+        // `.is-bottom` collapsing to width 0).
+        &::before {
+          content: "";
+          position: absolute;
+          width: 0;
+          height: 0;
+          border: $arrow-size solid transparent;
+          inset-block-start: 100%;
+          inset-inline-start: 50%;
+          transform: translateX(-50%);
+          border-block-start-color: currentColor;
+        }
+      }
+    }
+
+    &:hover #{$panel-selector},
+    &:focus-within #{$panel-selector} {
+      visibility: visible;
+      opacity: 1;
+    }
+
+    @if variables.has-controls("js", $controls) {
+      &#{$active-modifier} #{$panel-selector},
+      &[data-open="true"] #{$panel-selector} {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+
+    &#{$top-modifier} #{$panel-selector} {
+      inset-block-start: auto;
+      inset-block-end: 100%;
+      inset-inline-start: 50%;
+      inset-inline-end: auto;
+      transform: translate(-50%, -#{$offset});
+    }
+
+    &#{$bottom-modifier} #{$panel-selector} {
+      inset-block-start: 100%;
+      inset-block-end: auto;
+      inset-inline-start: 50%;
+      inset-inline-end: auto;
+      transform: translate(-50%, #{$offset});
+    }
+
+    &#{$left-modifier} #{$panel-selector} {
+      inset-block-start: 50%;
+      inset-block-end: auto;
+      inset-inline-start: auto;
+      inset-inline-end: 100%;
+      transform: translate(-#{$offset}, -50%);
+    }
+
+    &#{$right-modifier} #{$panel-selector} {
+      inset-block-start: 50%;
+      inset-block-end: auto;
+      inset-inline-start: 100%;
+      inset-inline-end: auto;
+      transform: translate(#{$offset}, -50%);
+    }
+
+    @if $arrow {
+      &#{$top-modifier} #{$panel-selector}::before {
+        inset-block-start: 100%;
+        inset-block-end: auto;
+        inset-inline-start: 50%;
+        inset-inline-end: auto;
+        transform: translateX(-50%);
+        border-color: transparent;
+        border-block-start-color: currentColor;
+      }
+
+      &#{$bottom-modifier} #{$panel-selector}::before {
+        inset-block-start: auto;
+        inset-block-end: 100%;
+        inset-inline-start: 50%;
+        inset-inline-end: auto;
+        transform: translateX(-50%);
+        border-color: transparent;
+        border-block-end-color: currentColor;
+      }
+
+      &#{$left-modifier} #{$panel-selector}::before {
+        inset-block-start: 50%;
+        inset-block-end: auto;
+        inset-inline-start: 100%;
+        inset-inline-end: auto;
+        transform: translateY(-50%);
+        border-color: transparent;
+        border-inline-start-color: currentColor;
+      }
+
+      &#{$right-modifier} #{$panel-selector}::before {
+        inset-block-start: 50%;
+        inset-block-end: auto;
+        inset-inline-start: auto;
+        inset-inline-end: 100%;
+        transform: translateY(-50%);
+        border-color: transparent;
+        border-inline-end-color: currentColor;
+      }
+    }
+
+    // Nested links pair with the surface fg (same rationale as
+    // alert/card): the page-level `--kc-link` is calibrated against the
+    // page bg, not the popover surface bg.
+    @include controls.nestedLinks;
+
+    @include variables.combinations using ($label, $tuple) {
+      #{$panel-selector} {
+        @include variables.backgroundColor(#{$label}-bg, list.nth($tuple, 1));
+        @include variables.textColor(#{$label}-fg, list.nth($tuple, 2));
+      }
+    }
+
+    @media (forced-colors: active) {
+      #{$panel-selector} {
+        border: 1px solid CanvasText;
+      }
+    }
+  }
+}

package/src/module/popover/_variables.scss

@@ -0,0 +1,44 @@
+@use "../../variables";
+
+// Documentation: ../../../docs/src/pages/reference/components/module/popover.mdx
+
+$selector: ".popover" !default;
+$trigger-selector: ".popover__trigger" !default;
+$panel-selector: ".popover__panel" !default;
+$header-selector: ".popover__header" !default;
+$body-selector: ".popover__body" !default;
+
+$active-modifier: "#{variables.$selector-prefix-is}active" !default;
+$top-modifier: "#{variables.$selector-prefix-is}top" !default;
+$bottom-modifier: "#{variables.$selector-prefix-is}bottom" !default;
+$left-modifier: "#{variables.$selector-prefix-is}left" !default;
+$right-modifier: "#{variables.$selector-prefix-is}right" !default;
+
+$min-width: 12rem !default;
+$max-width: 20rem !default;
+
+$padding-y: variables.$size-extra-small !default;
+$padding-x: variables.$size-small !default;
+
+$offset: variables.$size-extra-small !default;
+
+$border-radius: variables.$global-border-radius !default;
+
+$z-index: 1070 !default;
+
+$arrow: true !default;
+
+$arrow-size: 6px !default;
+
+$shadow: 0 6px 20px rgb(0 0 0 / 0.15) !default;
+
+$transition-duration: variables.$global-transition-duration !default;
+
+$controls: variables.$global-controls !default;
+
+$default-combination: variables.$color-combination-default !default;
+
+// Subtle-border tint for the panel edge and header divider. Tracks the
+// framework-wide `$global-subtle-border-mix` so a consumer retuning the
+// global decorative-border value pulls the popover along.
+$border-mix: variables.$global-subtle-border-mix !default;

package/src/module/section/_index.scss

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