@sebgroup/green-core 3.12.5 → 3.14.0

package/components/tabs/tab/tab.component.js

@@ -0,0 +1,120 @@
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "../../../chunks/chunk.CAV4X6PU.js";
+var _internals, _panelEl, _handleLeadTrailSlotChange, _updateSlottedIconSolid, updateSlottedIconSolid_fn, _syncAria, syncAria_fn;
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { GdsElement } from "../../../gds-element.js";
+import { gdsCustomElement, html } from "../../../scoping.js";
+import { tokens } from "../../../tokens.style.js";
+import { watch } from "../../../utils/decorators/watch.js";
+import TabStyles from "./tab.styles.js";
+let GdsTab = class extends GdsElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _updateSlottedIconSolid);
+    __privateAdd(this, _syncAria);
+    __privateAdd(this, _internals, this.attachInternals());
+    __privateAdd(this, _panelEl, void 0);
+    this.size = "medium";
+    this.disabled = false;
+    this.selected = false;
+    this.panel = "";
+    __privateAdd(this, _handleLeadTrailSlotChange, () => {
+      __privateMethod(this, _updateSlottedIconSolid, updateSlottedIconSolid_fn).call(this);
+    });
+  }
+  /**
+   * The resolved associated `<gds-tab-panel>` element, if any. Managed by
+   * the parent `<gds-tabs>`.
+   */
+  get panelEl() {
+    return __privateGet(this, _panelEl);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    __privateMethod(this, _syncAria, syncAria_fn).call(this);
+    this.addEventListener("click", () => void 0);
+    this.addEventListener("keydown", (event) => {
+      if (event.key === "Tab") {
+        event.preventDefault();
+        __privateGet(this, _panelEl)?.focus();
+      }
+    });
+  }
+  _handleSelectedChange() {
+    __privateMethod(this, _updateSlottedIconSolid, updateSlottedIconSolid_fn).call(this);
+    __privateMethod(this, _syncAria, syncAria_fn).call(this);
+  }
+  _handleDisabledChange() {
+    __privateMethod(this, _syncAria, syncAria_fn).call(this);
+  }
+  /**
+   * @internal
+   */
+  _setPanelEl(panelEl) {
+    __privateSet(this, _panelEl, panelEl);
+    __privateMethod(this, _syncAria, syncAria_fn).call(this);
+  }
+  render() {
+    return html`<div class=${classMap({ small: this.size === "small" })}>
+      <slot name="lead" @slotchange=${__privateGet(this, _handleLeadTrailSlotChange)}></slot>
+      <slot></slot>
+      <slot name="trail" @slotchange=${__privateGet(this, _handleLeadTrailSlotChange)}></slot>
+    </div>`;
+  }
+};
+_internals = new WeakMap();
+_panelEl = new WeakMap();
+_handleLeadTrailSlotChange = new WeakMap();
+_updateSlottedIconSolid = new WeakSet();
+updateSlottedIconSolid_fn = function() {
+  const slotNames = ["lead", "trail"];
+  for (const name of slotNames) {
+    const slot = this.renderRoot.querySelector(
+      `slot[name="${name}"]`
+    );
+    for (const el of slot?.assignedElements({ flatten: true }) ?? []) {
+      if ("solid" in el) {
+        ;
+        el.solid = this.selected;
+      }
+    }
+  }
+};
+_syncAria = new WeakSet();
+syncAria_fn = function() {
+  this.setAttribute("role", "tab");
+  __privateGet(this, _internals).ariaSelected = this.selected ? "true" : "false";
+  this.tabIndex = this.selected && !this.disabled ? 0 : -1;
+  __privateGet(this, _internals).ariaControlsElements = __privateGet(this, _panelEl) ? [__privateGet(this, _panelEl)] : [];
+};
+GdsTab.styles = [tokens, TabStyles];
+__decorateClass([
+  property({ reflect: true })
+], GdsTab.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsTab.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsTab.prototype, "selected", 2);
+__decorateClass([
+  property()
+], GdsTab.prototype, "panel", 2);
+__decorateClass([
+  watch("selected")
+], GdsTab.prototype, "_handleSelectedChange", 1);
+__decorateClass([
+  watch("disabled")
+], GdsTab.prototype, "_handleDisabledChange", 1);
+GdsTab = __decorateClass([
+  gdsCustomElement("gds-tab")
+], GdsTab);
+export {
+  GdsTab
+};

package/components/tabs/tab/tab.d.ts

@@ -0,0 +1,2 @@
+import { GdsTab } from './tab.component';
+export { GdsTab };

package/components/tabs/tab/tab.js

@@ -0,0 +1,6 @@
+import "../../../chunks/chunk.CAV4X6PU.js";
+import { GdsTab } from "./tab.component.js";
+GdsTab.define();
+export {
+  GdsTab
+};

package/components/tabs/tab/tab.styles.d.ts

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

package/components/tabs/tab/tab.styles.js

@@ -0,0 +1,69 @@
+import "../../../chunks/chunk.CAV4X6PU.js";
+import { css } from "lit";
+const style = css`
+  @layer base {
+    :host {
+      display: inline-flex;
+    }
+
+    div {
+      position: relative;
+      border-radius: var(--gds-sys-radius-xs);
+      appearance: none;
+      background: none;
+      border: 0;
+      color: var(--gds-sys-color-content-neutral-02);
+      background-color: transparent;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      font: var(--gds-sys-text-detail-m-book);
+      outline-width: 2px;
+      outline-style: solid;
+      outline-offset: -4px;
+      outline-color: transparent;
+      padding-inline: var(--gds-sys-space-s);
+      height: 44px;
+      text-decoration: none;
+      transition-property: color, outline-color;
+      transition-duration: 0.2s;
+      white-space: nowrap;
+      gap: var(--gds-sys-space-xs);
+
+      @media (pointer: fine) {
+        &:hover {
+          color: var(--gds-sys-color-content-neutral-01);
+        }
+      }
+
+      &.small {
+        padding-inline: var(--gds-sys-space-xs);
+        height: 30px;
+        font: var(--gds-sys-text-detail-s-book);
+      }
+    }
+
+    :host(:focus) {
+      outline-color: var(--gds-sys-color-content-neutral-01);
+      outline-offset: -3px;
+
+      &:not(:focus-visible) {
+        outline-color: transparent;
+      }
+    }
+
+    :host([selected]) div {
+      color: var(--gds-sys-color-content-neutral-01);
+    }
+
+    :host([disabled]) div {
+      color: var(--gds-sys-color-content-disabled-01);
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+`;
+var tab_styles_default = style;
+export {
+  tab_styles_default as default
+};

package/components/tabs/tab-panel/index.d.ts

@@ -0,0 +1 @@
+export * from './tab-panel';

package/components/tabs/tab-panel/index.js

@@ -0,0 +1 @@
+export * from "./tab-panel.js";

package/components/tabs/tab-panel/tab-panel.component.d.ts

@@ -0,0 +1,33 @@
+import { GdsElement } from '../../../gds-element';
+import type { GdsTab } from '../tab/tab.component';
+/**
+ * @element gds-tab-panel
+ * @status beta
+ *
+ * @summary A tab panel component for use inside `<gds-tabs>`.
+ *
+ * @slot - Panel content
+ */
+export declare class GdsTabPanel extends GdsElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /**
+     * A unique name used to associate this panel with a `<gds-tab panel="...">.`
+     * Must be unique within the parent `<gds-tabs>`.
+     */
+    name: string;
+    /**
+     * The resolved associated `<gds-tab>` element, if any. Managed by the parent `<gds-tabs>`.
+     */
+    get tabEl(): GdsTab | undefined;
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    _setTabEl(tabEl?: GdsTab): void;
+    /**
+     * @internal
+     */
+    _setSelected(selected: boolean): void;
+    render(): any;
+}

package/components/tabs/tab-panel/tab-panel.component.js

@@ -0,0 +1,73 @@
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "../../../chunks/chunk.CAV4X6PU.js";
+var _internals, _tabEl, _selected, _syncAria, syncAria_fn;
+import { property } from "lit/decorators.js";
+import { GdsElement } from "../../../gds-element.js";
+import { gdsCustomElement, html } from "../../../scoping.js";
+import TabPanelStyles from "./tab-panel.styles.js";
+let GdsTabPanel = class extends GdsElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _syncAria);
+    __privateAdd(this, _internals, this.attachInternals());
+    __privateAdd(this, _tabEl, void 0);
+    __privateAdd(this, _selected, false);
+    this.name = "";
+  }
+  /**
+   * The resolved associated `<gds-tab>` element, if any. Managed by the parent `<gds-tabs>`.
+   */
+  get tabEl() {
+    return __privateGet(this, _tabEl);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.tabIndex = -1;
+    __privateMethod(this, _syncAria, syncAria_fn).call(this);
+  }
+  /**
+   * @internal
+   */
+  _setTabEl(tabEl) {
+    __privateSet(this, _tabEl, tabEl);
+    __privateMethod(this, _syncAria, syncAria_fn).call(this);
+  }
+  /**
+   * @internal
+   */
+  _setSelected(selected) {
+    __privateSet(this, _selected, selected);
+    if (selected) {
+      this.removeAttribute("hidden");
+    } else {
+      this.setAttribute("hidden", "");
+    }
+    __privateMethod(this, _syncAria, syncAria_fn).call(this);
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+_internals = new WeakMap();
+_tabEl = new WeakMap();
+_selected = new WeakMap();
+_syncAria = new WeakSet();
+syncAria_fn = function() {
+  this.setAttribute("role", "tabpanel");
+  __privateGet(this, _internals).ariaLabelledByElements = __privateGet(this, _tabEl) ? [__privateGet(this, _tabEl)] : [];
+};
+GdsTabPanel.styles = [TabPanelStyles];
+__decorateClass([
+  property({ reflect: true })
+], GdsTabPanel.prototype, "name", 2);
+GdsTabPanel = __decorateClass([
+  gdsCustomElement("gds-tab-panel")
+], GdsTabPanel);
+export {
+  GdsTabPanel
+};

package/components/tabs/tab-panel/tab-panel.d.ts

@@ -0,0 +1,2 @@
+import { GdsTabPanel } from './tab-panel.component';
+export { GdsTabPanel };

package/components/tabs/tab-panel/tab-panel.js

@@ -0,0 +1,6 @@
+import "../../../chunks/chunk.CAV4X6PU.js";
+import { GdsTabPanel } from "./tab-panel.component.js";
+GdsTabPanel.define();
+export {
+  GdsTabPanel
+};

package/components/tabs/tab-panel/tab-panel.styles.d.ts

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

package/components/tabs/tab-panel/tab-panel.styles.js

@@ -0,0 +1,22 @@
+import "../../../chunks/chunk.CAV4X6PU.js";
+import { css } from "lit";
+const style = css`
+  @layer base {
+    :host {
+      display: block;
+      outline: none;
+    }
+
+    :host(:focus-visible) {
+      outline: 2px solid var(--gds-sys-color-content-neutral-01);
+    }
+
+    :host([hidden]) {
+      display: none;
+    }
+  }
+`;
+var tab_panel_styles_default = style;
+export {
+  tab_panel_styles_default as default
+};

package/components/tabs/tabs.component.d.ts

@@ -0,0 +1,41 @@
+import { GdsElement } from '../../gds-element';
+declare const GdsTabs_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").LayoutChildProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeXProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").MarginProps) & typeof GdsElement;
+/**
+ * @element gds-tabs
+ * @status beta
+ *
+ * @summary A tabbed navigation component for switching between panel content.
+ *
+ * @slot tab - One or more <gds-tab> trigger elements
+ * @slot - One or more <gds-tab-panel> content elements
+ *
+ * @event click - Composed click events from child <gds-tab> elements. Note that clicks on disabled tabs are ignored.
+ * @event gds-tab-change - Fires when selected tab changes. Detail: { index: number, tab: GdsTab }
+ */
+export declare class GdsTabs extends GdsTabs_base {
+    #private;
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    selected: number;
+    /**
+     * Accessible label for the tab list container
+     */
+    label: string;
+    private _elTrack;
+    private _elMarker;
+    private _elTabsContainer;
+    private _elTabSlot;
+    private _elPanelSlot;
+    private get tabs();
+    private get panels();
+    private _showPrevButton;
+    private _showNextButton;
+    private _hasResolvedInitialSelection;
+    private _isScrollListenerBound;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    _handleResize(): void;
+    private _handleSelectedChange;
+    render(): any;
+}
+export {};