@sebgroup/green-core 3.12.5 → 3.14.0

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/primitives/listbox/listbox.trans.styles.scss.js

@@ -1,2 +1,2 @@
-const styles = "/* stylelint-disable max-nesting-depth */\n/**\n * Assert that a map is in ascending order\n * @mixin assert-ascending\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Assert that the first breakpoint in a map starts at zero\n * @mixin assert-starts-at-zero\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Check if a value is important\n * @function is-important\n * @param {Boolean} $important - Whether the value is important\n * @return {String} - \"!important\" if true, otherwise an empty string\n */\n/**\n * Replace a substring in a string\n * @function str-replace\n * @param {String} $string - The original string\n * @param {String} $search - The substring to replace\n * @param {String} $replace - The replacement string\n * @return {String} - The updated string\n */\n/**\n * Convert a map to its negative variant\n * @function negativify-map\n * @param {Map} $map - The map to convert\n * @return {Map} - The negative variant of the map\n */\n/**\n * Generate utility classes\n * @mixin generate-utility\n * @param {Map} $utility - Utility map\n * @param {String} $infix - Infix for class names\n * @param {Boolean} $is-rfs-media-query - Whether to use RFS media query\n */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * @function luminance\n * @param {Color} $color - The color to calculate luminance for\n * @return {Number} - The luminance value\n */\n/**\n * Calculate the contrast ratio between two colors.\n * @function color-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @return {Number} - The contrast ratio\n */\n/**\n * Remove the unit of a length\n * @function strip-unit\n * @param {Number} $number - Number to remove unit from\n * @return {Number} - Unitless number\n */\n/**\n * Validate font size\n * @function validate-font-size\n * @param {Number} $size - Font size to validate\n * @return {Number} - Validated font size in pixels\n */\n/**\n * Get ratio for WCAG level\n * @function get-ratio\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @return {Number} - Ratio value\n */\n/**\n * Determine if a color is light or dark\n * @function light-or-dark\n * @param {Color} $color - The color to check\n * @return {String} - \"light\" or \"dark\"\n */\n/**\n * Get the most legible color (black or white) for a given background color\n * @function most-legible-color\n * @param {Color} $color - The background color\n * @return {Color} - The most legible color\n */\n/**\n * Get the desired color combination for foreground and background colors\n * @function desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n * @return {List} - List containing background and foreground colors\n */\n/**\n * @mixin desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n */\n/**\n * Get an accessible color for a given foreground and background color\n * @function a11y-color\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @param {Number} $maxOffset - Maximum offset\n * @param {Boolean} $darkMode - Is dark mode\n * @param {Number} $ratio - Contrast ratio\n * @return {Color} - Accessible color\n */\n/**\n * Get the maximum contrast color\n * @function max-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Color} $max - Maximum contrast color\n * @return {Color} - Maximum contrast color\n */\n/**\n * Get the RGB values of a color as a string\n * @function stripped-rgb\n * @param {Color} $color - The color\n * @return {String} - RGB values as a string\n */\n/**\n * Get the HSL values of a color as a string\n * @function stripped-hsl\n * @param {Color} $color - The color\n * @return {String} - HSL values as a string\n */\n/**\n * Convert a map of colors to a map of HSL values\n * @function hsl-map\n * @param {Map} $colors - Map of colors\n * @return {Map} - Map of HSL values\n */\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/**\n * Breakpoint viewport sizes and media queries.\n *\n * Breakpoints are defined as a map of (name: minimum width), order from small to large:\n *\n *    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n *\n * The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n */\n/**\n * Name of the next breakpoint, or null for the last breakpoint.\n *\n *    >> breakpoint-next(sm)\n *    md\n *    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    md\n *    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n *    md\n */\n/**\n * Minimum breakpoint width. Null for the smallest (first) breakpoint.\n *\n *    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    576px\n */\n/**\n * Maximum breakpoint width.\n * The maximum value is reduced by 0.02px to work around the limitations of\n * `min-` and `max-` prefixes and viewports with fractional widths.\n * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n * See https://bugs.webkit.org/show_bug.cgi?id=178261\n *\n *    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    767.98px\n */\n/**\n * Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n * Useful for making responsive utilities.\n *\n *    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    \"\"  (Returns a blank string)\n *    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    \"-sm\"\n */\n/**\n * Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n * Makes the @content apply to the given breakpoint and wider.\n */\n/**\n * Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n * Makes the @content apply to the given breakpoint and narrower.\n */\n/**\n * Media that spans multiple breakpoint widths.\n * Makes the @content apply between the min and max breakpoints\n */\n/**\n * Media between the breakpoint's minimum and maximum widths.\n * No minimum for the smallest breakpoint, and no maximum for the largest one.\n * Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n */\n/** \n  * @deprecated in favor of Grouped list component\n  */\n/** \n  * @deprecated in favor of Grouped list component\n  */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  :host {\n    padding-left: 0;\n    margin-bottom: 0;\n    margin-top: 0;\n    display: flex;\n    flex-direction: column;\n    list-style: none;\n  }\n  :host > li {\n    padding-bottom: 0.5rem;\n    padding-top: 0.5rem;\n    border: 0;\n    display: block;\n    position: relative;\n  }\n  :host > li::before {\n    font-weight: 500;\n    display: inline-block;\n    left: 0;\n    position: absolute;\n    text-align: center;\n  }\n  :host {\n    overflow-y: auto;\n  }\n}";
+const styles = "/* stylelint-disable max-nesting-depth */\n/**\n * Assert that a map is in ascending order\n * @mixin assert-ascending\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Assert that the first breakpoint in a map starts at zero\n * @mixin assert-starts-at-zero\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Check if a value is important\n * @function is-important\n * @param {Boolean} $important - Whether the value is important\n * @return {String} - \"!important\" if true, otherwise an empty string\n */\n/**\n * Replace a substring in a string\n * @function str-replace\n * @param {String} $string - The original string\n * @param {String} $search - The substring to replace\n * @param {String} $replace - The replacement string\n * @return {String} - The updated string\n */\n/**\n * Convert a map to its negative variant\n * @function negativify-map\n * @param {Map} $map - The map to convert\n * @return {Map} - The negative variant of the map\n */\n/**\n * Generate utility classes\n * @mixin generate-utility\n * @param {Map} $utility - Utility map\n * @param {String} $infix - Infix for class names\n * @param {Boolean} $is-rfs-media-query - Whether to use RFS media query\n */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * @function luminance\n * @param {Color} $color - The color to calculate luminance for\n * @return {Number} - The luminance value\n */\n/**\n * Calculate the contrast ratio between two colors.\n * @function color-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @return {Number} - The contrast ratio\n */\n/**\n * Remove the unit of a length\n * @function strip-unit\n * @param {Number} $number - Number to remove unit from\n * @return {Number} - Unitless number\n */\n/**\n * Validate font size\n * @function validate-font-size\n * @param {Number} $size - Font size to validate\n * @return {Number} - Validated font size in pixels\n */\n/**\n * Get ratio for WCAG level\n * @function get-ratio\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @return {Number} - Ratio value\n */\n/**\n * Determine if a color is light or dark\n * @function light-or-dark\n * @param {Color} $color - The color to check\n * @return {String} - \"light\" or \"dark\"\n */\n/**\n * Get the most legible color (black or white) for a given background color\n * @function most-legible-color\n * @param {Color} $color - The background color\n * @return {Color} - The most legible color\n */\n/**\n * Get the desired color combination for foreground and background colors\n * @function desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n * @return {List} - List containing background and foreground colors\n */\n/**\n * @mixin desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n */\n/**\n * Get an accessible color for a given foreground and background color\n * @function a11y-color\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @param {Number} $maxOffset - Maximum offset\n * @param {Boolean} $darkMode - Is dark mode\n * @param {Number} $ratio - Contrast ratio\n * @return {Color} - Accessible color\n */\n/**\n * Get the maximum contrast color\n * @function max-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Color} $max - Maximum contrast color\n * @return {Color} - Maximum contrast color\n */\n/**\n * Get the RGB values of a color as a string\n * @function stripped-rgb\n * @param {Color} $color - The color\n * @return {String} - RGB values as a string\n */\n/**\n * Get the HSL values of a color as a string\n * @function stripped-hsl\n * @param {Color} $color - The color\n * @return {String} - HSL values as a string\n */\n/**\n * Convert a map of colors to a map of HSL values\n * @function hsl-map\n * @param {Map} $colors - Map of colors\n * @return {Map} - Map of HSL values\n */\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/**\n * Breakpoint viewport sizes and media queries.\n *\n * Breakpoints are defined as a map of (name: minimum width), order from small to large:\n *\n *    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n *\n * The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n */\n/**\n * Name of the next breakpoint, or null for the last breakpoint.\n *\n *    >> breakpoint-next(sm)\n *    md\n *    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    md\n *    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n *    md\n */\n/**\n * Minimum breakpoint width. Null for the smallest (first) breakpoint.\n *\n *    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    576px\n */\n/**\n * Maximum breakpoint width.\n * The maximum value is reduced by 0.02px to work around the limitations of\n * `min-` and `max-` prefixes and viewports with fractional widths.\n * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n * See https://bugs.webkit.org/show_bug.cgi?id=178261\n *\n *    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    767.98px\n */\n/**\n * Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n * Useful for making responsive utilities.\n *\n *    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    \"\"  (Returns a blank string)\n *    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    \"-sm\"\n */\n/**\n * Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n * Makes the @content apply to the given breakpoint and wider.\n */\n/**\n * Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n * Makes the @content apply to the given breakpoint and narrower.\n */\n/**\n * Media that spans multiple breakpoint widths.\n * Makes the @content apply between the min and max breakpoints\n */\n/**\n * Media between the breakpoint's minimum and maximum widths.\n * No minimum for the smallest breakpoint, and no maximum for the largest one.\n * Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n */\n/** \n  * @deprecated in favor of Grouped list component\n  */\n/** \n  * @deprecated in favor of Grouped list component\n  */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  :host {\n    padding-left: 0 \"\";\n    margin-bottom: 0 \"\";\n    margin-top: 0 \"\";\n    display: flex;\n    flex-direction: column;\n    list-style: none;\n  }\n  :host > li {\n    padding-bottom: 0.5rem \"\";\n    padding-top: 0.5rem \"\";\n    border: 0;\n    display: block;\n    position: relative;\n  }\n  :host > li::before {\n    font-weight: 500;\n    display: inline-block;\n    left: 0;\n    position: absolute;\n    text-align: center;\n  }\n  :host {\n    overflow-y: auto;\n  }\n}";
 export default styles;

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

@@ -1,2 +1,2 @@
-const styles = "/* stylelint-disable max-nesting-depth */\n/**\n * Assert that a map is in ascending order\n * @mixin assert-ascending\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Assert that the first breakpoint in a map starts at zero\n * @mixin assert-starts-at-zero\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Check if a value is important\n * @function is-important\n * @param {Boolean} $important - Whether the value is important\n * @return {String} - \"!important\" if true, otherwise an empty string\n */\n/**\n * Replace a substring in a string\n * @function str-replace\n * @param {String} $string - The original string\n * @param {String} $search - The substring to replace\n * @param {String} $replace - The replacement string\n * @return {String} - The updated string\n */\n/**\n * Convert a map to its negative variant\n * @function negativify-map\n * @param {Map} $map - The map to convert\n * @return {Map} - The negative variant of the map\n */\n/**\n * Generate utility classes\n * @mixin generate-utility\n * @param {Map} $utility - Utility map\n * @param {String} $infix - Infix for class names\n * @param {Boolean} $is-rfs-media-query - Whether to use RFS media query\n */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * @function luminance\n * @param {Color} $color - The color to calculate luminance for\n * @return {Number} - The luminance value\n */\n/**\n * Calculate the contrast ratio between two colors.\n * @function color-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @return {Number} - The contrast ratio\n */\n/**\n * Remove the unit of a length\n * @function strip-unit\n * @param {Number} $number - Number to remove unit from\n * @return {Number} - Unitless number\n */\n/**\n * Validate font size\n * @function validate-font-size\n * @param {Number} $size - Font size to validate\n * @return {Number} - Validated font size in pixels\n */\n/**\n * Get ratio for WCAG level\n * @function get-ratio\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @return {Number} - Ratio value\n */\n/**\n * Determine if a color is light or dark\n * @function light-or-dark\n * @param {Color} $color - The color to check\n * @return {String} - \"light\" or \"dark\"\n */\n/**\n * Get the most legible color (black or white) for a given background color\n * @function most-legible-color\n * @param {Color} $color - The background color\n * @return {Color} - The most legible color\n */\n/**\n * Get the desired color combination for foreground and background colors\n * @function desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n * @return {List} - List containing background and foreground colors\n */\n/**\n * @mixin desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n */\n/**\n * Get an accessible color for a given foreground and background color\n * @function a11y-color\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @param {Number} $maxOffset - Maximum offset\n * @param {Boolean} $darkMode - Is dark mode\n * @param {Number} $ratio - Contrast ratio\n * @return {Color} - Accessible color\n */\n/**\n * Get the maximum contrast color\n * @function max-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Color} $max - Maximum contrast color\n * @return {Color} - Maximum contrast color\n */\n/**\n * Get the RGB values of a color as a string\n * @function stripped-rgb\n * @param {Color} $color - The color\n * @return {String} - RGB values as a string\n */\n/**\n * Get the HSL values of a color as a string\n * @function stripped-hsl\n * @param {Color} $color - The color\n * @return {String} - HSL values as a string\n */\n/**\n * Convert a map of colors to a map of HSL values\n * @function hsl-map\n * @param {Map} $colors - Map of colors\n * @return {Map} - Map of HSL values\n */\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/**\n * Breakpoint viewport sizes and media queries.\n *\n * Breakpoints are defined as a map of (name: minimum width), order from small to large:\n *\n *    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n *\n * The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n */\n/**\n * Name of the next breakpoint, or null for the last breakpoint.\n *\n *    >> breakpoint-next(sm)\n *    md\n *    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    md\n *    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n *    md\n */\n/**\n * Minimum breakpoint width. Null for the smallest (first) breakpoint.\n *\n *    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    576px\n */\n/**\n * Maximum breakpoint width.\n * The maximum value is reduced by 0.02px to work around the limitations of\n * `min-` and `max-` prefixes and viewports with fractional widths.\n * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n * See https://bugs.webkit.org/show_bug.cgi?id=178261\n *\n *    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    767.98px\n */\n/**\n * Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n * Useful for making responsive utilities.\n *\n *    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    \"\"  (Returns a blank string)\n *    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    \"-sm\"\n */\n/**\n * Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n * Makes the @content apply to the given breakpoint and wider.\n */\n/**\n * Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n * Makes the @content apply to the given breakpoint and narrower.\n */\n/**\n * Media that spans multiple breakpoint widths.\n * Makes the @content apply between the min and max breakpoints\n */\n/**\n * Media between the breakpoint's minimum and maximum widths.\n * No minimum for the smallest breakpoint, and no maximum for the largest one.\n * Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n */\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  }\n  .item:hover, .item:focus-visible {\n    background-color: var(--gds-sys-color-base-200);\n  }\n  .item:active {\n    background-color: var(--gds-sys-color-base-200);\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(--gds-sys-color-base-800);\n    color: #fff;\n  }\n  .item {\n    display: flex;\n    gap: 0.75rem;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n  :host(:hover) div,\n  :host(:focus-visible) div {\n    background-color: var(--gds-sys-color-base-200);\n  }\n  :host(:active) div {\n    background-color: var(--gds-sys-color-base-300);\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(--gds-sys-color-base-800);\n    color: #fff;\n  }\n}";
+const styles = "/* stylelint-disable max-nesting-depth */\n/**\n * Assert that a map is in ascending order\n * @mixin assert-ascending\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Assert that the first breakpoint in a map starts at zero\n * @mixin assert-starts-at-zero\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Check if a value is important\n * @function is-important\n * @param {Boolean} $important - Whether the value is important\n * @return {String} - \"!important\" if true, otherwise an empty string\n */\n/**\n * Replace a substring in a string\n * @function str-replace\n * @param {String} $string - The original string\n * @param {String} $search - The substring to replace\n * @param {String} $replace - The replacement string\n * @return {String} - The updated string\n */\n/**\n * Convert a map to its negative variant\n * @function negativify-map\n * @param {Map} $map - The map to convert\n * @return {Map} - The negative variant of the map\n */\n/**\n * Generate utility classes\n * @mixin generate-utility\n * @param {Map} $utility - Utility map\n * @param {String} $infix - Infix for class names\n * @param {Boolean} $is-rfs-media-query - Whether to use RFS media query\n */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * @function luminance\n * @param {Color} $color - The color to calculate luminance for\n * @return {Number} - The luminance value\n */\n/**\n * Calculate the contrast ratio between two colors.\n * @function color-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @return {Number} - The contrast ratio\n */\n/**\n * Remove the unit of a length\n * @function strip-unit\n * @param {Number} $number - Number to remove unit from\n * @return {Number} - Unitless number\n */\n/**\n * Validate font size\n * @function validate-font-size\n * @param {Number} $size - Font size to validate\n * @return {Number} - Validated font size in pixels\n */\n/**\n * Get ratio for WCAG level\n * @function get-ratio\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @return {Number} - Ratio value\n */\n/**\n * Determine if a color is light or dark\n * @function light-or-dark\n * @param {Color} $color - The color to check\n * @return {String} - \"light\" or \"dark\"\n */\n/**\n * Get the most legible color (black or white) for a given background color\n * @function most-legible-color\n * @param {Color} $color - The background color\n * @return {Color} - The most legible color\n */\n/**\n * Get the desired color combination for foreground and background colors\n * @function desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n * @return {List} - List containing background and foreground colors\n */\n/**\n * @mixin desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n */\n/**\n * Get an accessible color for a given foreground and background color\n * @function a11y-color\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @param {Number} $maxOffset - Maximum offset\n * @param {Boolean} $darkMode - Is dark mode\n * @param {Number} $ratio - Contrast ratio\n * @return {Color} - Accessible color\n */\n/**\n * Get the maximum contrast color\n * @function max-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Color} $max - Maximum contrast color\n * @return {Color} - Maximum contrast color\n */\n/**\n * Get the RGB values of a color as a string\n * @function stripped-rgb\n * @param {Color} $color - The color\n * @return {String} - RGB values as a string\n */\n/**\n * Get the HSL values of a color as a string\n * @function stripped-hsl\n * @param {Color} $color - The color\n * @return {String} - HSL values as a string\n */\n/**\n * Convert a map of colors to a map of HSL values\n * @function hsl-map\n * @param {Map} $colors - Map of colors\n * @return {Map} - Map of HSL values\n */\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/**\n * Breakpoint viewport sizes and media queries.\n *\n * Breakpoints are defined as a map of (name: minimum width), order from small to large:\n *\n *    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n *\n * The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n */\n/**\n * Name of the next breakpoint, or null for the last breakpoint.\n *\n *    >> breakpoint-next(sm)\n *    md\n *    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    md\n *    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n *    md\n */\n/**\n * Minimum breakpoint width. Null for the smallest (first) breakpoint.\n *\n *    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    576px\n */\n/**\n * Maximum breakpoint width.\n * The maximum value is reduced by 0.02px to work around the limitations of\n * `min-` and `max-` prefixes and viewports with fractional widths.\n * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n * See https://bugs.webkit.org/show_bug.cgi?id=178261\n *\n *    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    767.98px\n */\n/**\n * Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n * Useful for making responsive utilities.\n *\n *    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    \"\"  (Returns a blank string)\n *    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    \"-sm\"\n */\n/**\n * Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n * Makes the @content apply to the given breakpoint and wider.\n */\n/**\n * Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n * Makes the @content apply to the given breakpoint and narrower.\n */\n/**\n * Media that spans multiple breakpoint widths.\n * Makes the @content apply between the min and max breakpoints\n */\n/**\n * Media between the breakpoint's minimum and maximum widths.\n * No minimum for the smallest breakpoint, and no maximum for the largest one.\n * Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n */\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  }\n  .item:hover, .item:focus-visible {\n    background-color: var(--gds-sys-color-base-200);\n  }\n  .item:active {\n    background-color: var(--gds-sys-color-base-200);\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(--gds-sys-color-base-800);\n    color: #fff;\n  }\n  .item {\n    display: flex;\n    gap: 0.75rem;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n  :host(:hover) div,\n  :host(:focus-visible) div {\n    background-color: var(--gds-sys-color-base-200);\n  }\n  :host(:active) div {\n    background-color: var(--gds-sys-color-base-300);\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(--gds-sys-color-base-800);\n    color: #fff;\n  }\n}";
 export default styles;

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 = "-eadd84";
 class ScopedElementRegistry {
   static get instance() {
     if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])