@sebgroup/green-core 1.20.0 → 1.20.2

package/components/radio/radio.js

@@ -1,240 +0,0 @@
-import {
-  GdsRadioGroup
-} from "../../chunks/chunk.3RYYLMGT.js";
-import "../../chunks/chunk.7TCXY7BP.js";
-import {
-  constrainSlots
-} from "../../chunks/chunk.KBYQYDL3.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/switch/switch.d.ts

@@ -1,12 +0,0 @@
-import { LitElement } from 'lit';
-export declare class GdsSwitch extends LitElement {
-    #private;
-    static styles: import("lit").CSSResult;
-    static shadowRootOptions: ShadowRootInit;
-    constructor();
-    private inputElement;
-    private exludeAttr;
-    private reflectAttributesToInput;
-    update(changedProperties: Map<PropertyKey, unknown>): void;
-    render(): import("lit").TemplateResult<1>;
-}

package/components/switch/switch.js

@@ -1,164 +0,0 @@
-import "../../chunks/chunk.7TCXY7BP.js";
-import {
-  constrainSlots
-} from "../../chunks/chunk.KBYQYDL3.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/tooltip/tooltip.d.ts

@@ -1,14 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * @element gds-tooltip
- *
- * @status beta
- */
-export declare class GdsTooltip extends LitElement {
-    static styles: import("lit").CSSResult;
-    static shadowRootOptions: ShadowRootInit;
-    open: boolean;
-    content: null;
-    position: null;
-    render(): import("lit").TemplateResult<1>;
-}

package/components/tooltip/tooltip.js

@@ -1,252 +0,0 @@
-import {
-  __decorateClass
-} from "../../chunks/chunk.5VURDMKE.js";
-
-// libs/core/src/components/tooltip/tooltip.ts
-import { LitElement, html, unsafeCSS } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-// libs/core/src/components/tooltip/style/tooltip.styles.css
-var tooltip_styles_default = `@layer gds-tooltip, tokens, a11y, parts, position, trigger, keyframes;
-
-@layer gds-tooltip {
-  @layer tokens {
-    :host {
-      --gds-tooltip-bg-color: #000;
-      --gds-tooltip-bg-alpha: 90%;
-      --gds-tooltip-fs: 14px;
-      --gds-tooltip-bg: color-mix(
-        in srgb,
-        var(--gds-tooltip-bg-color) var(--gds-tooltip-bg-alpha),
-        transparent
-      );
-      --gds-tooltip-color: #fff;
-      --gds-tooltip-offset: 8px;
-      --gds-tooltip-arrow: 6px;
-      --gds-tooltip-radii: 8px;
-      --gds-tooltip-transition-easing: var(--gds-sys-transition-easing);
-      display: contents;
-      position: relative;
-    }
-
-    @media (prefers-color-scheme: dark) {
-      :host {
-        --gds-tooltip-color-bg: var(
-          --gds-tooltip-color-bg-dark,
-          var(--gds-color-grey-20)
-        );
-      }
-    }
-  }
-
-  .gds-tooltip {
-    display: inline-block;
-    position: relative;
-
-    @layer a11y {
-      --gds-tooltip-contrast: var(--gds-sys-transition);
-      --gds-tooltip-transition: var(--gds-sys-transition);
-      cursor: help;
-    }
-
-    @layer parts {
-      &::before,
-      &::after {
-        align-items: center;
-        display: none;
-        font-size: var(--gds-tooltip-fs);
-        justify-content: center;
-        line-height: 1;
-        opacity: 0;
-        pointer-events: none;
-        position: absolute;
-        -webkit-user-select: none;
-           -moz-user-select: none;
-                user-select: none;
-      }
-
-      &::before {
-        border: var(--gds-tooltip-arrow, 6px) solid transparent;
-        content: '';
-        z-index: 1001;
-      }
-
-      &::after {
-        background-color: var(--gds-tooltip-bg);
-        border-radius: var(--gds-tooltip-radii);
-        color: var(--gds-tooltip-color);
-        content: attr(content);
-        max-inline-size: 50ch;
-        min-inline-size: -moz-max-content;
-        min-inline-size: max-content;
-        offset-anchor: center top;
-        overflow: hidden;
-        padding-block: 1.5ex;
-        padding-inline: 2ch;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        z-index: 1000;
-      }
-
-      &:hover::before,
-      &:hover::after {
-        display: flex;
-      }
-    }
-
-    @layer position {
-      &:not([position])::before,
-      &[position^='up']::before {
-        border-bottom-width: 0;
-        border-top-color: var(--gds-tooltip-bg);
-        bottom: calc(100% + 2px);
-      }
-
-      &:not([position])::after,
-      &[position^='up']::after {
-        bottom: calc(100% + var(--gds-tooltip-offset, 8px));
-      }
-
-      &:not([position])::before,
-      &:not([position])::after,
-      &[position^='up']::before,
-      &[position^='up']::after {
-        left: 50%;
-        transform: translate(-50%, calc(var(--gds-tooltip-offset, 8px) * -1));
-      }
-
-      &[position^='down']::before {
-        border-bottom-color: var(--gds-tooltip-bg);
-        border-top-width: 0;
-        top: calc(100% + 2px);
-      }
-
-      &[position^='down']::after {
-        top: calc(100% + var(--gds-tooltip-offset, 8px));
-      }
-
-      &[position^='down']::before,
-      &[position^='down']::after {
-        left: 50%;
-        transform: translate(-50%, var(--gds-tooltip-offset, 8px));
-      }
-
-      &[position^='left']::before {
-        border-left-color: var(--gds-tooltip-bg);
-        border-right-width: 0;
-        left: calc(-1px - var(--gds-tooltip-offset, 8px));
-        top: 50%;
-        transform: translate(calc(var(--gds-tooltip-offset, 8px) * -2), -50%);
-      }
-
-      &[position^='left']::after {
-        right: calc(100% + var(--gds-tooltip-offset, 8px));
-        top: 50%;
-        transform: translate(calc(var(--gds-tooltip-offset, 8px) * -1), -50%);
-      }
-
-      &[position^='right']::before {
-        border-left-width: 0;
-        border-right-color: var(--gds-tooltip-bg);
-        right: calc(-1px - var(--gds-tooltip-offset, 8px));
-        top: 50%;
-        transform: translate(var(--gds-tooltip-offset, 8px), -50%);
-      }
-
-      &[position^='right']::after {
-        left: calc(100% + var(--gds-tooltip-offset, 8px));
-        top: 50%;
-        transform: translate(var(--gds-tooltip-offset, 8px), -50%);
-      }
-    }
-
-    @layer trigger {
-      &:hover:is(
-          :not([position]),
-          [position^='up'],
-          [position^='down']
-        )::before,
-      &:hover:is(
-          :not([position]),
-          [position^='up'],
-          [position^='down']
-        )::after {
-        animation: gds-tooltip-animation-y 300ms
-          var(--gds-tooltip-transition-easing) forwards;
-      }
-
-      &:hover:is(
-          :not([position]),
-          [position^='left'],
-          [position^='right']
-        )::before,
-      &:hover:is(
-          :not([position]),
-          [position^='left'],
-          [position^='right']
-        )::after {
-        animation: gds-tooltip-animation-h 300ms
-          var(--gds-tooltip-transition-easing) forwards;
-      }
-    }
-  }
-
-  @layer keyframes {
-    @keyframes gds-tooltip-animation-y {
-      to {
-        opacity: 0.9;
-        transform: translate(-50%, 0);
-      }
-    }
-
-    @keyframes gds-tooltip-animation-h {
-      to {
-        opacity: 0.9;
-        transform: translate(0, -50%);
-      }
-    }
-  }
-}
-`;
-
-// libs/core/src/components/tooltip/tooltip.ts
-var GdsTooltip = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.open = false;
-    this.content = null;
-    this.position = null;
-  }
-  render() {
-    return html`
-      <div
-        class="gds-tooltip"
-        content=${this.content}
-        position=${this.position}
-        role="tooltip"
-      >
-        <slot slot="anchor"></slot>
-      </div>
-    `;
-  }
-};
-GdsTooltip.styles = unsafeCSS(tooltip_styles_default);
-GdsTooltip.shadowRootOptions = {
-  mode: "open",
-  delegatesFocus: true
-};
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], GdsTooltip.prototype, "open", 2);
-__decorateClass([
-  property({ type: String, reflect: true, attribute: "content" })
-], GdsTooltip.prototype, "content", 2);
-__decorateClass([
-  property({ type: String, reflect: true, attribute: "position" })
-], GdsTooltip.prototype, "position", 2);
-GdsTooltip = __decorateClass([
-  customElement("gds-tooltip")
-], GdsTooltip);
-export {
-  GdsTooltip
-};