@adnap/krysalicss 0.0.1 → 0.1.0

package/src/layout/hero/_plugin.scss

@@ -0,0 +1,54 @@
+@use "sass:list";
+@use "variables" as *;
+@use "../../variables";
+@use "../../helper/controls-internal" as controls;
+
+// Documentation: ../../../docs/src/pages/reference/components/layout/hero.mdx
+
+@if variables.$feature-layout-hero {
+  #{$selector} {
+    display: flex;
+    flex-direction: column;
+
+    @if $halfheight-modifier {
+      &#{variables.$selector-prefix-is}#{$halfheight-modifier} {
+        min-height: 50vh;
+      }
+    }
+
+    @if $fullheight-modifier {
+      &#{variables.$selector-prefix-is}#{$fullheight-modifier} {
+        min-height: 100vh;
+      }
+    }
+
+    @if $fullheight-with-navbar-modifier {
+      &#{variables.$selector-prefix-is}#{$fullheight-with-navbar-modifier} {
+        min-height: calc(100vh - #{$navbar-height});
+      }
+    }
+
+    #{$head-selector},
+    #{$foot-selector} {
+      flex-shrink: 0;
+    }
+
+    #{$body-selector} {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding: $body-padding-block $body-padding-inline;
+    }
+
+    // Size modifier targets the body selector so height modifiers
+    // (min-height) and size modifiers (padding) compose on the same element.
+    @each $size, $padding in $body-padding-by-size {
+      &#{variables.$selector-prefix-is}#{$size} #{$body-selector} {
+        padding: list.nth($padding, 1) list.nth($padding, 2);
+      }
+    }
+
+    @include controls.combinations-apply();
+  }
+}

package/src/layout/hero/_variables.scss

@@ -0,0 +1,23 @@
+@use "../../variables";
+
+// Reference: ../../../docs/src/pages/reference/components/layout/hero.mdx
+
+$selector: ".hero" !default;
+$head-selector: ".hero-head" !default;
+$body-selector: ".hero-body" !default;
+$foot-selector: ".hero-foot" !default;
+
+$body-padding-block: 3rem !default;
+$body-padding-inline: variables.$global-gap !default;
+
+$halfheight-modifier: "halfheight" !default;
+$fullheight-modifier: "fullheight" !default;
+$fullheight-with-navbar-modifier: "fullheight-with-navbar" !default;
+
+$navbar-height: 3.25rem !default;
+
+$body-padding-by-size: (
+  small: (1.5rem, variables.$global-gap),
+  medium: (9rem, 4.5rem),
+  large: (18rem, 6rem),
+) !default;

package/src/module/_index.scss

@@ -4,3 +4,10 @@
 @forward "navbar" as navbar-*;
 @forward "modal" as modal-*;
 @forward "tabs" as tabs-*;
+@forward "dropdown" as dropdown-*;
+@forward "section" as section-*;
+@forward "breadcrumb" as breadcrumb-*;
+@forward "pagination" as pagination-*;
+@forward "buttons" as buttons-*;
+@forward "toast" as toast-*;
+@forward "popover" as popover-*;

package/src/module/alert/_plugin.scss

@@ -1,7 +1,9 @@
 @use "sass:list";
 @use "variables" as *;
 @use "../../variables";
-@use "../../helper/controls" as controls;
+@use "../../helper/controls-internal" as controls;
+
+// Documentation: ../../../docs/src/pages/reference/components/module/alert.mdx
 
 @if variables.$feature-module-alert {
   #{$selector} {
@@ -47,5 +49,8 @@
     @include controls.nestedLinks;
 
     @include controls.combinations-apply();
+    @if $enable-light {
+      @include controls.combinations-apply-light();
+    }
   }
 }

package/src/module/alert/_variables.scss

@@ -1,8 +1,15 @@
 @use "../../variables";
 
+// Documentation: ../../../docs/src/pages/reference/components/module/alert.mdx
+
 $selector: ".alert" !default;
 $icon-selector: ".alert__icon" !default;
 
+// Local toggle for `.is-<combo>.is-light` emission. Derived from the
+// framework-wide `$feature-light-variants` flag — see
+// `variables/_feature.scss` for the cross-component rationale.
+$enable-light: variables.$feature-light-variants !default;
+
 $padding-y: variables.$size-small !default;
 $padding-x: variables.$size-normal !default;
 

package/src/module/breadcrumb/_index.scss

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

package/src/module/breadcrumb/_plugin.scss

@@ -0,0 +1,73 @@
+@use "variables" as *;
+@use "../../variables";
+
+// Documentation: ../../../docs/src/pages/reference/components/module/breadcrumb.mdx
+
+@if variables.$feature-module-breadcrumb {
+  #{$selector} {
+    --kc-breadcrumb-separator: "#{$separator}";
+
+    display: block;
+    font-size: inherit;
+
+    > ol,
+    > ul {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: $gap;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    #{$item-selector} {
+      display: inline-flex;
+      align-items: center;
+      gap: $gap;
+
+      &::before {
+        content: var(--kc-breadcrumb-separator, "#{$separator}");
+        color: color-mix(
+          in srgb,
+          var(--kc-fg, currentColor) #{$separator-mix},
+          transparent
+        );
+        flex: 0 0 auto;
+        line-height: 1;
+      }
+
+      &:first-child::before {
+        content: none;
+      }
+
+      &[aria-current="page"],
+      &#{$current-selector} {
+        font-weight: $current-font-weight;
+        > a {
+          color: inherit;
+          text-decoration: none;
+          pointer-events: none;
+        }
+      }
+    }
+
+    &#{$centered-selector} > ol,
+    &#{$centered-selector} > ul {
+      justify-content: center;
+    }
+
+    &#{$right-selector} > ol,
+    &#{$right-selector} > ul {
+      justify-content: flex-end;
+    }
+
+    &#{$small-selector} {
+      font-size: $small-font-size;
+    }
+
+    &#{$large-selector} {
+      font-size: $large-font-size;
+    }
+  }
+}

package/src/module/breadcrumb/_variables.scss

@@ -0,0 +1,27 @@
+@use "../../variables";
+
+// Documentation: ../../../docs/src/pages/reference/components/module/breadcrumb.mdx
+
+$selector: ".breadcrumb" !default;
+$item-selector: ".breadcrumb__item" !default;
+$current-selector: "#{variables.$selector-prefix-is}current" !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-small !default;
+
+// Single source of truth for the glyph rendered between items. Themes
+// override with `@use 'krysalicss/module/breadcrumb' with ($separator: '/')`
+// or rebind the `--kc-breadcrumb-separator` custom property at any scope.
+// Default: right arrow (U+2192).
+$separator: "\\2192" !default;
+
+$separator-mix: 50% !default;
+
+$current-font-weight: 600 !default;
+
+$small-font-size: variables.$size-small !default;
+$large-font-size: variables.$size-medium !default;

package/src/module/buttons/_index.scss

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

package/src/module/buttons/_plugin.scss

@@ -0,0 +1,67 @@
+@use "variables" as *;
+@use "../../variables";
+
+// Documentation: ../../../docs/src/pages/reference/components/module/buttons.mdx
+
+@if variables.$feature-module-buttons {
+  #{$selector} {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $gap;
+
+    &#{$centered-selector} {
+      justify-content: center;
+    }
+
+    &#{$right-selector} {
+      justify-content: flex-end;
+    }
+
+    &#{$addons-selector} {
+      flex-wrap: nowrap;
+      gap: 0;
+
+      > .button,
+      > button {
+        border-radius: 0;
+
+        &:not(:last-child) {
+          margin-inline-end: -1px;
+        }
+
+        &:hover,
+        &:focus,
+        &:focus-visible,
+        &:active {
+          z-index: 1;
+        }
+
+        &:first-child {
+          border-start-start-radius: var(
+            --kc-btn-border-radius,
+            #{variables.$global-border-radius}
+          );
+          border-end-start-radius: var(
+            --kc-btn-border-radius,
+            #{variables.$global-border-radius}
+          );
+          border-start-end-radius: 0;
+          border-end-end-radius: 0;
+        }
+
+        &:last-child {
+          border-start-end-radius: var(
+            --kc-btn-border-radius,
+            #{variables.$global-border-radius}
+          );
+          border-end-end-radius: var(
+            --kc-btn-border-radius,
+            #{variables.$global-border-radius}
+          );
+          border-start-start-radius: 0;
+          border-end-start-radius: 0;
+        }
+      }
+    }
+  }
+}

package/src/module/buttons/_variables.scss

@@ -0,0 +1,10 @@
+@use "../../variables";
+
+// Documentation: ../../../docs/src/pages/reference/components/module/buttons.mdx
+
+$selector: ".buttons" !default;
+$gap: 0.5rem !default;
+
+$addons-selector: "#{variables.$selector-prefix-has}addons" !default;
+$centered-selector: "#{variables.$selector-prefix-is}centered" !default;
+$right-selector: "#{variables.$selector-prefix-is}right" !default;

package/src/module/card/_plugin.scss

@@ -1,7 +1,9 @@
 @use "sass:list";
 @use "variables" as *;
 @use "../../variables";
-@use "../../helper/controls" as controls;
+@use "../../helper/controls-internal" as controls;
+
+// Documentation: ../../../docs/src/pages/reference/components/module/card.mdx
 
 @if variables.$feature-module-card {
   #{$selector} {
@@ -12,13 +14,29 @@
     @include variables.textColor(card-fg, list.nth($default-combination, 2));
     padding: $gap;
     border-radius: $border-radius;
-    border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+    border: 1px solid
+      color-mix(
+        in srgb,
+        currentColor #{variables.$global-subtle-border-mix},
+        transparent
+      );
+    overflow: hidden;
 
     @if $container-name {
       container-type: inline-size;
       container-name: #{$container-name};
     }
 
+    // WHY when any subpart is present, surface padding moves into the subparts
+    // so the header divider can extend edge-to-edge. `:has()` is in the
+    // baseline-browser support window (CLAUDE.md "evergreen, last two years").
+    &:has(#{$header-selector}),
+    &:has(#{$image-selector}),
+    &:has(#{$content-selector}),
+    &:has(#{$footer-selector}) {
+      padding: 0;
+    }
+
     // Nested links inherit the surface fg + carry an underline. Same
     // rationale as alert: page-level --kc-link is calibrated against page
     // bg, not card surface bg; pairing with the card's own fg avoids
@@ -26,6 +44,82 @@
     // in dark themes. Underline preserves the link cue (WCAG 1.4.1).
     @include controls.nestedLinks;
 
+    #{$header-selector} {
+      display: flex;
+      align-items: stretch;
+      min-height: $header-min-height;
+      border-block-end: 1px solid
+        color-mix(in srgb, currentColor #{$subpart-divider-mix}, transparent);
+    }
+
+    #{$header-title-selector} {
+      flex: 1;
+      padding: $header-padding-y $header-padding-x;
+      font-weight: $header-title-weight;
+      margin: 0;
+    }
+
+    #{$header-icon-selector} {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: $header-padding-y $header-padding-x;
+      min-width: variables.$global-min-touch-target;
+    }
+
+    #{$image-selector} {
+      display: block;
+
+      img {
+        display: block;
+        width: 100%;
+        height: auto;
+      }
+    }
+
+    #{$content-selector} {
+      padding: $content-padding;
+    }
+
+    #{$footer-selector} {
+      display: flex;
+      align-items: stretch;
+      border-block-start: 1px solid
+        color-mix(in srgb, currentColor #{$subpart-divider-mix}, transparent);
+    }
+
+    #{$footer-item-selector} {
+      flex: 1 1 0;
+      padding: $footer-padding-y $footer-item-padding;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+
+      &:not(:last-child) {
+        border-inline-end: 1px solid
+          color-mix(in srgb, currentColor #{$subpart-divider-mix}, transparent);
+      }
+    }
+
     @include controls.combinations-apply();
+    @if $enable-light {
+      @include controls.combinations-apply-light();
+    }
+
+    // Under Windows High Contrast the `color-mix(currentColor, transparent)`
+    // dividers collapse to a system colour with low alpha that often renders
+    // invisible; pin to `CanvasText` so structural separators stay readable
+    // (WCAG 1.4.11).
+    @media (forced-colors: active) {
+      #{$header-selector},
+      #{$footer-selector} {
+        border-color: CanvasText;
+      }
+
+      #{$footer-item-selector}:not(:last-child) {
+        border-inline-end-color: CanvasText;
+      }
+    }
   }
 }

package/src/module/card/_variables.scss

@@ -1,13 +1,52 @@
 @use "../../variables";
 
+// Documentation: ../../../docs/src/pages/reference/components/module/card.mdx
+
 $selector: ".card" !default;
+
+// BEM-style subparts. The root `.card` orchestrates layout; each subpart owns
+// its own padding so the outer surface can collapse to `padding: 0` when any
+// subpart is detected via `:has()`. A consumer overriding `$selector` is
+// expected to override these in lockstep — the framework does not derive them
+// from `$selector` to keep customisation explicit.
+$header-selector: ".card__header" !default;
+$header-title-selector: ".card__header-title" !default;
+$header-icon-selector: ".card__header-icon" !default;
+$image-selector: ".card__image" !default;
+$content-selector: ".card__content" !default;
+$footer-selector: ".card__footer" !default;
+$footer-item-selector: ".card__footer-item" !default;
+
 $gap: variables.$global-gap !default;
 $border-radius: variables.$global-border-radius !default;
 $default-combination: variables.$color-combination-default !default;
 
+// Local toggle for `.is-<combo>.is-light` emission. Derived from the
+// framework-wide `$feature-light-variants` flag — see
+// `variables/_feature.scss` for the cross-component rationale.
+$enable-light: variables.$feature-light-variants !default;
+
 // Opt-in container-query host. When non-null, the plugin emits
 // `container-type: inline-size; container-name: <value>;` on the card so
 // consumers can scope their own `containerFrom(...)` rules to card width
 // instead of the viewport. The framework itself emits no container-query
 // rules for card today; this is a hook for downstream code.
 $container-name: null !default;
+
+// Subpart knobs. Sized off `$global-*` / `$size-*` so a consumer retuning the
+// framework's spacing scale at the root carries through to card structure.
+$header-padding-y: variables.$size-small !default;
+$header-padding-x: variables.$global-gap !default;
+$header-title-weight: 600 !default;
+$header-min-height: variables.$global-min-touch-target !default;
+$content-padding: variables.$global-gap !default;
+$footer-padding-y: variables.$size-small !default;
+$footer-item-padding: variables.$size-small !default;
+
+// Divider opacity for header / footer separators and inter-footer-item rules.
+// Mixed against `currentColor` so the divider tracks the surface fg through
+// theme switches and `.is-*` combinations — no separate token needed.
+// Defaults to `$global-subtle-border-mix` so card subpart dividers and the
+// card outer border / popover / dropdown / modal borders all track the same
+// global tint when a consumer retunes the framework.
+$subpart-divider-mix: variables.$global-subtle-border-mix !default;

package/src/module/dropdown/_index.scss

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

package/src/module/dropdown/_plugin.scss

@@ -0,0 +1,155 @@
+@use "sass:list";
+@use "variables" as *;
+@use "../../variables";
+@use "../../helper/controls-internal" as controls;
+
+// Documentation: ../../../docs/src/pages/reference/components/module/dropdown.mdx
+
+@if variables.$feature-module-dropdown {
+  #{$selector} {
+    position: relative;
+    display: inline-block;
+
+    // Visually hide the toggle but keep it focusable / clickable via the
+    // paired <label for>. Same clip-rect technique as `tabs/_plugin.scss`.
+    #{$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;
+    }
+
+    #{$trigger-selector} {
+      display: inline-block;
+      padding: $item-padding-y $item-padding-x;
+      border-radius: $border-radius;
+      cursor: pointer;
+      // Reset UA chrome so <button> and <label> render identically.
+      appearance: none;
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      border: 0;
+      text-decoration: none;
+      user-select: none;
+
+      &:hover {
+        background: $hover-bg;
+      }
+    }
+
+    #{$toggle-selector}:focus-visible + #{$trigger-selector} {
+      @include controls.focus-ring();
+    }
+
+    #{$menu-selector} {
+      display: none;
+      position: absolute;
+      inset-block-start: calc(100% + #{$offset});
+      inset-inline-start: 0;
+      min-width: $min-width;
+      padding: $padding;
+      margin: 0;
+      list-style: none;
+      border-radius: $border-radius;
+      @include variables.backgroundColor(
+        dropdown-bg,
+        var(--kc-bg, #{list.nth($default-combination, 1)}),
+      );
+      @include variables.textColor(
+        dropdown-fg,
+        var(--kc-fg, #{list.nth($default-combination, 2)}),
+      );
+      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: $z-index;
+
+      a,
+      button {
+        display: block;
+        padding: $item-padding-y $item-padding-x;
+        border-radius: $border-radius;
+        color: inherit;
+        text-decoration: none;
+        background: transparent;
+        border: 0;
+        font: inherit;
+        width: 100%;
+        text-align: start;
+        cursor: pointer;
+
+        &:hover {
+          background: $hover-bg;
+        }
+
+        &:focus-visible {
+          @include controls.focus-ring();
+        }
+      }
+    }
+
+    &#{$right-modifier} #{$menu-selector} {
+      inset-inline-start: auto;
+      inset-inline-end: 0;
+    }
+
+    &#{$up-modifier} #{$menu-selector} {
+      inset-block-start: auto;
+      inset-block-end: calc(100% + #{$offset});
+    }
+
+    @if $arrow {
+      #{$trigger-selector}::after {
+        content: "";
+        display: inline-block;
+        margin-inline-start: $arrow-gap;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-color: currentColor transparent transparent;
+        border-width: $arrow-size $arrow-size 0;
+        vertical-align: middle;
+      }
+
+      &#{$up-modifier} #{$trigger-selector}::after {
+        border-color: transparent transparent currentColor;
+        border-width: 0 $arrow-size $arrow-size;
+      }
+    }
+
+    @if variables.has-controls("css", $controls) {
+      &:has(#{$toggle-selector}:checked) #{$menu-selector} {
+        display: block;
+      }
+    }
+
+    @if variables.has-controls("js", $controls) {
+      &:has([aria-expanded="true"]) #{$menu-selector},
+      &#{$active-modifier} #{$menu-selector} {
+        display: block;
+      }
+    }
+
+    @if variables.has-controls("css", $controls) {
+      &#{$hoverable-modifier} {
+        &:hover #{$menu-selector},
+        &:focus-within #{$menu-selector} {
+          display: block;
+        }
+      }
+    }
+
+    @include variables.combinations using ($label, $tuple) {
+      #{$menu-selector} {
+        @include variables.backgroundColor(#{$label}-bg, list.nth($tuple, 1));
+        @include variables.textColor(#{$label}-fg, list.nth($tuple, 2));
+      }
+    }
+  }
+}