import {
  __decorateClass
} from "../../chunks/chunk.QU3DSPNU.js";
import { property } from "lit/decorators.js";
import { when } from "lit/directives/when.js";
import { GdsElement } from "../../gds-element.js";
import { TransitionalStyles } from "../../transitional-styles.js";
import {
  gdsCustomElement,
  html
} from "../../utils/helpers/custom-element-scoping.js";
import { tokens } from "../../tokens.style.js";
import { GdsListItem } from "./list-item.component.js";
import GroupedListStyles from "./grouped-list.styles.js";
let GdsGroupedList = class extends GdsElement {
  constructor() {
    super(...arguments);
    this.label = "";
  }
  connectedCallback() {
    super.connectedCallback();
    TransitionalStyles.instance.apply(this, "gds-grouped-list");
  }
  render() {
    return html`${when(
      this.label,
      () => html`<div class="gds-list-heading" aria-hidden="true" id="label">
            ${this.label}
          </div>`
    )}
      <div role="list" aria-labelledby="label">
        <slot></slot>
      </div>`;
  }
};
GdsGroupedList.styles = [tokens, GroupedListStyles];
__decorateClass([
  property()
], GdsGroupedList.prototype, "label", 2);
GdsGroupedList = __decorateClass([
  gdsCustomElement("gds-grouped-list", { dependsOn: [GdsListItem] })
], GdsGroupedList);
export {
  GdsGroupedList,
  GdsListItem
};
