@sebgroup/green-core 1.69.3 → 1.70.0

package/components/dialog/dialog.js

@@ -1,33 +1,6 @@
-import {
-  GdsDialog
-} from "../../chunks/chunk.MHE47HSD.js";
-import "../../chunks/chunk.KAP7LDUQ.js";
-import "../../chunks/chunk.IVRW42EY.js";
-import "../../chunks/chunk.ALFDKEVN.js";
-import "../../chunks/chunk.GCVJJFAB.js";
-import "../../chunks/chunk.GUAH7AIO.js";
-import "../../chunks/chunk.3M4XRCEF.js";
-import "../../chunks/chunk.J4LECY2Q.js";
-import "../../chunks/chunk.M5C2HLKD.js";
-import "../../chunks/chunk.5DQKVTJK.js";
-import "../../chunks/chunk.JGTSJ4J6.js";
-import "../../chunks/chunk.LS3ZUD4W.js";
-import "../../chunks/chunk.TX64TTBN.js";
-import "../../chunks/chunk.XSYRW3YR.js";
-import "../../chunks/chunk.VA6TUMR2.js";
-import "../../chunks/chunk.WM7HBMMV.js";
-import "../../chunks/chunk.TWXTKG4B.js";
-import "../../chunks/chunk.76QWARGM.js";
-import "../../chunks/chunk.NUUST5OZ.js";
-import "../../chunks/chunk.B3A3ZVNB.js";
-import "../../chunks/chunk.TYGMNHNO.js";
-import "../../chunks/chunk.ESN5KBOJ.js";
-import "../../chunks/chunk.6QMJ7GQK.js";
-import "../../chunks/chunk.YO24ZYAD.js";
-import "../../chunks/chunk.TMEWQZER.js";
-import "../../chunks/chunk.QK3R23GV.js";
-import "../../chunks/chunk.B7ZOSVCQ.js";
-import "../../chunks/chunk.SEHSDSX2.js";
+import "../../chunks/chunk.QTSIPXV3.js";
+import { GdsDialog } from "./dialog.component";
+GdsDialog.define();
 export {
   GdsDialog
 };

package/components/dialog/dialog.styles.js

@@ -0,0 +1,73 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+import { css } from "lit";
+const styles = css`
+  @layer base, reset, transitional-styles;
+  @layer base {
+    :host {
+      display: contents;
+    }
+
+    dialog {
+      transition: 0.3s;
+      background: transparent;
+      padding: 0;
+      border-width: 0;
+      overflow: visible;
+      max-width: 100vw;
+      max-height: 100vh;
+      display: flex;
+
+      @starting-style {
+        opacity: 0;
+        transform: translateY(-16px);
+        &::backdrop {
+          opacity: 0;
+          backdrop-filter: blur(0);
+        }
+      }
+
+      &::backdrop {
+        transition: 0.3s;
+        background: rgba(100, 100, 100, 0.3);
+        backdrop-filter: blur(3px);
+      }
+    }
+
+    dialog > * {
+      flex-grow: 1;
+    }
+
+    dialog.default {
+      width: 400px;
+      max-height: 400px;
+    }
+
+    dialog.slide-out {
+      width: 600px;
+      height: 100vh;
+      inset: 0 0 0 auto;
+      @starting-style {
+        transform: translateX(96px);
+      }
+    }
+
+    .card {
+      flex-direction: column;
+    }
+
+    slot[name='footer'] > *,
+    slot[name='footer']::slotted(*) {
+      flex: 1;
+    }
+
+    h2 {
+      margin: 0;
+      padding: 0;
+      font-size: 1.5rem;
+      font-weight: 450;
+    }
+  }
+`;
+export {
+  styles
+};

package/components/dialog/index.js

@@ -1,33 +1 @@
-import {
-  GdsDialog
-} from "../../chunks/chunk.MHE47HSD.js";
-import "../../chunks/chunk.KAP7LDUQ.js";
-import "../../chunks/chunk.IVRW42EY.js";
-import "../../chunks/chunk.ALFDKEVN.js";
-import "../../chunks/chunk.GCVJJFAB.js";
-import "../../chunks/chunk.GUAH7AIO.js";
-import "../../chunks/chunk.3M4XRCEF.js";
-import "../../chunks/chunk.J4LECY2Q.js";
-import "../../chunks/chunk.M5C2HLKD.js";
-import "../../chunks/chunk.5DQKVTJK.js";
-import "../../chunks/chunk.JGTSJ4J6.js";
-import "../../chunks/chunk.LS3ZUD4W.js";
-import "../../chunks/chunk.TX64TTBN.js";
-import "../../chunks/chunk.XSYRW3YR.js";
-import "../../chunks/chunk.VA6TUMR2.js";
-import "../../chunks/chunk.WM7HBMMV.js";
-import "../../chunks/chunk.TWXTKG4B.js";
-import "../../chunks/chunk.76QWARGM.js";
-import "../../chunks/chunk.NUUST5OZ.js";
-import "../../chunks/chunk.B3A3ZVNB.js";
-import "../../chunks/chunk.TYGMNHNO.js";
-import "../../chunks/chunk.ESN5KBOJ.js";
-import "../../chunks/chunk.6QMJ7GQK.js";
-import "../../chunks/chunk.YO24ZYAD.js";
-import "../../chunks/chunk.TMEWQZER.js";
-import "../../chunks/chunk.QK3R23GV.js";
-import "../../chunks/chunk.B7ZOSVCQ.js";
-import "../../chunks/chunk.SEHSDSX2.js";
-export {
-  GdsDialog
-};
+export * from "./dialog";

package/components/dialog/scroll-lock.js

@@ -1,11 +1,62 @@
-import {
-  lockBodyScrolling,
-  registerGlobalScrollLockStyles,
-  unlockBodyScrolling
-} from "../../chunks/chunk.KAP7LDUQ.js";
-import "../../chunks/chunk.6QMJ7GQK.js";
-import "../../chunks/chunk.B7ZOSVCQ.js";
-import "../../chunks/chunk.SEHSDSX2.js";
+import "../../chunks/chunk.QTSIPXV3.js";
+import { css } from "lit";
+import { GlobalStylesRegistry } from "../../utils/global-styles";
+const locks = /* @__PURE__ */ new Set();
+function registerGlobalScrollLockStyles() {
+  GlobalStylesRegistry.instance.injectGlobalStyles(
+    "dialog-scroll-lock",
+    css`
+      .gds-scroll-lock body {
+        padding-right: var(--gds-scroll-lock-size) !important;
+        overflow: hidden !important;
+      }
+    `
+  );
+}
+function lockBodyScrolling(lockingEl) {
+  locks.add(lockingEl);
+  if (!document.documentElement.classList.contains("gds-scroll-lock")) {
+    const scrollbarWidth = getScrollbarWidth() + getExistingBodyPadding();
+    let scrollbarGutterProperty = getComputedStyle(
+      document.documentElement
+    ).scrollbarGutter;
+    if (!scrollbarGutterProperty || scrollbarGutterProperty === "auto") {
+      scrollbarGutterProperty = "stable";
+    }
+    if (scrollbarWidth < 2) {
+      scrollbarGutterProperty = "";
+    }
+    document.documentElement.style.setProperty(
+      "--gds-scroll-lock-gutter",
+      scrollbarGutterProperty
+    );
+    document.documentElement.classList.add("gds-scroll-lock");
+    document.documentElement.style.setProperty(
+      "--gds-scroll-lock-size",
+      `${scrollbarWidth}px`
+    );
+  }
+}
+function unlockBodyScrolling(lockingEl) {
+  locks.delete(lockingEl);
+  if (locks.size === 0) {
+    document.documentElement.classList.remove("gds-scroll-lock");
+    document.documentElement.style.removeProperty("--gds-scroll-lock-size");
+  }
+}
+function getScrollbarWidth() {
+  const documentWidth = document.documentElement.clientWidth;
+  return Math.abs(window.innerWidth - documentWidth);
+}
+function getExistingBodyPadding() {
+  const padding = Number(
+    getComputedStyle(document.body).paddingRight.replace(/px/, "")
+  );
+  if (isNaN(padding) || !padding) {
+    return 0;
+  }
+  return padding;
+}
 export {
   lockBodyScrolling,
   registerGlobalScrollLockStyles,

package/components/div/div.component.d.ts

@@ -0,0 +1,178 @@
+import { GdsElement } from '../../gds-element';
+import { GdsColorLevel } from '../../utils/helpers';
+declare const GdsDiv_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeXProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeYProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").MarginProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").PaddingProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").LayoutChildProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").PositioningProps) & typeof GdsElement;
+/**
+ * @element gds-div
+ * @status beta
+ *
+ * `gds-div` is the base element in the declarative layout system.
+ */
+export declare class GdsDiv extends GdsDiv_base {
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * Controls the display property.
+     * Supports all valid CSS display values.
+     */
+    display?: string;
+    /**
+     * The level of the container is used to resolve the color tokens from the corresponding level.
+     * Check the [Color System documentation page](./?path=/docs/style-colors--docs) for more information.
+     *
+     * Default for `gds-div` is level 2.
+     *
+     */
+    level: GdsColorLevel;
+    /**
+     * Style Expression Property that controls the `color` property.
+     * Only accepts color tokens and an optional transparency value, in the format tokenName/transparency.
+     *
+     * ```html
+     * <gds-div color="primary/0.2"></gds-div>
+     * ```
+     */
+    color?: string;
+    /**
+     * Style Expression Property that controls the `background` property.
+     * Only accepts color tokens and an optional transparency value, in the format tokenName/transparency.
+     *
+     * ```html
+     * <gds-div background="primary/0.2"></gds-div>
+     * ```
+     */
+    background?: string;
+    /**
+     * Style Expression Property that controls the `border` property.
+     * Accepts a string of the same format as the CSS border property.
+     *
+     * ```html
+     * <gds-div border="4xs solid primary/0.2"></gds-div>
+     * ```
+     *
+     * Where the size value accepts space tokens and the color value accepts color tokens and an optional transparency value.
+     */
+    border?: string;
+    /**
+     * Style Expression Property that controls the `border-color` property.
+     * Only accepts color tokens and an optional transparency value, in the format tokenName/transparency.
+     *
+     * ```html
+     * <gds-div border-color="primary/0.2"></gds-div>
+     * ```
+     */
+    'border-color'?: string;
+    /**
+     * Style Expression Property that controls the `border-width` property.
+     * Only accepts space tokens.
+     */
+    'border-width'?: string;
+    /**
+     * Style Expression Property that controls the `border-style` property.
+     * Supports all valid CSS `border-style` values.
+     */
+    'border-style'?: string;
+    /**
+     * Style Expression Property that controls the `border-radius` property.
+     * Only accepts space tokens.
+     */
+    'border-radius'?: string;
+    /**
+     * Style Expression Property for the `box-shadow` property.
+     *
+     * Accepts shadow tokens from the design system.
+     *
+     * `xs`, `s`, `m`, `l`, `xl`
+     */
+    'box-shadow'?: string;
+    /**
+     * Style Expression Property that controls the `opacity` property.
+     * Supports all valid CSS `opacity` values.
+     */
+    opacity?: string;
+    /**
+     * Style Expression Property that controls the `overflow` property.
+     * Supports all valid CSS `overflow` values.
+     */
+    overflow?: string;
+    /**
+     * Style Expression Property that controls the `box-sizing` property.
+     * Supports all valid CSS `box-sizing` values.
+     */
+    'box-sizing'?: string;
+    /**
+     * Style Expression Property that controls the `z-index` property.
+     * Supports all valid CSS `z-index` values.
+     */
+    'z-index'?: string;
+    /**
+     * Style Expression Property that controls the `font-size` property.
+     * Supports all typography size tokens from the design system.
+     */
+    'font-size'?: string;
+    /**
+     * Style Expression Property that controls the `font-weight` property.
+     * Supports all typography weight tokens from the design system.
+     */
+    'font-weight'?: string;
+    /**
+     * Style Expression Property that controls the `text-align` property.
+     * Supports all valid CSS `text-align` values.
+     */
+    'text-align'?: string;
+    /**
+     * Style Expression Property that controls the `text-wrap` property.
+     * Supports all valid CSS `text-wrap` values.
+     */
+    'text-wrap'?: string;
+    /**
+     * Style Expression Property that controls the `overflow-wrap` property.
+     * Supports all valid CSS `overflow-wrap` values.
+     */
+    'overflow-wrap'?: string;
+    /**
+     * Style Expression Property that controls the `gap` property.
+     * Only accepts space tokens.
+     */
+    gap?: string;
+    /**
+     * Style Expression Property that controls the `align-items` property.
+     * Supports all valid CSS `align-items` values.
+     */
+    'align-items'?: string;
+    /**
+     * Style Expression Property that controls the `align-content` property.
+     * Supports all valid CSS `align-content` values.
+     */
+    'align-content'?: string;
+    /**
+     * Style Expression Property that controls the `justify-content` property.
+     * Supports all valid CSS `justify-content` values.
+     */
+    'justify-content'?: string;
+    /**
+     * Style Expression Property that controls the `justify-items` property.
+     * Supports all valid CSS `justify-items` values.
+     */
+    'justify-items'?: string;
+    /**
+     * Style Expression Property that controls the `flex-direction` property.
+     * Supports all valid CSS `flex-direction` values.
+     */
+    'flex-direction'?: string;
+    /**
+     * Style Expression Property that controls the `flex-wrap` property.
+     * Supports all valid CSS `flex-wrap` values.
+     */
+    'flex-wrap'?: string;
+    /**
+     * Style Expression Property that controls the `place-items` property.
+     * Supports all valid CSS `place-items` values.
+     */
+    'place-items'?: string;
+    /**
+     * Style Expression Property that controls the `place-content` property.
+     * Supports all valid CSS `place-content` values.
+     */
+    'place-content'?: string;
+    render(): any;
+}
+export {};

package/components/div/div.component.js

@@ -0,0 +1,162 @@
+import {
+  __decorateClass
+} from "../../chunks/chunk.QTSIPXV3.js";
+import { property } from "lit/decorators.js";
+import { GdsElement } from "../../gds-element";
+import { tokens } from "../../tokens.style";
+import { styleExpressionProperty } from "../../utils/decorators/style-expression-property";
+import {
+  forColorTokens,
+  forSpaceTokens,
+  parseColorValue
+} from "../../utils/helpers";
+import {
+  gdsCustomElement,
+  html
+} from "../../utils/helpers/custom-element-scoping";
+import {
+  withLayoutChildProps,
+  withMarginProps,
+  withPaddingProps,
+  withPositioningProps,
+  withSizeXProps,
+  withSizeYProps
+} from "../../utils/mixins/declarative-layout-mixins";
+import style from "./div.style";
+let GdsDiv = class extends withSizeXProps(
+  withSizeYProps(
+    withMarginProps(
+      withPaddingProps(withLayoutChildProps(withPositioningProps(GdsElement)))
+    )
+  )
+) {
+  constructor() {
+    super(...arguments);
+    this.level = "2";
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+GdsDiv.styles = [tokens, style];
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "display", 2);
+__decorateClass([
+  property()
+], GdsDiv.prototype, "level", 2);
+__decorateClass([
+  styleExpressionProperty(forColorTokens("content"))
+], GdsDiv.prototype, "color", 2);
+__decorateClass([
+  styleExpressionProperty(forColorTokens("background"))
+], GdsDiv.prototype, "background", 2);
+__decorateClass([
+  styleExpressionProperty({
+    styleTemplate: function(_prop, values) {
+      const this_ = this;
+      const [
+        size,
+        style2 = this_["border-style"] || "solid",
+        color = this_["border-color"] || "primary"
+      ] = values;
+      const sizeCss = `var(--gds-space-${size})`;
+      const colorCss = parseColorValue(color, "border", this_.level);
+      return `border: ${sizeCss} ${style2} ${colorCss};`;
+    }
+  })
+], GdsDiv.prototype, "border", 2);
+__decorateClass([
+  styleExpressionProperty(forColorTokens("border"))
+], GdsDiv.prototype, "border-color", 2);
+__decorateClass([
+  styleExpressionProperty(forSpaceTokens)
+], GdsDiv.prototype, "border-width", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "border-style", 2);
+__decorateClass([
+  styleExpressionProperty(forSpaceTokens)
+], GdsDiv.prototype, "border-radius", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => `var(--gds-shadow-${v})`
+  })
+], GdsDiv.prototype, "box-shadow", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "opacity", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "overflow", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "box-sizing", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "z-index", 2);
+__decorateClass([
+  styleExpressionProperty({
+    styleTemplate: (_prop, values) => {
+      const size = values[0];
+      const styleSize = `font-size: var(--gds-text-size-${size});`;
+      const styleLine = `line-height: var(--gds-text-line-height-${size});`;
+      return styleSize + styleLine;
+    }
+  })
+], GdsDiv.prototype, "font-size", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => `var(--gds-text-weight-${v})`
+  })
+], GdsDiv.prototype, "font-weight", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "text-align", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "text-wrap", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "overflow-wrap", 2);
+__decorateClass([
+  styleExpressionProperty({
+    ...forSpaceTokens,
+    styleTemplate: (_prop, values) => {
+      const colGap = values[0];
+      const rowGap = values[1] || colGap;
+      return `gap: ${colGap} ${rowGap};`;
+    },
+    cacheOverrideKey: "flex"
+  })
+], GdsDiv.prototype, "gap", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "align-items", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "align-content", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "justify-content", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "justify-items", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "flex-direction", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "flex-wrap", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "place-items", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "place-content", 2);
+GdsDiv = __decorateClass([
+  gdsCustomElement("gds-div")
+], GdsDiv);
+export {
+  GdsDiv
+};