@sebgroup/green-core 1.15.0 → 1.16.0

package/components/radio/radio.js

@@ -0,0 +1,240 @@
+import {
+  GdsRadioGroup
+} from "../../chunks/chunk.TN6ZYAH3.js";
+import "../../chunks/chunk.7TCXY7BP.js";
+import {
+  constrainSlots
+} from "../../chunks/chunk.6NM7ENKA.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateSet
+} from "../../chunks/chunk.5VURDMKE.js";
+
+// libs/core/src/components/radio/radio.ts
+import { LitElement, html, unsafeCSS } from "lit";
+import { customElement } from "lit/decorators.js";
+
+// libs/core/src/components/radio/radio.css
+var radio_default = `:host {
+  --gds-checkbox-bg-color: hsl(0, 0%, 100%);
+  --gds-checkbox-border-color: hsla(60, 4%, 50%, 1);
+  --gds-checkbox-border-width: 1px;
+  --gds-checkbox-border-radius: 200px;
+  --gds-checkbox-color-hover: hsla(60, 6%, 90%, 1);
+  --gds-checkbox-color-active: hsla(60, 4%, 85%, 1);
+  --gds-checkbox-checked-color: hsla(60, 4%, 20%, 1);
+  --gds-checkbox-color-tick: hsl(0, 0%, 100%);
+  --gds-radio-transition: all 248ms ease-in-out;
+  --gds-radio-transition-input: all 248ms cubic-bezier(0.2, 0.85, 0.32, 1.2);
+}
+
+@media (prefers-color-scheme: dark) {
+  :host {
+    --gds-dark: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host {
+    --gds-radio-transition: none;
+    --gds-radio-transition-input: none;
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  :host {
+    --gds-input-transparency: 1;
+  }
+}
+
+@media (prefers-contrast: more) {
+  :host {
+    --gds-input-color-bg: hsla(60, 4%, 96%, 1);
+    --gds-input-color-outline-alpha: 0%;
+  }
+}
+
+.gds-radio {
+  align-items: center;
+  border-radius: var(--gds-checkbox-border-radius);
+  cursor: pointer;
+  display: flex;
+  height: 32px;
+  justify-content: center;
+  position: relative;
+  transition: var(--gds-radio-transition);
+  width: 32px;
+
+  input {
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    aspect-ratio: 1/1;
+    background-color: var(--gds-checkbox-bg-color);
+    border: var(--gds-checkbox-border-width) solid
+      var(--gds-checkbox-border-color);
+    border-radius: var(--gds-checkbox-border-radius);
+    box-sizing: border-box;
+    cursor: pointer;
+    height: 16px;
+    margin: unset;
+    padding: unset;
+    position: relative;
+    transition: var(--gds-radio-transition-input);
+    width: 16px;
+
+    &:checked {
+      border-color: var(--gds-checkbox-checked-color);
+      border-width: 4px;
+    }
+
+    &[indeterminate],
+    &:indeterminate {
+      &::after {
+        border-left: 0;
+        border-radius: 0;
+        border-top: 0;
+        height: var(--gds-checkbox-border-width);
+        inset: 5px 0 0 2px;
+        opacity: 1;
+        rotate: 0deg;
+        scale: 1;
+        width: 8px;
+      }
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  &:hover:has(input:not([disabled])) {
+    background-color: var(--gds-checkbox-color-hover);
+  }
+
+  &:active:has(input:not([disabled])) {
+    background-color: var(--gds-checkbox-color-active);
+
+    .gds-checkbox-core {
+      border-color: var(--gds-checkbox-checked-color);
+    }
+  }
+
+  &:has(input:checked) {
+    background-color: var(--gds-checkbox-color-hover);
+  }
+
+  &:has(input:disabled) {
+    cursor: not-allowed;
+  }
+
+  /* Invalid state */
+  &:has(input:invalid) {
+    --gds-checkbox-bg-color: hsla(13, 75%, 95%, 1);
+    --gds-checkbox-border-color: hsla(9, 75%, 38%, 1);
+    --gds-checkbox-color-hover: hsla(12, 75%, 91%, 1);
+    --gds-checkbox-color-active: hsla(12, 78%, 86%, 1);
+    --gds-checkbox-checked-color: hsla(9, 75%, 38%, 1);
+    --gds-checkbox-color-tick: hsla(0, 0%, 100%, 1);
+
+    input {
+      &::after {
+        border-color: var(--gds-checkbox-color-tick);
+      }
+
+      &:checked {
+        background-color: var(--gds-checkbox-checked-color);
+        border-color: var(--gds-checkbox-checked-color);
+        color: var(--gds-checkbox-checked-color-tick);
+      }
+    }
+
+    &:hover:has(input:not([disabled])) {
+      background-color: var(--gds-checkbox-color-hover);
+    }
+
+    &:active:has(input:not([disabled])) {
+      background-color: var(--gds-checkbox-color-active);
+
+      .gds-checkbox-core {
+        border-color: var(--gds-checkbox-checked-color);
+      }
+    }
+
+    &:has(input:checked) {
+      background-color: var(--gds-checkbox-color-hover);
+    }
+  }
+}
+
+.gds-radio-group {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: 0;
+  padding: 0;
+}
+`;
+
+// libs/core/src/components/radio/radio.ts
+var _internals;
+var GdsRadio = class extends LitElement {
+  constructor() {
+    super();
+    // Private members
+    __privateAdd(this, _internals, void 0);
+    this.inputElement = null;
+    this.exludeAttr = ["id", "label"];
+    __privateSet(this, _internals, this.attachInternals());
+    constrainSlots(this);
+  }
+  reflectAttributesToInput() {
+    if (this.inputElement) {
+      const attributes = this.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attribute = attributes[i];
+        if (!this.exludeAttr.includes(attribute.name)) {
+          this.inputElement.setAttribute(attribute.name, attribute.value);
+        }
+      }
+    }
+  }
+  update(changedProperties) {
+    var _a;
+    super.update(changedProperties);
+    if (!this.inputElement) {
+      this.inputElement = (_a = this.shadowRoot) == null ? void 0 : _a.getElementById(
+        "radio"
+      );
+    }
+    this.reflectAttributesToInput();
+  }
+  handleClick() {
+    const radioGroup = this.closest("gds-radio-group");
+    if (radioGroup instanceof GdsRadioGroup) {
+      radioGroup.selectedValue = this.value;
+    }
+  }
+  render() {
+    return html`
+      <label class="gds-radio">
+        <input id="radio" type="radio" />
+      </label>
+      <label for="radio">${this.textContent}</label>
+    `;
+  }
+};
+_internals = new WeakMap();
+GdsRadio.styles = unsafeCSS(radio_default);
+GdsRadio.shadowRootOptions = {
+  mode: "open",
+  delegatesFocus: true
+};
+GdsRadio = __decorateClass([
+  customElement("gds-radio")
+], GdsRadio);
+export {
+  GdsRadio
+};

package/components/segmented-control/index.d.ts

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

package/components/segmented-control/index.js

@@ -0,0 +1,15 @@
+import {
+  GdsSegmentedControl
+} from "../../chunks/chunk.522C22QY.js";
+import "../../chunks/chunk.TSDZQZBY.js";
+import "../../chunks/chunk.3SEVAGLE.js";
+import "../../chunks/chunk.7P5N6NZL.js";
+import "../../chunks/chunk.QONSFT2N.js";
+import "../../chunks/chunk.2LQSDOD4.js";
+import "../../chunks/chunk.YO24ZYAD.js";
+import "../../chunks/chunk.2WO4NHJ2.js";
+import "../../chunks/chunk.VOYMQ322.js";
+import "../../chunks/chunk.5VURDMKE.js";
+export {
+  GdsSegmentedControl
+};

package/components/segmented-control/segment/index.d.ts

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

package/components/segmented-control/segment/index.js

@@ -0,0 +1,13 @@
+import "../../../chunks/chunk.TSDZQZBY.js";
+import {
+  GdsSegment
+} from "../../../chunks/chunk.3SEVAGLE.js";
+import "../../../chunks/chunk.7P5N6NZL.js";
+import "../../../chunks/chunk.QONSFT2N.js";
+import "../../../chunks/chunk.2LQSDOD4.js";
+import "../../../chunks/chunk.YO24ZYAD.js";
+import "../../../chunks/chunk.VOYMQ322.js";
+import "../../../chunks/chunk.5VURDMKE.js";
+export {
+  GdsSegment
+};

package/components/segmented-control/segment/segment.js

@@ -0,0 +1,12 @@
+import {
+  GdsSegment
+} from "../../../chunks/chunk.3SEVAGLE.js";
+import "../../../chunks/chunk.7P5N6NZL.js";
+import "../../../chunks/chunk.QONSFT2N.js";
+import "../../../chunks/chunk.2LQSDOD4.js";
+import "../../../chunks/chunk.YO24ZYAD.js";
+import "../../../chunks/chunk.VOYMQ322.js";
+import "../../../chunks/chunk.5VURDMKE.js";
+export {
+  GdsSegment
+};

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

@@ -1,5 +1,5 @@
 import { GdsElement } from '../../gds-element';
-import { GdsSegment } from './segment/segment';
+import { GdsSegment } from '../../components/segmented-control/segment';
 /**
  * @element gds-segmented-control
  * A segmented control is a group of 2-5 buttons that lets the user switch views or sort elements.

package/components/segmented-control/segmented-control.js

@@ -0,0 +1,15 @@
+import {
+  GdsSegmentedControl
+} from "../../chunks/chunk.522C22QY.js";
+import "../../chunks/chunk.TSDZQZBY.js";
+import "../../chunks/chunk.3SEVAGLE.js";
+import "../../chunks/chunk.7P5N6NZL.js";
+import "../../chunks/chunk.QONSFT2N.js";
+import "../../chunks/chunk.2LQSDOD4.js";
+import "../../chunks/chunk.YO24ZYAD.js";
+import "../../chunks/chunk.2WO4NHJ2.js";
+import "../../chunks/chunk.VOYMQ322.js";
+import "../../chunks/chunk.5VURDMKE.js";
+export {
+  GdsSegmentedControl
+};

package/components/switch/switch.js

@@ -0,0 +1,164 @@
+import "../../chunks/chunk.7TCXY7BP.js";
+import {
+  constrainSlots
+} from "../../chunks/chunk.6NM7ENKA.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateSet
+} from "../../chunks/chunk.5VURDMKE.js";
+
+// libs/core/src/components/switch/switch.ts
+import { LitElement, html, unsafeCSS } from "lit";
+import { customElement } from "lit/decorators.js";
+
+// libs/core/src/components/switch/switch.css
+var switch_default = `:host {
+  --gds-checkbox-bg-color: hsl(0, 0%, 100%);
+  --gds-checkbox-border-color: hsla(60, 4%, 20%, 1);
+  --gds-checkbox-border-width: 7.5px;
+  --gds-checkbox-border-radius: 200px;
+  --gds-checkbox-color-hover: hsla(60, 6%, 90%, 1);
+  --gds-checkbox-color-active: hsla(60, 4%, 85%, 1);
+  --gds-checkbox-checked-color: hsla(130, 40%, 30%, 1);
+  --gds-checkbox-color-tick: hsl(0, 0%, 100%);
+  --gds-switch-transition: all 548ms ease-in-out;
+  --gds-switch-animaton-on: 248ms;
+  --gds-switch-animaton-off: 248ms;
+  --gds-switch-animaton-transition: all 248ms cubic-bezier(0.2, 0.85, 0.32, 1.2);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host {
+    --gds-switch-transition: none;
+    --gds-switch-animaton-on: 0ms;
+    --gds-switch-animaton-off: 0ms;
+    --gds-switch-animaton-transition: none;
+  }
+}
+
+.gds-switch {
+  align-items: center;
+  background-color: var(--gds-checkbox-color-hover);
+  border-radius: var(--gds-checkbox-border-radius);
+  cursor: pointer;
+  display: flex;
+  height: 32px;
+  justify-content: flex-start;
+  position: relative;
+  transition: var(--gds-switch-transition);
+  width: 64px;
+
+  input {
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    background-color: var(--gds-checkbox-bg-color);
+    border: var(--gds-checkbox-border-width) solid
+      var(--gds-checkbox-border-color);
+    border-radius: var(--gds-checkbox-border-radius);
+    box-sizing: border-box;
+    cursor: pointer;
+    height: 32px;
+    margin: unset;
+    padding: unset;
+    position: relative;
+    transition: var(--gds-switch-animaton-transition);
+    width: 32px;
+
+    &:checked {
+      animation: switch-on var(--gds-switch-animaton-on) forwards;
+      border-color: var(--gds-checkbox-checked-color);
+    }
+
+    &:not(:checked) {
+      animation: switch-off var(--gds-switch-animaton-off) backwards;
+    }
+  }
+
+  &:has(input:checked) {
+    background-color: var(--gds-checkbox-checked-color);
+  }
+
+  &:has(input:disabled) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+@keyframes switch-on {
+  to {
+    border-width: 0;
+    transform: translate3d(100%, 0, 0) scale(0.5);
+    width: 32px;
+  }
+}
+
+@keyframes switch-off {
+  from {
+    border-width: 0;
+    transform: translate3d(100%, 0, 0) scale(0.5);
+    width: 32px;
+  }
+
+  to {
+    border-width: 7.5px;
+    transform: translate3d(0%, 0, 0) scale(1);
+    width: 32px;
+  }
+}
+`;
+
+// libs/core/src/components/switch/switch.ts
+var _internals;
+var GdsSwitch = class extends LitElement {
+  constructor() {
+    super();
+    // Private members
+    __privateAdd(this, _internals, void 0);
+    this.inputElement = null;
+    this.exludeAttr = ["id", "label"];
+    __privateSet(this, _internals, this.attachInternals());
+    constrainSlots(this);
+  }
+  reflectAttributesToInput() {
+    if (this.inputElement) {
+      const attributes = this.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attribute = attributes[i];
+        if (!this.exludeAttr.includes(attribute.name)) {
+          this.inputElement.setAttribute(attribute.name, attribute.value);
+        }
+      }
+    }
+  }
+  update(changedProperties) {
+    var _a;
+    super.update(changedProperties);
+    if (!this.inputElement) {
+      this.inputElement = (_a = this.shadowRoot) == null ? void 0 : _a.getElementById(
+        "switch"
+      );
+    }
+    this.reflectAttributesToInput();
+  }
+  render() {
+    return html`
+      <label class="gds-switch">
+        <input id="switch" type="checkbox" />
+      </label>
+    `;
+  }
+};
+_internals = new WeakMap();
+GdsSwitch.styles = unsafeCSS(switch_default);
+GdsSwitch.shadowRootOptions = {
+  mode: "open",
+  delegatesFocus: true
+};
+GdsSwitch = __decorateClass([
+  customElement("gds-switch")
+], GdsSwitch);
+export {
+  GdsSwitch
+};

package/components/theme/index.d.ts

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

package/components/theme/index.js

@@ -0,0 +1,11 @@
+import {
+  GdsTheme
+} from "../../chunks/chunk.XI4H54TV.js";
+import "../../chunks/chunk.QONSFT2N.js";
+import "../../chunks/chunk.2LQSDOD4.js";
+import "../../chunks/chunk.YO24ZYAD.js";
+import "../../chunks/chunk.VOYMQ322.js";
+import "../../chunks/chunk.5VURDMKE.js";
+export {
+  GdsTheme
+};

package/components/theme/theme.js

@@ -0,0 +1,11 @@
+import {
+  GdsTheme
+} from "../../chunks/chunk.XI4H54TV.js";
+import "../../chunks/chunk.QONSFT2N.js";
+import "../../chunks/chunk.2LQSDOD4.js";
+import "../../chunks/chunk.YO24ZYAD.js";
+import "../../chunks/chunk.VOYMQ322.js";
+import "../../chunks/chunk.5VURDMKE.js";
+export {
+  GdsTheme
+};