@cupra/ui-kit 2.0.0-canary.230 → 2.0.0-canary.231

package/dist-react/esm/components/ds-static-box/styles/cupra-diagonal.styles.js

@@ -0,0 +1,181 @@
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+//#region src/components/ds-static-box/styles/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        display: flex;
+        flex-direction: column;
+        max-height: 100%;
+        border-radius: var(--ds-border-radius-m, 12px);
+        border: var(--ds-border-width-m, 1px) solid var(--ds-color-border-default, rgba(250, 250, 250, 0.1));
+        background: var(
+            --ds-card-bg-color-default,
+            linear-gradient(
+                179deg,
+                var(--ds-opacity-white-15, rgba(250, 250, 250, 0.15)) 0.73%,
+                var(--ds-opacity-grey-05, rgba(195, 195, 203, 0.05)) 84.63%,
+                var(--ds-opacity-grey-10, rgba(195, 195, 203, 0.1)) 99.44%
+            )
+        );
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container .body {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        min-height: var(--ui-kit-static-box-body-min-height, 0);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.small .body {
+        padding: var(--ds-spacing-m-3) 0 0;
+        gap: var(--ds-spacing-m-3);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.medium .body {
+        padding: var(--ds-spacing-m-4) 0 0;
+        gap: var(--ds-spacing-m-4);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.large .body {
+        padding: var(--ds-spacing-l-1) 0 0;
+        gap: var(--ds-spacing-l-1);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.small .header,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.small .main {
+        padding-left: var(--ds-spacing-m-2);
+        padding-right: var(--ds-spacing-m-2);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.medium .header,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.medium .main {
+        padding-left: var(--ds-spacing-m-3);
+        padding-right: var(--ds-spacing-m-3);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.large .header,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.large .main {
+        padding-left: var(--ds-spacing-m-4);
+        padding-right: var(--ds-spacing-m-4);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.small ::slotted([slot='main']) {
+        padding-bottom: var(--ds-spacing-m-3);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.medium ::slotted([slot='main']) {
+        padding-bottom: var(--ds-spacing-m-4);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.large ::slotted([slot='main']) {
+        padding-bottom: var(--ds-spacing-l-1);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container .main-wrapper {
+        position: relative;
+        flex: 1 1 auto;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container .main {
+        flex: 1 1 auto;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container .main-wrapper::before,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container .main-wrapper::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 2rem;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.2s ease;
+        z-index: 1;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container .main-wrapper::before {
+        top: 0;
+        background: linear-gradient(
+            to bottom,
+            var(--ds-opacity-black-70, rgba(9, 9, 11, 0.7)),
+            var(--ds-opacity-black-00, rgba(9, 9, 11, 0))
+        );
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container .main-wrapper::after {
+        bottom: 0;
+        background: linear-gradient(
+            to top,
+            var(--ds-opacity-black-70, rgba(9, 9, 11, 0.7)),
+            var(--ds-opacity-black-00, rgba(9, 9, 11, 0))
+        );
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container .main-wrapper.shadow-top::before {
+        opacity: 1;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container .main-wrapper.shadow-bottom::after {
+        opacity: 1;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container .footer {
+        border-top: var(--ds-border-width-m, 1px) solid
+            var(--ds-color-control-border-gradient-default, rgba(250, 250, 250, 0.3));
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.small .footer {
+        padding: var(--ds-spacing-m-2);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.medium .footer {
+        padding: var(--ds-spacing-m-3);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.large .footer {
+        padding: var(--ds-spacing-l-1);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container .footer ::slotted([slot='footer']) {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        align-self: stretch;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.small .footer ::slotted([slot='footer']) {
+        gap: var(--ds-spacing-m-1, 12px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.medium .footer ::slotted([slot='footer']) {
+        gap: var(--ds-spacing-m-2, 16px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.large .footer ::slotted([slot='footer']) {
+        gap: var(--ds-spacing-m-3, 20px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .ds-scroll::-webkit-scrollbar {
+        -webkit-appearance: none;
+        appearance: none;
+        display: initial;
+        height: var(--ui-kit-private-static-box-scrollbar-size);
+        width: var(--ui-kit-private-static-box-scrollbar-size);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .ds-scroll::-webkit-scrollbar-thumb {
+        border-radius: var(--ds-border-radius-full);
+        background-clip: padding-box;
+        background-color: var(--ds-opacity-white-70);
+        border: var(--ui-kit-private-static-box-scrollbar-border-width) solid transparent;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .ds-scroll {
+        --ui-kit-private-static-box-scrollbar-border-width: var(--ds-spacing-s-4);
+        --ui-kit-private-static-box-scrollbar-size: calc(2 * var(--ds-spacing-s-4) + 0.25rem);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .ds-scroll::-webkit-scrollbar-track,
+    :host([data-ui-kit-theme='cupra-diagonal']) .ds-scroll-global *::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+`;
+//#endregion
+export { t as cupraDiagonalStyles };

package/dist-react/esm/components/ds-static-box/styles/seat-legacy.styles.js

@@ -0,0 +1,161 @@
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+//#region src/components/ds-static-box/styles/seat-legacy.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat-legacy']) .container {
+        display: flex;
+        flex-direction: column;
+        max-height: 100%;
+        background: #f9f8f6;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container .body {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        min-height: 0;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.small .body {
+        padding: var(--ds-spacing-m-3) 0 0;
+        gap: var(--ds-spacing-m-3);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.medium .body {
+        padding: var(--ds-spacing-m-4) 0 0;
+        gap: var(--ds-spacing-m-4);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.large .body {
+        padding: var(--ds-spacing-l-1) 0 0;
+        gap: var(--ds-spacing-l-1);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.small .header,
+    :host([data-ui-kit-theme='seat-legacy']) .container.small .main {
+        padding-left: var(--ds-spacing-m-2);
+        padding-right: var(--ds-spacing-m-2);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.medium .header,
+    :host([data-ui-kit-theme='seat-legacy']) .container.medium .main {
+        padding-left: var(--ds-spacing-m-3);
+        padding-right: var(--ds-spacing-m-3);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.large .header,
+    :host([data-ui-kit-theme='seat-legacy']) .container.large .main {
+        padding-left: var(--ds-spacing-m-4);
+        padding-right: var(--ds-spacing-m-4);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.small ::slotted([slot='main']) {
+        padding-bottom: var(--ds-spacing-m-3);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.medium ::slotted([slot='main']) {
+        padding-bottom: var(--ds-spacing-m-4);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.large ::slotted([slot='main']) {
+        padding-bottom: var(--ds-spacing-l-1);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container .main-wrapper {
+        position: relative;
+        flex: 1 1 auto;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container .main {
+        flex: 1 1 auto;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container .main-wrapper::before,
+    :host([data-ui-kit-theme='seat-legacy']) .container .main-wrapper::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 2rem;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.2s ease;
+        z-index: 1;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container .main-wrapper::before {
+        top: 0;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container .main-wrapper::after {
+        bottom: 0;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container .main-wrapper.shadow-top::before {
+        opacity: 1;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container .main-wrapper.shadow-bottom::after {
+        opacity: 1;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container .footer {
+        border-top: var(--ds-border-width-m, 1px) solid
+            var(--ds-color-control-border-gradient-default, rgba(250, 250, 250, 0.3));
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.small .footer {
+        padding: var(--ds-spacing-m-2);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.medium .footer {
+        padding: var(--ds-spacing-m-3);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.large .footer {
+        padding: var(--ds-spacing-l-1);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container .footer ::slotted([slot='footer']) {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        align-self: stretch;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.small .footer ::slotted([slot='footer']) {
+        gap: var(--ds-spacing-m-1, 12px);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.medium .footer ::slotted([slot='footer']) {
+        gap: var(--ds-spacing-m-2, 16px);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.large .footer ::slotted([slot='footer']) {
+        gap: var(--ds-spacing-m-3, 20px);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) :root {
+        --scrollbar-border-width: var(--ds-spacing-s-4);
+        --scrollbar-size: calc(2 * var(--ds-spacing-s-4) + 0.25rem);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .ds-scroll::-webkit-scrollbar {
+        -webkit-appearance: none;
+        appearance: none;
+        display: initial;
+        height: var(--scrollbar-size);
+        width: var(--scrollbar-size);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .ds-scroll::-webkit-scrollbar-thumb {
+        border-radius: var(--ds-border-radius-full);
+        background-clip: padding-box;
+        background-color: var(--ds-opacity-white-70);
+        border: var(--scrollbar-border-width) solid transparent;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .ds-scroll::-webkit-scrollbar-track,
+    :host([data-ui-kit-theme='seat-legacy']) .ds-scroll-global *::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+`;
+//#endregion
+export { t as seatLegacyStyles };

package/dist-react/esm/components/ds-static-box/styles/seat.styles.js

@@ -0,0 +1,181 @@
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+//#region src/components/ds-static-box/styles/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) .container {
+        display: flex;
+        flex-direction: column;
+        max-height: 100%;
+        border-radius: var(--ds-border-radius-m, 12px);
+        border: var(--ds-border-width-m, 1px) solid var(--ds-color-border-default, rgba(250, 250, 250, 0.1));
+        background: var(
+            --ds-card-bg-color-default,
+            linear-gradient(
+                179deg,
+                var(--ds-opacity-white-15, rgba(250, 250, 250, 0.15)) 0.73%,
+                var(--ds-opacity-grey-05, rgba(195, 195, 203, 0.05)) 84.63%,
+                var(--ds-opacity-grey-10, rgba(195, 195, 203, 0.1)) 99.44%
+            )
+        );
+    }
+
+    :host([data-ui-kit-theme='seat']) .container .body {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        min-height: var(--ui-kit-static-box-body-min-height, 0);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.small .body {
+        padding: var(--ds-spacing-m-3) 0 0;
+        gap: var(--ds-spacing-m-3);
+    }
+    :host([data-ui-kit-theme='seat']) .container.medium .body {
+        padding: var(--ds-spacing-m-4) 0 0;
+        gap: var(--ds-spacing-m-4);
+    }
+    :host([data-ui-kit-theme='seat']) .container.large .body {
+        padding: var(--ds-spacing-l-1) 0 0;
+        gap: var(--ds-spacing-l-1);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.small .header,
+    :host([data-ui-kit-theme='seat']) .container.small .main {
+        padding-left: var(--ds-spacing-m-2);
+        padding-right: var(--ds-spacing-m-2);
+    }
+    :host([data-ui-kit-theme='seat']) .container.medium .header,
+    :host([data-ui-kit-theme='seat']) .container.medium .main {
+        padding-left: var(--ds-spacing-m-3);
+        padding-right: var(--ds-spacing-m-3);
+    }
+    :host([data-ui-kit-theme='seat']) .container.large .header,
+    :host([data-ui-kit-theme='seat']) .container.large .main {
+        padding-left: var(--ds-spacing-m-4);
+        padding-right: var(--ds-spacing-m-4);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.small ::slotted([slot='main']) {
+        padding-bottom: var(--ds-spacing-m-3);
+    }
+    :host([data-ui-kit-theme='seat']) .container.medium ::slotted([slot='main']) {
+        padding-bottom: var(--ds-spacing-m-4);
+    }
+    :host([data-ui-kit-theme='seat']) .container.large ::slotted([slot='main']) {
+        padding-bottom: var(--ds-spacing-l-1);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container .main-wrapper {
+        position: relative;
+        flex: 1 1 auto;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container .main {
+        flex: 1 1 auto;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container .main-wrapper::before,
+    :host([data-ui-kit-theme='seat']) .container .main-wrapper::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 2rem;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.2s ease;
+        z-index: 1;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container .main-wrapper::before {
+        top: 0;
+        background: linear-gradient(
+            to bottom,
+            var(--ds-opacity-black-70, rgba(9, 9, 11, 0.7)),
+            var(--ds-opacity-black-00, rgba(9, 9, 11, 0))
+        );
+    }
+
+    :host([data-ui-kit-theme='seat']) .container .main-wrapper::after {
+        bottom: 0;
+        background: linear-gradient(
+            to top,
+            var(--ds-opacity-black-70, rgba(9, 9, 11, 0.7)),
+            var(--ds-opacity-black-00, rgba(9, 9, 11, 0))
+        );
+    }
+
+    :host([data-ui-kit-theme='seat']) .container .main-wrapper.shadow-top::before {
+        opacity: 1;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container .main-wrapper.shadow-bottom::after {
+        opacity: 1;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container .footer {
+        border-top: var(--ds-border-width-m, 1px) solid
+            var(--ds-color-control-border-gradient-default, rgba(250, 250, 250, 0.3));
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.small .footer {
+        padding: var(--ds-spacing-m-2);
+    }
+    :host([data-ui-kit-theme='seat']) .container.medium .footer {
+        padding: var(--ds-spacing-m-3);
+    }
+    :host([data-ui-kit-theme='seat']) .container.large .footer {
+        padding: var(--ds-spacing-l-1);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container .footer ::slotted([slot='footer']) {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        align-self: stretch;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.small .footer ::slotted([slot='footer']) {
+        gap: var(--ds-spacing-m-1, 12px);
+    }
+    :host([data-ui-kit-theme='seat']) .container.medium .footer ::slotted([slot='footer']) {
+        gap: var(--ds-spacing-m-2, 16px);
+    }
+    :host([data-ui-kit-theme='seat']) .container.large .footer ::slotted([slot='footer']) {
+        gap: var(--ds-spacing-m-3, 20px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .ds-scroll::-webkit-scrollbar {
+        -webkit-appearance: none;
+        appearance: none;
+        display: initial;
+        height: var(--ui-kit-private-static-box-scrollbar-size);
+        width: var(--ui-kit-private-static-box-scrollbar-size);
+    }
+
+    :host([data-ui-kit-theme='seat']) .ds-scroll::-webkit-scrollbar-thumb {
+        border-radius: var(--ds-border-radius-full);
+        background-clip: padding-box;
+        background-color: var(--ds-opacity-white-70);
+        border: var(--ui-kit-private-static-box-scrollbar-border-width) solid transparent;
+    }
+
+    :host([data-ui-kit-theme='seat']) .ds-scroll {
+        --ui-kit-private-static-box-scrollbar-border-width: var(--ds-spacing-s-4);
+        --ui-kit-private-static-box-scrollbar-size: calc(2 * var(--ds-spacing-s-4) + 0.25rem);
+    }
+
+    :host([data-ui-kit-theme='seat']) .ds-scroll::-webkit-scrollbar-track,
+    :host([data-ui-kit-theme='seat']) .ds-scroll-global *::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+`;
+//#endregion
+export { t as seatStyles };

package/dist-react/esm/components/ds-stepper/ds-stepper.js

@@ -1,15 +1,15 @@
 import { html as e, nothing as t } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
+import { LitElement as n } from "../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
-import { property as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
+import { property as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
-import r from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
-import { UiKitElement as i } from "../base/UiKitElement.js";
+import i from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
 import { classMap as o } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.js";
 import { commonStyles as s } from "./styles/common.styles.js";
 //#region src/components/ds-stepper/ds-stepper.ts
-var c = class extends i {
+var c = class extends n {
 	constructor(...e) {
 		super(...e), this.steps = 0, this.currentStep = -1, this.sectionName = "";
 	}
@@ -61,18 +61,18 @@ var c = class extends i {
         ` : t;
 	}
 }, l = (c.styles = [s], c);
-r([n({
+i([r({
 	type: Number,
 	attribute: "steps",
 	reflect: !0
-})], l.prototype, "steps", void 0), r([n({
+})], l.prototype, "steps", void 0), i([r({
 	type: Number,
 	attribute: "current-step",
 	reflect: !0
-})], l.prototype, "currentStep", void 0), r([n({
+})], l.prototype, "currentStep", void 0), i([r({
 	type: String,
 	attribute: "section-name",
 	reflect: !0
-})], l.prototype, "sectionName", void 0), l = r([a("ds-stepper")], l);
+})], l.prototype, "sectionName", void 0), l = i([a("ds-stepper")], l);
 //#endregion
 export { l as DsStepper };

package/dist-react/esm/components/ds-table/ds-table.js

@@ -1,44 +1,50 @@
 import { html as e, nothing as t } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
+import { LitElement as n } from "../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
-import { property as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.js";
+import { property as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
-import i from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
-import { UiKitElement as a } from "../base/UiKitElement.js";
+import a from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { customUiKitElement as o } from "../../decorators/customUiKitElement.js";
 import { styleMap as s } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/style-map.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/style-map.js";
 import { commonStyles as c } from "./styles/common.styles.js";
 //#region src/components/ds-table/ds-table.ts
-var l = class extends a {
+var l = class extends n {
 	constructor(...e) {
-		super(...e), this.emptyMessage = "", this.hasHeaderContent = !1, this.hasBodyContent = !1;
+		super(...e), this.emptyMessage = "", this.hasHeaderContent = !1, this.hasBodyContent = !1, this.columnCount = 0;
+	}
+	updateColumnCount() {
+		let [e] = Array.from(this.renderRoot.querySelectorAll("slot")).flatMap((e) => e.assignedElements({ flatten: !0 }));
+		this.columnCount = (e == null ? void 0 : e.children.length) ?? 0;
 	}
 	handleHeaderSlotChange(e) {
 		let t = e.target.assignedElements({ flatten: !0 });
-		this.hasHeaderContent = t.length > 0;
+		this.hasHeaderContent = t.length > 0, this.updateColumnCount();
 	}
 	handleBodySlotChange(e) {
 		let t = e.target.assignedElements({ flatten: !0 });
-		this.hasBodyContent = t.length > 0;
+		this.hasBodyContent = t.length > 0, this.updateColumnCount();
+	}
+	get headerSlot() {
+		return e`<slot name="header" @slotchange=${this.handleHeaderSlotChange}></slot>`;
 	}
-	get columnCount() {
-		let e = this.querySelector("[data-column-count]");
-		return e ? Number(e.getAttribute("data-column-count")) : 0;
+	get bodySlot() {
+		return e`<slot name="body" @slotchange=${this.handleBodySlotChange}></slot>`;
 	}
 	get showEmptyState() {
 		return !this.hasBodyContent && this.emptyMessage;
 	}
 	render() {
-		if (this.columnCount === 0) return t;
+		if (this.columnCount === 0) return e`<div hidden>${this.headerSlot}${this.bodySlot}</div>`;
 		let n = { "--ui-kit-private-table-grid-template-columns-default": `repeat(${this.columnCount}, 1fr)` };
 		return e`
             <div class="table-wrapper" role="table" style=${s(n)}>
                 <div class="header" role="rowgroup">
-                    <slot name="header" @slotchange=${this.handleHeaderSlotChange}></slot>
+                    ${this.headerSlot}
                 </div>
                 <div class="body" role="rowgroup">
-                    <slot name="body" @slotchange=${this.handleBodySlotChange}></slot>
+                    ${this.bodySlot}
                 </div>
                 ${this.showEmptyState ? e`<div class="empty-state" role="row">
                           <span role="cell">${this.emptyMessage}</span>
@@ -47,10 +53,10 @@ var l = class extends a {
         `;
 	}
 }, u = (l.styles = [c], l);
-i([n({
+a([r({
 	type: String,
 	reflect: !0,
 	attribute: "empty-message"
-})], u.prototype, "emptyMessage", void 0), i([r()], u.prototype, "hasHeaderContent", void 0), i([r()], u.prototype, "hasBodyContent", void 0), u = i([o("ds-table")], u);
+})], u.prototype, "emptyMessage", void 0), a([i()], u.prototype, "hasHeaderContent", void 0), a([i()], u.prototype, "hasBodyContent", void 0), a([i()], u.prototype, "columnCount", void 0), u = a([o("ds-table")], u);
 //#endregion
 export { u as DsTable };

package/dist-react/esm/components/ds-table-cell/ds-table-cell.js

@@ -1,13 +1,13 @@
 import { html as e } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
+import { LitElement as t } from "../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
-import { property as t } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
+import { property as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
-import n from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
-import { UiKitElement as r } from "../base/UiKitElement.js";
+import r from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { customUiKitElement as i } from "../../decorators/customUiKitElement.js";
 import { commonStyles as a } from "./styles/common.styles.js";
 //#region src/components/ds-table-cell/ds-table-cell.ts
-var o = class extends r {
+var o = class extends t {
 	constructor(...e) {
 		super(...e), this.variant = "default";
 	}
@@ -19,9 +19,9 @@ var o = class extends r {
         `;
 	}
 }, s = (o.styles = [a], o);
-n([t({
+r([n({
 	type: String,
 	reflect: !0
-})], s.prototype, "variant", void 0), s = n([i("ds-table-cell")], s);
+})], s.prototype, "variant", void 0), s = r([i("ds-table-cell")], s);
 //#endregion
 export { s as DsTableCell };