@adnap/krysalicss 0.0.1 → 0.1.0

package/src/element/box/_plugin.scss

@@ -0,0 +1,31 @@
+@use "sass:list";
+@use "variables" as *;
+@use "../../variables";
+@use "../../helper/controls-internal" as controls;
+
+// Documentation: ../../../docs/src/pages/reference/components/element/box.mdx
+
+@if variables.$feature-element-box {
+  #{$selector} {
+    @include variables.backgroundColor(
+      box-bg,
+      list.nth($default-combination, 1),
+    );
+    @include variables.textColor(box-fg, list.nth($default-combination, 2));
+    display: block;
+    padding: $padding;
+    border-radius: $border-radius;
+    box-shadow: $shadow;
+
+    @include controls.nestedLinks;
+
+    @include controls.combinations-apply();
+    @if $enable-light {
+      @include controls.combinations-apply-light();
+    }
+
+    @media (forced-colors: active) {
+      border: 1px solid CanvasText;
+    }
+  }
+}

package/src/element/box/_variables.scss

@@ -0,0 +1,18 @@
+@use "../../variables";
+
+// Documentation: ../../../docs/src/pages/reference/components/element/box.mdx
+
+$selector: ".box" !default;
+
+$enable-light: variables.$feature-light-variants !default;
+
+$padding: variables.$size-medium !default;
+$border-radius: variables.$global-border-radius !default;
+
+$shadow: var(
+  --kc-shadow-sm,
+  0 1px 2px 0 rgba(0, 0, 0, 0.05),
+  0 1px 3px 0 rgba(0, 0, 0, 0.1)
+) !default;
+
+$default-combination: variables.$color-combination-default !default;

package/src/element/button/_plugin.scss

@@ -1,9 +1,11 @@
 @use "sass:list";
 @use "variables" as *;
 @use "../../variables";
-@use "../../helper/controls" as controls;
+@use "../../helper/controls-internal" as controls;
 @use "../../typography/link/mixins" as link;
 
+// Documentation: ../../../docs/src/pages/reference/components/element/button.mdx
+
 @if variables.$feature-element-button {
   #{$selector} {
     @include variables.backgroundColor(
@@ -32,6 +34,23 @@
       );
     }
 
+    // Pin the foreground at every link-state pseudo so `<a class="button">`
+    // renders identically to `<button class="button">`. Without this,
+    // typography/link's globally-scoped `a:link/:visited/:hover` rules
+    // (specificity 0,1,1) out-cascade the bare `.button` color (0,1,0)
+    // and bleed link-tone text into the button at rest and on hover.
+    // Restating here at (0,2,0) wins over the link rules while ties with
+    // the modifier loop below — combinations and `.is-link` sit later in
+    // source so they still own their own colour contract.
+    &:link,
+    &:visited,
+    &:hover {
+      @include variables.textColor(
+        default-fg,
+        list.nth($default-combination, 2),
+      );
+    }
+
     // `filter: brightness()` is preferred over swapping `(bg, fg)` on hover:
     // brightness scales every channel uniformly so the rest-state contrast
     // ratio is preserved, which means every shipped combination AND any

package/src/element/checkbox/_plugin.scss

@@ -1,6 +1,8 @@
 @use "variables" as *;
 @use "../../variables";
-@use "../../helper/controls" as controls;
+@use "../../helper/controls-internal" as controls;
+
+// Documentation: ../../../docs/src/pages/reference/components/element/forms/checkbox.mdx
 
 @if variables.$feature-element-checkbox {
   #{$selector} {
@@ -21,9 +23,6 @@
     &:checked {
       background-color: var(--kc-primary-bg, currentColor);
       border-color: var(--kc-primary-bg, currentColor);
-      // The SVG strokes with `currentColor`; pinning `color` to the
-      // primary foreground token guarantees the tick contrasts the fill
-      // whatever the theme's primary palette is.
       color: var(--kc-primary-fg, currentColor);
       background-image: $check-image;
       background-repeat: no-repeat;

package/src/element/checkbox/_variables.scss

@@ -1,5 +1,7 @@
 @use "../../variables";
 
+// Documentation: ../../../docs/src/pages/reference/components/element/forms/checkbox.mdx
+
 // Excludes `.switch`-classed inputs so the switch plugin can fully restyle
 // them. Keep this exclusion in sync if you add another checkbox variant.
 $selector: 'input[type="checkbox"]:not(.switch)' !default;
@@ -15,10 +17,5 @@ $focus-outline-offset: variables.$global-focus-outline-offset !default;
 $disabled-opacity: variables.$global-disabled-opacity !default;
 $border-mix: variables.$global-border-mix !default;
 
-// Inline tick mark using `stroke="currentColor"`: the SVG inherits the
-// element's `color`, which the plugin pins to `--kc-primary-fg` on
-// `:checked`. That keeps the tick AAA-readable against any primary-bg
-// the theme picks (deep sage, mid-tone teal, a high-contrast cyan):
-// the fg token is always the contrast pair of the bg token.
 $check-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none"><path d="M2.5 6.5l2.5 2.5 4.5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
   !default;

package/src/element/divider/_index.scss

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

package/src/element/divider/_plugin.scss

@@ -0,0 +1,69 @@
+@use "variables" as *;
+@use "../../variables";
+
+// Documentation: ../../../docs/src/pages/reference/components/element/divider.mdx
+
+@if variables.$feature-element-divider {
+  #{$selector} {
+    display: block;
+    block-size: 0;
+    margin-block: $gap;
+    border: 0;
+    border-block-start: $thickness solid
+      color-mix(in srgb, var(--kc-fg, currentColor) #{$color-mix}, transparent);
+
+    &#{$vertical-selector} {
+      display: inline-block;
+      block-size: auto;
+      inline-size: 0;
+      align-self: stretch;
+      min-block-size: $vertical-min-height;
+      margin-block: 0;
+      margin-inline: $gap;
+      border-block-start: 0;
+      border-inline-start: $thickness solid
+        color-mix(
+          in srgb,
+          var(--kc-fg, currentColor) #{$color-mix},
+          transparent
+        );
+    }
+
+    &#{$has-text-selector} {
+      display: flex;
+      align-items: center;
+      gap: $text-line-gap;
+      block-size: auto;
+      border: 0;
+      // `text-align: center` redundant under flex but kept for the case
+      // where consumer JS strips the flex (e.g. test snapshot transforms).
+      text-align: center;
+
+      &::before,
+      &::after {
+        content: "";
+        flex: 1 1 0;
+        block-size: 0;
+        border-block-start: $thickness solid
+          color-mix(
+            in srgb,
+            var(--kc-fg, currentColor) #{$color-mix},
+            transparent
+          );
+      }
+    }
+  }
+
+  @media (forced-colors: active) {
+    #{$selector} {
+      border-color: CanvasText;
+
+      &#{$has-text-selector} {
+        &::before,
+        &::after {
+          border-color: CanvasText;
+        }
+      }
+    }
+  }
+}

package/src/element/divider/_variables.scss

@@ -0,0 +1,16 @@
+@use "../../variables";
+
+// Documentation: ../../../docs/src/pages/reference/components/element/divider.mdx
+
+$selector: ".divider" !default;
+$vertical-selector: "#{variables.$selector-prefix-is}vertical" !default;
+$has-text-selector: "#{variables.$selector-prefix-is}has-text" !default;
+
+$thickness: variables.$global-border-width !default;
+$gap: variables.$global-gap !default;
+
+$color-mix: 50% !default;
+
+$text-line-gap: variables.$size-small !default;
+
+$vertical-min-height: 1em !default;

package/src/element/file/_plugin.scss

@@ -1,6 +1,8 @@
 @use "variables" as *;
 @use "../../variables";
 
+// Documentation: ../../../docs/src/pages/reference/components/element/forms/file.mdx
+
 @if variables.$feature-element-file {
   #{$selector} {
     @include variables.backgroundColor(input-bg, transparent);

package/src/element/file/_variables.scss

@@ -1,6 +1,8 @@
 @use "sass:math";
 @use "../../variables";
 
+// Documentation: ../../../docs/src/pages/reference/components/element/forms/file.mdx
+
 $selector: 'input[type="file"]' !default;
 
 $padding-y: variables.$size-extra-small !default;
@@ -16,12 +18,6 @@ $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/image/_index.scss

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

package/src/element/image/_plugin.scss

@@ -0,0 +1,106 @@
+@use "sass:map";
+@use "variables" as *;
+@use "../../variables";
+
+// Documentation: ../../../docs/src/pages/reference/components/element/image.mdx
+
+@if variables.$feature-element-image {
+  #{$selector} {
+    position: relative;
+    display: block;
+    max-inline-size: 100%;
+
+    > img,
+    > video,
+    > iframe,
+    > picture > img {
+      display: block;
+      max-inline-size: 100%;
+      block-size: auto;
+    }
+  }
+
+  @each $name, $value in $ratios {
+    #{$selector}#{variables.$selector-prefix-is}#{$name} {
+      --kc-image-ratio: #{$value};
+      aspect-ratio: var(--kc-image-ratio);
+
+      > img,
+      > video,
+      > iframe,
+      > picture > img {
+        position: absolute;
+        inset: 0;
+        inline-size: 100%;
+        block-size: 100%;
+        max-inline-size: none;
+        object-fit: $object-fit;
+      }
+    }
+  }
+
+  @each $name, $size in $fixed-sizes {
+    #{$selector}#{variables.$selector-prefix-is}#{$name} {
+      inline-size: $size;
+      block-size: $size;
+      max-inline-size: $size;
+
+      > img,
+      > video,
+      > picture > img {
+        position: absolute;
+        inset: 0;
+        inline-size: 100%;
+        block-size: 100%;
+        max-inline-size: none;
+        object-fit: $object-fit;
+      }
+    }
+  }
+
+  #{$selector} {
+    &#{$rounded-selector} {
+      border-radius: $border-radius;
+      overflow: hidden;
+    }
+
+    &#{$circle-selector} {
+      border-radius: 50%;
+      overflow: hidden;
+    }
+
+    &#{$thumbnail-selector},
+    &#{$thumbnail-alias-selector} {
+      padding: $thumbnail-padding;
+      background: $thumbnail-background;
+      border: $thumbnail-border-width solid
+        color-mix(
+          in srgb,
+          var(--kc-fg, currentColor) #{$thumbnail-border-mix},
+          transparent
+        );
+      border-radius: $thumbnail-border-radius;
+
+      > img,
+      > video,
+      > picture > img {
+        border-radius: calc(
+          #{$thumbnail-border-radius} - #{$thumbnail-padding}
+        );
+      }
+    }
+  }
+
+  #{$fluid-selector} {
+    display: block;
+    max-inline-size: 100%;
+    block-size: auto;
+  }
+
+  @media (forced-colors: active) {
+    #{$selector}#{$thumbnail-selector},
+    #{$selector}#{$thumbnail-alias-selector} {
+      border-color: CanvasText;
+    }
+  }
+}

package/src/element/image/_variables.scss

@@ -0,0 +1,53 @@
+@use "../../variables";
+
+// Documentation: ../../../docs/src/pages/reference/components/element/image.mdx
+
+$selector: ".image" !default;
+
+$rounded-selector: "#{variables.$selector-prefix-is}rounded" !default;
+$circle-selector: "#{variables.$selector-prefix-is}circle" !default;
+$thumbnail-selector: "#{variables.$selector-prefix-is}thumbnail" !default;
+
+// Legacy Bulma-compat alias for `.is-thumbnail`. Emits alongside the
+// canonical selector so existing markup keeps working; consumers can
+// override to `''` to strip the alias from the output.
+$thumbnail-alias-selector: "#{variables.$selector-prefix-has}thumbnail"
+  !default;
+
+// Bootstrap-compat fluid utility (`.img-fluid`). Same role as wrapping
+// the image in `.image` but applied directly to an `<img>` — common in
+// migrated codebases. Override to `''` to drop the rule.
+$fluid-selector: ".img-fluid" !default;
+
+$ratios: (
+  square: "1 / 1",
+  1by1: "1 / 1",
+  5by4: "5 / 4",
+  4by3: "4 / 3",
+  3by2: "3 / 2",
+  16by9: "16 / 9",
+  21by9: "21 / 9",
+  2by3: "2 / 3",
+  3by4: "3 / 4",
+  9by16: "9 / 16",
+) !default;
+
+$fixed-sizes: (
+  16x16: 16px,
+  24x24: 24px,
+  32x32: 32px,
+  48x48: 48px,
+  64x64: 64px,
+  96x96: 96px,
+  128x128: 128px,
+) !default;
+
+$object-fit: cover !default;
+
+$border-radius: variables.$global-border-radius !default;
+
+$thumbnail-padding: 0.25rem !default;
+$thumbnail-border-width: variables.$global-border-width !default;
+$thumbnail-border-mix: variables.$global-border-mix !default;
+$thumbnail-background: var(--kc-bg, transparent) !default;
+$thumbnail-border-radius: $border-radius !default;

package/src/element/progress/_plugin.scss

@@ -3,10 +3,10 @@
 @use "variables" as *;
 @use "../../variables";
 
+// Documentation: ../../../docs/src/pages/reference/components/element/progress.mdx
+
 @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;
@@ -16,24 +16,14 @@
     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.
+    // Track tint derives from `--kc-fg` (not currentColor) so the track
+    // stays aligned with the page contrast axis regardless of which
+    // combination fg the bar fill resolves to.
     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) {
@@ -43,14 +33,11 @@
 
   // 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.
+  // doesn't recognise the other pseudo drop the whole rule.
   //
   // 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 list. 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;
   }
@@ -65,9 +52,7 @@
     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`).
+  // selector.nest() distributes the child combinator across every entry.
   // Naive interpolation would attach `>` only to the last entry.
   #{selector.nest($selector, "> #{$value-selector}")} {
     display: block;
@@ -76,10 +61,6 @@
     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;

package/src/element/progress/_variables.scss

@@ -1,19 +1,13 @@
 @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).
+// Documentation: ../../../docs/src/pages/reference/components/element/progress.mdx
+
 $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/_plugin.scss

@@ -1,6 +1,8 @@
 @use "variables" as *;
 @use "../../variables";
-@use "../../helper/controls" as controls;
+@use "../../helper/controls-internal" as controls;
+
+// Documentation: ../../../docs/src/pages/reference/components/element/forms/radio.mdx
 
 @if variables.$feature-element-radio {
   #{$selector} {
@@ -20,9 +22,7 @@
 
     &: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.
+      // Radial gradient draws the inner dot without an extra pseudo-element.
       background-image: radial-gradient(
         circle,
         var(--kc-primary-bg, currentColor) #{$dot-size},

package/src/element/radio/_variables.scss

@@ -1,11 +1,11 @@
 @use "../../variables";
 
+// Documentation: ../../../docs/src/pages/reference/components/element/forms/radio.mdx
+
 $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;

package/src/element/range/_plugin.scss

@@ -1,7 +1,10 @@
+@use "sass:list";
 @use "sass:selector";
 @use "variables" as *;
 @use "../../variables";
 
+// Documentation: ../../../docs/src/pages/reference/components/element/forms/range.mdx
+
 @if variables.$feature-element-range {
   #{$selector} {
     appearance: none;
@@ -29,12 +32,8 @@
   // 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.
+  // `$selector` so rescoping keeps each entry validly paired with the
+  // pseudo. Naive interpolation attaches the pseudo only to the last entry.
 
   @each $track-pseudo
     in ("::-webkit-slider-runnable-track", "::-moz-range-track") {
@@ -49,13 +48,6 @@
     }
   }
 
-  // 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;
@@ -63,7 +55,8 @@
     height: $thumb-size;
     border-radius: 50%;
     background-color: var(--kc-fg, currentColor);
-    border: $thumb-border-width solid var(--kc-bg, white);
+    border: $thumb-border-width solid
+      var(--kc-bg, #{list.nth($default-combination, 1)});
     // WebKit aligns thumb to the top of the track box: recenter manually.
     margin-block-start: calc((#{$track-height} - #{$thumb-size}) / 2);
     cursor: pointer;
@@ -74,15 +67,11 @@
     height: $thumb-size;
     border-radius: 50%;
     background-color: var(--kc-fg, currentColor);
-    border: $thumb-border-width solid var(--kc-bg, white);
+    border: $thumb-border-width solid
+      var(--kc-bg, #{list.nth($default-combination, 1)});
     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") {

package/src/element/range/_variables.scss

@@ -1,10 +1,11 @@
 @use "../../variables";
 
+// Documentation: ../../../docs/src/pages/reference/components/element/forms/range.mdx
+
 $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;
@@ -17,3 +18,8 @@ $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;
+
+// Thumb-border fallback colour. Reaches for the default combination's
+// background (page bg) so the cut-out ring against the track keeps theme
+// parity instead of baking a `white` literal that fails in dark themes.
+$default-combination: variables.$color-combination-default !default;

package/src/element/select/_plugin.scss

@@ -1,6 +1,8 @@
 @use "variables" as *;
 @use "../../variables";
-@use "../../helper/controls" as controls;
+@use "../../helper/controls-internal" as controls;
+
+// Documentation: ../../../docs/src/pages/reference/components/element/forms/select.mdx
 
 @if variables.$feature-element-select {
   #{$selector} {
@@ -46,9 +48,6 @@
       @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;