@genexus/genexus-ide-ui 3.0.0 → 3.0.2

package/dist/collection/components/breadcrumb/breadcrumb-item/breadcrumb-item.css

@@ -0,0 +1,179 @@
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+:host {
+  display: grid;
+  block-size: 100%;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.gxi-hidden {
+  display: none !important;
+}
+
+.align-center {
+  display: flex;
+  align-items: center;
+}
+
+.align-end {
+  display: flex;
+  align-items: end;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+/*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
+:host(.gx-ide-component) {
+  height: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+/* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */
+.gx-ide-main-wrapper {
+  color: var(--gx-ide-component-text-color);
+  font-weight: var(--font-style-regular);
+  font-size: var(--font-size-body-m);
+  font-family: var(--font-family-body);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  box-sizing: border-box;
+}
+
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--spacing-gap-m);
+}
+
+/* - - - - - - - - - - - - - - - - - -
+Pill
+- - - - - - - - - - - - - - - - - - */
+.giu-static-pill-icon-and-text, .giu-static-pill {
+  background-color: var(--elevation-background-color, var(--color-accent-surface-elevation-1));
+  padding-inline: var(--spacing-padding-m);
+  color: var(--color-text-neutral-default);
+  font-size: var(--font-size-body-s);
+  line-height: var(--line-height-relaxed);
+  font-weight: var(--font-style-regular);
+  border-radius: 4px;
+  min-block-size: 25px;
+  display: inline-grid;
+  align-items: center;
+  pointer-events: none;
+  inline-size: max-content;
+}
+
+.giu-static-pill-icon-and-text {
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+  gap: var(--spacing-gap-m);
+}
+
+/* - - - - - - - - - - - - - - - - - -
+Tab
+- - - - - - - - - - - - - - - - - - */
+.tab-full-width-buttons::part(tab-list block-start),
+.tab-full-width-buttons::part(tab-list block-end) {
+  grid-auto-columns: 1fr;
+}
+
+.tab-full-width-buttons::part(tab block-start) {
+  justify-content: center;
+}
+
+/* - - - - - - - - - - - - - - - - - -
+Tree
+- - - - - - - - - - - - - - - - - - */
+/* Now the tree-view warning icon, looks gray on disabled items. This is a workaround to change the color to the enabled color, until this is resolved on Mercury. The solution might be to add a colorType for warning, error or success, that is static, meanning, it looks alwaws as "enabled", even if it is disabled. */
+.tree-view::part(item__header) {
+  --icon__system_warning_warning--disabled: var(
+    --icon__system_warning_warning--enabled
+  );
+}
+
+/* - - - - - - - - - - - - - - - - - -
+Tabular Grid
+- - - - - - - - - - - - - - - - - - */
+.tabular-grid {
+  --focus-outline-width: 1px;
+}
+
+:host {
+  display: inline-grid;
+}
+
+.item-content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-gap-xs);
+}
+
+.action {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-gap-xs);
+  padding-block: var(--spacing-padding-xxs);
+  padding-inline: var(--spacing-padding-xs);
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  text-decoration: none;
+  cursor: pointer;
+  font: inherit;
+  /* Color for button only; links use Mercury .link-primary */
+}
+.action:not(a) {
+  color: var(--color-text-interactive-default);
+}
+.action:hover:not(.disabled) {
+  background-color: var(--color-accent-surface-elevation-1-hover);
+}
+.action:not(a):hover:not(.disabled) {
+  color: var(--color-text-interactive-hover);
+}
+.action:focus-visible {
+  outline: 2px solid var(--color-border-focus-default);
+  outline-offset: -2px;
+}
+.action.disabled {
+  color: var(--color-text-neutral-disabled);
+  cursor: not-allowed;
+}
+.action.selected {
+  color: var(--color-text-primary-default);
+}
+
+.caption {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item__img {
+  flex-shrink: 0;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.item__img:not(.item__img-icon) {
+  inline-size: var(--icon-s);
+  block-size: var(--icon-s);
+}
+.item__img--mask {
+  background-color: currentColor;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}

package/dist/collection/components/breadcrumb/breadcrumb-item/breadcrumb-item.js

@@ -0,0 +1,302 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _GxIdeBreadcrumbItem_resolveImageSrc, _GxIdeBreadcrumbItem_getCaption, _GxIdeBreadcrumbItem_getAccessibleName, _GxIdeBreadcrumbItem_renderStartImage;
+import { Host, h } from "@stencil/core";
+export class GxIdeBreadcrumbItem {
+    constructor() {
+        _GxIdeBreadcrumbItem_resolveImageSrc.set(this, () => {
+            var _a, _b;
+            if (this.getImagePathCallback) {
+                const result = this.getImagePathCallback(this.model);
+                if (result === null || result === void 0 ? void 0 : result.base)
+                    return result.base;
+            }
+            return (_a = this.startImgSrc) !== null && _a !== void 0 ? _a : (_b = this.model) === null || _b === void 0 ? void 0 : _b.startImgSrc;
+        });
+        _GxIdeBreadcrumbItem_getCaption.set(this, () => { var _a, _b, _c; return (_c = (_a = this.caption) !== null && _a !== void 0 ? _a : (_b = this.model) === null || _b === void 0 ? void 0 : _b.caption) !== null && _c !== void 0 ? _c : ""; });
+        _GxIdeBreadcrumbItem_getAccessibleName.set(this, () => {
+            var _a, _b, _c, _d;
+            return (_d = (_c = (_a = this.accessibleName) !== null && _a !== void 0 ? _a : (_b = this.model) === null || _b === void 0 ? void 0 : _b.accessibleName) !== null && _c !== void 0 ? _c : __classPrivateFieldGet(this, _GxIdeBreadcrumbItem_getCaption, "f").call(this)) !== null && _d !== void 0 ? _d : "";
+        });
+        _GxIdeBreadcrumbItem_renderStartImage.set(this, () => {
+            var _a, _b;
+            const src = __classPrivateFieldGet(this, _GxIdeBreadcrumbItem_resolveImageSrc, "f").call(this);
+            if (!src)
+                return undefined;
+            const type = (_a = this.startImgType) !== null && _a !== void 0 ? _a : (_b = this.model) === null || _b === void 0 ? void 0 : _b.startImgType;
+            const isUrl = src.trim().toLowerCase().startsWith("url(");
+            if (isUrl && (type === "background" || type === "mask")) {
+                return (h("span", { class: {
+                        "item__img": true,
+                        "item__img--background": type === "background",
+                        "item__img--mask": type === "mask"
+                    }, style: type === "background"
+                        ? { backgroundImage: src }
+                        : { maskImage: src, WebkitMaskImage: src }, "aria-hidden": "true" }));
+            }
+            return (h("ch-image", { class: "item__img item__img-icon icon-m", src: src, "aria-hidden": "true" }));
+        });
+        this.model = undefined;
+        this.caption = undefined;
+        this.accessibleName = undefined;
+        this.disabled = undefined;
+        this.link = undefined;
+        this.selected = false;
+        this.selectedLinkIndicator = false;
+        this.startImgSrc = undefined;
+        this.startImgType = undefined;
+        this.getImagePathCallback = undefined;
+        this.itemId = undefined;
+    }
+    render() {
+        var _a, _b, _c, _d, _e;
+        const caption = __classPrivateFieldGet(this, _GxIdeBreadcrumbItem_getCaption, "f").call(this);
+        const ariaLabel = __classPrivateFieldGet(this, _GxIdeBreadcrumbItem_getAccessibleName, "f").call(this);
+        const isDisabled = (_c = (_a = this.disabled) !== null && _a !== void 0 ? _a : (_b = this.model) === null || _b === void 0 ? void 0 : _b.disabled) !== null && _c !== void 0 ? _c : false;
+        const hasLink = ((_d = this.link) === null || _d === void 0 ? void 0 : _d.url) !== undefined && ((_e = this.link) === null || _e === void 0 ? void 0 : _e.url) !== "";
+        const imgContent = __classPrivateFieldGet(this, _GxIdeBreadcrumbItem_renderStartImage, "f").call(this);
+        const captionClass = {
+            "caption": true,
+            "body-regular-s": !this.selected || !this.selectedLinkIndicator,
+            "body-semi-bold-s": this.selected && this.selectedLinkIndicator
+        };
+        const content = (h("span", { class: "item-content" }, imgContent, caption ? (h("span", { class: captionClass, part: "item-caption" }, caption)) : null));
+        const actionClass = {
+            "action": true,
+            "disabled": isDisabled,
+            "selected": this.selected && this.selectedLinkIndicator,
+            "not-selected": !this.selected
+        };
+        if (hasLink && !isDisabled) {
+            return (h(Host, { role: "listitem", "data-item-id": this.itemId, "data-has-link": "true", part: "item-action item-link" }, h("a", { class: Object.assign(Object.assign({}, actionClass), { "link-primary": true }), href: this.link.url, "aria-current": this.selected ? "page" : undefined, "aria-label": ariaLabel || undefined, part: "item-link" }, content)));
+        }
+        if (hasLink && isDisabled) {
+            return (h(Host, { role: "listitem", "data-item-id": this.itemId, "data-has-link": "true", part: "item-action disabled" }, h("span", { class: actionClass, "aria-disabled": "true", "aria-label": ariaLabel || undefined, part: "item-link disabled" }, content)));
+        }
+        return (h(Host, { role: "listitem", "data-item-id": this.itemId, "data-has-link": "false", part: "item-action item-button" }, h("button", { type: "button", class: actionClass, disabled: isDisabled, "aria-label": ariaLabel || undefined, part: "item-button" }, content)));
+    }
+    static get is() { return "gx-ide-breadcrumb-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["breadcrumb-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["breadcrumb-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "model": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BreadcrumbItemModel",
+                    "resolved": "BreadcrumbItemModel",
+                    "references": {
+                        "BreadcrumbItemModel": {
+                            "location": "import",
+                            "path": "../types",
+                            "id": "src/components/breadcrumb/types.ts::BreadcrumbItemModel"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Model of the item (used for image resolution and data)."
+                }
+            },
+            "caption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible text. Falls back to model.caption when not set."
+                },
+                "attribute": "caption",
+                "reflect": false
+            },
+            "accessibleName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "aria-label for the item. Falls back to accessibleName or caption when not set."
+                },
+                "attribute": "accessible-name",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the item is disabled."
+                },
+                "attribute": "disabled",
+                "reflect": false
+            },
+            "link": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ItemLink",
+                    "resolved": "ItemLink",
+                    "references": {
+                        "ItemLink": {
+                            "location": "import",
+                            "path": "../types",
+                            "id": "src/components/breadcrumb/types.ts::ItemLink"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When set, the item renders as an anchor; otherwise as a button."
+                }
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this item is the current page (selected)."
+                },
+                "attribute": "selected",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "selectedLinkIndicator": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show visual indicator when selected is true."
+                },
+                "attribute": "selected-link-indicator",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "startImgSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Image source (URL or CSS url())."
+                },
+                "attribute": "start-img-src",
+                "reflect": false
+            },
+            "startImgType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"background\" | \"mask\"",
+                    "resolved": "\"background\" | \"mask\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "How to render the start image: \"background\" or \"mask\"."
+                },
+                "attribute": "start-img-type",
+                "reflect": false
+            },
+            "getImagePathCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "GetImagePathCallback",
+                    "resolved": "(item: BreadcrumbItemModel) => GxImageMultiState",
+                    "references": {
+                        "GetImagePathCallback": {
+                            "location": "import",
+                            "path": "../types",
+                            "id": "src/components/breadcrumb/types.ts::GetImagePathCallback"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional callback to resolve image path for this item."
+                }
+            },
+            "itemId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Item id used by the container for click delegation (data-item-id)."
+                },
+                "attribute": "item-id",
+                "reflect": false
+            }
+        };
+    }
+}
+_GxIdeBreadcrumbItem_resolveImageSrc = new WeakMap(), _GxIdeBreadcrumbItem_getCaption = new WeakMap(), _GxIdeBreadcrumbItem_getAccessibleName = new WeakMap(), _GxIdeBreadcrumbItem_renderStartImage = new WeakMap();
+//# sourceMappingURL=breadcrumb-item.js.map

package/dist/collection/components/breadcrumb/breadcrumb-item/breadcrumb-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-item.js","sourceRoot":"","sources":["../../../../src/components/breadcrumb/breadcrumb-item/breadcrumb-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from \"@stencil/core\";\nimport type {\n  BreadcrumbItemModel,\n  ItemLink,\n  GetImagePathCallback\n} from \"../types\";\n\n@Component({\n  tag: \"gx-ide-breadcrumb-item\",\n  styleUrl: \"breadcrumb-item.scss\",\n  shadow: true\n})\nexport class GxIdeBreadcrumbItem {\n  /**\n   * Model of the item (used for image resolution and data).\n   */\n  @Prop() readonly model!: BreadcrumbItemModel;\n\n  /**\n   * Visible text. Falls back to model.caption when not set.\n   */\n  @Prop() readonly caption?: string;\n\n  /**\n   * aria-label for the item. Falls back to accessibleName or caption when not set.\n   */\n  @Prop() readonly accessibleName?: string;\n\n  /**\n   * Whether the item is disabled.\n   */\n  @Prop() readonly disabled?: boolean;\n\n  /**\n   * When set, the item renders as an anchor; otherwise as a button.\n   */\n  @Prop() readonly link?: ItemLink;\n\n  /**\n   * Whether this item is the current page (selected).\n   */\n  @Prop() readonly selected: boolean = false;\n\n  /**\n   * Whether to show visual indicator when selected is true.\n   */\n  @Prop() readonly selectedLinkIndicator: boolean = false;\n\n  /**\n   * Image source (URL or CSS url()).\n   */\n  @Prop() readonly startImgSrc?: string;\n\n  /**\n   * How to render the start image: \"background\" or \"mask\".\n   */\n  @Prop() readonly startImgType?: \"background\" | \"mask\";\n\n  /**\n   * Optional callback to resolve image path for this item.\n   */\n  @Prop() readonly getImagePathCallback?: GetImagePathCallback;\n\n  /**\n   * Item id used by the container for click delegation (data-item-id).\n   */\n  @Prop() readonly itemId!: string;\n\n  #resolveImageSrc = (): string | undefined => {\n    if (this.getImagePathCallback) {\n      const result = this.getImagePathCallback(this.model);\n      if (result?.base) return result.base;\n    }\n    return this.startImgSrc ?? this.model?.startImgSrc;\n  };\n\n  #getCaption = (): string => this.caption ?? this.model?.caption ?? \"\";\n\n  #getAccessibleName = (): string =>\n    this.accessibleName ??\n    this.model?.accessibleName ??\n    this.#getCaption() ??\n    \"\";\n\n  #renderStartImage = (): ReturnType<typeof h> | string | undefined => {\n    const src = this.#resolveImageSrc();\n    if (!src) return undefined;\n\n    const type = this.startImgType ?? this.model?.startImgType;\n    const isUrl = src.trim().toLowerCase().startsWith(\"url(\");\n\n    if (isUrl && (type === \"background\" || type === \"mask\")) {\n      return (\n        <span\n          class={{\n            \"item__img\": true,\n            \"item__img--background\": type === \"background\",\n            \"item__img--mask\": type === \"mask\"\n          }}\n          style={\n            type === \"background\"\n              ? { backgroundImage: src }\n              : { maskImage: src, WebkitMaskImage: src }\n          }\n          aria-hidden=\"true\"\n        />\n      );\n    }\n\n    return (\n      <ch-image\n        class=\"item__img item__img-icon icon-m\"\n        src={src}\n        aria-hidden=\"true\"\n      />\n    );\n  };\n\n  render() {\n    const caption = this.#getCaption();\n    const ariaLabel = this.#getAccessibleName();\n    const isDisabled = this.disabled ?? this.model?.disabled ?? false;\n    const hasLink = this.link?.url !== undefined && this.link?.url !== \"\";\n    const imgContent = this.#renderStartImage();\n\n    const captionClass = {\n      \"caption\": true,\n      \"body-regular-s\": !this.selected || !this.selectedLinkIndicator,\n      \"body-semi-bold-s\": this.selected && this.selectedLinkIndicator\n    };\n    const content = (\n      <span class=\"item-content\">\n        {imgContent}\n        {caption ? (\n          <span class={captionClass} part=\"item-caption\">\n            {caption}\n          </span>\n        ) : null}\n      </span>\n    );\n\n    const actionClass = {\n      \"action\": true,\n      \"disabled\": isDisabled,\n      \"selected\": this.selected && this.selectedLinkIndicator,\n      \"not-selected\": !this.selected\n    };\n\n    if (hasLink && !isDisabled) {\n      return (\n        <Host\n          role=\"listitem\"\n          data-item-id={this.itemId}\n          data-has-link=\"true\"\n          part=\"item-action item-link\"\n        >\n          <a\n            class={{ ...actionClass, \"link-primary\": true }}\n            href={this.link!.url}\n            aria-current={this.selected ? \"page\" : undefined}\n            aria-label={ariaLabel || undefined}\n            part=\"item-link\"\n          >\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    if (hasLink && isDisabled) {\n      return (\n        <Host\n          role=\"listitem\"\n          data-item-id={this.itemId}\n          data-has-link=\"true\"\n          part=\"item-action disabled\"\n        >\n          <span\n            class={actionClass}\n            aria-disabled=\"true\"\n            aria-label={ariaLabel || undefined}\n            part=\"item-link disabled\"\n          >\n            {content}\n          </span>\n        </Host>\n      );\n    }\n\n    return (\n      <Host\n        role=\"listitem\"\n        data-item-id={this.itemId}\n        data-has-link=\"false\"\n        part=\"item-action item-button\"\n      >\n        <button\n          type=\"button\"\n          class={actionClass}\n          disabled={isDisabled}\n          aria-label={ariaLabel || undefined}\n          part=\"item-button\"\n        >\n          {content}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/breadcrumb/breadcrumb.css

@@ -0,0 +1,141 @@
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+:host {
+  display: grid;
+  block-size: 100%;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.gxi-hidden {
+  display: none !important;
+}
+
+.align-center {
+  display: flex;
+  align-items: center;
+}
+
+.align-end {
+  display: flex;
+  align-items: end;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+/*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
+:host(.gx-ide-component) {
+  height: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+/* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */
+.gx-ide-main-wrapper {
+  color: var(--gx-ide-component-text-color);
+  font-weight: var(--font-style-regular);
+  font-size: var(--font-size-body-m);
+  font-family: var(--font-family-body);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  box-sizing: border-box;
+}
+
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--spacing-gap-m);
+}
+
+/* - - - - - - - - - - - - - - - - - -
+Pill
+- - - - - - - - - - - - - - - - - - */
+.giu-static-pill-icon-and-text, .giu-static-pill {
+  background-color: var(--elevation-background-color, var(--color-accent-surface-elevation-1));
+  padding-inline: var(--spacing-padding-m);
+  color: var(--color-text-neutral-default);
+  font-size: var(--font-size-body-s);
+  line-height: var(--line-height-relaxed);
+  font-weight: var(--font-style-regular);
+  border-radius: 4px;
+  min-block-size: 25px;
+  display: inline-grid;
+  align-items: center;
+  pointer-events: none;
+  inline-size: max-content;
+}
+
+.giu-static-pill-icon-and-text {
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+  gap: var(--spacing-gap-m);
+}
+
+/* - - - - - - - - - - - - - - - - - -
+Tab
+- - - - - - - - - - - - - - - - - - */
+.tab-full-width-buttons::part(tab-list block-start),
+.tab-full-width-buttons::part(tab-list block-end) {
+  grid-auto-columns: 1fr;
+}
+
+.tab-full-width-buttons::part(tab block-start) {
+  justify-content: center;
+}
+
+/* - - - - - - - - - - - - - - - - - -
+Tree
+- - - - - - - - - - - - - - - - - - */
+/* Now the tree-view warning icon, looks gray on disabled items. This is a workaround to change the color to the enabled color, until this is resolved on Mercury. The solution might be to add a colorType for warning, error or success, that is static, meanning, it looks alwaws as "enabled", even if it is disabled. */
+.tree-view::part(item__header) {
+  --icon__system_warning_warning--disabled: var(
+    --icon__system_warning_warning--enabled
+  );
+}
+
+/* - - - - - - - - - - - - - - - - - -
+Tabular Grid
+- - - - - - - - - - - - - - - - - - */
+.tabular-grid {
+  --focus-outline-width: 1px;
+}
+
+:host(.breadcrumb) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-gap-xs);
+  margin: 0;
+  padding-block: var(--spacing-padding-xs);
+  padding-inline: 0;
+  list-style: none;
+}
+
+.list {
+  display: contents;
+}
+
+.list-item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-gap-xs);
+  list-style: none;
+}
+
+.separator {
+  color: var(--color-text-neutral-subtle);
+  padding-inline: var(--spacing-padding-xs);
+  user-select: none;
+  pointer-events: none;
+  opacity: 0.85;
+}