@cupra/ui-kit 2.0.0-canary.131 → 2.0.0-canary.133

package/dist-react/types/components/ds-search-input/ds-search-input.d.ts

@@ -1,4 +1,7 @@
 import { UiKitElement } from '../base/UiKitElement.ts';
+import '../ds-icon-button/ds-icon-button.ts';
+import '../ds-icon/ds-icon.ts';
+import '../ds-loader-spinner/ds-loader-spinner.ts';
 import { nothing } from 'lit';
 import type { DsSearchInputAttrs } from './ds-search-input.types.ts';
 declare const DsSearchInput_base: (new (...args: any[]) => import("../../mixins/inputStatesMixin.ts").InputStatesInterface) & typeof UiKitElement;
@@ -16,10 +19,10 @@ export declare class DsSearchInput extends DsSearchInput_base {
     protected handleRemove: () => void;
     private get classes();
     render(): import("lit").TemplateResult<1>;
-    protected get searchIconTemplate(): any;
-    protected get removeTemplate(): any;
-    protected get positionTemplate(): any;
-    protected get loaderSpinnerTemplate(): any;
+    protected get searchIconTemplate(): import("lit").HTMLTemplateResult;
+    protected get removeTemplate(): typeof nothing | import("lit").HTMLTemplateResult;
+    protected get positionTemplate(): typeof nothing | import("lit").HTMLTemplateResult;
+    protected get loaderSpinnerTemplate(): import("lit").HTMLTemplateResult;
     protected get footerTemplate(): import("lit").TemplateResult<1> | typeof nothing;
     protected get helperTextTemplate(): import("lit").TemplateResult<1> | typeof nothing;
     handleClickPositionButton: () => void;

package/dist-react/types/components/ds-secondary-navigation/ds-secondary-navigation.d.ts

@@ -1,4 +1,6 @@
 import { UiKitElement } from '../base/UiKitElement.ts';
+import '../ds-icon-button/ds-icon-button.ts';
+import '../ds-icon/ds-icon.ts';
 import { type PropertyValues } from 'lit';
 import type { ActionsMode, DsSecondaryNavigationAttrs, ItemsMode } from './ds-secondary-navigation.types';
 declare const DsSecondaryNavigation_base: (new (...args: any[]) => import("../../mixins/ViewportMixin.ts").ViewportInterface) & typeof UiKitElement;
@@ -40,8 +42,8 @@ export declare class DsSecondaryNavigation extends DsSecondaryNavigation_base {
     render(): import("lit").TemplateResult<1>;
     private get itemsTemplate();
     private get actionsTemplate();
-    protected get iconTemplate(): any;
-    protected get listIconTemplate(): any;
+    protected get iconTemplate(): import("lit").HTMLTemplateResult;
+    protected get listIconTemplate(): import("lit").HTMLTemplateResult;
     private get itemsDropdownButtonTemplate();
     private get itemsDropdownTemplate();
     private get actionsDropdownButtonTemplate();

package/dist-react/types/components/ds-select/ds-select.d.ts

@@ -1,5 +1,7 @@
 import { UiKitElement } from '../base/UiKitElement.ts';
 import type { DsSelectAttrs } from '../ds-select/ds-select.types.ts';
+import '../ds-icon/ds-icon.ts';
+import { nothing } from 'lit';
 export declare class DsSelect extends UiKitElement {
     static styles: import("lit").CSSResult[];
     private static readonly ARIA_OPTION_PREFIX;
@@ -55,8 +57,8 @@ export declare class DsSelect extends UiKitElement {
     set open(value: boolean);
     get open(): boolean;
     render(): import("lit").TemplateResult<1>;
-    protected get iconTemplate(): any;
-    protected get leftIconTemplate(): any;
+    protected get iconTemplate(): import("lit").HTMLTemplateResult;
+    protected get leftIconTemplate(): typeof nothing | import("lit").HTMLTemplateResult;
     private get displaySelectTemplate();
     private get activeDescendantId();
     private get optionsContainerTemplate();

package/dist-react/types/components/ds-selection/ds-selection.d.ts

@@ -1,9 +1,10 @@
 import { UiKitElement } from '../base/UiKitElement.ts';
+import '../ds-icon/ds-icon.ts';
 import type { DsSelectionAttrs } from './ds-selection.types.ts';
 export declare class DsSelection extends UiKitElement {
     static styles: import("lit").CSSResult[];
     checked: DsSelectionAttrs['checked'];
-    protected get iconTemplate(): any;
+    protected get iconTemplate(): import("lit").HTMLTemplateResult;
     private get classes();
     handleClick(): void;
     render(): import("lit").TemplateResult<1>;

package/dist-react/types/components/ds-sidebar-navigation/ds-sidebar-navigation.d.ts

@@ -1,4 +1,5 @@
 import { UiKitElement } from '../base/UiKitElement.ts';
+import '../ds-icon-button/ds-icon-button.ts';
 import { type PropertyValues } from 'lit';
 import type { DsSidebarNavigationAttrs } from './ds-sidebar-navigation.types';
 export declare class DsSidebarNavigation extends UiKitElement implements DsSidebarNavigationAttrs {

package/dist-react/types/components/ds-tabs/ds-tabs.d.ts

@@ -1,4 +1,5 @@
 import { UiKitElement } from '../base/UiKitElement.ts';
+import '../ds-icon-button/ds-icon-button.ts';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import type { DsTabsAttrs } from './ds-tabs.types';
 export declare class DsTabs extends UiKitElement {

package/dist-react/types/components/ds-tag/ds-tag.d.ts

@@ -1,4 +1,5 @@
 import { UiKitElement } from '../base/UiKitElement.ts';
+import '../ds-icon/ds-icon.ts';
 import type { DsTagAttrs, DsTagColor, DsTagVariant } from '../ds-tag/ds-tag.types';
 import { nothing } from 'lit';
 export declare class DsTag extends UiKitElement {
@@ -19,6 +20,6 @@ export declare class DsTag extends UiKitElement {
         clicable: boolean;
     };
     private handleClickIcon;
-    protected get iconTemplate(): any;
+    protected get iconTemplate(): typeof nothing | import("lit").HTMLTemplateResult;
     render(): import("lit").TemplateResult<1> | typeof nothing;
 }

package/dist-react/types/components/ds-text-input/ds-text-input.d.ts

@@ -1,4 +1,5 @@
 import { UiKitElement } from '../base/UiKitElement.ts';
+import '../ds-icon-button/ds-icon-button.ts';
 import { nothing } from 'lit';
 import type { DsTextInputAttrs } from './ds-text-input.types.ts';
 declare const DsTextInput_base: (new (...args: any[]) => import("../../mixins/inputStatesMixin.ts").InputStatesInterface) & typeof UiKitElement;
@@ -14,7 +15,7 @@ export declare class DsTextInput extends DsTextInput_base {
     protected handleClickIcon: () => void;
     private get classes();
     render(): import("lit").TemplateResult<1>;
-    protected get iconTemplate(): any;
+    protected get iconTemplate(): typeof nothing | import("lit").HTMLTemplateResult;
     protected get lengthTemplate(): import("lit").TemplateResult<1> | typeof nothing;
     protected get helperTextTemplate(): import("lit").TemplateResult<1> | typeof nothing;
     protected get forcedErrorTemplate(): import("lit").TemplateResult<1> | typeof nothing;

package/dist-react/types/components/ds-toast/ds-toast.d.ts

@@ -1,4 +1,5 @@
 import { UiKitElement } from '../base/UiKitElement.ts';
+import '../ds-toast-message/ds-toast-message.ts';
 import type { DsToastAttrs } from './ds-toast.types.ts';
 export declare class DsToast extends UiKitElement {
     static styles: import("lit").CSSResult[];

package/dist-react/types/components/ds-toast-message/ds-toast-message.d.ts

@@ -1,4 +1,6 @@
 import { UiKitElement } from '../base/UiKitElement.ts';
+import '../ds-icon-button/ds-icon-button.ts';
+import '../ds-icon/ds-icon.ts';
 import { nothing } from 'lit';
 import type { DsToastMessageAttrs } from './ds-toast-message.types.ts';
 export declare class DsToastMessage extends UiKitElement {
@@ -14,7 +16,7 @@ export declare class DsToastMessage extends UiKitElement {
         [x: string]: boolean;
         container: boolean;
     };
-    protected get iconTemplate(): any;
-    protected get closeButtonTemplate(): any;
+    protected get iconTemplate(): import("lit").HTMLTemplateResult;
+    protected get closeButtonTemplate(): import("lit").HTMLTemplateResult;
     render(): import("lit").TemplateResult<1> | typeof nothing;
 }

package/dist-react/types/utils/uiKitHtml.d.ts

@@ -0,0 +1,2 @@
+import { type HTMLTemplateResult } from 'lit';
+export declare function uiKitHtml(strings: TemplateStringsArray, ...values: unknown[]): HTMLTemplateResult;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cupra/ui-kit",
-  "version": "2.0.0-canary.131",
+  "version": "2.0.0-canary.133",
   "description": "Web components library",
   "author": "SEAT S.A.",
   "license": "SEAT S.A. Library EULA 1.0",

package/dist/cjs/utils/componentFactory.cjs

@@ -1,239 +0,0 @@
-const e=require(`../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs`);require(`../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);const t=require(`../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.cjs`);require(`../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.cjs`);const n=require(`../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/static.cjs`);require(`../node_modules/.pnpm/lit@3.3.1/node_modules/lit/static-html.cjs`);const r=require(`./version.cjs`);var i=n.s(`ds-icon${r.VERSION_TAG_SUFFIX}`),a=n.s(`ds-calendar-day${r.VERSION_TAG_SUFFIX}`),o=n.s(`ds-button${r.VERSION_TAG_SUFFIX}`),s=n.s(`ds-divider${r.VERSION_TAG_SUFFIX}`),c=n.s(`ds-icon-button${r.VERSION_TAG_SUFFIX}`),l=n.s(`ds-loader-spinner${r.VERSION_TAG_SUFFIX}`),u=n.s(`ds-skeleton${r.VERSION_TAG_SUFFIX}`),d=n.s(`ds-toast-message${r.VERSION_TAG_SUFFIX}`),f=n.s(`ds-inline-alert${r.VERSION_TAG_SUFFIX}`),p=n.s(`ds-tooltip${r.VERSION_TAG_SUFFIX}`),m={createIcon:n=>(g(`ds-icon`,()=>Promise.resolve().then(()=>require(`../components/ds-icon/ds-icon.cjs`))),e.x`
-            <ds-icon
-                class=${t.o(n?.class)}
-                data-testid=${t.o(n?.[`data-testid`])}
-                @click=${n?.[`@click`]}
-                @keydown=${n?.[`@keydown`]}
-                icon-name=${n?.[`icon-name`]}
-                color=${t.o(n?.color)}
-                background-color=${t.o(n?.[`background-color`])}
-                size=${t.o(n?.size)}
-                aria-label=${t.o(n?.[`aria-label`])}
-                aria-hidden=${t.o(n?.[`aria-hidden`])}
-                role=${t.o(n?.role)}
-                tabindex=${t.o(n?.tabindex)}
-            >
-                ${n.children}
-            </ds-icon>
-        `),createCalendarDay:(n={})=>(g(`ds-calendar-day`,()=>Promise.resolve().then(()=>require(`../components/ds-calendar-day/ds-calendar-day.cjs`))),e.x`
-            <ds-calendar-day
-                class=${t.o(n?.class)}
-                day=${t.o(n?.day)}
-                size=${t.o(n?.size)}
-                ?disabled=${n?.disabled}
-                ?selected=${n?.selected}
-                ?today=${n?.today}
-                ?outside-month=${n?.[`outside-month`]}
-                data-testid=${t.o(n?.[`data-testid`])}
-            ></ds-calendar-day>
-        `),createButton:(n={})=>(g(`ds-button`,()=>Promise.resolve().then(()=>require(`../components/ds-button/ds-button.cjs`))),e.x`
-            <ds-button
-                class=${n?.class}
-                @click=${n?.[`@click`]}
-                .size=${t.o(n?.size)}
-                type=${n?.type}
-                icon-position=${n?.[`icon-position`]}
-                .rounded=${n?.rounded}
-                .full-width=${n?.[`full-width`]}
-                variant=${n?.variant??`primary`}
-                mode=${n?.mode??`light`}
-                .disabled=${n?.disabled}
-                icon-name=${n?.[`icon-name`]}
-                html-tag-name=${n?.[`html-tag-name`]}
-                href=${n?.href}
-                rel=${n?.rel}
-                target=${n?.target}
-                data-testid=${n?.[`data-testid`]}
-            >
-                ${n.children}
-            </ds-button>
-        `),createDivider:(t={})=>(g(`ds-divider`,()=>Promise.resolve().then(()=>require(`../components/ds-divider/ds-divider.cjs`))),e.x`
-            <ds-divider
-                class=${t?.class}
-                variant=${t?.variant??`primary`}
-                orientation=${t?.orientation??`horizontal`}
-                data-testid=${t?.[`data-testid`]}
-            >
-            </ds-divider>
-        `),createIconButton:(n={})=>(g(`ds-icon-button`,()=>Promise.resolve().then(()=>require(`../components/ds-icon-button/ds-icon-button.cjs`))),e.x`
-            <ds-icon-button
-                class=${n?.class}
-                @click=${n?.[`@click`]}
-                size=${t.o(n?.size)}
-                variant=${n?.variant??`primary`}
-                mode=${n?.mode??`light`}
-                .disabled=${n?.disabled}
-                icon-name=${n?.[`icon-name`]}
-                html-tag-name=${n?.[`html-tag-name`]}
-                href=${n?.href}
-                rel=${n?.rel}
-                target=${n?.target}
-                data-testid=${n?.[`data-testid`]}
-                data-aria-label=${n?.[`data-aria-label`]}
-                custom-background=${t.o(n?.[`custom-background`])}
-                custom-color=${t.o(n?.[`custom-color`])}
-            >
-                ${n.children}
-            </ds-icon-button>
-        `),createLoaderSpinner:(t={})=>(g(`ds-loader-spinner`,()=>Promise.resolve().then(()=>require(`../components/ds-loader-spinner/ds-loader-spinner.cjs`))),e.x`
-            <ds-loader-spinner
-                ?show=${t?.show}
-                orientation=${t?.orientation??`row`}
-                mode=${t?.mode??`light`}
-            ></ds-loader-spinner>
-        `),createSkeleton:(n={})=>(g(`ds-skeleton`,()=>Promise.resolve().then(()=>require(`../components/ds-skeleton/ds-skeleton.cjs`))),e.x`
-            <ds-skeleton
-                class=${t.o(n?.class)}
-                data-testid=${t.o(n?.[`data-testid`])}
-                variant=${t.o(n?.variant)}
-                width=${t.o(n?.width)}
-                height=${t.o(n?.height)}
-                animation=${t.o(n?.animation)}
-            ></ds-skeleton>
-        `),createToastMessage:t=>(g(`ds-toast-message`,()=>Promise.resolve().then(()=>require(`../components/ds-toast-message/ds-toast-message.cjs`))),e.x`
-            <ds-toast-message
-                data-id="${t[`data-id`]}"
-                data-template="${t[`data-template`]}"
-                title="${t.title}"
-                text="${t.text}"
-                status="${t.status}"
-            ></ds-toast-message>
-        `),createInlineAlert:t=>(g(`ds-inline-alert`,()=>Promise.resolve().then(()=>require(`../components/ds-inline-alert/ds-inline-alert.cjs`))),e.x`
-            <ds-inline-alert
-                title="${t.title}"
-                text="${t.text}"
-                status="${t.status}"
-                ?show=${t.show??!0}
-            ></ds-inline-alert>
-        `),createTooltip:(n={})=>(g(`ds-tooltip`,()=>Promise.resolve().then(()=>require(`../components/ds-tooltip/ds-tooltip.cjs`))),e.x`
-            <ds-tooltip
-                class=${t.o(n?.class)}
-                mode=${t.o(n.mode)}
-                ?show=${n.show??!1}
-                ?disable-hover-listener=${n?.[`disable-hover-listener`]}
-                ?disable-focus-listener=${n?.[`disable-focus-listener`]}
-                ?disable-press-listener=${n?.[`disable-press-listener`]}
-            >
-                ${n.children}
-                <div slot="content">${n.content}</div>
-            </ds-tooltip>
-        `)},h={createIcon:e=>(g(`ds-icon${r.VERSION_TAG_SUFFIX}`,()=>Promise.resolve().then(()=>require(`../components/ds-icon/ds-icon.cjs`))),n.u`
-            <${i}
-                class=${t.o(e?.class)}
-                data-testid=${t.o(e?.[`data-testid`])}
-                @click=${e?.[`@click`]}
-                @keydown=${e?.[`@keydown`]}
-                icon-name=${e?.[`icon-name`]}
-                color=${t.o(e?.color)}
-                background-color=${t.o(e?.[`background-color`])}
-                size=${t.o(e?.size)}
-                aria-label=${t.o(e?.[`aria-label`])}
-                aria-hidden=${t.o(e?.[`aria-hidden`])}
-                role=${t.o(e?.role)}
-                tabindex=${t.o(e?.tabindex)}
-            >
-                ${e.children}
-            </${i}>
-        `),createCalendarDay:(e={})=>(g(`ds-calendar-day${r.VERSION_TAG_SUFFIX}`,()=>Promise.resolve().then(()=>require(`../components/ds-calendar-day/ds-calendar-day.cjs`))),n.u`
-            <${a}
-                class=${t.o(e?.class)}
-                day=${t.o(e?.day)}
-                size=${t.o(e?.size)}
-                ?disabled=${e?.disabled}
-                ?selected=${e?.selected}
-                ?today=${e?.today}
-                ?outside-month=${e?.[`outside-month`]}
-                data-testid=${t.o(e?.[`data-testid`])}
-            ></${a}>
-        `),createButton:(e={})=>(g(`ds-button${r.VERSION_TAG_SUFFIX}`,()=>Promise.resolve().then(()=>require(`../components/ds-button/ds-button.cjs`))),n.u`
-            <${o}
-                class=${e?.class}
-                @click=${e?.[`@click`]}
-                .size=${t.o(e?.size)}
-                type=${e?.type}
-                icon-position=${e?.[`icon-position`]}
-                .rounded=${e?.rounded}
-                .full-width=${e?.[`full-width`]}
-                variant=${e?.variant??`primary`}
-                mode=${e?.mode??`light`}
-                .disabled=${e?.disabled}
-                icon-name=${e?.[`icon-name`]}
-                html-tag-name=${e?.[`html-tag-name`]}
-                href=${e?.href}
-                rel=${e?.rel}
-                target=${e?.target}
-                data-testid=${e?.[`data-testid`]}
-            >
-                ${e.children}
-            </${o}>
-        `),createDivider:(e={})=>(g(`ds-divider${r.VERSION_TAG_SUFFIX}`,()=>Promise.resolve().then(()=>require(`../components/ds-divider/ds-divider.cjs`))),n.u`
-            <${s}
-                class=${e?.class}
-                variant=${e?.variant??`primary`}
-                orientation=${e?.orientation??`horizontal`}
-                data-testid=${e?.[`data-testid`]}
-            >
-            </${s}>
-        `),createIconButton:(e={})=>(g(`ds-icon-button${r.VERSION_TAG_SUFFIX}`,()=>Promise.resolve().then(()=>require(`../components/ds-icon-button/ds-icon-button.cjs`))),n.u`
-            <${c}
-                class=${e?.class}
-                @click=${e?.[`@click`]}
-                size=${t.o(e?.size)}
-                variant=${e?.variant??`primary`}
-                mode=${e?.mode??`light`}
-                .disabled=${e?.disabled}
-                icon-name=${e?.[`icon-name`]}
-                html-tag-name=${e?.[`html-tag-name`]}
-                href=${e?.href}
-                rel=${e?.rel}
-                target=${e?.target}
-                data-testid=${e?.[`data-testid`]}
-                data-aria-label=${e?.[`data-aria-label`]}
-                custom-background=${t.o(e?.[`custom-background`])}
-                custom-color=${t.o(e?.[`custom-color`])}
-            >
-                ${e.children}
-            </${c}>
-        `),createLoaderSpinner:(e={})=>(g(`ds-loader-spinner${r.VERSION_TAG_SUFFIX}`,()=>Promise.resolve().then(()=>require(`../components/ds-loader-spinner/ds-loader-spinner.cjs`))),n.u`
-            <${l}
-                ?show=${e?.show}
-                orientation=${e?.orientation??`row`}
-                mode=${e?.mode??`light`}
-            ></${l}>
-        `),createSkeleton:(e={})=>(g(`ds-skeleton${r.VERSION_TAG_SUFFIX}`,()=>Promise.resolve().then(()=>require(`../components/ds-skeleton/ds-skeleton.cjs`))),n.u`
-            <${u}
-                class=${t.o(e?.class)}
-                data-testid=${t.o(e?.[`data-testid`])}
-                variant=${t.o(e?.variant)}
-                width=${t.o(e?.width)}
-                height=${t.o(e?.height)}
-                animation=${t.o(e?.animation)}
-            ></${u}>
-        `),createToastMessage:e=>(g(`ds-toast-message${r.VERSION_TAG_SUFFIX}`,()=>Promise.resolve().then(()=>require(`../components/ds-toast-message/ds-toast-message.cjs`))),n.u`
-            <${d}
-                data-id="${e[`data-id`]}"
-                data-template="${e[`data-template`]}"
-                title="${e.title}"
-                text="${e.text}"
-                status="${e.status}"
-            ></${d}>
-        `),createInlineAlert:e=>(g(`ds-inline-alert${r.VERSION_TAG_SUFFIX}`,()=>Promise.resolve().then(()=>require(`../components/ds-inline-alert/ds-inline-alert.cjs`))),n.u`
-            <${f}
-                title="${e.title}"
-                text="${e.text}"
-                status="${e.status}"
-                ?show=${e.show??!0}
-            ></${f}>
-        `),createTooltip:(e={})=>(g(`ds-tooltip${r.VERSION_TAG_SUFFIX}`,()=>Promise.resolve().then(()=>require(`../components/ds-tooltip/ds-tooltip.cjs`))),n.u`
-            <${p}
-                class=${t.o(e?.class)}
-                mode=${t.o(e.mode)}
-                ?show=${e.show??!1}
-                ?disable-hover-listener=${e?.[`disable-hover-listener`]}
-                ?disable-focus-listener=${e?.[`disable-focus-listener`]}
-                ?disable-press-listener=${e?.[`disable-press-listener`]}
-            >
-                ${e.children}
-                <div slot="content">${e.content}</div>
-            </${p}>
-        `)};function g(e,t){try{typeof window<`u`&&typeof customElements<`u`&&!customElements.get(e)&&t().catch(e=>{})}catch{}}exports.reactFactory=h,exports.standardFactory=m;