@sebgroup/green-core 3.5.1 → 3.6.2

package/components/checkbox/checkbox.component.js

@@ -4,7 +4,7 @@ import {
   __privateGet,
   __privateMethod
 } from "../../chunks/chunk.CAV4X6PU.js";
-var _toggleChecked, toggleChecked_fn, _handleInputChange, _dispatchChangeEvents, dispatchChangeEvents_fn;
+var _toggleChecked, toggleChecked_fn, _handleInputChange, _syncFormValue, syncFormValue_fn, _dispatchChangeEvents, dispatchChangeEvents_fn;
 import { property, query } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import { GdsToggleControlBase } from "../../primitives/toggle-controls-base/toggle-control-base.component.js";
@@ -21,6 +21,7 @@ let GdsCheckbox = class extends GdsFormControlElement {
   constructor() {
     super(...arguments);
     __privateAdd(this, _toggleChecked);
+    __privateAdd(this, _syncFormValue);
     __privateAdd(this, _dispatchChangeEvents);
     this.label = "";
     this.supportingText = "";
@@ -58,7 +59,7 @@ let GdsCheckbox = class extends GdsFormControlElement {
         <input
           type="checkbox"
           class="visually-hidden-checkbox"
-          ?checked=${this.checked}
+          .checked=${this.checked}
           ?disabled=${this.disabled}
           .indeterminate=${this.indeterminate}
           aria-invalid=${this.invalid}
@@ -108,8 +109,17 @@ toggleChecked_fn = function(e) {
   __privateMethod(this, _dispatchChangeEvents, dispatchChangeEvents_fn).call(this);
 };
 _handleInputChange = new WeakMap();
+_syncFormValue = new WeakSet();
+syncFormValue_fn = function() {
+  if (this.checked) {
+    this._setFormValue(this._internalValue || "on");
+  } else {
+    this._setFormValue(null);
+  }
+};
 _dispatchChangeEvents = new WeakSet();
 dispatchChangeEvents_fn = function() {
+  __privateMethod(this, _syncFormValue, syncFormValue_fn).call(this);
   this.dispatchStandardEvent("change", {
     bubbles: true,
     composed: true

package/components/form/form-control.d.ts

@@ -69,6 +69,12 @@ export declare abstract class GdsFormControlElement<ValueT = any> extends GdsEle
     protected formResetCallback(): void;
     protected formAssociatedCallback(form?: HTMLFormElement): void;
     protected _handleFormSubmit(e: Event): void;
+    /**
+     * Proxy for `ElementInternals.setFormValue()`. Subclasses can call this to
+     * set the value that will be submitted with the form without going through
+     * the `value` setter.
+     */
+    protected _setFormValue(value: FormData | string | null): void;
     /**
      * This should return a reference to the HTML element that the browser will refer to when the form control is invalid.
      * The reference is used when setting the validity state in ElementInternals.

package/components/form/form-control.js

@@ -151,6 +151,14 @@ class GdsFormControlElement extends GdsElement {
     if (!this.validity.valid)
       e.preventDefault();
   }
+  /**
+   * Proxy for `ElementInternals.setFormValue()`. Subclasses can call this to
+   * set the value that will be submitted with the form without going through
+   * the `value` setter.
+   */
+  _setFormValue(value) {
+    __privateGet(this, _internals).setFormValue(value);
+  }
 }
 _internals = new WeakMap();
 GdsFormControlElement.formAssociated = true;

package/components/index.d.ts

@@ -38,6 +38,7 @@ export * from './segmented-control';
 export * from './select';
 export * from './signal';
 export * from './spinner';
+export * from './switch';
 export * from './text';
 export * from './table';
 export * from './textarea';

package/components/index.js

@@ -38,6 +38,7 @@ export * from "./segmented-control/index.js";
 export * from "./select/index.js";
 export * from "./signal/index.js";
 export * from "./spinner/index.js";
+export * from "./switch/index.js";
 export * from "./text/index.js";
 export * from "./table/index.js";
 export * from "./textarea/index.js";

package/components/switch/index.d.ts

@@ -0,0 +1 @@
+export * from './switch';

package/components/switch/index.js

@@ -0,0 +1 @@
+export * from "./switch.js";

package/components/switch/switch.component.d.ts

@@ -0,0 +1,44 @@
+import { GdsFormControlElement } from '../form/form-control';
+declare class Switch extends GdsFormControlElement<string> {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /**
+     * The checked state of the switch.
+     */
+    checked: boolean;
+    /**
+     * Controls where the control is placed relative to the label.
+     */
+    controlPlacement: 'start' | 'end';
+    /**
+     * Controls text and control sizing.
+     */
+    size: 'large' | 'small';
+    /**
+     * Controls horizontal distribution of label and control.
+     */
+    'justify-content': string;
+    private _input;
+    private _perimeter?;
+    /**
+     * The value submitted with the form when the switch is checked.
+     * Defaults to 'on', matching native checkbox behaviour.
+     */
+    get value(): string;
+    set value(val: string);
+    protected _getValidityAnchor(): HTMLElement;
+    protected formResetCallback(): void;
+    focus(options?: FocusOptions): void;
+    render(): any;
+}
+declare const GdsSwitch_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").LayoutChildProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").MarginProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeXProps) & typeof Switch;
+/**
+ * @element gds-switch
+ * @status beta
+ *
+ * @event input - Dispatched when the checked state changes.
+ * @event change - Dispatched when the checked state changes.
+ */
+export declare class GdsSwitch extends GdsSwitch_base {
+}
+export {};

package/components/switch/switch.component.js

@@ -0,0 +1,185 @@
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod
+} from "../../chunks/chunk.CAV4X6PU.js";
+var _renderNativeInput, renderNativeInput_fn, _renderLabel, renderLabel_fn, _renderThumb, renderThumb_fn, _renderTrack, renderTrack_fn, _handleChange, _dispatchChangeEvents, dispatchChangeEvents_fn, _handleKeyDown, _syncFormValue, syncFormValue_fn, _triggerPerimeterRipple, triggerPerimeterRipple_fn;
+import { property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { gdsCustomElement, html } from "../../scoping.js";
+import { styleExpressionProperty } from "../../utils/decorators/style-expression-property.js";
+import {
+  withLayoutChildProps,
+  withMarginProps,
+  withSizeXProps
+} from "../../utils/mixins/declarative-layout-mixins.js";
+import { GdsFormControlElement } from "../form/form-control.js";
+import { IconCheckmark } from "../icon/icons/checkmark.component.js";
+import { styles } from "./switch.styles.js";
+class Switch extends GdsFormControlElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _renderNativeInput);
+    __privateAdd(this, _renderLabel);
+    __privateAdd(this, _renderThumb);
+    __privateAdd(this, _renderTrack);
+    __privateAdd(this, _dispatchChangeEvents);
+    __privateAdd(this, _syncFormValue);
+    __privateAdd(this, _triggerPerimeterRipple);
+    this.checked = false;
+    this.controlPlacement = "end";
+    this.size = "large";
+    this["justify-content"] = "flex-start";
+    __privateAdd(this, _handleChange, () => {
+      this.checked = this._input.checked;
+      __privateMethod(this, _triggerPerimeterRipple, triggerPerimeterRipple_fn).call(this);
+      __privateMethod(this, _dispatchChangeEvents, dispatchChangeEvents_fn).call(this);
+    });
+    __privateAdd(this, _handleKeyDown, (event) => {
+      if (this.disabled)
+        return;
+      if (event.key === "Enter") {
+        event.preventDefault();
+        this._input.click();
+      }
+    });
+  }
+  /**
+   * The value submitted with the form when the switch is checked.
+   * Defaults to 'on', matching native checkbox behaviour.
+   */
+  get value() {
+    return this._internalValue || "on";
+  }
+  set value(val) {
+    this._internalValue = val;
+  }
+  _getValidityAnchor() {
+    return this._input;
+  }
+  formResetCallback() {
+    this.checked = false;
+    this._internalValue = void 0;
+  }
+  focus(options) {
+    this._input?.focus(options);
+  }
+  render() {
+    const classes = {
+      switch: true,
+      checked: this.checked,
+      disabled: this.disabled,
+      "control-start": this.controlPlacement === "start",
+      small: this.size === "small"
+    };
+    return html`
+      <label class=${classMap(classes)} for="switch-input">
+        ${[__privateMethod(this, _renderNativeInput, renderNativeInput_fn).call(this), __privateMethod(this, _renderLabel, renderLabel_fn).call(this), __privateMethod(this, _renderTrack, renderTrack_fn).call(this)]}
+      </label>
+    `;
+  }
+}
+_renderNativeInput = new WeakSet();
+renderNativeInput_fn = function() {
+  return html`
+      <input
+        id="switch-input"
+        type="checkbox"
+        role="switch"
+        .checked=${this.checked}
+        ?disabled=${this.disabled}
+        aria-label=${ifDefined(this.label ? void 0 : "Switch")}
+        @keydown=${__privateGet(this, _handleKeyDown)}
+        @change=${__privateGet(this, _handleChange)}
+      />
+    `;
+};
+_renderLabel = new WeakSet();
+renderLabel_fn = function() {
+  if (!this.label)
+    return null;
+  return html`<span id="label" class="label">${this.label}</span>`;
+};
+_renderThumb = new WeakSet();
+renderThumb_fn = function() {
+  return html`<span class="thumb">
+      <span class="perimeter"></span>
+      <gds-icon-checkmark
+        size="${this.size === "small" ? "xs" : "s"}"
+        stroke="4"
+        color=${this.disabled ? "neutral-05" : "positive-01"}
+        class="checkmark"
+      ></gds-icon-checkmark>
+    </span>`;
+};
+_renderTrack = new WeakSet();
+renderTrack_fn = function() {
+  return html`
+      <span class="track" aria-hidden="true"> ${__privateMethod(this, _renderThumb, renderThumb_fn).call(this)} </span>
+    `;
+};
+_handleChange = new WeakMap();
+_dispatchChangeEvents = new WeakSet();
+dispatchChangeEvents_fn = function() {
+  __privateMethod(this, _syncFormValue, syncFormValue_fn).call(this);
+  this.dispatchStandardEvent("change", {
+    bubbles: true,
+    composed: true
+  });
+  this.dispatchStandardEvent("input", {
+    bubbles: true,
+    composed: true
+  });
+};
+_handleKeyDown = new WeakMap();
+_syncFormValue = new WeakSet();
+syncFormValue_fn = function() {
+  if (this.checked) {
+    this._setFormValue(this._internalValue || "on");
+  } else {
+    this._setFormValue(null);
+  }
+};
+_triggerPerimeterRipple = new WeakSet();
+triggerPerimeterRipple_fn = function() {
+  const perimeter = this._perimeter;
+  if (!perimeter)
+    return;
+  perimeter.classList.remove("ripple");
+  void perimeter.offsetWidth;
+  perimeter.classList.add("ripple");
+};
+Switch.styles = [styles];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Switch.prototype, "checked", 2);
+__decorateClass([
+  property({ attribute: "control-placement", reflect: true })
+], Switch.prototype, "controlPlacement", 2);
+__decorateClass([
+  property({ reflect: true })
+], Switch.prototype, "size", 2);
+__decorateClass([
+  styleExpressionProperty({
+    selector: ".switch",
+    valueTemplate: (v) => v
+  })
+], Switch.prototype, "justify-content", 2);
+__decorateClass([
+  query('input[type="checkbox"]')
+], Switch.prototype, "_input", 2);
+__decorateClass([
+  query(".perimeter")
+], Switch.prototype, "_perimeter", 2);
+let GdsSwitch = class extends withLayoutChildProps(
+  withMarginProps(withSizeXProps(Switch))
+) {
+};
+GdsSwitch = __decorateClass([
+  gdsCustomElement("gds-switch", { dependsOn: [IconCheckmark] })
+], GdsSwitch);
+export {
+  GdsSwitch
+};

package/components/switch/switch.d.ts

@@ -0,0 +1,2 @@
+import { GdsSwitch } from './switch.component';
+export { GdsSwitch };

package/components/switch/switch.js

@@ -0,0 +1,6 @@
+import "../../chunks/chunk.CAV4X6PU.js";
+import { GdsSwitch } from "./switch.component.js";
+GdsSwitch.define();
+export {
+  GdsSwitch
+};

package/components/switch/switch.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/switch/switch.styles.js

@@ -0,0 +1,239 @@
+import "../../chunks/chunk.CAV4X6PU.js";
+import { css } from "lit";
+const style = css`
+  @media (prefers-reduced-motion: reduce) {
+    :is(.track, .thumb, .checkmark) {
+      transition: none;
+    }
+
+    .perimeter.ripple {
+      animation: none;
+    }
+  }
+
+  :host {
+    --switch-motion-track-duration: var(--gds-sys-motion-duration-default);
+    --switch-motion-thumb-duration: var(--gds-sys-motion-duration-fast);
+    --switch-motion-checkmark-duration: var(--gds-sys-motion-duration-default);
+    --switch-motion-ripple-duration: var(--gds-sys-motion-duration-default);
+    --switch-motion-ease: cubic-bezier(var(--gds-sys-motion-easing-ease-out));
+    --switch-gap: var(--gds-sys-space-s);
+  }
+
+  :host([disabled]) {
+    color: var(--gds-sys-color-content-disabled-01);
+  }
+
+  #switch-input {
+    position: absolute;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  .switch {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-direction: row;
+    gap: var(--switch-gap);
+    user-select: none;
+    cursor: pointer;
+    z-index: 1;
+  }
+
+  .label {
+    font: var(--gds-sys-text-detail-m-book);
+  }
+
+  .switch.control-start {
+    flex-direction: row-reverse;
+  }
+
+  .switch.disabled {
+    cursor: not-allowed;
+  }
+
+  .switch.small {
+    --switch-gap: var(--gds-sys-space-xs);
+    --switch-track-width: 38px;
+    --switch-track-height: 24px;
+    --switch-thumb-size: 12px;
+    --switch-thumb-size-checked: 16px;
+    --switch-thumb-top: 4px;
+    --switch-thumb-left: 4px;
+    --switch-thumb-top-checked: 2px;
+    --switch-thumb-left-checked: calc(
+      100% - var(--switch-thumb-size-checked) - 2px
+    );
+  }
+
+  .switch.small .label {
+    font: var(--gds-sys-text-detail-s-book);
+  }
+
+  .switch:not(.small) {
+    --switch-track-width: 54px;
+    --switch-track-height: 32px;
+    --switch-thumb-size: 20px;
+    --switch-thumb-size-checked: 24px;
+    --switch-thumb-top: 4px;
+    --switch-thumb-left: 4px;
+    --switch-thumb-top-checked: 2px;
+    --switch-thumb-left-checked: calc(
+      100% - var(--switch-thumb-size-checked) - 2px
+    );
+  }
+
+  :is(.track, .thumb, .perimeter) {
+    border-radius: var(--gds-sys-radius-max);
+  }
+
+  .track {
+    display: flex;
+    position: relative;
+    box-sizing: border-box;
+    width: var(--switch-track-width);
+    height: var(--switch-track-height);
+    border-width: var(--gds-sys-space-4xs);
+    border-style: solid;
+    border-color: var(--gds-sys-color-border-neutral-01);
+    outline-color: transparent;
+    outline-offset: var(--gds-sys-space-4xs);
+    outline-style: solid;
+    outline-width: var(--gds-sys-space-4xs);
+    transition:
+      background-color var(--switch-motion-track-duration)
+        var(--switch-motion-ease),
+      border-color var(--switch-motion-track-duration) var(--switch-motion-ease),
+      outline-color var(--switch-motion-track-duration)
+        var(--switch-motion-ease);
+  }
+
+  #switch-input:focus-visible ~ .track {
+    outline-color: var(--gds-sys-color-content-neutral-01);
+  }
+
+  .thumb {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    background: var(--gds-sys-color-border-neutral-01);
+    width: var(--switch-thumb-size);
+    height: var(--switch-thumb-size);
+    top: var(--switch-thumb-top);
+    left: var(--switch-thumb-left);
+    transition:
+      top var(--switch-motion-thumb-duration) var(--switch-motion-ease),
+      left var(--switch-motion-thumb-duration) var(--switch-motion-ease),
+      width var(--switch-motion-thumb-duration) var(--switch-motion-ease),
+      height var(--switch-motion-thumb-duration) var(--switch-motion-ease),
+      background-color var(--switch-motion-thumb-duration)
+        var(--switch-motion-ease),
+      scale var(--switch-motion-thumb-duration) var(--switch-motion-ease);
+  }
+
+  .perimeter {
+    display: flex;
+    position: absolute;
+    inset: -6px;
+    z-index: -2;
+    background: color-mix(
+      in srgb,
+      var(--gds-sys-color-l3-neutral-03),
+      var(--gds-sys-color-state-neutral-01)
+    );
+    opacity: 0;
+    transform: scale(0);
+    pointer-events: none;
+  }
+
+  .perimeter.ripple {
+    animation: perimeter-pulse var(--switch-motion-ripple-duration)
+      var(--switch-motion-ease);
+  }
+
+  @keyframes perimeter-pulse {
+    from {
+      opacity: 1;
+      transform: scale(0);
+    }
+    to {
+      opacity: 0;
+      transform: scale(1.2);
+    }
+  }
+
+  .checkmark {
+    opacity: 0;
+    scale: 0;
+    transition:
+      scale var(--switch-motion-checkmark-duration) var(--switch-motion-ease),
+      opacity var(--switch-motion-checkmark-duration) var(--switch-motion-ease);
+    transform-origin: center;
+  }
+
+  @media (pointer: fine) {
+    .switch:not(.disabled):not(:active):hover .thumb {
+      scale: 1.085;
+    }
+  }
+
+  .checked {
+    .track {
+      background-color: var(--gds-sys-color-l3-positive-01);
+      border-color: var(--gds-sys-color-l3-positive-01);
+    }
+
+    .thumb {
+      top: var(--switch-thumb-top-checked);
+      left: var(--switch-thumb-left-checked);
+      width: var(--switch-thumb-size-checked);
+      height: var(--switch-thumb-size-checked);
+      background: var(--gds-sys-color-l3-neutral-01);
+    }
+
+    .checkmark {
+      opacity: 1;
+      scale: 1;
+    }
+
+    .perimeter {
+      background: color-mix(
+        in srgb,
+        var(--gds-sys-color-l3-positive-01),
+        var(--gds-sys-color-state-positive-01)
+      );
+    }
+  }
+
+  .switch.disabled .track {
+    background-color: var(--gds-sys-color-l3-disabled-01);
+    border-color: var(--gds-sys-color-content-disabled-01);
+    outline-color: transparent;
+  }
+
+  .switch.disabled .thumb {
+    background: var(--gds-sys-color-content-disabled-01);
+  }
+
+  .switch.disabled .perimeter {
+    background: var(--gds-sys-color-state-neutral-01);
+  }
+
+  .switch.disabled .track {
+    opacity: 0.6;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .switch.disabled .track {
+      opacity: 0.4;
+    }
+  }
+`;
+const styles = style;
+export {
+  styles
+};