@sebgroup/green-core 1.90.2 → 2.0.0

package/primitives/listbox/option.component.js

@@ -4,32 +4,32 @@ import {
   __privateGet,
   __privateMethod,
   __privateSet
-} from "../../chunks/chunk.QTSIPXV3.js";
-var _hidden, _emitSelect, emitSelect_fn;
+} from "../../chunks/chunk.QU3DSPNU.js";
+var _hidden, _GdsOption_instances, emitSelect_fn;
 import { property } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
 import { when } from "lit/directives/when.js";
 import { IconCheckmark } from "../../components/icon/icons/checkmark.component.js";
 import { GdsElement } from "../../gds-element.js";
 import { gdsCustomElement, html } from "../../scoping.js";
+import rbcbToggleStyles from "../../shared-styles/rbcb-toggle.style.js";
+import { checkboxToggle } from "../../shared-styles/rbcb-toggle.template.js";
 import { tokens } from "../../tokens.style.js";
 import { TransitionalStyles } from "../../transitional-styles.js";
 import { watch } from "../../utils/decorators/index.js";
 import { Focusable } from "../../utils/mixins/focusable.js";
-import style from "./option.styles.js";
+import OptionStyles from "./option.styles.js";
 let GdsOption = class extends Focusable(GdsElement) {
   constructor() {
     super();
-    __privateAdd(this, _emitSelect);
+    __privateAdd(this, _GdsOption_instances);
     __privateAdd(this, _hidden, false);
     this.selected = false;
     this.isPlaceholder = false;
-    this.addEventListener("click", __privateMethod(this, _emitSelect, emitSelect_fn));
+    this.addEventListener("click", __privateMethod(this, _GdsOption_instances, emitSelect_fn));
     this.addEventListener("keydown", (e) => {
-      if (e.key !== "Enter" && e.key !== " ")
-        return;
+      if (e.key !== "Enter" && e.key !== " ") return;
       e.preventDefault();
-      __privateMethod(this, _emitSelect, emitSelect_fn).call(this, e);
+      __privateMethod(this, _GdsOption_instances, emitSelect_fn).call(this, e);
     });
   }
   get hidden() {
@@ -62,26 +62,25 @@ let GdsOption = class extends Focusable(GdsElement) {
   }
   render() {
     const isMultiple = this.parentElement?.multiple;
-    const checkbox = html`
-      <span class="checkbox ${classMap({ checked: this.selected })}">
-        ${this.selected ? html`<gds-icon-checkmark
-              width="10"
-              height="10"
-              stroke="4"
-            ></gds-icon-checkmark>` : ""}
-      </span>
-    `;
     if (!isMultiple) {
-      if (this.selected)
-        this.setAttribute("highlighted", "");
-      else
-        this.removeAttribute("highlighted");
+      if (this.selected) this.setAttribute("highlighted", "");
+      else this.removeAttribute("highlighted");
     }
-    return html`<div>${when(isMultiple, () => checkbox)} <slot></slot></div>`;
+    return html`<div class="item">
+      ${when(
+      isMultiple,
+      () => checkboxToggle({
+        checked: this.selected,
+        indeterminate: false,
+        disabled: false,
+        invalid: false
+      })
+    )} <slot></slot>
+    </div>`;
   }
 };
 _hidden = new WeakMap();
-_emitSelect = new WeakSet();
+_GdsOption_instances = new WeakSet();
 emitSelect_fn = function(e) {
   e.stopPropagation();
   this.dispatchCustomEvent("gds-select", {
@@ -92,7 +91,7 @@ emitSelect_fn = function(e) {
     }
   });
 };
-GdsOption.styles = [tokens, style];
+GdsOption.styles = [tokens, rbcbToggleStyles, OptionStyles];
 __decorateClass([
   property()
 ], GdsOption.prototype, "value", 2);

package/primitives/listbox/option.js

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.QTSIPXV3.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { GdsOption } from "./option.component.js";
 GdsOption.define();
 export {

package/primitives/listbox/option.styles.js

@@ -1,23 +1,21 @@
-import "../../chunks/chunk.QTSIPXV3.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { css } from "lit";
 const style = css`
   @layer base, reset;
 
   @layer base {
     :host(:not(:last-child)) {
-      border-bottom: 1px solid var(--gds-sys-color-l2-border-primary);
+      border-bottom: 1px solid var(--gds-sys-color-border-subtle-01);
     }
 
-    :host div {
+    :host .item {
       display: flex;
       align-items: center;
       user-select: none;
       padding-inline: var(--gds-sys-space-m);
-      padding-block: var(--gds-sys-space-m);
+      padding-block: var(--gds-sys-space-s);
       cursor: pointer;
-      font-size: var(--gds-sys-text-size-label-input-large);
-      font-weight: var(--gds-sys-text-weight-regular);
-      line-height: var(--gds-sys-text-line-height-label-input-large);
+      font: var(--gds-sys-text-detail-regular-m);
       gap: 1ch;
       max-width: 100%;
       box-sizing: border-box;
@@ -37,12 +35,16 @@ const style = css`
     }
 
     :host([highlighted]) {
-      background-color: var(--gds-sys-color-l2-background-tertiary);
-      color: var(--gds-sys-color-l2-content-tertiary);
+      background-color: var(--gds-sys-color-l3-neutral-01);
+      color: var(--gds-sys-color-content-inversed);
     }
 
-    :host(:hover:not([highlighted])) div {
-      background-color: var(--gds-sys-color-l3-background-secondary);
+    :host(:hover:not([highlighted])) .item {
+      background-color: color-mix(
+        in srgb,
+        transparent,
+        var(--gds-sys-color-state-neutral-05)
+      );
     }
 
     :host(:focus-visible) {
@@ -58,31 +60,6 @@ const style = css`
     :host([inert]) {
       display: none;
     }
-
-    .checkbox {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 1lh;
-      width: 1lh;
-      box-sizing: border-box;
-      position: relative;
-      aspect-ratio: 1/1;
-      border-radius: var(--gds-sys-space-2xs);
-      border: var(--gds-sys-space-3xs) solid currentColor;
-      padding: var(--gds-sys-space-3xs);
-
-      &.checked {
-        background-color: currentColor;
-
-        gds-icon-checkmark {
-          &::part(icon) {
-            color: var(--gds-sys-color-l2-content-tertiary);
-            stroke-width: var(--gds-sys-space-2xs);
-          }
-        }
-      }
-    }
   }
 `;
 var option_styles_default = style;

package/primitives/listbox/option.trans.styles.scss.js

@@ -1,2 +1,2 @@
-const styles = "/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  :host div {\n    padding-left: 1rem;\n    padding-right: 1rem;\n    padding-bottom: 0.75rem;\n    padding-top: 0.75rem;\n    line-height: 1.25;\n    cursor: pointer;\n    display: flex;\n    gap: 0.75rem;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n  :host div:hover, :host div:focus-visible {\n    background-color: var(--grey-400);\n  }\n  :host div:active {\n    background-color: var(--grey-400);\n  }\n  :host div:focus {\n    outline-color: #000;\n    outline-offset: -0.25rem;\n  }\n  :host div.active.sg-highlighted, :host div[aria-selected=true] {\n    background: var(--grey-1000);\n    color: #fff;\n  }\n  :host(:hover) div,\n  :host(:focus-visible) div {\n    background-color: var(--grey-400);\n  }\n  :host(:active) div {\n    background-color: var(--grey-500);\n  }\n  :host(:focus-visible) {\n    outline-color: #000;\n    outline-offset: -0.25rem;\n  }\n  :host([inert]) {\n    display: none;\n  }\n  :host([highlighted]) div {\n    background: var(--grey-1000);\n    color: #fff;\n  }\n  .checkbox {\n    background-color: var(--gds-comp-checkbox-container-color);\n    border-radius: var(--gds-comp-checkbox-border-radius);\n    box-shadow: inset 0 0 0 1px var(--gds-comp-checkbox-border-color);\n    flex: 0 0 auto;\n    flex-shrink: 0;\n    height: var(--gds-comp-checkbox-container-width);\n    margin-top: 0.15rem;\n    position: relative;\n    width: var(--gds-comp-checkbox-container-width);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .checkbox [gds-element=gds-icon-checkmark]::part(icon) {\n    width: 10px;\n    height: 10px;\n  }\n  .checkbox.checked {\n    background-color: var(--gds-comp-checkbox-container-color-selected);\n  }\n  .checkbox.checked [gds-element=gds-icon-checkmark]::part(icon) {\n    color: var(--gds-comp-checkbox-border-color-selected, #fff);\n  }\n}";
+const styles = "/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  .item {\n    padding-left: 1rem;\n    padding-right: 1rem;\n    padding-bottom: 0.75rem;\n    padding-top: 0.75rem;\n    line-height: 1.25;\n    cursor: pointer;\n    display: flex;\n    gap: 0.75rem;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n  .item:hover, .item:focus-visible {\n    background-color: var(--grey-400);\n  }\n  .item:active {\n    background-color: var(--grey-400);\n  }\n  .item:focus {\n    outline-color: #000;\n    outline-offset: -0.25rem;\n  }\n  .item.active.sg-highlighted, .item[aria-selected=true] {\n    background: var(--grey-1000);\n    color: #fff;\n  }\n  :host(:hover) .item,\n  :host(:focus-visible) .item {\n    background-color: var(--grey-400);\n  }\n  :host(:active) .item {\n    background-color: var(--grey-500);\n  }\n  :host(:focus-visible) {\n    outline-color: #000;\n    outline-offset: -0.25rem;\n  }\n  :host([inert]) {\n    display: none;\n  }\n  :host([highlighted]) .item {\n    background: var(--grey-1000);\n    color: #fff;\n  }\n}";
 export default styles;

package/primitives/menu/menu-heading.component.js

@@ -1,11 +1,11 @@
 import {
   __decorateClass
-} from "../../chunks/chunk.QTSIPXV3.js";
+} from "../../chunks/chunk.QU3DSPNU.js";
 import { html } from "lit";
 import { GdsElement } from "../../gds-element.js";
 import { gdsCustomElement } from "../../scoping.js";
 import { TransitionalStyles } from "../../transitional-styles.js";
-import style from "./menu-heading.styles.js";
+import MenuHeadingStyles from "./menu-heading.styles.js";
 let GdsMenuHeading = class extends GdsElement {
   connectedCallback() {
     super.connectedCallback();
@@ -18,7 +18,7 @@ let GdsMenuHeading = class extends GdsElement {
     return html`<slot></slot>`;
   }
 };
-GdsMenuHeading.styles = style;
+GdsMenuHeading.styles = MenuHeadingStyles;
 GdsMenuHeading = __decorateClass([
   gdsCustomElement("gds-menu-heading")
 ], GdsMenuHeading);

package/primitives/menu/menu-heading.js

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.QTSIPXV3.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { GdsMenuHeading } from "./menu-heading.component.js";
 GdsMenuHeading.define();
 export {

package/primitives/menu/menu-heading.styles.js

@@ -1,15 +1,15 @@
-import "../../chunks/chunk.QTSIPXV3.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { css } from "lit";
 const style = css`
   @layer base, reset, transitional-styles;
   @layer base {
     :host {
       cursor: pointer;
-      color: var(--gds-sys-color-l3-content-secondary);
-      background-color: var(--gds-sys-color-l3-background-secondary);
-      font-size: var(--gds-sys-text-size-label-input-medium);
-      line-height: var(--gds-sys-text-line-height-label-input-medium);
-      padding-inline: var(--gds-sys-space-m);
+      color: var(--gds-sys-color-content-neutral-02);
+      background-color: var(--gds-sys-color-l2-neutral-01);
+      border-bottom: 1px solid var(--gds-sys-color-border-subtle-01);
+      font: var(--gds-sys-text-detail-book-s);
+      padding-inline: var(--gds-sys-space-s);
       padding-block: var(--gds-sys-space-xs);
     }
   }

package/primitives/menu/menu-item.component.js

@@ -2,7 +2,7 @@ import {
   __decorateClass,
   __privateAdd,
   __privateGet
-} from "../../chunks/chunk.QTSIPXV3.js";
+} from "../../chunks/chunk.QU3DSPNU.js";
 var _handleOnClick;
 import { GdsElement } from "../../gds-element.js";
 import { gdsCustomElement, html } from "../../scoping.js";
@@ -23,8 +23,7 @@ let GdsMenuItem = class extends Focusable(GdsElement) {
     super.connectedCallback();
     this.setAttribute("role", "menuitem");
     this.addEventListener("keydown", (e) => {
-      if (e.key !== "Enter" && e.key !== " ")
-        return;
+      if (e.key !== "Enter" && e.key !== " ") return;
       e.preventDefault();
       this.click();
     });
@@ -32,7 +31,7 @@ let GdsMenuItem = class extends Focusable(GdsElement) {
     TransitionalStyles.instance.apply(this, "gds-option");
   }
   render() {
-    return html`<div><slot></slot></div>`;
+    return html`<div class="item"><slot></slot></div>`;
   }
 };
 _handleOnClick = new WeakMap();

package/primitives/menu/menu-item.js

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.QTSIPXV3.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { GdsMenuItem } from "./menu-item.component.js";
 GdsMenuItem.define();
 export {

package/primitives/menu/menu.component.js

@@ -2,7 +2,7 @@ import {
   __decorateClass,
   __privateAdd,
   __privateGet
-} from "../../chunks/chunk.QTSIPXV3.js";
+} from "../../chunks/chunk.QU3DSPNU.js";
 var _slotRef;
 import { createRef, ref } from "lit/directives/ref.js";
 import { GdsElement } from "../../gds-element.js";
@@ -25,8 +25,7 @@ let GdsMenu = class extends GdsElement {
     TransitionalStyles.instance.apply(this, "gds-listbox");
   }
   get navigableItems() {
-    if (!__privateGet(this, _slotRef).value)
-      return [];
+    if (!__privateGet(this, _slotRef).value) return [];
     return unwrap(__privateGet(this, _slotRef).value).assignedElements().filter(
       (o) => !o.hasAttribute("isplaceholder") && o.gdsElementName === "gds-menu-item"
     ) || [];

package/primitives/menu/menu.js

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.QTSIPXV3.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { GdsMenu } from "./menu.component.js";
 GdsMenu.define();
 export {

package/primitives/ripple/ripple.component.js

@@ -1,12 +1,12 @@
 import {
   __decorateClass
-} from "../../chunks/chunk.QTSIPXV3.js";
-import { html, unsafeCSS } from "lit";
+} from "../../chunks/chunk.QU3DSPNU.js";
+import { html } from "lit";
 import { query } from "lit/decorators.js";
 import { GdsElement } from "../../gds-element.js";
 import { gdsCustomElement } from "../../scoping.js";
 import { tokens } from "../../tokens.style.js";
-import styles from "./ripple.styles.scss.js";
+import RippleStyles from "./ripple.styles.js";
 let GdsRipple = class extends GdsElement {
   constructor() {
     super(...arguments);
@@ -28,7 +28,7 @@ let GdsRipple = class extends GdsElement {
     return html`<div></div>`;
   }
 };
-GdsRipple.styles = [tokens, unsafeCSS(styles)];
+GdsRipple.styles = [tokens, RippleStyles];
 __decorateClass([
   query("div")
 ], GdsRipple.prototype, "_rippleEl", 2);

package/primitives/ripple/ripple.js

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.QTSIPXV3.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { GdsRipple } from "./ripple.component.js";
 GdsRipple.define();
 export {

package/primitives/ripple/ripple.styles.d.ts

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

package/primitives/ripple/ripple.styles.js

@@ -0,0 +1,58 @@
+import "../../chunks/chunk.QU3DSPNU.js";
+import { css } from "lit";
+const style = css`
+  :host {
+    --gds-ripple-motion-name: ripple;
+    --gds-ripple-motion: var(--gds-ripple-motion-name) 1.25s
+      cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running;
+    border-radius: var(--gds-sys-space-max);
+    contain: strict;
+    display: grid;
+    place-content: center;
+    height: 100%;
+    inset: 0;
+    overflow: hidden;
+    position: absolute;
+    width: 100%;
+  }
+
+  div {
+    background-color: currentColor;
+    border-radius: var(--gds-sys-space-max);
+    display: flex;
+    height: 100%;
+    left: calc((-50% + var(--gds-ripple-left)) / 4);
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    will-change: transform;
+  }
+
+  div.gds-ripple-effect {
+    animation: var(--gds-ripple-motion);
+  }
+
+  @keyframes ripple {
+    from {
+      opacity: 0.2;
+      transform: scale(0.6, 1);
+    }
+
+    to {
+      opacity: 0;
+      transform: scale(1.25);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host {
+      --gds-ripple-motion-name: none !important;
+    }
+  }
+`;
+var ripple_styles_default = style;
+export {
+  ripple_styles_default as default
+};

package/primitives/toggle-controls-base/toggle-control-base.component.js

@@ -1,13 +1,13 @@
 import {
   __decorateClass
-} from "../../chunks/chunk.QTSIPXV3.js";
+} from "../../chunks/chunk.QU3DSPNU.js";
 import { localized } from "@lit/localize";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { GdsElement } from "../../gds-element.js";
 import { gdsCustomElement, html } from "../../scoping.js";
 import { tokens } from "../../tokens.style.js";
-import { styles } from "./toggle-control-base.styles.js";
+import ToggleControlBaseStyles from "./toggle-control-base.styles.js";
 let GdsToggleControlBase = class extends GdsElement {
   constructor() {
     super();
@@ -32,7 +32,7 @@ let GdsToggleControlBase = class extends GdsElement {
     `;
   }
 };
-GdsToggleControlBase.styles = [tokens, styles];
+GdsToggleControlBase.styles = [tokens, ToggleControlBaseStyles];
 __decorateClass([
   property()
 ], GdsToggleControlBase.prototype, "label", 2);

package/primitives/toggle-controls-base/toggle-control-base.js

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.QTSIPXV3.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { GdsToggleControlBase } from "./toggle-control-base.component.js";
 GdsToggleControlBase.define();
 export {

package/primitives/toggle-controls-base/toggle-control-base.styles.d.ts

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

package/primitives/toggle-controls-base/toggle-control-base.styles.js

@@ -1,6 +1,6 @@
-import "../../chunks/chunk.QTSIPXV3.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { css } from "lit";
-const styles = css`
+const style = css`
   @layer base, a11y;
 
   @layer a11y {
@@ -28,17 +28,17 @@ const styles = css`
     }
 
     slot[name='label']::slotted(*) {
-      font-weight: var(--gds-sys-text-weight-book);
+      font: var(--gds-sys-text-detail-book-m);
       cursor: inherit;
     }
 
     slot[name='supporting-text']::slotted(*) {
-      font-size: var(--_font-size-supporting-text);
-      line-height: var(--_line-height-supporting-text);
+      font: var(--_font-supporting-text);
       font-weight: var(--gds-sys-text-weight-regular);
     }
   }
 `;
+var toggle_control_base_styles_default = style;
 export {
-  styles
+  toggle_control_base_styles_default as default
 };

package/shared-styles/form-control-host.style.js

@@ -1,4 +1,4 @@
-import "../chunks/chunk.QTSIPXV3.js";
+import "../chunks/chunk.QU3DSPNU.js";
 import { css } from "lit";
 var form_control_host_style_default = css`
   * {
@@ -19,16 +19,16 @@ var form_control_host_style_default = css`
   }
 
   :host([size='small']) .native-control {
-    font-size: var(--gds-sys-text-size-detail-s);
-    line-height: var(--gds-sys-text-line-height-detail-s);
+    font: var(--gds-sys-text-detail-regular-s);
   }
 
   :host([disabled]) {
-    color: var(--gds-sys-color-l3-content-disabled);
+    color: var(--gds-sys-color-content-disabled-01);
     pointer-events: none;
   }
 
   .native-control {
+    font: var(--gds-sys-text-detail-regular-m);
     align-items: center;
     align-self: center;
     appearance: none;
@@ -40,8 +40,6 @@ var form_control_host_style_default = css`
     overflow: hidden;
     padding: unset;
     width: 100%;
-    font-size: var(--gds-sys-text-size-detail-m);
-    line-height: var(--gds-sys-text-line-height-detail-m);
     color: currentColor;
     text-align: left;
   }