@sebgroup/green-core 1.15.1 → 1.17.0

package/chunks/chunk.ZYQWZMVY.js

@@ -0,0 +1,467 @@
+import {
+  GdsFormControlElement
+} from "./chunk.YIQIH4RW.js";
+import {
+  tokens
+} from "./chunk.EUQ5DOQM.js";
+import {
+  TransitionalStyles
+} from "./chunk.QONSFT2N.js";
+import {
+  constrainSlots
+} from "./chunk.6NM7ENKA.js";
+import {
+  gdsCustomElement,
+  html
+} from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateSet
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/components/button/button.ts
+import { unsafeCSS } from "lit";
+import { property, query } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+import { classMap } from "lit/directives/class-map.js";
+
+// libs/core/src/components/button/button.style.css
+var button_style_default = `@layer tokens, a11y, core, ranks, sizes, variants, disabled;
+
+@layer tokens {
+  :host {
+    --_gap: var(--gds-sys-space-spacer-m);
+
+    --_transition: var(--gds-sys-transition);
+
+    --_padding-inline: var(--gds-sys-space-padding-l);
+    --_padding-block: var(--gds-sys-space-padding-m);
+
+    --_border-radius: var(--gds-sys-radii-full);
+    --_border-width: 1px;
+    --_border-style: solid;
+
+    --_color-bg: var(--gds-sys-color-content-content);
+    --_color-text: var(--gds-sys-color-content-content-inverse);
+    --_color-border: var(--gds-sys-color-stroke-stroke);
+
+    --_color-outline-alpha: 60%;
+    --_color-outline: var(--_color-border);
+
+    /* These state layer variables can be variant to the correct state layer token in
+    * the rank and variant specific styles. It will be blended with \`--_color-bg\`
+    * for the \`background-color\` rule. */
+    --_state-layer-hover: var(--gds-sys-color-state-layers-state-black);
+    --_state-layer-active: var(--gds-sys-color-state-layers-state-black-shade);
+
+    --gds-sys-transition-properties: color;
+
+    contain: layout;
+    display: inline-block;
+    isolation: isolate;
+    max-width: 100%;
+  }
+}
+
+@layer a11y {
+  @media (prefers-color-scheme: dark) {
+    /* TODO */
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :host {
+      --_transition: none;
+    }
+  }
+}
+
+@layer core {
+  button {
+    --gds-sys-transition-properties: color !important;
+
+    align-items: center;
+    background-color: var(--_color-bg);
+    block-size: 100%;
+    border-color: var(--_color-border);
+    border-radius: var(--_border-radius);
+    border-style: var(--_border-style);
+    border-width: var(--_border-width);
+    box-sizing: border-box;
+    color: var(--_color-text);
+    color-scheme: dark light;
+    cursor: pointer;
+    display: inline-flex;
+    font-family: inherit;
+    font-size: 1rem;
+    font-weight: 400;
+    gap: var(--_gap);
+    height: var(--_size);
+    inline-size: 100%;
+    justify-content: space-between;
+    justify-items: center;
+    line-height: 1.25;
+    outline-color: transparent;
+    outline-offset: 2px;
+    outline-style: solid;
+    outline-width: 2px;
+    padding-block: var(--_padding-block);
+    padding-inline: var(--_padding-inline);
+    position: relative;
+    transition: var(--_transition);
+    transition-property: color, border-color;
+
+    &:focus {
+      outline-color: color-mix(
+        in srgb,
+        var(--_color-outline),
+        transparent var(--_color-outline-alpha)
+      );
+
+      &:not(:focus-visible) {
+        outline-color: transparent;
+      }
+    }
+
+    &:hover {
+      background-color: color-mix(
+        in srgb,
+        var(--_color-bg),
+        var(--_state-layer-hover)
+      );
+      border-color: color-mix(
+        in srgb,
+        var(--_color-border),
+        var(--_state-layer-hover)
+      );
+    }
+
+    &:active {
+      background-color: color-mix(
+        in srgb,
+        var(--_color-bg),
+        var(--_state-layer-active)
+      );
+      border-color: color-mix(
+        in srgb,
+        var(--_color-border),
+        var(--_state-layer-active)
+      );
+    }
+  }
+
+  button slot:not([name]) {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+@layer ranks {
+  :host([rank*='secondary']) button {
+    --_color-bg: var(--gds-sys-color-content-content-inverse);
+    --_color-text: var(--gds-sys-color-content-content);
+    --_color-border: var(--gds-sys-color-stroke-stroke);
+
+    &:active {
+      --_state-layer-active: var(--gds-sys-color-state-layers-state-black-dim1);
+    }
+  }
+
+  :host([rank*='tertiary']) button {
+    --_color-bg: transparent;
+    --_color-text: var(--gds-sys-color-content-content);
+    --_color-border: transparent;
+
+    &:hover {
+      --_color-border: var(--gds-sys-color-stroke-stroke);
+    }
+
+    &:active {
+      --_state-layer-active: var(--gds-sys-color-state-layers-state-black-dim1);
+      --_color-border: var(--gds-sys-color-stroke-stroke);
+    }
+  }
+
+  button.circle {
+    align-items: center;
+    aspect-ratio: 1/1;
+    height: var(--_size);
+    justify-content: center;
+    padding: 0;
+    width: var(--_size);
+
+    &::slotted(gds-icon) {
+      align-items: center;
+      display: flex;
+      height: 24px;
+      justify-content: center;
+      width: 24px;
+    }
+  }
+}
+
+@layer sizes {
+  :host([size='small']) button {
+    --_padding-inline: var(--gds-sys-space-padding-l);
+    --_padding-block: var(--gds-sys-space-padding-s);
+    --_size: 2rem;
+    font-size: 0.875rem;
+  }
+
+  :host([size='medium']) button {
+    --_padding-inline: var(--gds-sys-space-padding-l);
+    --_padding-block: var(--gds-sys-space-padding-m);
+    --_size: 2.5rem;
+  }
+
+  :host([size='large']) button {
+    --_padding-inline: var(--gds-sys-space-padding-xl);
+    --_padding-block: var(--gds-sys-space-padding-m);
+    --_size: 3rem;
+  }
+}
+
+@layer variants {
+  :host([rank='primary'][variant='positive']) button {
+    --_bg: var(--gds-sys-color-container-container-positive);
+    --_color-bg: var(--_bg);
+    --_color-border: var(--_bg);
+
+    &:hover {
+      --_state-layer-hover: var(--gds-sys-color-state-layers-state-black-dim1);
+    }
+
+    &:active {
+      --_state-layer-active: var(--gds-sys-color-state-layers-state-black-dim2);
+    }
+
+    &:focus {
+      --_color-outline: var(--_bg);
+    }
+  }
+
+  :host([rank='secondary'][variant='positive']) button {
+    --_color-bg: var(--gds-sys-color-content-content-inverse);
+    --_color-text: var(--gds-sys-color-content-content-positive);
+    --_color-border: var(--gds-sys-color-stroke-stroke-positive);
+
+    &:hover {
+      --_state-layer-hover: var(--gds-sys-color-state-layers-state-positive);
+    }
+
+    &:active {
+      --_state-layer-active: var(
+        --gds-sys-color-state-layers-state-positive-dim
+      );
+    }
+  }
+
+  :host([rank='tertiary'][variant='positive']) button {
+    --_color-bg: transparent;
+    --_color-text: var(--gds-sys-color-content-content-positive);
+    --_color-border: transparent;
+
+    &:hover {
+      --_state-layer-hover: var(--gds-sys-color-state-layers-state-positive);
+      --_color-border: var(--gds-sys-color-stroke-stroke-positive);
+    }
+
+    &:active {
+      --_state-layer-active: var(
+        --gds-sys-color-state-layers-state-positive-dim
+      );
+      --_color-border: var(--gds-sys-color-stroke-stroke-positive);
+    }
+  }
+
+  :host([rank='primary'][variant='negative']) button {
+    --_bg: var(--gds-sys-color-container-container-negative);
+    --_color-bg: var(--_bg);
+    --_color-text: var(--gds-sys-color-status-negative-on-negative);
+    --_color-border: var(--_bg);
+
+    &:hover {
+      --_state-layer-hover: var(--gds-sys-color-state-layers-state-black-dim1);
+    }
+
+    &:active {
+      --_state-layer-active: var(--gds-sys-color-state-layers-state-black-dim2);
+    }
+
+    &:focus {
+      --_color-outline: var(--_bg);
+    }
+  }
+
+  :host([rank='secondary'][variant='negative']) button {
+    --_color-bg: var(--gds-sys-color-content-content-inverse);
+    --_color-text: var(--gds-sys-color-content-content-negative);
+    --_color-border: var(--gds-sys-color-stroke-stroke-negative);
+
+    &:hover {
+      --_state-layer-hover: var(--gds-sys-color-state-layers-state-negative);
+    }
+
+    &:active {
+      --_state-layer-active: var(
+        --gds-sys-color-state-layers-state-negative-dim
+      );
+    }
+  }
+
+  :host([rank='tertiary'][variant='negative']) button {
+    --_color-bg: transparent;
+    --_color-text: var(--gds-sys-color-content-content-negative);
+    --_color-border: transparent;
+
+    &:hover {
+      --_state-layer-hover: var(--gds-sys-color-state-layers-state-negative);
+      --_color-border: var(--gds-sys-color-stroke-stroke-negative);
+    }
+
+    &:active {
+      --_state-layer-active: var(
+        --gds-sys-color-state-layers-state-negative-dim
+      );
+      --_color-border: var(--gds-sys-color-stroke-stroke-negative);
+    }
+  }
+}
+
+@layer disabled {
+  button:disabled {
+    --_color-bg: var(--gds-sys-color-container-container-disabled);
+    border-color: var(--_color-bg);
+    color: var(--gds-sys-color-content-content-disabled);
+    pointer-events: none;
+  }
+}
+`;
+
+// libs/core/src/utils/helpers/strip-white-space.ts
+var templateCache = /* @__PURE__ */ new WeakMap();
+function stripWhitespace(extendedTag) {
+  return (strings, ...values) => {
+    let modstrings = templateCache.get(strings);
+    if (!modstrings) {
+      modstrings = strings.map((s) => s.replace(/\n[\s]+</gm, "<"));
+      modstrings.raw = strings.raw;
+      templateCache.set(strings, modstrings);
+    }
+    return extendedTag(modstrings, ...values);
+  };
+}
+
+// libs/core/src/components/button/button.ts
+var html2 = stripWhitespace(html);
+var _isIconButton, _mainSlotChange, _handleClick;
+var GdsButton = class extends GdsFormControlElement {
+  constructor() {
+    super();
+    this.disabled = false;
+    this.rank = "primary";
+    this.variant = "default";
+    this.size = "medium";
+    this.label = "";
+    __privateAdd(this, _isIconButton, false);
+    // Check if the button is an icon button.
+    __privateAdd(this, _mainSlotChange, () => {
+      var _a, _b;
+      const assignedNodes = (_b = (_a = this._mainSlot) == null ? void 0 : _a.assignedNodes()) != null ? _b : [];
+      __privateSet(this, _isIconButton, assignedNodes.length === 1 && assignedNodes.some((node) => node.gdsElementName === "gds-icon"));
+      this.requestUpdate();
+    });
+    __privateAdd(this, _handleClick, (e) => {
+      this.dispatchEvent(
+        new CustomEvent("gds-click", {
+          bubbles: true,
+          composed: true,
+          detail: e
+        })
+      );
+      if (this.form) {
+        if (this.type === "submit") {
+          this.form.requestSubmit();
+        } else if (this.type === "reset") {
+          this.form.reset();
+        }
+      }
+    });
+    constrainSlots(this);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    TransitionalStyles.instance.apply(this, "gds-button");
+  }
+  render() {
+    const buttonClasses = {
+      circle: __privateGet(this, _isIconButton),
+      icon: __privateGet(this, _isIconButton),
+      small: this.size === "small",
+      large: this.size === "large",
+      positive: this.variant === "positive",
+      negative: this.variant === "negative",
+      primary: this.rank === "primary",
+      secondary: this.rank === "secondary",
+      tertiary: this.rank === "tertiary"
+    };
+    return html2`
+      <button
+        class=${classMap(buttonClasses)}
+        ?type="${this.type}"
+        ?disabled="${this.disabled}"
+        @click="${__privateGet(this, _handleClick)}"
+        aria-label="${this.label}"
+      >
+        <slot name="lead" gds-allow="gds-icon"></slot>
+        <slot
+          @slotchange=${__privateGet(this, _mainSlotChange)}
+          gds-allow="#text gds-icon"
+        ></slot>
+        <slot name="trail" gds-allow="gds-icon"></slot>
+        ${when(
+      !this._isUsingTransitionalStyles,
+      () => html2`<gds-ripple></gds-ripple>`
+    )}
+      </button>
+    `;
+  }
+};
+_isIconButton = new WeakMap();
+_mainSlotChange = new WeakMap();
+_handleClick = new WeakMap();
+GdsButton.styles = [tokens, unsafeCSS(button_style_default)];
+GdsButton.shadowRootOptions = {
+  mode: "open",
+  delegatesFocus: true
+};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ reflect: true })
+], GdsButton.prototype, "type", 2);
+__decorateClass([
+  property({ reflect: true })
+], GdsButton.prototype, "rank", 2);
+__decorateClass([
+  property({ reflect: true })
+], GdsButton.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], GdsButton.prototype, "size", 2);
+__decorateClass([
+  property()
+], GdsButton.prototype, "label", 2);
+__decorateClass([
+  query("slot:not([name])")
+], GdsButton.prototype, "_mainSlot", 2);
+GdsButton = __decorateClass([
+  gdsCustomElement("gds-button")
+], GdsButton);
+
+export {
+  GdsButton
+};

package/components/badge/badge.js

@@ -0,0 +1,245 @@
+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/badge/badge.ts
+import { LitElement, html, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+
+// libs/core/src/components/badge/style/badge.styles.css
+var badge_styles_default = `@layer gds-badge, shell, tokens, a11y, variants, types;
+
+@layer gds-badge {
+  @layer tokens {
+    :host {
+      --gds-badge-cl: rgba(53, 53, 49, 1);
+      --gds-badge-bg: rgba(243, 243, 242, 1);
+
+      --gds-badge-cl-information: rgba(53, 53, 49, 1);
+      --gds-badge-bg-information: rgba(243, 243, 242, 1);
+
+      --gds-badge-cl-success: rgba(0, 109, 49, 1);
+      --gds-badge-bg-success: rgba(234, 255, 232, 1);
+
+      --gds-badge-cl-warning: rgba(125, 87, 0, 1);
+      --gds-badge-bg-warning: rgba(255, 238, 217, 1);
+
+      --gds-badge-cl-error: rgba(186, 29, 0, 1);
+      --gds-badge-bg-error: rgba(255, 237, 233, 1);
+
+      --gds-badge-cl-disabled: rgba(157, 157, 149, 1);
+      --gds-badge-bg-disabled: rgba(249, 249, 249, 1);
+
+      --gds-badge-cl-surface: rgba(106, 106, 98, 1);
+      --gds-badge-bg-surface: rgba(255, 255, 255, 1);
+
+      /* Dark Mode */
+      --gds-badge-cl-dark: rgba(53, 53, 49, 1);
+      --gds-badge-bg-dark: rgba(243, 243, 242, 1);
+
+      --gds-badge-cl-information-dark: rgba(53, 53, 49, 1);
+      --gds-badge-bg-information-dark: rgba(243, 243, 242, 1);
+
+      --gds-badge-cl-success-dark: rgba(0, 109, 49, 1);
+      --gds-badge-bg-success-dark: rgba(234, 255, 232, 1);
+
+      --gds-badge-cl-warning-dark: rgba(125, 87, 0, 1);
+      --gds-badge-bg-warning-dark: rgba(255, 238, 217, 1);
+
+      --gds-badge-cl-error-dark: rgba(186, 29, 0, 1);
+      --gds-badge-bg-error-dark: rgba(255, 237, 233, 1);
+
+      --gds-badge-cl-disabled-dark: rgba(157, 157, 149, 1);
+      --gds-badge-bg-disabled-dark: rgba(249, 249, 249, 1);
+
+      --gds-badge-cl-surface-dark: rgba(106, 106, 98, 1);
+      --gds-badge-bg-surface-dark: rgba(255, 255, 255, 1);
+
+      --gds-badge-radii: 4px;
+
+      --gds-badge-fs: 12px;
+      --gds-badge-lh: 1;
+      --gds-badge-fw: 500;
+      --gds-badge-inline-padding: 10px;
+      --gds-badge-block-padding: 6px;
+    }
+  }
+  @layer a11y {
+    @media (prefers-color-scheme: dark) {
+      :host {
+        --gds-badge-cl: var(--gds-badge-cl-dark);
+        --gds-badge-bg: var(--gds-badge-bg-dark);
+
+        --gds-badge-cl-information: var(--gds-badge-cl-information-dark);
+        --gds-badge-bg-information: var(--gds-badge-bg-information-dark);
+
+        --gds-badge-cl-success: var(--gds-badge-cl-success-dark);
+        --gds-badge-bg-success: var(--gds-badge-bg-success-dark);
+
+        --gds-badge-cl-warning: var(--gds-badge-cl-warning-dark);
+        --gds-badge-bg-warning: var(--gds-badge-bg-warning-dark);
+
+        --gds-badge-cl-error: var(--gds-badge-cl-error-dark);
+        --gds-badge-bg-error: var(--gds-badge-bg-error-dark);
+
+        --gds-badge-cl-disabled: var(--gds-badge-cl-disabled-dark);
+        --gds-badge-bg-disabled: var(--gds-badge-bg-disabled-dark);
+
+        --gds-badge-cl-surface: var(--gds-badge-cl-surface-dark);
+        --gds-badge-bg-surface: var(--gds-badge-bg-surface-dark);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host {
+        --gds-badge-motion: 0;
+      }
+    }
+
+    @media (prefers-reduced-transparency: reduce) {
+      :host {
+        --gds-badge-transparency: 1;
+      }
+    }
+
+    @media (prefers-contrast: more) {
+      :root {
+        --gds-badge-contrast: 1;
+      }
+    }
+  }
+
+  @layer shell {
+    .gds-badge {
+      align-items: center;
+      background-color: var(--gds-badge-bg);
+      border-radius: var(--gds-badge-radii);
+      color: var(--gds-badge-cl);
+      display: flex;
+      font-size: var(--gds-badge-fs);
+      font-weight: var(--gds-badge-fw);
+      gap: 1ch;
+      height: 1lh;
+      justify-content: center;
+      letter-spacing: normal;
+      line-height: var(--gds-badge-lh);
+      max-width: -moz-max-content;
+      max-width: max-content;
+      padding-block: var(--gds-badge-block-padding);
+      padding-inline: var(--gds-badge-inline-padding);
+      text-overflow: ellipsis;
+      text-transform: uppercase;
+      white-space: nowrap;
+
+      @layer variants {
+        :host([variant='information']) & {
+          --gds-badge-cl: var(--gds-badge-cl-information);
+          --gds-badge-bg: var(--gds-badge-bg-information);
+        }
+
+        :host([variant='success']) & {
+          --gds-badge-cl: var(--gds-badge-cl-success);
+          --gds-badge-bg: var(--gds-badge-bg-success);
+        }
+
+        :host([variant='warning']) & {
+          --gds-badge-cl: var(--gds-badge-cl-warning);
+          --gds-badge-bg: var(--gds-badge-bg-warning);
+        }
+
+        :host([variant='error']) & {
+          --gds-badge-cl: var(--gds-badge-cl-error);
+          --gds-badge-bg: var(--gds-badge-bg-error);
+        }
+
+        :host([variant='disabled']) & {
+          --gds-badge-cl: var(--gds-badge-cl-disabled);
+          --gds-badge-bg: var(--gds-badge-bg-disabled);
+          pointer-events: none;
+        }
+
+        :host([variant='surface']) & {
+          --gds-badge-cl: var(--gds-badge-cl-surface);
+          --gds-badge-bg: var(--gds-badge-bg-surface);
+        }
+      }
+
+      @layer types {
+        :host([type='counter']) & {
+          max-width: var(--gds-badge-counter-max-width);
+        }
+      }
+    }
+  }
+}
+`;
+
+// libs/core/src/components/badge/badge.ts
+var _internals;
+var GdsBadge = class extends LitElement {
+  constructor() {
+    super();
+    // Private members
+    __privateAdd(this, _internals, void 0);
+    this.variant = "";
+    this.type = "";
+    this.icon = "";
+    __privateSet(this, _internals, this.attachInternals());
+    constrainSlots(this);
+  }
+  slotIcon() {
+    return html` <slot name="icon" gds-allow="gds-icon"></slot> `;
+  }
+  slotLabel() {
+    var _a;
+    const content = ((_a = this.textContent) == null ? void 0 : _a.trim()) || "";
+    const hasLabel = content !== "";
+    let label = content;
+    if (this.type.toLowerCase() === "counter" && label.length > 4) {
+      label = label.substring(0, 4);
+      return hasLabel ? html`${label}` : "";
+    }
+    return hasLabel ? html`<slot part="label" gds-allow="#text"></slot>` : "";
+  }
+  // slotLabel() {
+  //   return this.textContent
+  //     ? html`<slot part="label" gds-allow="#text"></slot>`
+  //     : ''
+  // }
+  render() {
+    const hasIconSlot = this.querySelector('[slot="icon"]') !== null;
+    const content = html`${when(
+      hasIconSlot,
+      () => html`<slot name="icon" gds-allow="gds-icon"></slot>`
+    )}${this.slotLabel()}`;
+    return html`<div class="gds-badge">${content}</div>`;
+  }
+};
+_internals = new WeakMap();
+GdsBadge.styles = unsafeCSS(badge_styles_default);
+GdsBadge.shadowRootOptions = {
+  mode: "open",
+  delegatesFocus: true
+};
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "variant" })
+], GdsBadge.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "type" })
+], GdsBadge.prototype, "type", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "icon" })
+], GdsBadge.prototype, "icon", 2);
+GdsBadge = __decorateClass([
+  customElement("gds-badge")
+], GdsBadge);
+export {
+  GdsBadge
+};