@sebgroup/green-core 3.12.5 → 3.13.0

package/generated/react/list-item-pattern-01/index.js

@@ -0,0 +1,16 @@
+import "../../../chunks/chunk.CAV4X6PU.js";
+import { createElement } from "react";
+import { GdsListItemPattern01 as GdsListItemPattern01Class } from "../../../patterns/list-item-pattern-01/list-item-pattern-01.component.js";
+import { getReactComponent } from "../../../utils/react.js";
+const GdsListItemPattern01 = (props) => {
+  GdsListItemPattern01Class.define();
+  const JSXElement = getReactComponent(
+    "gds-list-item-pattern-01"
+  );
+  const propsWithClass = { ...props, class: props.className, ref: props.ref };
+  return createElement(JSXElement, propsWithClass);
+};
+GdsListItemPattern01.displayName = "GdsListItemPattern01";
+export {
+  GdsListItemPattern01
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "3.12.5",
+  "version": "3.13.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",
@@ -111,6 +111,10 @@
     "./components/menu-button/index.js",
     "./components/mask/mask.js",
     "./components/mask/index.js",
+    "./components/list/list.js",
+    "./components/list/index.js",
+    "./components/list/list-item/list-item.js",
+    "./components/list/list-item/index.js",
     "./components/link/link.js",
     "./components/link/index.js",
     "./components/input/input.js",
@@ -510,6 +514,9 @@
     "./components/alert/index.js",
     "./components/alert/alert.js",
     "./patterns/index.js",
+    "./patterns/list-item-pattern-01/list-item-pattern-01.stories.data.js",
+    "./patterns/list-item-pattern-01/list-item-pattern-01.js",
+    "./patterns/list-item-pattern-01/index.js",
     "./patterns/card-pattern-01/index.js",
     "./patterns/card-pattern-01/card-pattern-01.js",
     "./primitives/toggle-controls-base/toggle-control-base.js",

package/patterns/index.d.ts

@@ -1 +1,2 @@
 export * from './card-pattern-01/card-pattern-01';
+export * from './list-item-pattern-01/list-item-pattern-01';

package/patterns/index.js

@@ -1 +1,2 @@
 export * from "./card-pattern-01/card-pattern-01.js";
+export * from "./list-item-pattern-01/list-item-pattern-01.js";

package/patterns/list-item-pattern-01/index.d.ts

@@ -0,0 +1 @@
+export * from './list-item-pattern-01';

package/patterns/list-item-pattern-01/index.js

@@ -0,0 +1 @@
+export * from "./list-item-pattern-01.js";

package/patterns/list-item-pattern-01/list-item-pattern-01.component.d.ts

@@ -0,0 +1,74 @@
+import { GdsListItem } from '../../components/list/list-item/list-item.component';
+export interface ListPatternItem {
+    /** Optional label displayed above the value */
+    label?: string;
+    /** Required value for the item */
+    value: string;
+}
+declare const GdsListItemPattern01_base: (new (...args: any[]) => import("../../utils/mixins/props-link").LinkProps) & typeof GdsListItem;
+/**
+ * @element gds-list-item-pattern-01
+ * @status beta
+ *
+ * A single row for use inside a `gds-list-pattern-01` container.
+ * The row has lead, main, and trail slots.
+ *
+ * The main slot supports multiple columns via the `items` property.
+ * Each column has an optional `label` and a required `value`, rendered vertically.
+ *
+ * When `selectable` is set, a checkbox is rendered in the lead slot.
+ * When `href` is set, the trail renders a chevron as a link and the row gains a hover state.
+ *
+ * @slot - Main content slot. Rendered after `items` columns when `items` is set, or as the sole main content when `items` is not set.
+ * @slot lead - Lead slot content. Ignored when `selectable` is set (checkbox takes precedence).
+ *
+ * @event input - Dispatched when the checkbox is checked or unchecked.
+ * @event change - Dispatched when the checkbox is checked or unchecked.
+ */
+export declare class GdsListItemPattern01 extends GdsListItemPattern01_base {
+    #private;
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    private _isWrapped;
+    private _hasLead;
+    private _itemsContainer?;
+    private _checkWrap;
+    /**
+     * Multi-column content for the main slot.
+     * Each entry has an optional `label` and a required `value`.
+     * When set, takes precedence over the default slot.
+     *
+     * Accepts: `Array<{ label?: string, value: string }>`
+     */
+    items?: ListPatternItem[];
+    /**
+     * Optional label displayed above the items in the main slot.
+     * If not set, falls back to the first item's label (if available).
+     */
+    label: string;
+    /**
+     * Enables a checkbox in the lead slot of the row.
+     * The checkbox can be toggled and emits a `toggle-change` event.
+     */
+    selectable: boolean;
+    /**
+     * Whether the checkbox is checked. Only relevant when `selectable` is true.
+     */
+    checked: boolean;
+    /**
+     * Whether the checkbox is in an indeterminate state. Only relevant when `selectable` is true.
+     */
+    indeterminate: boolean;
+    /**
+     * Whether the checkbox is disabled. Only relevant when `selectable` is true.
+     */
+    disabled: boolean;
+    /**
+     * Controls the `padding-inline` of the item.
+     * Accepts space token names (e.g. `s`, `m`, `l`) or custom CSS values (e.g. `0`).
+     * Defaults to `s` via the stylesheet. Set to `0` to remove padding.
+     */
+    'padding-inline'?: string;
+    private _hasTrailContent;
+    render(): any;
+}
+export {};

package/patterns/list-item-pattern-01/list-item-pattern-01.component.js

@@ -0,0 +1,278 @@
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod
+} from "../../chunks/chunk.CAV4X6PU.js";
+var _isLinked, isLinked_get, _renderCheckbox, renderCheckbox_fn, _renderLead, renderLead_fn, _renderItems, renderItems_fn, _onLeadSlotChange, onLeadSlotChange_fn, _onTrailSlotChange, onTrailSlotChange_fn, _renderMain, renderMain_fn, _renderTrail, renderTrail_fn, _renderRowContent, renderRowContent_fn;
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { when } from "lit/directives/when.js";
+import { GdsButton } from "../../components/button/button.component.js";
+import { GdsFlex } from "../../components/flex/flex.component.js";
+import { IconCheckmark } from "../../components/icon/icons/checkmark.component.js";
+import { IconChevronRight } from "../../components/icon/icons/chevron-right.component.js";
+import { IconMinusSmall } from "../../components/icon/icons/minus-small.component.js";
+import { GdsListItem } from "../../components/list/list-item/list-item.component.js";
+import { GdsText } from "../../components/text/text.component.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 { resizeObserver } from "../../utils/decorators/resize-observer.js";
+import { styleExpressionProperty } from "../../utils/decorators/style-expression-property.js";
+import {
+  gdsCustomElement,
+  html
+} from "../../utils/helpers/custom-element-scoping.js";
+import { forSpaceTokensAndCustomValues } from "../../utils/helpers/style-expression-helpers.js";
+import { withLinkProps } from "../../utils/mixins/props-link.js";
+import ListPattern01ItemStyles from "./list-item-pattern-01.styles.js";
+let GdsListItemPattern01 = class extends withLinkProps(GdsListItem) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _isLinked);
+    __privateAdd(this, _renderCheckbox);
+    __privateAdd(this, _renderLead);
+    __privateAdd(this, _renderItems);
+    __privateAdd(this, _onLeadSlotChange);
+    __privateAdd(this, _onTrailSlotChange);
+    __privateAdd(this, _renderMain);
+    __privateAdd(this, _renderTrail);
+    __privateAdd(this, _renderRowContent);
+    this._isWrapped = false;
+    this._hasLead = false;
+    this.label = "";
+    this.selectable = false;
+    this.checked = false;
+    this.indeterminate = false;
+    this.disabled = false;
+    this._hasTrailContent = false;
+  }
+  _checkWrap() {
+    const el = this._itemsContainer;
+    if (!el)
+      return;
+    const children = Array.from(el.children);
+    if (children.length < 2) {
+      this._isWrapped = false;
+      return;
+    }
+    const firstTop = children[0].getBoundingClientRect().top;
+    this._isWrapped = children.some(
+      (child) => child.getBoundingClientRect().top > firstTop
+    );
+  }
+  render() {
+    return html`${__privateMethod(this, _renderRowContent, renderRowContent_fn).call(this)}`;
+  }
+};
+_isLinked = new WeakSet();
+isLinked_get = function() {
+  return !!this.href;
+};
+_renderCheckbox = new WeakSet();
+renderCheckbox_fn = function() {
+  const toggle = (e) => {
+    e.stopPropagation();
+    if (this.disabled)
+      return;
+    this.checked = !this.checked;
+    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  };
+  const onKey = (e) => {
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      toggle(e);
+    }
+  };
+  return html`
+      <div
+        class="rbcb-wrapper"
+        role="checkbox"
+        aria-checked=${this.indeterminate ? "mixed" : this.checked ? "true" : "false"}
+        aria-label=${this.label || "Select item"}
+        tabindex="0"
+        @click=${toggle}
+        @keydown=${onKey}
+      >
+        <input
+          type="checkbox"
+          class="visually-hidden-checkbox"
+          .checked=${this.checked}
+          .indeterminate=${this.indeterminate}
+          ?disabled=${this.disabled}
+          aria-hidden="true"
+          tabindex="-1"
+          @change=${toggle}
+        />
+        ${checkboxToggle({
+    checked: this.checked,
+    indeterminate: this.indeterminate,
+    disabled: this.disabled,
+    invalid: false
+  })}
+      </div>
+    `;
+};
+_renderLead = new WeakSet();
+renderLead_fn = function() {
+  if (this.selectable)
+    return __privateMethod(this, _renderCheckbox, renderCheckbox_fn).call(this);
+  return html``;
+};
+_renderItems = new WeakSet();
+renderItems_fn = function(col, alignEnd = false) {
+  return html`
+      <div class="item-column ${alignEnd ? "align-end" : ""}">
+        ${when(
+    col.label,
+    () => html`<gds-text font="detail-s-regular" tag="label"
+              >${col.label}</gds-text
+            >`
+  )}
+        <gds-text font="detail-m-book" tag="span">${col.value}</gds-text>
+      </div>
+    `;
+};
+_onLeadSlotChange = new WeakSet();
+onLeadSlotChange_fn = function(e) {
+  const slot = e.target;
+  this._hasLead = slot.assignedElements().length > 0;
+};
+_onTrailSlotChange = new WeakSet();
+onTrailSlotChange_fn = function(e) {
+  const slot = e.target;
+  this._hasTrailContent = slot.assignedElements().length > 0 || __privateGet(this, _isLinked, isLinked_get);
+};
+_renderMain = new WeakSet();
+renderMain_fn = function() {
+  if (this.items && this.items.length > 0) {
+    const wrap = this.items.length >= 3 ? "wrap" : "nowrap";
+    const alignLastEnd = this.items.length >= 2 && !this._isWrapped;
+    return html`
+        <slot name="lead" @slotchange=${__privateMethod(this, _onLeadSlotChange, onLeadSlotChange_fn)}></slot>
+        <gds-flex
+          class="items-container"
+          flex="1"
+          justify-content="space-between"
+          gap="l"
+          flex-wrap=${wrap}
+        >
+          ${this.items.map((col, i) => {
+      const isLast = i === this.items.length - 1;
+      return __privateMethod(this, _renderItems, renderItems_fn).call(this, i === 0 && this.label && !col.label ? { ...col, label: this.label } : col, alignLastEnd && isLast);
+    })}
+        </gds-flex>
+        <slot></slot>
+      `;
+  }
+  return html`<slot name="lead" @slotchange=${__privateMethod(this, _onLeadSlotChange, onLeadSlotChange_fn)}></slot
+      ><slot></slot>`;
+};
+_renderTrail = new WeakSet();
+renderTrail_fn = function() {
+  const classes = classMap({
+    "has-content": this._hasTrailContent
+  });
+  return html`
+      <slot name="trail" @slotchange=${__privateMethod(this, _onTrailSlotChange, onTrailSlotChange_fn)} class=${classes}
+        >${when(
+    this.href,
+    () => html`<gds-icon-chevron-right></gds-icon-chevron-right>`
+  )}</slot
+      >
+    `;
+};
+_renderRowContent = new WeakSet();
+renderRowContent_fn = function() {
+  if (__privateGet(this, _isLinked, isLinked_get) && this.selectable) {
+    return html`
+        ${__privateMethod(this, _renderLead, renderLead_fn).call(this)} ${__privateMethod(this, _renderMain, renderMain_fn).call(this)}
+        <gds-button
+          slot="trail"
+          href=${ifDefined(this.href)}
+          target=${ifDefined(this.target)}
+          rel=${ifDefined(this.rel)}
+          download=${ifDefined(this.download)}
+          ping=${ifDefined(this.ping)}
+          rank="tertiary"
+          aria-label=${this.label || "Navigate"}
+          ><gds-icon-chevron-right></gds-icon-chevron-right
+        ></gds-button>
+      `;
+  }
+  if (__privateGet(this, _isLinked, isLinked_get)) {
+    const classes = classMap({
+      "has-lead": this._hasLead
+    });
+    return html`
+        ${__privateMethod(this, _renderLead, renderLead_fn).call(this)}
+        <a
+          class="linked-area ${classes}"
+          href=${ifDefined(this.href)}
+          target=${ifDefined(this.target)}
+          rel=${ifDefined(this.rel)}
+          download=${ifDefined(this.download)}
+          ping=${ifDefined(this.ping)}
+        >
+          ${__privateMethod(this, _renderMain, renderMain_fn).call(this)} ${__privateMethod(this, _renderTrail, renderTrail_fn).call(this)}
+        </a>
+      `;
+  }
+  return html`${__privateMethod(this, _renderLead, renderLead_fn).call(this)} ${__privateMethod(this, _renderMain, renderMain_fn).call(this)}
+    ${__privateMethod(this, _renderTrail, renderTrail_fn).call(this)}`;
+};
+GdsListItemPattern01.styles = [tokens, rbcbToggleStyles, ListPattern01ItemStyles];
+__decorateClass([
+  state()
+], GdsListItemPattern01.prototype, "_isWrapped", 2);
+__decorateClass([
+  state()
+], GdsListItemPattern01.prototype, "_hasLead", 2);
+__decorateClass([
+  query(".items-container")
+], GdsListItemPattern01.prototype, "_itemsContainer", 2);
+__decorateClass([
+  resizeObserver()
+], GdsListItemPattern01.prototype, "_checkWrap", 1);
+__decorateClass([
+  property({ type: Array })
+], GdsListItemPattern01.prototype, "items", 2);
+__decorateClass([
+  property({ reflect: true })
+], GdsListItemPattern01.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsListItemPattern01.prototype, "selectable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsListItemPattern01.prototype, "checked", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsListItemPattern01.prototype, "indeterminate", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsListItemPattern01.prototype, "disabled", 2);
+__decorateClass([
+  styleExpressionProperty({ ...forSpaceTokensAndCustomValues, reflect: true })
+], GdsListItemPattern01.prototype, "padding-inline", 2);
+__decorateClass([
+  state()
+], GdsListItemPattern01.prototype, "_hasTrailContent", 2);
+GdsListItemPattern01 = __decorateClass([
+  gdsCustomElement("gds-list-item-pattern-01", {
+    dependsOn: [
+      GdsFlex,
+      GdsText,
+      GdsButton,
+      IconCheckmark,
+      IconMinusSmall,
+      IconChevronRight
+    ]
+  })
+], GdsListItemPattern01);
+export {
+  GdsListItemPattern01
+};

package/patterns/list-item-pattern-01/list-item-pattern-01.d.ts

@@ -0,0 +1,2 @@
+import { GdsListItemPattern01 } from './list-item-pattern-01.component';
+export { GdsListItemPattern01 };

package/patterns/list-item-pattern-01/list-item-pattern-01.js

@@ -0,0 +1,6 @@
+import "../../chunks/chunk.CAV4X6PU.js";
+import { GdsListItemPattern01 } from "./list-item-pattern-01.component.js";
+GdsListItemPattern01.define();
+export {
+  GdsListItemPattern01
+};

package/patterns/list-item-pattern-01/list-item-pattern-01.stories.data.d.ts

@@ -0,0 +1,4 @@
+export declare const listPattern01Items: (items: number) => {
+    label: string;
+    value: string;
+}[];

package/patterns/list-item-pattern-01/list-item-pattern-01.stories.data.js

@@ -0,0 +1,8 @@
+import "../../chunks/chunk.CAV4X6PU.js";
+const listPattern01Items = (items) => Array.from({ length: items }, (_, i) => ({
+  label: `Item ${i + 1}`,
+  value: `Value ${i + 1}`
+}));
+export {
+  listPattern01Items
+};

package/patterns/list-item-pattern-01/list-item-pattern-01.styles.d.ts

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

package/patterns/list-item-pattern-01/list-item-pattern-01.styles.js

@@ -0,0 +1,113 @@
+import "../../chunks/chunk.CAV4X6PU.js";
+import { css } from "lit";
+const style = css`
+  :host {
+    display: flex;
+    align-items: center;
+    gap: var(--gds-sys-space-s);
+    padding: var(--gds-sys-space-s);
+    padding-inline: var(--gds-sys-space-s);
+    border-radius: var(--gds-sys-space-2xs);
+    transition:
+      background-color 0.15s ease,
+      box-shadow 0.15s ease;
+  }
+
+  /* Anchor wrapping main when href is set */
+  .linked-area {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    gap: var(--gds-sys-space-s);
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
+    border-radius: var(--gds-sys-space-2xs);
+    transition:
+      background-color 0.15s ease,
+      box-shadow 0.15s ease;
+    /* Extend hover to top, and bottom edges of the host */
+    margin-top: calc(-1 * var(--gds-sys-space-s));
+    margin-bottom: calc(-1 * var(--gds-sys-space-s));
+    padding: var(--gds-sys-space-s);
+    /* Pre-set transparent outline so it animates in on focus (same pattern as gds-button) */
+    outline-color: transparent;
+    outline-offset: calc(-1 * var(--gds-sys-space-4xs));
+    outline-style: solid;
+    outline-width: var(--gds-sys-space-4xs);
+  }
+
+  .linked-area:focus {
+    outline-color: var(--gds-sys-color-content-neutral-01);
+  }
+
+  .linked-area:focus:not(:focus-visible) {
+    outline-color: transparent;
+  }
+
+  @media (pointer: fine) {
+    .linked-area:hover {
+      background-color: color-mix(
+        in srgb,
+        var(--gds-sys-color-l2-neutral-01),
+        var(--gds-sys-color-state-neutral-03)
+      );
+      padding: var(--gds-sys-space-s);
+    }
+  }
+
+  .linked-area:active {
+    background-color: color-mix(
+      in srgb,
+      var(--gds-sys-color-l2-neutral-01),
+      var(--gds-sys-color-state-neutral-04)
+    );
+  }
+
+  .linked-area .has-lead {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  slot[name='trail'] {
+    margin-inline-start: auto;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: end;
+  }
+
+  slot[name='trail']:not(.has-content) {
+    display: none;
+  }
+
+  :host([href]) slot[name='trail'] {
+    display: flex;
+    min-width: 40px;
+  }
+
+  .rbcb-wrapper {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    outline: none;
+  }
+
+  .item-column {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gds-sys-space-4xs);
+    justify-content: center;
+    text-align: start;
+  }
+
+  .item-column.align-end {
+    text-align: end;
+  }
+`;
+var list_item_pattern_01_styles_default = style;
+export {
+  list_item_pattern_01_styles_default as default
+};

package/pure.d.ts

@@ -33,6 +33,8 @@ export * from './components/icon/icons/pure';
 export * from './components/img/img.component';
 export * from './components/input/input.component';
 export * from './components/link/link.component';
+export * from './components/list/list.component';
+export * from './components/list/list-item/list-item.component';
 export * from './components/mask/mask.component';
 export * from './components/menu-button/menu-button.component';
 export * from './components/pagination/pagination.component';
@@ -54,3 +56,4 @@ export * from './components/textarea/textarea.component';
 export * from './components/theme/theme.component';
 export * from './components/video/video.component';
 export * from './patterns/card-pattern-01/card-pattern-01.component';
+export * from './patterns/list-item-pattern-01/list-item-pattern-01.component';

package/pure.js

@@ -33,6 +33,8 @@ export * from "./components/icon/icons/pure.js";
 export * from "./components/img/img.component.js";
 export * from "./components/input/input.component.js";
 export * from "./components/link/link.component.js";
+export * from "./components/list/list.component.js";
+export * from "./components/list/list-item/list-item.component.js";
 export * from "./components/mask/mask.component.js";
 export * from "./components/menu-button/menu-button.component.js";
 export * from "./components/pagination/pagination.component.js";
@@ -54,3 +56,4 @@ export * from "./components/textarea/textarea.component.js";
 export * from "./components/theme/theme.component.js";
 export * from "./components/video/video.component.js";
 export * from "./patterns/card-pattern-01/card-pattern-01.component.js";
+export * from "./patterns/list-item-pattern-01/list-item-pattern-01.component.js";

package/utils/helpers/custom-element-scoping.js

@@ -1,6 +1,6 @@
 import "../../chunks/chunk.CAV4X6PU.js";
 import { html as litHtml } from "lit";
-const VER_SUFFIX = "-0e517f";
+const VER_SUFFIX = "-1035d1";
 class ScopedElementRegistry {
   static get instance() {
     if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])