@cupra/ui-kit 2.0.0-canary.137 → 2.0.0-canary.139

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/cjs/components/ds-secondary-navigation/ds-secondary-navigation.cjs +22 -23
  2. package/dist/cjs/components/ds-theme-provider/ds-theme-provider.cjs +1 -1
  3. package/dist/cjs/decorators/customUiKitElement.cjs +1 -1
  4. package/dist/cjs/utils/IconsManager.cjs +1 -1
  5. package/dist/cjs/utils/PubSub.cjs +1 -1
  6. package/dist/cjs/utils/StylesRegistry/StylesRegistry.cjs +1 -1
  7. package/dist/cjs/utils/version.cjs +1 -1
  8. package/dist/esm/components/ds-secondary-navigation/ds-secondary-navigation.js +75 -42
  9. package/dist/esm/components/ds-theme-provider/ds-theme-provider.js +1 -1
  10. package/dist/esm/decorators/customUiKitElement.js +1 -1
  11. package/dist/esm/utils/IconsManager.js +1 -1
  12. package/dist/esm/utils/PubSub.js +1 -1
  13. package/dist/esm/utils/StylesRegistry/StylesRegistry.js +1 -1
  14. package/dist/esm/utils/version.js +1 -1
  15. package/dist/types/components/ds-secondary-navigation/ds-secondary-navigation.d.ts +9 -6
  16. package/dist/types/components/ds-secondary-navigation/ds-secondary-navigation.types.d.ts +5 -3
  17. package/dist-react/cjs/components/ds-secondary-navigation/ds-secondary-navigation.cjs +22 -23
  18. package/dist-react/cjs/components/ds-theme-provider/ds-theme-provider.cjs +1 -1
  19. package/dist-react/cjs/decorators/customUiKitElement.cjs +1 -1
  20. package/dist-react/cjs/utils/IconsManager.cjs +1 -1
  21. package/dist-react/cjs/utils/PubSub.cjs +1 -1
  22. package/dist-react/cjs/utils/StylesRegistry/StylesRegistry.cjs +1 -1
  23. package/dist-react/cjs/utils/version.cjs +1 -1
  24. package/dist-react/esm/components/ds-secondary-navigation/ds-secondary-navigation.js +75 -42
  25. package/dist-react/esm/components/ds-theme-provider/ds-theme-provider.js +1 -1
  26. package/dist-react/esm/decorators/customUiKitElement.js +1 -1
  27. package/dist-react/esm/utils/IconsManager.js +1 -1
  28. package/dist-react/esm/utils/PubSub.js +1 -1
  29. package/dist-react/esm/utils/StylesRegistry/StylesRegistry.js +1 -1
  30. package/dist-react/esm/utils/version.js +1 -1
  31. package/dist-react/types/components/ds-secondary-navigation/ds-secondary-navigation.d.ts +9 -6
  32. package/dist-react/types/components/ds-secondary-navigation/ds-secondary-navigation.types.d.ts +5 -3
  33. package/package.json +1 -1
package/dist/cjs/components/ds-secondary-navigation/ds-secondary-navigation.cjs CHANGED
@@ -1,4 +1,4 @@
1
- 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_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs`),n=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs`),r=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs`),i=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const a=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),o=require(`../base/UiKitElement.cjs`),s=require(`../../decorators/customUiKitElement.cjs`);require(`../ds-icon/ds-icon.cjs`);const c=require(`../../utils/uiKitHtml.cjs`),l=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.cjs`);const u=require(`../../mixins/ViewportMixin.cjs`);require(`../ds-icon-button/ds-icon-button.cjs`);const d=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/style-map.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/style-map.cjs`);const f=require(`./styles/common.styles.cjs`);var p=class extends u.ViewportMixin(o.UiKitElement){constructor(...e){super(...e),this.dropdownButtonText=`Menu`,this.textTransform=`none`,this.keepDropdownButtonText=!1,this.itemsMode=`auto`,this.actionsMode=`auto`,this.openItems=!1,this.openCtas=!1,this.hasScrollLeft=!1,this.hasScrollRight=!1,this.resizeObserver=new ResizeObserver(()=>{this.handleScroll()}),this.handleScroll=()=>{let e=this.itemsContainer?.scrollLeft+this.itemsContainer?.clientWidth;this.hasScrollLeft=this.itemsContainer?.scrollLeft>0,this.hasScrollRight=e<this.itemsContainer?.scrollWidth}}static{this.styles=[f.commonStyles]}updated(e){super.updated(e),(e.has(`viewport`)||e.has(`actionsMode`))&&this.updateCtas(),e.has(`selectedIndex`)&&this.updateSelectedItem()}firstUpdated(e){super.firstUpdated(e),this.handleScroll(),this.itemsContainer&&this.resizeObserver.observe(this.itemsContainer),window.addEventListener(`resize`,this.handleScroll),this.itemsContainer?.addEventListener(`scroll`,this.handleScroll)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.disconnect(),window.removeEventListener(`resize`,this.handleScroll)}get selectedItemText(){return this.keepDropdownButtonText?this.dropdownButtonText:this.items?.[this.selectedIndex]?.textContent?.trim()||this.dropdownButtonText}get classes(){return{nav:!0,"ds-blur":!0,"scroll-left":this.hasScrollLeft,"scroll-right":this.hasScrollRight}}toggleItemsDropdown(){this.openItems=!this.openItems,this.openItems&&(this.openCtas=!1)}toggleActionsDropdown(){this.openCtas=!this.openCtas,this.openCtas&&(this.openItems=!1)}closeDropdowns(){this.openItems=!1}handleItemsSlotChange(){this.updateSelectedItem()}handleActionsSlotChange(){this.updateCtas()}updateSelectedItem(){this.items?.forEach((e,t)=>{t===this.selectedIndex?e.classList.add(`selected`):e.classList.remove(`selected`)})}updateCtas(){this.ctas?.forEach(e=>{[`xxl`,`xl`].includes(this.viewport)?e?.setAttribute(`size`,`large`):e?.setAttribute(`size`,`medium`)})}handleItemClick(e){let t=e.target,n=this.items?.indexOf(t)??-1;if(n!==-1){this.selectedIndex=n,this.updateSelectedItem();let e=t.textContent?.trim()||t.getAttribute(`data-label`)||``;this.dispatchEvent(new CustomEvent(`ds-secondary-navigation:select`,{detail:{index:n,label:e},bubbles:!0,composed:!0})),this.closeDropdowns()}}get textTransformStyle(){return{textTransform:this.textTransform}}get shouldShowItemsInline(){return this.itemsMode===`inline`?!0:this.itemsMode===`select`||this.itemsMode===`icon-button`?!1:[`l`,`xl`,`xxl`].includes(this.viewport)}get shouldShowItemsDropdownButton(){return this.itemsMode===`inline`?!1:this.itemsMode===`select`||this.itemsMode===`icon-button`?!0:[`xxs`,`xs`,`s`,`m`].includes(this.viewport)}get shouldShowActionsInline(){if(this.actionsMode===`inline`)return!0;if(this.actionsMode===`dropdown`)return!1;let e=[`xxs`,`xs`,`s`].includes(this.viewport);return[`m`,`l`,`xl`,`xxl`].includes(this.viewport)||e&&!this.shouldShowActionsDropdownButton}get shouldShowActionsDropdownButton(){return this.actionsMode===`inline`?!1:this.actionsMode===`dropdown`?!0:[`xxs`,`xs`,`s`].includes(this.viewport)&&this.ctas.length>1}render(){return e.x`
1
+ 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_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs`),n=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs`),r=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs`),i=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const a=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),o=require(`../base/UiKitElement.cjs`),s=require(`../../decorators/customUiKitElement.cjs`);require(`../ds-icon/ds-icon.cjs`);const c=require(`../../utils/uiKitHtml.cjs`),l=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.cjs`);const u=require(`../../mixins/ViewportMixin.cjs`);require(`../ds-button/ds-button.cjs`),require(`../ds-icon-button/ds-icon-button.cjs`);const d=require(`./styles/common.styles.cjs`);var f,p=class extends u.ViewportMixin(o.UiKitElement){static{f=this}constructor(...e){super(...e),this.dropdownButtonText=`Menu`,this.keepDropdownButtonText=!1,this.itemsMode=`auto`,this.actionsMode=`auto`,this.openItems=!1,this.openCtas=!1,this.hasScrollLeft=!1,this.hasScrollRight=!1,this.resizeObserver=new ResizeObserver(()=>{this.handleScroll()}),this.handleScroll=()=>{let e=this.itemsContainer?.scrollLeft+this.itemsContainer?.clientWidth;this.hasScrollLeft=this.itemsContainer?.scrollLeft>0,this.hasScrollRight=e<this.itemsContainer?.scrollWidth}}static{this.styles=[d.commonStyles]}static{this.RESPONSIVE_BUTTON_SIZE=JSON.stringify({xs:`medium`,s:`medium`,m:`medium`,l:`medium`,xl:`large`,xxl:`large`})}static{this.VIEWPORT_ORDER=[`xs`,`s`,`m`,`l`,`xl`,`xxl`]}static resolveResponsive(e,t,n){let r;try{r=JSON.parse(e)}catch{return e}if(typeof r!=`object`||!r||Array.isArray(r))return e;let i=r,a=f.VIEWPORT_ORDER.indexOf(t);for(let e=a;e>=0;e--){let t=f.VIEWPORT_ORDER[e];if(t in i)return i[t]}return n}get resolvedItemsMode(){return f.resolveResponsive(this.itemsMode,this.viewport,`auto`)}get resolvedActionsMode(){return f.resolveResponsive(this.actionsMode,this.viewport,`auto`)}updated(e){super.updated(e),(e.has(`viewport`)||e.has(`actionsMode`))&&this.updateCtas(),e.has(`selectedIndex`)&&this.updateSelectedItem()}firstUpdated(e){super.firstUpdated(e),this.handleScroll(),this.itemsContainer&&this.resizeObserver.observe(this.itemsContainer),window.addEventListener(`resize`,this.handleScroll),this.itemsContainer?.addEventListener(`scroll`,this.handleScroll)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.disconnect(),window.removeEventListener(`resize`,this.handleScroll)}get selectedItemText(){return this.keepDropdownButtonText?this.dropdownButtonText:this.items?.[this.selectedIndex]?.textContent?.trim()||this.dropdownButtonText}get classes(){return{nav:!0,"ds-blur":!0,"scroll-left":this.hasScrollLeft,"scroll-right":this.hasScrollRight}}toggleItemsDropdown(){this.openItems=!this.openItems,this.openItems&&(this.openCtas=!1)}toggleActionsDropdown(){this.openCtas=!this.openCtas,this.openCtas&&(this.openItems=!1)}closeDropdowns(){this.openItems=!1}handleItemsSlotChange(){this.updateSelectedItem()}handleActionsSlotChange(){this.updateCtas()}updateSelectedItem(){this.items?.forEach((e,t)=>{t===this.selectedIndex?e.classList.add(`selected`):e.classList.remove(`selected`)})}updateCtas(){this.ctas?.forEach(e=>{[`xxl`,`xl`].includes(this.viewport)?e?.setAttribute(`size`,`large`):e?.setAttribute(`size`,`medium`)})}handleItemClick(e){let t=e.target,n=this.items?.indexOf(t)??-1;if(n!==-1){this.selectedIndex=n,this.updateSelectedItem();let e=t.textContent?.trim()||t.getAttribute(`data-label`)||``;this.dispatchEvent(new CustomEvent(`ds-secondary-navigation:select`,{detail:{index:n,label:e},bubbles:!0,composed:!0})),this.closeDropdowns()}}get shouldShowItemsInline(){return this.resolvedItemsMode===`inline`?!0:this.resolvedItemsMode===`select`||this.resolvedItemsMode===`icon-button`?!1:[`l`,`xl`,`xxl`].includes(this.viewport)}get shouldShowItemsDropdownButton(){return this.resolvedItemsMode===`inline`?!1:this.resolvedItemsMode===`select`||this.resolvedItemsMode===`icon-button`?!0:[`xxs`,`xs`,`s`,`m`].includes(this.viewport)}get shouldShowActionsInline(){if(this.resolvedActionsMode===`inline`)return!0;if(this.resolvedActionsMode===`dropdown`)return!1;let e=[`xxs`,`xs`,`s`].includes(this.viewport);return[`m`,`l`,`xl`,`xxl`].includes(this.viewport)||e&&!this.shouldShowActionsDropdownButton}get shouldShowActionsDropdownButton(){return this.resolvedActionsMode===`inline`?!1:this.resolvedActionsMode===`dropdown`?!0:[`xxs`,`xs`,`s`].includes(this.viewport)&&this.ctas.length>1}render(){return e.x`
2
2
  ${this.backdropTemplate}
3
3
  <div class="container gutter">
4
4
  <nav data-testid="ds-secondary-navigation-container" class=${l.e(this.classes)}>
@@ -6,45 +6,44 @@ const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/l
6
6
  ${this.itemsDropdownButtonTemplate}
7
7
  ${this.actionsTemplate}
8
8
  ${this.actionsDropdownButtonTemplate}
9
+ ${this.itemsDropdownTemplate}
10
+ ${this.actionsDropdownTemplate}
9
11
  </nav>
10
- ${this.itemsDropdownTemplate}
11
- ${this.actionsDropdownTemplate}
12
12
  </div>
13
13
  `}get itemsTemplate(){return this.shouldShowItemsInline?e.x`
14
14
  <div class="items-container">
15
- <div style=${d.o(this.textTransformStyle)}>
15
+ <div>
16
16
  <slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
17
17
  </div>
18
18
  </div>
19
19
  `:e.E}get actionsTemplate(){return this.shouldShowActionsInline?e.x`
20
- <div class="actions-container" style=${d.o(this.textTransformStyle)}>
20
+ <div class="actions-container">
21
21
  <slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
22
22
  </div>
23
- `:e.E}get iconTemplate(){return c.uiKitHtml`<ds-icon class="icon" icon-name=${this.openItems?`arrow-down`:`arrow-up`} size="20"></ds-icon>`}get listIconTemplate(){return c.uiKitHtml`<ds-icon class="icon" icon-name="list-line" size="20"></ds-icon>`}get itemsDropdownButtonTemplate(){return this.shouldShowItemsDropdownButton?this.itemsMode===`icon-button`?c.uiKitHtml`<ds-icon-button
23
+ `:e.E}get iconTemplate(){return c.uiKitHtml`<ds-icon class="icon" icon-name=${this.openItems?`arrow-down`:`arrow-up`} size="20"></ds-icon>`}get itemsDropdownButtonTemplate(){return this.shouldShowItemsDropdownButton?this.resolvedItemsMode===`icon-button`?c.uiKitHtml`<ds-icon-button
24
24
  class="items-list-button"
25
25
  data-aria-label="open items dropdown"
26
26
  @click=${this.toggleItemsDropdown}
27
- size="medium"
27
+ size=${f.RESPONSIVE_BUTTON_SIZE}
28
+ variant="secondary"
28
29
  icon-name="list-line"
29
- ></ds-icon-button>`:e.x`
30
- <button
31
- class="items-dropdown-button"
32
- @click=${this.toggleItemsDropdown}
33
- aria-expanded=${this.openItems}
34
- aria-haspopup="true"
35
- style=${d.o(this.textTransformStyle)}
36
- >
37
- <span>${this.selectedItemText}</span>
38
- ${this.iconTemplate}
39
- </button>
40
- `:e.E}get itemsDropdownTemplate(){return this.shouldShowItemsDropdownButton?e.x`
30
+ ></ds-icon-button>`:c.uiKitHtml`<ds-button
31
+ class="items-dropdown-button"
32
+ variant="secondary"
33
+ size=${f.RESPONSIVE_BUTTON_SIZE}
34
+ icon-name=${this.openItems?`arrow-down`:`arrow-up`}
35
+ icon-position="right"
36
+ @click=${this.toggleItemsDropdown}
37
+ aria-expanded=${this.openItems}
38
+ aria-haspopup="true"
39
+ ><span>${this.selectedItemText}</span></ds-button>`:e.E}get itemsDropdownTemplate(){return this.shouldShowItemsDropdownButton?e.x`
41
40
  <div
42
41
  class=${l.e({gutter:!0,"dropdown-container":!0,"items-dropdown":!0,open:this.openItems})}
43
42
  role="menu"
44
43
  aria-hidden=${!this.openItems}
45
44
  ?inert=${!this.openItems}
46
45
  >
47
- <div class="dropdown ds-blur" style=${d.o(this.textTransformStyle)}>
46
+ <div class="dropdown ds-blur">
48
47
  <slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
49
48
  </div>
50
49
  </div>
@@ -52,7 +51,7 @@ const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/l
52
51
  class="nav-arrow"
53
52
  data-aria-label="open actions dropdown"
54
53
  @click=${this.toggleActionsDropdown}
55
- size="medium"
54
+ size=${f.RESPONSIVE_BUTTON_SIZE}
56
55
  icon-name="triple-dot-v"
57
56
  ></ds-icon-button>`:e.E}get actionsDropdownTemplate(){return this.shouldShowActionsDropdownButton?e.x`
58
57
  <div
@@ -61,8 +60,8 @@ const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/l
61
60
  aria-hidden=${!this.openCtas}
62
61
  ?inert=${!this.openCtas}
63
62
  >
64
- <div class="dropdown ds-blur" style=${d.o(this.textTransformStyle)}>
63
+ <div class="dropdown ds-blur">
65
64
  <slot name="actions"></slot>
66
65
  </div>
67
66
  </div>
68
- `:e.E}get backdropTemplate(){return!this.openItems&&!this.openCtas?e.E:e.x`<div class="dropdown-backdrop" @click=${this.closeDropdowns}></div>`}};a.__decorate([t.n({type:String,attribute:`dropdown-button-text`})],p.prototype,`dropdownButtonText`,void 0),a.__decorate([t.n({type:Number,attribute:`selected-index`})],p.prototype,`selectedIndex`,void 0),a.__decorate([t.n({type:String,attribute:`text-transform`})],p.prototype,`textTransform`,void 0),a.__decorate([t.n({type:Boolean,attribute:`keep-dropdown-button-text`})],p.prototype,`keepDropdownButtonText`,void 0),a.__decorate([t.n({type:String,attribute:`items-mode`})],p.prototype,`itemsMode`,void 0),a.__decorate([t.n({type:String,attribute:`actions-mode`})],p.prototype,`actionsMode`,void 0),a.__decorate([n.r()],p.prototype,`openItems`,void 0),a.__decorate([n.r()],p.prototype,`openCtas`,void 0),a.__decorate([n.r()],p.prototype,`hasScrollLeft`,void 0),a.__decorate([n.r()],p.prototype,`hasScrollRight`,void 0),a.__decorate([i.o({slot:`items`})],p.prototype,`items`,void 0),a.__decorate([i.o({slot:`actions`})],p.prototype,`ctas`,void 0),a.__decorate([r.e(`.items-container`)],p.prototype,`itemsContainer`,void 0),p=a.__decorate([s.customUiKitElement(`ds-secondary-navigation`)],p);
67
+ `:e.E}get backdropTemplate(){return!this.openItems&&!this.openCtas?e.E:e.x`<div class="dropdown-backdrop" @click=${this.closeDropdowns}></div>`}};a.__decorate([t.n({type:String,attribute:`dropdown-button-text`})],p.prototype,`dropdownButtonText`,void 0),a.__decorate([t.n({type:Number,attribute:`selected-index`})],p.prototype,`selectedIndex`,void 0),a.__decorate([t.n({type:Boolean,attribute:`keep-dropdown-button-text`})],p.prototype,`keepDropdownButtonText`,void 0),a.__decorate([t.n({type:String,attribute:`items-mode`})],p.prototype,`itemsMode`,void 0),a.__decorate([t.n({type:String,attribute:`actions-mode`})],p.prototype,`actionsMode`,void 0),a.__decorate([n.r()],p.prototype,`openItems`,void 0),a.__decorate([n.r()],p.prototype,`openCtas`,void 0),a.__decorate([n.r()],p.prototype,`hasScrollLeft`,void 0),a.__decorate([n.r()],p.prototype,`hasScrollRight`,void 0),a.__decorate([i.o({slot:`items`})],p.prototype,`items`,void 0),a.__decorate([i.o({slot:`actions`})],p.prototype,`ctas`,void 0),a.__decorate([r.e(`.items-container`)],p.prototype,`itemsContainer`,void 0),p=f=a.__decorate([s.customUiKitElement(`ds-secondary-navigation`)],p);
package/dist/cjs/components/ds-theme-provider/ds-theme-provider.cjs CHANGED
@@ -1,4 +1,4 @@
1
1
  const e=require(`../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.cjs`),t=require(`./themeContext.cjs`),n=require(`../../core/theme.constants.cjs`),r=require(`../../utils/PubSub.cjs`),i=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs`),a=require(`../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);const o=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs`),s=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const c=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),l=require(`../../decorators/customUiKitElement.cjs`),u=require(`../../utils/booleanConverter.cjs`),d=require(`../../styles/source/shared/fonts-config.cjs`);var f=class extends a.i{constructor(...e){super(...e),this.loadFonts=!0,this.loadStyles=!0,this.cssLoaded=!1,this.loadedFonts=new Set}updated(e){super.updated(e),e.has(`theme`)&&(r.pubSub.publish(`theme`,this.theme),sessionStorage?.setItem(n.THEME_STORAGE_KEY,this.theme),typeof FontFace<`u`&&document?.fonts&&this.loadThemeFonts(),this.loadThemeStyles().then(()=>{this.cssLoaded=!0,this.dispatchEvent(new CustomEvent(`ui-kit:ready`,{bubbles:!0,composed:!0}))}))}loadThemeFonts(){d.fontsConfig[this.theme]?.fonts.forEach(e=>{this.loadThemeFont(e)})}async loadThemeFont({weight:e,name:t,file:n}){if(!this.loadFonts)return Promise.resolve();let r=`${t}-${e}`;if(this.loadedFonts.has(r))return;let i=new FontFace(t,`url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.woff2') format('woff2'),
2
2
  url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.woff') format('woff'),
3
3
  url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.ttf') format('truetype'),
4
- url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.otf') format('opentype')`,{style:`normal`,weight:e,display:`swap`});try{await i.load(),document.fonts.add(i),this.loadedFonts.add(r)}catch(n){console.error(`Error loading "${t}" font with "${e}" weight:`,n)}}loadThemeStyles(){return this.loadStyles?new Promise((e,t)=>{let n=`/2.0.0-canary.137`,r=`https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${r}"]`))e();else{let i=`ui-kit-theme-${n}`,a=document.getElementById(i),o=document.createElement(`link`);o.id=i,o.rel=`stylesheet`,o.href=r,o.onload=()=>e(),o.onerror=()=>t(Error(`Failed to load theme CSS: ${r}`)),document.head.appendChild(o),a?.remove()}}):Promise.resolve()}render(){return this.cssLoaded?i.x`<slot></slot>`:i.E}};c.__decorate([o.n({type:Boolean,converter:u.booleanConverter,attribute:`load-fonts`})],f.prototype,`loadFonts`,void 0),c.__decorate([o.n({type:Boolean,converter:u.booleanConverter,attribute:`load-styles`})],f.prototype,`loadStyles`,void 0),c.__decorate([e.e({context:t.themeContext}),o.n({type:String})],f.prototype,`theme`,void 0),c.__decorate([s.r()],f.prototype,`cssLoaded`,void 0),c.__decorate([s.r()],f.prototype,`loadedFonts`,void 0),f=c.__decorate([l.customUiKitElement(`ds-theme-provider`)],f);
4
+ url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.otf') format('opentype')`,{style:`normal`,weight:e,display:`swap`});try{await i.load(),document.fonts.add(i),this.loadedFonts.add(r)}catch(n){console.error(`Error loading "${t}" font with "${e}" weight:`,n)}}loadThemeStyles(){return this.loadStyles?new Promise((e,t)=>{let n=`/2.0.0-canary.139`,r=`https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${r}"]`))e();else{let i=`ui-kit-theme-${n}`,a=document.getElementById(i),o=document.createElement(`link`);o.id=i,o.rel=`stylesheet`,o.href=r,o.onload=()=>e(),o.onerror=()=>t(Error(`Failed to load theme CSS: ${r}`)),document.head.appendChild(o),a?.remove()}}):Promise.resolve()}render(){return this.cssLoaded?i.x`<slot></slot>`:i.E}};c.__decorate([o.n({type:Boolean,converter:u.booleanConverter,attribute:`load-fonts`})],f.prototype,`loadFonts`,void 0),c.__decorate([o.n({type:Boolean,converter:u.booleanConverter,attribute:`load-styles`})],f.prototype,`loadStyles`,void 0),c.__decorate([e.e({context:t.themeContext}),o.n({type:String})],f.prototype,`theme`,void 0),c.__decorate([s.r()],f.prototype,`cssLoaded`,void 0),c.__decorate([s.r()],f.prototype,`loadedFonts`,void 0),f=c.__decorate([l.customUiKitElement(`ds-theme-provider`)],f);
package/dist/cjs/decorators/customUiKitElement.cjs CHANGED
@@ -1 +1 @@
1
- require(`../utils/version.cjs`);function e(e,t){return function(n){if(!n?.prototype)throw TypeError(`@customUiKitElement requires a class that extends HTMLElement.`);let r=e;if(globalThis?.customElements?.get(r))return;let i=t?.skipTagAsComponentName?[]:[e];Array.isArray(t?.extendComponentNames)&&(i=[...t.extendComponentNames,...i]),globalThis?.customElements?.define?.(r,class extends n{static{this.componentName=i}connectedCallback(){n.prototype.connectedCallback?.call(this),this.setAttribute(`data-ui-kit-version`,`2.0.0-canary.137`)}})}}exports.customUiKitElement=e;
1
+ require(`../utils/version.cjs`);function e(e,t){return function(n){if(!n?.prototype)throw TypeError(`@customUiKitElement requires a class that extends HTMLElement.`);let r=e;if(globalThis?.customElements?.get(r))return;let i=t?.skipTagAsComponentName?[]:[e];Array.isArray(t?.extendComponentNames)&&(i=[...t.extendComponentNames,...i]),globalThis?.customElements?.define?.(r,class extends n{static{this.componentName=i}connectedCallback(){n.prototype.connectedCallback?.call(this),this.setAttribute(`data-ui-kit-version`,`2.0.0-canary.139`)}})}}exports.customUiKitElement=e;
package/dist/cjs/utils/IconsManager.cjs CHANGED
@@ -1 +1 @@
1
- const e=require(`../core/theme.constants.cjs`),t=require(`./PubSub.cjs`);var n=class{constructor(){this.icons={},this.handleChangeTheme=e=>{if(this.theme===e)return;this.theme=e;let t=Object.keys(this.icons);this.icons={},t.forEach(e=>this.fetchIcon(e))},this.fetchIcon=async(t,n={})=>{let r=typeof sessionStorage<`u`?sessionStorage?.getItem(e.THEME_STORAGE_KEY):null;!this.theme&&r&&(this.theme=r);let i=this.icons[t];if(i)return await i;let a=this.loadIcon(t,n).catch(e=>{throw delete this.icons[t],e});return this.icons[t]=a,a},this.loadIcon=(e,{cache:t=`force-cache`,...n})=>!this.theme||typeof fetch>`u`?Promise.resolve(`<svg class="ds-icon"></svg>`):fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`,{cache:t,...n}).then(e=>e.text()).catch(t=>{if(t?.name===`AbortError`)throw t;return console.error(`Failed to fetch icon "${e}":`,t),``}),t.pubSub.subscribe(`theme`,this.handleChangeTheme)}},r=Symbol.for(`@cupra/ui-kit/icons-manager/2.0.0-canary.137`),i=globalThis,a=i[r];a||(a=new n,Object.defineProperty(i,r,{value:a,writable:!1,configurable:!1,enumerable:!1}));var o=a;exports.iconsManager=o;
1
+ const e=require(`../core/theme.constants.cjs`),t=require(`./PubSub.cjs`);var n=class{constructor(){this.icons={},this.handleChangeTheme=e=>{if(this.theme===e)return;this.theme=e;let t=Object.keys(this.icons);this.icons={},t.forEach(e=>this.fetchIcon(e))},this.fetchIcon=async(t,n={})=>{let r=typeof sessionStorage<`u`?sessionStorage?.getItem(e.THEME_STORAGE_KEY):null;!this.theme&&r&&(this.theme=r);let i=this.icons[t];if(i)return await i;let a=this.loadIcon(t,n).catch(e=>{throw delete this.icons[t],e});return this.icons[t]=a,a},this.loadIcon=(e,{cache:t=`force-cache`,...n})=>!this.theme||typeof fetch>`u`?Promise.resolve(`<svg class="ds-icon"></svg>`):fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`,{cache:t,...n}).then(e=>e.text()).catch(t=>{if(t?.name===`AbortError`)throw t;return console.error(`Failed to fetch icon "${e}":`,t),``}),t.pubSub.subscribe(`theme`,this.handleChangeTheme)}},r=Symbol.for(`@cupra/ui-kit/icons-manager/2.0.0-canary.139`),i=globalThis,a=i[r];a||(a=new n,Object.defineProperty(i,r,{value:a,writable:!1,configurable:!1,enumerable:!1}));var o=a;exports.iconsManager=o;
package/dist/cjs/utils/PubSub.cjs CHANGED
@@ -1 +1 @@
1
- var e=class{constructor(){this.subscribers={},this.lastPublishedData={}}subscribe(e,t){return this.subscribers[e]||(this.subscribers[e]=[]),this.subscribers[e].push(t),this.lastPublishedData[e]}unsubscribe(e,t){this.subscribers[e]&&(this.subscribers[e]=this.subscribers[e].filter(e=>e!==t))}publish(e,t){this.lastPublishedData[e]=t,this.subscribers[e]&&this.subscribers[e].forEach(n=>{try{n(t)}catch(t){console.error(`Error in subscriber for event "${e}":`,t)}})}},t=Symbol.for(`@cupra/ui-kit/pubsub/2.0.0-canary.137`),n=globalThis,r=n[t];r||(r=new e,Object.defineProperty(n,t,{value:r,writable:!1,configurable:!1,enumerable:!1}));var i=r;exports.pubSub=i;
1
+ var e=class{constructor(){this.subscribers={},this.lastPublishedData={}}subscribe(e,t){return this.subscribers[e]||(this.subscribers[e]=[]),this.subscribers[e].push(t),this.lastPublishedData[e]}unsubscribe(e,t){this.subscribers[e]&&(this.subscribers[e]=this.subscribers[e].filter(e=>e!==t))}publish(e,t){this.lastPublishedData[e]=t,this.subscribers[e]&&this.subscribers[e].forEach(n=>{try{n(t)}catch(t){console.error(`Error in subscriber for event "${e}":`,t)}})}},t=Symbol.for(`@cupra/ui-kit/pubsub/2.0.0-canary.139`),n=globalThis,r=n[t];r||(r=new e,Object.defineProperty(n,t,{value:r,writable:!1,configurable:!1,enumerable:!1}));var i=r;exports.pubSub=i;
package/dist/cjs/utils/StylesRegistry/StylesRegistry.cjs CHANGED
@@ -1 +1 @@
1
- var e=require(`../concurrencyLimit.cjs`).concurrencyLimit(20),t=class t{constructor(){this.stylePromises=new Map,this.getStyles=async({componentName:t,theme:n})=>{if(!n||!t)return;let r=`https://ds-assets.cupra.com/2.0.0-canary.137/styles/${n}/components/${t}.css`,i=this.getCachedStyleSheetPromise({url:r});if(i)return i;let a=e(()=>this.fetchStyle({url:r})).then(e=>(e||this.stylePromises.delete(r),e));return this.stylePromises.set(r,a),this.stylePromises.get(r)}}async fetchStyle({url:e}){try{if(typeof fetch>`u`)return;let t=await fetch(e,{cache:`force-cache`});if(t.ok)return t.text()}catch(t){console.error(`Failed to fetch Style Sheet "${e}":`,t)}}getCachedStyleSheetPromise({url:e}){return this.stylePromises.get(e)}static getInstance(){return t.instance||=new t,t.instance}}.getInstance();exports.stylesRegistry=t;
1
+ var e=require(`../concurrencyLimit.cjs`).concurrencyLimit(20),t=class t{constructor(){this.stylePromises=new Map,this.getStyles=async({componentName:t,theme:n})=>{if(!n||!t)return;let r=`https://ds-assets.cupra.com/2.0.0-canary.139/styles/${n}/components/${t}.css`,i=this.getCachedStyleSheetPromise({url:r});if(i)return i;let a=e(()=>this.fetchStyle({url:r})).then(e=>(e||this.stylePromises.delete(r),e));return this.stylePromises.set(r,a),this.stylePromises.get(r)}}async fetchStyle({url:e}){try{if(typeof fetch>`u`)return;let t=await fetch(e,{cache:`force-cache`});if(t.ok)return t.text()}catch(t){console.error(`Failed to fetch Style Sheet "${e}":`,t)}}getCachedStyleSheetPromise({url:e}){return this.stylePromises.get(e)}static getInstance(){return t.instance||=new t,t.instance}}.getInstance();exports.stylesRegistry=t;
package/dist/cjs/utils/version.cjs CHANGED
@@ -1 +1 @@
1
- var e=`2.0.0-canary.137`,t=`--v${e.replaceAll(`.`,`-`)}`;exports.VERSION=e,exports.VERSION_TAG_SUFFIX=t;
1
+ var e=`2.0.0-canary.139`,t=`--v${e.replaceAll(`.`,`-`)}`;exports.VERSION=e,exports.VERSION_TAG_SUFFIX=t;
package/dist/esm/components/ds-secondary-navigation/ds-secondary-navigation.js CHANGED
@@ -13,14 +13,16 @@ import { uiKitHtml as l } from "../../utils/uiKitHtml.js";
13
13
  import { e as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
14
14
  import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
15
15
  import { ViewportMixin as d } from "../../mixins/ViewportMixin.js";
16
+ import "../ds-button/ds-button.js";
16
17
  import "../ds-icon-button/ds-icon-button.js";
17
- import { o as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/style-map.js";
18
- import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/style-map.js";
19
- import { commonStyles as p } from "./styles/common.styles.js";
18
+ import { commonStyles as f } from "./styles/common.styles.js";
20
19
  //#region src/components/ds-secondary-navigation/ds-secondary-navigation.ts
21
- var m = class extends d(s) {
20
+ var p, m = class extends d(s) {
21
+ static {
22
+ p = this;
23
+ }
22
24
  constructor(...e) {
23
- super(...e), this.dropdownButtonText = "Menu", this.textTransform = "none", this.keepDropdownButtonText = !1, this.itemsMode = "auto", this.actionsMode = "auto", this.openItems = !1, this.openCtas = !1, this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
25
+ super(...e), this.dropdownButtonText = "Menu", this.keepDropdownButtonText = !1, this.itemsMode = "auto", this.actionsMode = "auto", this.openItems = !1, this.openCtas = !1, this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
24
26
  this.handleScroll();
25
27
  }), this.handleScroll = () => {
26
28
  let e = this.itemsContainer?.scrollLeft + this.itemsContainer?.clientWidth;
@@ -28,7 +30,48 @@ var m = class extends d(s) {
28
30
  };
29
31
  }
30
32
  static {
31
- this.styles = [p];
33
+ this.styles = [f];
34
+ }
35
+ static {
36
+ this.RESPONSIVE_BUTTON_SIZE = JSON.stringify({
37
+ xs: "medium",
38
+ s: "medium",
39
+ m: "medium",
40
+ l: "medium",
41
+ xl: "large",
42
+ xxl: "large"
43
+ });
44
+ }
45
+ static {
46
+ this.VIEWPORT_ORDER = [
47
+ "xs",
48
+ "s",
49
+ "m",
50
+ "l",
51
+ "xl",
52
+ "xxl"
53
+ ];
54
+ }
55
+ static resolveResponsive(e, t, n) {
56
+ let r;
57
+ try {
58
+ r = JSON.parse(e);
59
+ } catch {
60
+ return e;
61
+ }
62
+ if (typeof r != "object" || !r || Array.isArray(r)) return e;
63
+ let i = r, a = p.VIEWPORT_ORDER.indexOf(t);
64
+ for (let e = a; e >= 0; e--) {
65
+ let t = p.VIEWPORT_ORDER[e];
66
+ if (t in i) return i[t];
67
+ }
68
+ return n;
69
+ }
70
+ get resolvedItemsMode() {
71
+ return p.resolveResponsive(this.itemsMode, this.viewport, "auto");
72
+ }
73
+ get resolvedActionsMode() {
74
+ return p.resolveResponsive(this.actionsMode, this.viewport, "auto");
32
75
  }
33
76
  updated(e) {
34
77
  super.updated(e), (e.has("viewport") || e.has("actionsMode")) && this.updateCtas(), e.has("selectedIndex") && this.updateSelectedItem();
@@ -90,18 +133,15 @@ var m = class extends d(s) {
90
133
  })), this.closeDropdowns();
91
134
  }
92
135
  }
93
- get textTransformStyle() {
94
- return { textTransform: this.textTransform };
95
- }
96
136
  get shouldShowItemsInline() {
97
- return this.itemsMode === "inline" ? !0 : this.itemsMode === "select" || this.itemsMode === "icon-button" ? !1 : [
137
+ return this.resolvedItemsMode === "inline" ? !0 : this.resolvedItemsMode === "select" || this.resolvedItemsMode === "icon-button" ? !1 : [
98
138
  "l",
99
139
  "xl",
100
140
  "xxl"
101
141
  ].includes(this.viewport);
102
142
  }
103
143
  get shouldShowItemsDropdownButton() {
104
- return this.itemsMode === "inline" ? !1 : this.itemsMode === "select" || this.itemsMode === "icon-button" ? !0 : [
144
+ return this.resolvedItemsMode === "inline" ? !1 : this.resolvedItemsMode === "select" || this.resolvedItemsMode === "icon-button" ? !0 : [
105
145
  "xxs",
106
146
  "xs",
107
147
  "s",
@@ -109,8 +149,8 @@ var m = class extends d(s) {
109
149
  ].includes(this.viewport);
110
150
  }
111
151
  get shouldShowActionsInline() {
112
- if (this.actionsMode === "inline") return !0;
113
- if (this.actionsMode === "dropdown") return !1;
152
+ if (this.resolvedActionsMode === "inline") return !0;
153
+ if (this.resolvedActionsMode === "dropdown") return !1;
114
154
  let e = [
115
155
  "xxs",
116
156
  "xs",
@@ -124,7 +164,7 @@ var m = class extends d(s) {
124
164
  ].includes(this.viewport) || e && !this.shouldShowActionsDropdownButton;
125
165
  }
126
166
  get shouldShowActionsDropdownButton() {
127
- return this.actionsMode === "inline" ? !1 : this.actionsMode === "dropdown" ? !0 : [
167
+ return this.resolvedActionsMode === "inline" ? !1 : this.resolvedActionsMode === "dropdown" ? !0 : [
128
168
  "xxs",
129
169
  "xs",
130
170
  "s"
@@ -139,16 +179,16 @@ var m = class extends d(s) {
139
179
  ${this.itemsDropdownButtonTemplate}
140
180
  ${this.actionsTemplate}
141
181
  ${this.actionsDropdownButtonTemplate}
182
+ ${this.itemsDropdownTemplate}
183
+ ${this.actionsDropdownTemplate}
142
184
  </nav>
143
- ${this.itemsDropdownTemplate}
144
- ${this.actionsDropdownTemplate}
145
185
  </div>
146
186
  `;
147
187
  }
148
188
  get itemsTemplate() {
149
189
  return this.shouldShowItemsInline ? t`
150
190
  <div class="items-container">
151
- <div style=${f(this.textTransformStyle)}>
191
+ <div>
152
192
  <slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
153
193
  </div>
154
194
  </div>
@@ -156,7 +196,7 @@ var m = class extends d(s) {
156
196
  }
157
197
  get actionsTemplate() {
158
198
  return this.shouldShowActionsInline ? t`
159
- <div class="actions-container" style=${f(this.textTransformStyle)}>
199
+ <div class="actions-container">
160
200
  <slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
161
201
  </div>
162
202
  ` : e;
@@ -164,28 +204,24 @@ var m = class extends d(s) {
164
204
  get iconTemplate() {
165
205
  return l`<ds-icon class="icon" icon-name=${this.openItems ? "arrow-down" : "arrow-up"} size="20"></ds-icon>`;
166
206
  }
167
- get listIconTemplate() {
168
- return l`<ds-icon class="icon" icon-name="list-line" size="20"></ds-icon>`;
169
- }
170
207
  get itemsDropdownButtonTemplate() {
171
- return this.shouldShowItemsDropdownButton ? this.itemsMode === "icon-button" ? l`<ds-icon-button
208
+ return this.shouldShowItemsDropdownButton ? this.resolvedItemsMode === "icon-button" ? l`<ds-icon-button
172
209
  class="items-list-button"
173
210
  data-aria-label="open items dropdown"
174
211
  @click=${this.toggleItemsDropdown}
175
- size="medium"
212
+ size=${p.RESPONSIVE_BUTTON_SIZE}
213
+ variant="secondary"
176
214
  icon-name="list-line"
177
- ></ds-icon-button>` : t`
178
- <button
179
- class="items-dropdown-button"
180
- @click=${this.toggleItemsDropdown}
181
- aria-expanded=${this.openItems}
182
- aria-haspopup="true"
183
- style=${f(this.textTransformStyle)}
184
- >
185
- <span>${this.selectedItemText}</span>
186
- ${this.iconTemplate}
187
- </button>
188
- ` : e;
215
+ ></ds-icon-button>` : l`<ds-button
216
+ class="items-dropdown-button"
217
+ variant="secondary"
218
+ size=${p.RESPONSIVE_BUTTON_SIZE}
219
+ icon-name=${this.openItems ? "arrow-down" : "arrow-up"}
220
+ icon-position="right"
221
+ @click=${this.toggleItemsDropdown}
222
+ aria-expanded=${this.openItems}
223
+ aria-haspopup="true"
224
+ ><span>${this.selectedItemText}</span></ds-button>` : e;
189
225
  }
190
226
  get itemsDropdownTemplate() {
191
227
  return this.shouldShowItemsDropdownButton ? t`
@@ -200,7 +236,7 @@ var m = class extends d(s) {
200
236
  aria-hidden=${!this.openItems}
201
237
  ?inert=${!this.openItems}
202
238
  >
203
- <div class="dropdown ds-blur" style=${f(this.textTransformStyle)}>
239
+ <div class="dropdown ds-blur">
204
240
  <slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
205
241
  </div>
206
242
  </div>
@@ -211,7 +247,7 @@ var m = class extends d(s) {
211
247
  class="nav-arrow"
212
248
  data-aria-label="open actions dropdown"
213
249
  @click=${this.toggleActionsDropdown}
214
- size="medium"
250
+ size=${p.RESPONSIVE_BUTTON_SIZE}
215
251
  icon-name="triple-dot-v"
216
252
  ></ds-icon-button>` : e;
217
253
  }
@@ -228,7 +264,7 @@ var m = class extends d(s) {
228
264
  aria-hidden=${!this.openCtas}
229
265
  ?inert=${!this.openCtas}
230
266
  >
231
- <div class="dropdown ds-blur" style=${f(this.textTransformStyle)}>
267
+ <div class="dropdown ds-blur">
232
268
  <slot name="actions"></slot>
233
269
  </div>
234
270
  </div>
@@ -245,9 +281,6 @@ o([n({
245
281
  type: Number,
246
282
  attribute: "selected-index"
247
283
  })], m.prototype, "selectedIndex", void 0), o([n({
248
- type: String,
249
- attribute: "text-transform"
250
- })], m.prototype, "textTransform", void 0), o([n({
251
284
  type: Boolean,
252
285
  attribute: "keep-dropdown-button-text"
253
286
  })], m.prototype, "keepDropdownButtonText", void 0), o([n({
@@ -256,5 +289,5 @@ o([n({
256
289
  })], m.prototype, "itemsMode", void 0), o([n({
257
290
  type: String,
258
291
  attribute: "actions-mode"
259
- })], m.prototype, "actionsMode", void 0), o([r()], m.prototype, "openItems", void 0), o([r()], m.prototype, "openCtas", void 0), o([r()], m.prototype, "hasScrollLeft", void 0), o([r()], m.prototype, "hasScrollRight", void 0), o([a({ slot: "items" })], m.prototype, "items", void 0), o([a({ slot: "actions" })], m.prototype, "ctas", void 0), o([i(".items-container")], m.prototype, "itemsContainer", void 0), m = o([c("ds-secondary-navigation")], m);
292
+ })], m.prototype, "actionsMode", void 0), o([r()], m.prototype, "openItems", void 0), o([r()], m.prototype, "openCtas", void 0), o([r()], m.prototype, "hasScrollLeft", void 0), o([r()], m.prototype, "hasScrollRight", void 0), o([a({ slot: "items" })], m.prototype, "items", void 0), o([a({ slot: "actions" })], m.prototype, "ctas", void 0), o([i(".items-container")], m.prototype, "itemsContainer", void 0), m = p = o([c("ds-secondary-navigation")], m);
260
293
  //#endregion
package/dist/esm/components/ds-theme-provider/ds-theme-provider.js CHANGED
@@ -50,7 +50,7 @@ var p = class extends o {
50
50
  }
51
51
  loadThemeStyles() {
52
52
  return this.loadStyles ? new Promise((e, t) => {
53
- let n = "/2.0.0-canary.137", r = `https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;
53
+ let n = "/2.0.0-canary.139", r = `https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;
54
54
  if (document.head.querySelector(`link[href="${r}"]`)) e();
55
55
  else {
56
56
  let i = `ui-kit-theme-${n}`, a = document.getElementById(i), o = document.createElement("link");
package/dist/esm/decorators/customUiKitElement.js CHANGED
@@ -11,7 +11,7 @@ function e(e, t) {
11
11
  this.componentName = i;
12
12
  }
13
13
  connectedCallback() {
14
- n.prototype.connectedCallback?.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.137");
14
+ n.prototype.connectedCallback?.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.139");
15
15
  }
16
16
  });
17
17
  };
package/dist/esm/utils/IconsManager.js CHANGED
@@ -25,7 +25,7 @@ var n = class {
25
25
  return console.error(`Failed to fetch icon "${e}":`, t), "";
26
26
  }), t.subscribe("theme", this.handleChangeTheme);
27
27
  }
28
- }, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.137"), i = globalThis, a = i[r];
28
+ }, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.139"), i = globalThis, a = i[r];
29
29
  a || (a = new n(), Object.defineProperty(i, r, {
30
30
  value: a,
31
31
  writable: !1,
package/dist/esm/utils/PubSub.js CHANGED
@@ -18,7 +18,7 @@ var e = class {
18
18
  }
19
19
  });
20
20
  }
21
- }, t = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.137"), n = globalThis, r = n[t];
21
+ }, t = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.139"), n = globalThis, r = n[t];
22
22
  r || (r = new e(), Object.defineProperty(n, t, {
23
23
  value: r,
24
24
  writable: !1,
package/dist/esm/utils/StylesRegistry/StylesRegistry.js CHANGED
@@ -4,7 +4,7 @@ var t = e(20), n = class e {
4
4
  constructor() {
5
5
  this.stylePromises = /* @__PURE__ */ new Map(), this.getStyles = async ({ componentName: e, theme: n }) => {
6
6
  if (!n || !e) return;
7
- let r = `https://ds-assets.cupra.com/2.0.0-canary.137/styles/${n}/components/${e}.css`, i = this.getCachedStyleSheetPromise({ url: r });
7
+ let r = `https://ds-assets.cupra.com/2.0.0-canary.139/styles/${n}/components/${e}.css`, i = this.getCachedStyleSheetPromise({ url: r });
8
8
  if (i) return i;
9
9
  let a = t(() => this.fetchStyle({ url: r })).then((e) => (e || this.stylePromises.delete(r), e));
10
10
  return this.stylePromises.set(r, a), this.stylePromises.get(r);
package/dist/esm/utils/version.js CHANGED
@@ -1,4 +1,4 @@
1
1
  //#region src/utils/version.ts
2
- var e = "2.0.0-canary.137", t = `--v${e.replaceAll(".", "-")}`;
2
+ var e = "2.0.0-canary.139", t = `--v${e.replaceAll(".", "-")}`;
3
3
  //#endregion
4
4
  export { e as VERSION, t as VERSION_TAG_SUFFIX };
package/dist/types/components/ds-secondary-navigation/ds-secondary-navigation.d.ts CHANGED
@@ -1,21 +1,26 @@
1
1
  import { UiKitElement } from '../base/UiKitElement.ts';
2
+ import '../ds-button/ds-button.ts';
2
3
  import '../ds-icon-button/ds-icon-button.ts';
3
4
  import '../ds-icon/ds-icon.ts';
4
5
  import { type PropertyValues } from 'lit';
5
- import type { ActionsMode, DsSecondaryNavigationAttrs, ItemsMode } from './ds-secondary-navigation.types';
6
+ import type { DsSecondaryNavigationAttrs } from './ds-secondary-navigation.types';
6
7
  declare const DsSecondaryNavigation_base: (new (...args: any[]) => import("../../mixins/ViewportMixin.ts").ViewportInterface) & typeof UiKitElement;
7
8
  export declare class DsSecondaryNavigation extends DsSecondaryNavigation_base {
8
9
  static styles: import("lit").CSSResult[];
9
10
  dropdownButtonText: DsSecondaryNavigationAttrs['dropdown-button-text'];
10
11
  selectedIndex: DsSecondaryNavigationAttrs['selected-index'];
11
- textTransform: DsSecondaryNavigationAttrs['text-transform'];
12
12
  keepDropdownButtonText: DsSecondaryNavigationAttrs['keep-dropdown-button-text'];
13
- itemsMode: ItemsMode;
14
- actionsMode: ActionsMode;
13
+ itemsMode: string;
14
+ actionsMode: string;
15
15
  private openItems;
16
16
  private openCtas;
17
17
  private hasScrollLeft;
18
18
  private hasScrollRight;
19
+ private static readonly RESPONSIVE_BUTTON_SIZE;
20
+ private static readonly VIEWPORT_ORDER;
21
+ private static resolveResponsive;
22
+ private get resolvedItemsMode();
23
+ private get resolvedActionsMode();
19
24
  private items;
20
25
  private ctas;
21
26
  private itemsContainer;
@@ -34,7 +39,6 @@ export declare class DsSecondaryNavigation extends DsSecondaryNavigation_base {
34
39
  private updateSelectedItem;
35
40
  private updateCtas;
36
41
  private handleItemClick;
37
- private get textTransformStyle();
38
42
  private get shouldShowItemsInline();
39
43
  private get shouldShowItemsDropdownButton();
40
44
  private get shouldShowActionsInline();
@@ -43,7 +47,6 @@ export declare class DsSecondaryNavigation extends DsSecondaryNavigation_base {
43
47
  private get itemsTemplate();
44
48
  private get actionsTemplate();
45
49
  protected get iconTemplate(): import("lit").HTMLTemplateResult;
46
- protected get listIconTemplate(): import("lit").HTMLTemplateResult;
47
50
  private get itemsDropdownButtonTemplate();
48
51
  private get itemsDropdownTemplate();
49
52
  private get actionsDropdownButtonTemplate();
package/dist/types/components/ds-secondary-navigation/ds-secondary-navigation.types.d.ts CHANGED
@@ -1,11 +1,13 @@
1
1
  import { CommonAttrs } from '../../types/types';
2
2
  export type ItemsMode = 'auto' | 'inline' | 'select' | 'icon-button';
3
3
  export type ActionsMode = 'auto' | 'inline' | 'dropdown';
4
+ export type ViewportKey = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
5
+ export type ResponsiveItemsMode = Partial<Record<ViewportKey, ItemsMode>>;
6
+ export type ResponsiveActionsMode = Partial<Record<ViewportKey, ActionsMode>>;
4
7
  export type DsSecondaryNavigationAttrs = {
5
8
  'dropdown-button-text'?: string;
6
9
  'selected-index'?: number;
7
- 'text-transform'?: string;
8
10
  'keep-dropdown-button-text'?: boolean;
9
- 'items-mode'?: ItemsMode;
10
- 'actions-mode'?: ActionsMode;
11
+ 'items-mode'?: ItemsMode | string;
12
+ 'actions-mode'?: ActionsMode | string;
11
13
  } & CommonAttrs;
package/dist-react/cjs/components/ds-secondary-navigation/ds-secondary-navigation.cjs CHANGED
@@ -1,4 +1,4 @@
1
- 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_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs`),n=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs`),r=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs`),i=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const a=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),o=require(`../base/UiKitElement.cjs`),s=require(`../../decorators/customUiKitElement.cjs`);require(`../ds-icon/ds-icon.cjs`);const c=require(`../../utils/uiKitHtml.cjs`),l=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.cjs`);const u=require(`../../mixins/ViewportMixin.cjs`);require(`../ds-icon-button/ds-icon-button.cjs`);const d=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/style-map.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/style-map.cjs`);const f=require(`./styles/common.styles.cjs`);var p=class extends u.ViewportMixin(o.UiKitElement){constructor(...e){super(...e),this.dropdownButtonText=`Menu`,this.textTransform=`none`,this.keepDropdownButtonText=!1,this.itemsMode=`auto`,this.actionsMode=`auto`,this.openItems=!1,this.openCtas=!1,this.hasScrollLeft=!1,this.hasScrollRight=!1,this.resizeObserver=new ResizeObserver(()=>{this.handleScroll()}),this.handleScroll=()=>{let e=this.itemsContainer?.scrollLeft+this.itemsContainer?.clientWidth;this.hasScrollLeft=this.itemsContainer?.scrollLeft>0,this.hasScrollRight=e<this.itemsContainer?.scrollWidth}}static{this.styles=[f.commonStyles]}updated(e){super.updated(e),(e.has(`viewport`)||e.has(`actionsMode`))&&this.updateCtas(),e.has(`selectedIndex`)&&this.updateSelectedItem()}firstUpdated(e){super.firstUpdated(e),this.handleScroll(),this.itemsContainer&&this.resizeObserver.observe(this.itemsContainer),window.addEventListener(`resize`,this.handleScroll),this.itemsContainer?.addEventListener(`scroll`,this.handleScroll)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.disconnect(),window.removeEventListener(`resize`,this.handleScroll)}get selectedItemText(){return this.keepDropdownButtonText?this.dropdownButtonText:this.items?.[this.selectedIndex]?.textContent?.trim()||this.dropdownButtonText}get classes(){return{nav:!0,"ds-blur":!0,"scroll-left":this.hasScrollLeft,"scroll-right":this.hasScrollRight}}toggleItemsDropdown(){this.openItems=!this.openItems,this.openItems&&(this.openCtas=!1)}toggleActionsDropdown(){this.openCtas=!this.openCtas,this.openCtas&&(this.openItems=!1)}closeDropdowns(){this.openItems=!1}handleItemsSlotChange(){this.updateSelectedItem()}handleActionsSlotChange(){this.updateCtas()}updateSelectedItem(){this.items?.forEach((e,t)=>{t===this.selectedIndex?e.classList.add(`selected`):e.classList.remove(`selected`)})}updateCtas(){this.ctas?.forEach(e=>{[`xxl`,`xl`].includes(this.viewport)?e?.setAttribute(`size`,`large`):e?.setAttribute(`size`,`medium`)})}handleItemClick(e){let t=e.target,n=this.items?.indexOf(t)??-1;if(n!==-1){this.selectedIndex=n,this.updateSelectedItem();let e=t.textContent?.trim()||t.getAttribute(`data-label`)||``;this.dispatchEvent(new CustomEvent(`ds-secondary-navigation:select`,{detail:{index:n,label:e},bubbles:!0,composed:!0})),this.closeDropdowns()}}get textTransformStyle(){return{textTransform:this.textTransform}}get shouldShowItemsInline(){return this.itemsMode===`inline`?!0:this.itemsMode===`select`||this.itemsMode===`icon-button`?!1:[`l`,`xl`,`xxl`].includes(this.viewport)}get shouldShowItemsDropdownButton(){return this.itemsMode===`inline`?!1:this.itemsMode===`select`||this.itemsMode===`icon-button`?!0:[`xxs`,`xs`,`s`,`m`].includes(this.viewport)}get shouldShowActionsInline(){if(this.actionsMode===`inline`)return!0;if(this.actionsMode===`dropdown`)return!1;let e=[`xxs`,`xs`,`s`].includes(this.viewport);return[`m`,`l`,`xl`,`xxl`].includes(this.viewport)||e&&!this.shouldShowActionsDropdownButton}get shouldShowActionsDropdownButton(){return this.actionsMode===`inline`?!1:this.actionsMode===`dropdown`?!0:[`xxs`,`xs`,`s`].includes(this.viewport)&&this.ctas.length>1}render(){return e.x`
1
+ 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_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs`),n=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs`),r=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs`),i=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const a=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),o=require(`../base/UiKitElement.cjs`),s=require(`../../decorators/customUiKitElement.cjs`);require(`../ds-icon/ds-icon.cjs`);const c=require(`../../utils/uiKitHtml.cjs`),l=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.cjs`);const u=require(`../../mixins/ViewportMixin.cjs`);require(`../ds-button/ds-button.cjs`),require(`../ds-icon-button/ds-icon-button.cjs`);const d=require(`./styles/common.styles.cjs`);var f,p=class extends u.ViewportMixin(o.UiKitElement){static{f=this}constructor(...e){super(...e),this.dropdownButtonText=`Menu`,this.keepDropdownButtonText=!1,this.itemsMode=`auto`,this.actionsMode=`auto`,this.openItems=!1,this.openCtas=!1,this.hasScrollLeft=!1,this.hasScrollRight=!1,this.resizeObserver=new ResizeObserver(()=>{this.handleScroll()}),this.handleScroll=()=>{let e=this.itemsContainer?.scrollLeft+this.itemsContainer?.clientWidth;this.hasScrollLeft=this.itemsContainer?.scrollLeft>0,this.hasScrollRight=e<this.itemsContainer?.scrollWidth}}static{this.styles=[d.commonStyles]}static{this.RESPONSIVE_BUTTON_SIZE=JSON.stringify({xs:`medium`,s:`medium`,m:`medium`,l:`medium`,xl:`large`,xxl:`large`})}static{this.VIEWPORT_ORDER=[`xs`,`s`,`m`,`l`,`xl`,`xxl`]}static resolveResponsive(e,t,n){let r;try{r=JSON.parse(e)}catch{return e}if(typeof r!=`object`||!r||Array.isArray(r))return e;let i=r,a=f.VIEWPORT_ORDER.indexOf(t);for(let e=a;e>=0;e--){let t=f.VIEWPORT_ORDER[e];if(t in i)return i[t]}return n}get resolvedItemsMode(){return f.resolveResponsive(this.itemsMode,this.viewport,`auto`)}get resolvedActionsMode(){return f.resolveResponsive(this.actionsMode,this.viewport,`auto`)}updated(e){super.updated(e),(e.has(`viewport`)||e.has(`actionsMode`))&&this.updateCtas(),e.has(`selectedIndex`)&&this.updateSelectedItem()}firstUpdated(e){super.firstUpdated(e),this.handleScroll(),this.itemsContainer&&this.resizeObserver.observe(this.itemsContainer),window.addEventListener(`resize`,this.handleScroll),this.itemsContainer?.addEventListener(`scroll`,this.handleScroll)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.disconnect(),window.removeEventListener(`resize`,this.handleScroll)}get selectedItemText(){return this.keepDropdownButtonText?this.dropdownButtonText:this.items?.[this.selectedIndex]?.textContent?.trim()||this.dropdownButtonText}get classes(){return{nav:!0,"ds-blur":!0,"scroll-left":this.hasScrollLeft,"scroll-right":this.hasScrollRight}}toggleItemsDropdown(){this.openItems=!this.openItems,this.openItems&&(this.openCtas=!1)}toggleActionsDropdown(){this.openCtas=!this.openCtas,this.openCtas&&(this.openItems=!1)}closeDropdowns(){this.openItems=!1}handleItemsSlotChange(){this.updateSelectedItem()}handleActionsSlotChange(){this.updateCtas()}updateSelectedItem(){this.items?.forEach((e,t)=>{t===this.selectedIndex?e.classList.add(`selected`):e.classList.remove(`selected`)})}updateCtas(){this.ctas?.forEach(e=>{[`xxl`,`xl`].includes(this.viewport)?e?.setAttribute(`size`,`large`):e?.setAttribute(`size`,`medium`)})}handleItemClick(e){let t=e.target,n=this.items?.indexOf(t)??-1;if(n!==-1){this.selectedIndex=n,this.updateSelectedItem();let e=t.textContent?.trim()||t.getAttribute(`data-label`)||``;this.dispatchEvent(new CustomEvent(`ds-secondary-navigation:select`,{detail:{index:n,label:e},bubbles:!0,composed:!0})),this.closeDropdowns()}}get shouldShowItemsInline(){return this.resolvedItemsMode===`inline`?!0:this.resolvedItemsMode===`select`||this.resolvedItemsMode===`icon-button`?!1:[`l`,`xl`,`xxl`].includes(this.viewport)}get shouldShowItemsDropdownButton(){return this.resolvedItemsMode===`inline`?!1:this.resolvedItemsMode===`select`||this.resolvedItemsMode===`icon-button`?!0:[`xxs`,`xs`,`s`,`m`].includes(this.viewport)}get shouldShowActionsInline(){if(this.resolvedActionsMode===`inline`)return!0;if(this.resolvedActionsMode===`dropdown`)return!1;let e=[`xxs`,`xs`,`s`].includes(this.viewport);return[`m`,`l`,`xl`,`xxl`].includes(this.viewport)||e&&!this.shouldShowActionsDropdownButton}get shouldShowActionsDropdownButton(){return this.resolvedActionsMode===`inline`?!1:this.resolvedActionsMode===`dropdown`?!0:[`xxs`,`xs`,`s`].includes(this.viewport)&&this.ctas.length>1}render(){return e.x`
2
2
  ${this.backdropTemplate}
3
3
  <div class="container gutter">
4
4
  <nav data-testid="ds-secondary-navigation-container" class=${l.e(this.classes)}>
@@ -6,45 +6,44 @@ const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/l
6
6
  ${this.itemsDropdownButtonTemplate}
7
7
  ${this.actionsTemplate}
8
8
  ${this.actionsDropdownButtonTemplate}
9
+ ${this.itemsDropdownTemplate}
10
+ ${this.actionsDropdownTemplate}
9
11
  </nav>
10
- ${this.itemsDropdownTemplate}
11
- ${this.actionsDropdownTemplate}
12
12
  </div>
13
13
  `}get itemsTemplate(){return this.shouldShowItemsInline?e.x`
14
14
  <div class="items-container">
15
- <div style=${d.o(this.textTransformStyle)}>
15
+ <div>
16
16
  <slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
17
17
  </div>
18
18
  </div>
19
19
  `:e.E}get actionsTemplate(){return this.shouldShowActionsInline?e.x`
20
- <div class="actions-container" style=${d.o(this.textTransformStyle)}>
20
+ <div class="actions-container">
21
21
  <slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
22
22
  </div>
23
- `:e.E}get iconTemplate(){return c.uiKitHtml`<ds-icon class="icon" icon-name=${this.openItems?`arrow-down`:`arrow-up`} size="20"></ds-icon>`}get listIconTemplate(){return c.uiKitHtml`<ds-icon class="icon" icon-name="list-line" size="20"></ds-icon>`}get itemsDropdownButtonTemplate(){return this.shouldShowItemsDropdownButton?this.itemsMode===`icon-button`?c.uiKitHtml`<ds-icon-button
23
+ `:e.E}get iconTemplate(){return c.uiKitHtml`<ds-icon class="icon" icon-name=${this.openItems?`arrow-down`:`arrow-up`} size="20"></ds-icon>`}get itemsDropdownButtonTemplate(){return this.shouldShowItemsDropdownButton?this.resolvedItemsMode===`icon-button`?c.uiKitHtml`<ds-icon-button
24
24
  class="items-list-button"
25
25
  data-aria-label="open items dropdown"
26
26
  @click=${this.toggleItemsDropdown}
27
- size="medium"
27
+ size=${f.RESPONSIVE_BUTTON_SIZE}
28
+ variant="secondary"
28
29
  icon-name="list-line"
29
- ></ds-icon-button>`:e.x`
30
- <button
31
- class="items-dropdown-button"
32
- @click=${this.toggleItemsDropdown}
33
- aria-expanded=${this.openItems}
34
- aria-haspopup="true"
35
- style=${d.o(this.textTransformStyle)}
36
- >
37
- <span>${this.selectedItemText}</span>
38
- ${this.iconTemplate}
39
- </button>
40
- `:e.E}get itemsDropdownTemplate(){return this.shouldShowItemsDropdownButton?e.x`
30
+ ></ds-icon-button>`:c.uiKitHtml`<ds-button
31
+ class="items-dropdown-button"
32
+ variant="secondary"
33
+ size=${f.RESPONSIVE_BUTTON_SIZE}
34
+ icon-name=${this.openItems?`arrow-down`:`arrow-up`}
35
+ icon-position="right"
36
+ @click=${this.toggleItemsDropdown}
37
+ aria-expanded=${this.openItems}
38
+ aria-haspopup="true"
39
+ ><span>${this.selectedItemText}</span></ds-button>`:e.E}get itemsDropdownTemplate(){return this.shouldShowItemsDropdownButton?e.x`
41
40
  <div
42
41
  class=${l.e({gutter:!0,"dropdown-container":!0,"items-dropdown":!0,open:this.openItems})}
43
42
  role="menu"
44
43
  aria-hidden=${!this.openItems}
45
44
  ?inert=${!this.openItems}
46
45
  >
47
- <div class="dropdown ds-blur" style=${d.o(this.textTransformStyle)}>
46
+ <div class="dropdown ds-blur">
48
47
  <slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
49
48
  </div>
50
49
  </div>
@@ -52,7 +51,7 @@ const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/l
52
51
  class="nav-arrow"
53
52
  data-aria-label="open actions dropdown"
54
53
  @click=${this.toggleActionsDropdown}
55
- size="medium"
54
+ size=${f.RESPONSIVE_BUTTON_SIZE}
56
55
  icon-name="triple-dot-v"
57
56
  ></ds-icon-button>`:e.E}get actionsDropdownTemplate(){return this.shouldShowActionsDropdownButton?e.x`
58
57
  <div
@@ -61,8 +60,8 @@ const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/l
61
60
  aria-hidden=${!this.openCtas}
62
61
  ?inert=${!this.openCtas}
63
62
  >
64
- <div class="dropdown ds-blur" style=${d.o(this.textTransformStyle)}>
63
+ <div class="dropdown ds-blur">
65
64
  <slot name="actions"></slot>
66
65
  </div>
67
66
  </div>
68
- `:e.E}get backdropTemplate(){return!this.openItems&&!this.openCtas?e.E:e.x`<div class="dropdown-backdrop" @click=${this.closeDropdowns}></div>`}};a.__decorate([t.n({type:String,attribute:`dropdown-button-text`})],p.prototype,`dropdownButtonText`,void 0),a.__decorate([t.n({type:Number,attribute:`selected-index`})],p.prototype,`selectedIndex`,void 0),a.__decorate([t.n({type:String,attribute:`text-transform`})],p.prototype,`textTransform`,void 0),a.__decorate([t.n({type:Boolean,attribute:`keep-dropdown-button-text`})],p.prototype,`keepDropdownButtonText`,void 0),a.__decorate([t.n({type:String,attribute:`items-mode`})],p.prototype,`itemsMode`,void 0),a.__decorate([t.n({type:String,attribute:`actions-mode`})],p.prototype,`actionsMode`,void 0),a.__decorate([n.r()],p.prototype,`openItems`,void 0),a.__decorate([n.r()],p.prototype,`openCtas`,void 0),a.__decorate([n.r()],p.prototype,`hasScrollLeft`,void 0),a.__decorate([n.r()],p.prototype,`hasScrollRight`,void 0),a.__decorate([i.o({slot:`items`})],p.prototype,`items`,void 0),a.__decorate([i.o({slot:`actions`})],p.prototype,`ctas`,void 0),a.__decorate([r.e(`.items-container`)],p.prototype,`itemsContainer`,void 0),p=a.__decorate([s.customUiKitElement(`ds-secondary-navigation`)],p);
67
+ `:e.E}get backdropTemplate(){return!this.openItems&&!this.openCtas?e.E:e.x`<div class="dropdown-backdrop" @click=${this.closeDropdowns}></div>`}};a.__decorate([t.n({type:String,attribute:`dropdown-button-text`})],p.prototype,`dropdownButtonText`,void 0),a.__decorate([t.n({type:Number,attribute:`selected-index`})],p.prototype,`selectedIndex`,void 0),a.__decorate([t.n({type:Boolean,attribute:`keep-dropdown-button-text`})],p.prototype,`keepDropdownButtonText`,void 0),a.__decorate([t.n({type:String,attribute:`items-mode`})],p.prototype,`itemsMode`,void 0),a.__decorate([t.n({type:String,attribute:`actions-mode`})],p.prototype,`actionsMode`,void 0),a.__decorate([n.r()],p.prototype,`openItems`,void 0),a.__decorate([n.r()],p.prototype,`openCtas`,void 0),a.__decorate([n.r()],p.prototype,`hasScrollLeft`,void 0),a.__decorate([n.r()],p.prototype,`hasScrollRight`,void 0),a.__decorate([i.o({slot:`items`})],p.prototype,`items`,void 0),a.__decorate([i.o({slot:`actions`})],p.prototype,`ctas`,void 0),a.__decorate([r.e(`.items-container`)],p.prototype,`itemsContainer`,void 0),p=f=a.__decorate([s.customUiKitElement(`ds-secondary-navigation`)],p);
package/dist-react/cjs/components/ds-theme-provider/ds-theme-provider.cjs CHANGED
@@ -1,4 +1,4 @@
1
1
  const e=require(`../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.cjs`),t=require(`./themeContext.cjs`),n=require(`../../core/theme.constants.cjs`),r=require(`../../utils/PubSub.cjs`),i=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs`),a=require(`../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);const o=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs`),s=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const c=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),l=require(`../../decorators/customUiKitElement.cjs`),u=require(`../../utils/booleanConverter.cjs`),d=require(`../../styles/source/shared/fonts-config.cjs`);var f=class extends a.i{constructor(...e){super(...e),this.loadFonts=!0,this.loadStyles=!0,this.cssLoaded=!1,this.loadedFonts=new Set}updated(e){super.updated(e),e.has(`theme`)&&(r.pubSub.publish(`theme`,this.theme),sessionStorage?.setItem(n.THEME_STORAGE_KEY,this.theme),typeof FontFace<`u`&&document?.fonts&&this.loadThemeFonts(),this.loadThemeStyles().then(()=>{this.cssLoaded=!0,this.dispatchEvent(new CustomEvent(`ui-kit:ready`,{bubbles:!0,composed:!0}))}))}loadThemeFonts(){d.fontsConfig[this.theme]?.fonts.forEach(e=>{this.loadThemeFont(e)})}async loadThemeFont({weight:e,name:t,file:n}){if(!this.loadFonts)return Promise.resolve();let r=`${t}-${e}`;if(this.loadedFonts.has(r))return;let i=new FontFace(t,`url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.woff2') format('woff2'),
2
2
  url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.woff') format('woff'),
3
3
  url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.ttf') format('truetype'),
4
- url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.otf') format('opentype')`,{style:`normal`,weight:e,display:`swap`});try{await i.load(),document.fonts.add(i),this.loadedFonts.add(r)}catch(n){console.error(`Error loading "${t}" font with "${e}" weight:`,n)}}loadThemeStyles(){return this.loadStyles?new Promise((e,t)=>{let n=`/2.0.0-canary.137`,r=`https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${r}"]`))e();else{let i=`ui-kit-theme-${n}`,a=document.getElementById(i),o=document.createElement(`link`);o.id=i,o.rel=`stylesheet`,o.href=r,o.onload=()=>e(),o.onerror=()=>t(Error(`Failed to load theme CSS: ${r}`)),document.head.appendChild(o),a?.remove()}}):Promise.resolve()}render(){return this.cssLoaded?i.x`<slot></slot>`:i.E}};c.__decorate([o.n({type:Boolean,converter:u.booleanConverter,attribute:`load-fonts`})],f.prototype,`loadFonts`,void 0),c.__decorate([o.n({type:Boolean,converter:u.booleanConverter,attribute:`load-styles`})],f.prototype,`loadStyles`,void 0),c.__decorate([e.e({context:t.themeContext}),o.n({type:String})],f.prototype,`theme`,void 0),c.__decorate([s.r()],f.prototype,`cssLoaded`,void 0),c.__decorate([s.r()],f.prototype,`loadedFonts`,void 0),f=c.__decorate([l.customUiKitElement(`ds-theme-provider`)],f);
4
+ url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.otf') format('opentype')`,{style:`normal`,weight:e,display:`swap`});try{await i.load(),document.fonts.add(i),this.loadedFonts.add(r)}catch(n){console.error(`Error loading "${t}" font with "${e}" weight:`,n)}}loadThemeStyles(){return this.loadStyles?new Promise((e,t)=>{let n=`/2.0.0-canary.139`,r=`https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${r}"]`))e();else{let i=`ui-kit-theme-${n}`,a=document.getElementById(i),o=document.createElement(`link`);o.id=i,o.rel=`stylesheet`,o.href=r,o.onload=()=>e(),o.onerror=()=>t(Error(`Failed to load theme CSS: ${r}`)),document.head.appendChild(o),a?.remove()}}):Promise.resolve()}render(){return this.cssLoaded?i.x`<slot></slot>`:i.E}};c.__decorate([o.n({type:Boolean,converter:u.booleanConverter,attribute:`load-fonts`})],f.prototype,`loadFonts`,void 0),c.__decorate([o.n({type:Boolean,converter:u.booleanConverter,attribute:`load-styles`})],f.prototype,`loadStyles`,void 0),c.__decorate([e.e({context:t.themeContext}),o.n({type:String})],f.prototype,`theme`,void 0),c.__decorate([s.r()],f.prototype,`cssLoaded`,void 0),c.__decorate([s.r()],f.prototype,`loadedFonts`,void 0),f=c.__decorate([l.customUiKitElement(`ds-theme-provider`)],f);
package/dist-react/cjs/decorators/customUiKitElement.cjs CHANGED
@@ -1 +1 @@
1
- const e=require(`../utils/version.cjs`);function t(t,n){return function(r){if(!r?.prototype)throw TypeError(`@customUiKitElement requires a class that extends HTMLElement.`);let i=`${t}${e.VERSION_TAG_SUFFIX}`;if(globalThis?.customElements?.get(i))return;let a=n?.skipTagAsComponentName?[]:[t];Array.isArray(n?.extendComponentNames)&&(a=[...n.extendComponentNames,...a]),globalThis?.customElements?.define?.(i,class extends r{static{this.componentName=a}connectedCallback(){r.prototype.connectedCallback?.call(this),this.setAttribute(`data-ui-kit-version`,`2.0.0-canary.137`)}})}}exports.customUiKitElement=t;
1
+ const e=require(`../utils/version.cjs`);function t(t,n){return function(r){if(!r?.prototype)throw TypeError(`@customUiKitElement requires a class that extends HTMLElement.`);let i=`${t}${e.VERSION_TAG_SUFFIX}`;if(globalThis?.customElements?.get(i))return;let a=n?.skipTagAsComponentName?[]:[t];Array.isArray(n?.extendComponentNames)&&(a=[...n.extendComponentNames,...a]),globalThis?.customElements?.define?.(i,class extends r{static{this.componentName=a}connectedCallback(){r.prototype.connectedCallback?.call(this),this.setAttribute(`data-ui-kit-version`,`2.0.0-canary.139`)}})}}exports.customUiKitElement=t;
package/dist-react/cjs/utils/IconsManager.cjs CHANGED
@@ -1 +1 @@
1
- const e=require(`../core/theme.constants.cjs`),t=require(`./PubSub.cjs`);var n=class{constructor(){this.icons={},this.handleChangeTheme=e=>{if(this.theme===e)return;this.theme=e;let t=Object.keys(this.icons);this.icons={},t.forEach(e=>this.fetchIcon(e))},this.fetchIcon=async(t,n={})=>{let r=typeof sessionStorage<`u`?sessionStorage?.getItem(e.THEME_STORAGE_KEY):null;!this.theme&&r&&(this.theme=r);let i=this.icons[t];if(i)return await i;let a=this.loadIcon(t,n).catch(e=>{throw delete this.icons[t],e});return this.icons[t]=a,a},this.loadIcon=(e,{cache:t=`force-cache`,...n})=>!this.theme||typeof fetch>`u`?Promise.resolve(`<svg class="ds-icon"></svg>`):fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`,{cache:t,...n}).then(e=>e.text()).catch(t=>{if(t?.name===`AbortError`)throw t;return console.error(`Failed to fetch icon "${e}":`,t),``}),t.pubSub.subscribe(`theme`,this.handleChangeTheme)}},r=Symbol.for(`@cupra/ui-kit/icons-manager/2.0.0-canary.137`),i=globalThis,a=i[r];a||(a=new n,Object.defineProperty(i,r,{value:a,writable:!1,configurable:!1,enumerable:!1}));var o=a;exports.iconsManager=o;
1
+ const e=require(`../core/theme.constants.cjs`),t=require(`./PubSub.cjs`);var n=class{constructor(){this.icons={},this.handleChangeTheme=e=>{if(this.theme===e)return;this.theme=e;let t=Object.keys(this.icons);this.icons={},t.forEach(e=>this.fetchIcon(e))},this.fetchIcon=async(t,n={})=>{let r=typeof sessionStorage<`u`?sessionStorage?.getItem(e.THEME_STORAGE_KEY):null;!this.theme&&r&&(this.theme=r);let i=this.icons[t];if(i)return await i;let a=this.loadIcon(t,n).catch(e=>{throw delete this.icons[t],e});return this.icons[t]=a,a},this.loadIcon=(e,{cache:t=`force-cache`,...n})=>!this.theme||typeof fetch>`u`?Promise.resolve(`<svg class="ds-icon"></svg>`):fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`,{cache:t,...n}).then(e=>e.text()).catch(t=>{if(t?.name===`AbortError`)throw t;return console.error(`Failed to fetch icon "${e}":`,t),``}),t.pubSub.subscribe(`theme`,this.handleChangeTheme)}},r=Symbol.for(`@cupra/ui-kit/icons-manager/2.0.0-canary.139`),i=globalThis,a=i[r];a||(a=new n,Object.defineProperty(i,r,{value:a,writable:!1,configurable:!1,enumerable:!1}));var o=a;exports.iconsManager=o;
package/dist-react/cjs/utils/PubSub.cjs CHANGED
@@ -1 +1 @@
1
- var e=class{constructor(){this.subscribers={},this.lastPublishedData={}}subscribe(e,t){return this.subscribers[e]||(this.subscribers[e]=[]),this.subscribers[e].push(t),this.lastPublishedData[e]}unsubscribe(e,t){this.subscribers[e]&&(this.subscribers[e]=this.subscribers[e].filter(e=>e!==t))}publish(e,t){this.lastPublishedData[e]=t,this.subscribers[e]&&this.subscribers[e].forEach(n=>{try{n(t)}catch(t){console.error(`Error in subscriber for event "${e}":`,t)}})}},t=Symbol.for(`@cupra/ui-kit/pubsub/2.0.0-canary.137`),n=globalThis,r=n[t];r||(r=new e,Object.defineProperty(n,t,{value:r,writable:!1,configurable:!1,enumerable:!1}));var i=r;exports.pubSub=i;
1
+ var e=class{constructor(){this.subscribers={},this.lastPublishedData={}}subscribe(e,t){return this.subscribers[e]||(this.subscribers[e]=[]),this.subscribers[e].push(t),this.lastPublishedData[e]}unsubscribe(e,t){this.subscribers[e]&&(this.subscribers[e]=this.subscribers[e].filter(e=>e!==t))}publish(e,t){this.lastPublishedData[e]=t,this.subscribers[e]&&this.subscribers[e].forEach(n=>{try{n(t)}catch(t){console.error(`Error in subscriber for event "${e}":`,t)}})}},t=Symbol.for(`@cupra/ui-kit/pubsub/2.0.0-canary.139`),n=globalThis,r=n[t];r||(r=new e,Object.defineProperty(n,t,{value:r,writable:!1,configurable:!1,enumerable:!1}));var i=r;exports.pubSub=i;
package/dist-react/cjs/utils/StylesRegistry/StylesRegistry.cjs CHANGED
@@ -1 +1 @@
1
- var e=require(`../concurrencyLimit.cjs`).concurrencyLimit(20),t=class t{constructor(){this.stylePromises=new Map,this.getStyles=async({componentName:t,theme:n})=>{if(!n||!t)return;let r=`https://ds-assets.cupra.com/2.0.0-canary.137/styles/${n}/components/${t}.css`,i=this.getCachedStyleSheetPromise({url:r});if(i)return i;let a=e(()=>this.fetchStyle({url:r})).then(e=>(e||this.stylePromises.delete(r),e));return this.stylePromises.set(r,a),this.stylePromises.get(r)}}async fetchStyle({url:e}){try{if(typeof fetch>`u`)return;let t=await fetch(e,{cache:`force-cache`});if(t.ok)return t.text()}catch(t){console.error(`Failed to fetch Style Sheet "${e}":`,t)}}getCachedStyleSheetPromise({url:e}){return this.stylePromises.get(e)}static getInstance(){return t.instance||=new t,t.instance}}.getInstance();exports.stylesRegistry=t;
1
+ var e=require(`../concurrencyLimit.cjs`).concurrencyLimit(20),t=class t{constructor(){this.stylePromises=new Map,this.getStyles=async({componentName:t,theme:n})=>{if(!n||!t)return;let r=`https://ds-assets.cupra.com/2.0.0-canary.139/styles/${n}/components/${t}.css`,i=this.getCachedStyleSheetPromise({url:r});if(i)return i;let a=e(()=>this.fetchStyle({url:r})).then(e=>(e||this.stylePromises.delete(r),e));return this.stylePromises.set(r,a),this.stylePromises.get(r)}}async fetchStyle({url:e}){try{if(typeof fetch>`u`)return;let t=await fetch(e,{cache:`force-cache`});if(t.ok)return t.text()}catch(t){console.error(`Failed to fetch Style Sheet "${e}":`,t)}}getCachedStyleSheetPromise({url:e}){return this.stylePromises.get(e)}static getInstance(){return t.instance||=new t,t.instance}}.getInstance();exports.stylesRegistry=t;
package/dist-react/cjs/utils/version.cjs CHANGED
@@ -1 +1 @@
1
- var e=`2.0.0-canary.137`,t=`--v${e.replaceAll(`.`,`-`)}`;exports.VERSION=e,exports.VERSION_TAG_SUFFIX=t;
1
+ var e=`2.0.0-canary.139`,t=`--v${e.replaceAll(`.`,`-`)}`;exports.VERSION=e,exports.VERSION_TAG_SUFFIX=t;
package/dist-react/esm/components/ds-secondary-navigation/ds-secondary-navigation.js CHANGED
@@ -13,14 +13,16 @@ import { uiKitHtml as l } from "../../utils/uiKitHtml.js";
13
13
  import { e as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
14
14
  import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
15
15
  import { ViewportMixin as d } from "../../mixins/ViewportMixin.js";
16
+ import "../ds-button/ds-button.js";
16
17
  import "../ds-icon-button/ds-icon-button.js";
17
- import { o as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/style-map.js";
18
- import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/style-map.js";
19
- import { commonStyles as p } from "./styles/common.styles.js";
18
+ import { commonStyles as f } from "./styles/common.styles.js";
20
19
  //#region src/components/ds-secondary-navigation/ds-secondary-navigation.ts
21
- var m = class extends d(s) {
20
+ var p, m = class extends d(s) {
21
+ static {
22
+ p = this;
23
+ }
22
24
  constructor(...e) {
23
- super(...e), this.dropdownButtonText = "Menu", this.textTransform = "none", this.keepDropdownButtonText = !1, this.itemsMode = "auto", this.actionsMode = "auto", this.openItems = !1, this.openCtas = !1, this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
25
+ super(...e), this.dropdownButtonText = "Menu", this.keepDropdownButtonText = !1, this.itemsMode = "auto", this.actionsMode = "auto", this.openItems = !1, this.openCtas = !1, this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
24
26
  this.handleScroll();
25
27
  }), this.handleScroll = () => {
26
28
  let e = this.itemsContainer?.scrollLeft + this.itemsContainer?.clientWidth;
@@ -28,7 +30,48 @@ var m = class extends d(s) {
28
30
  };
29
31
  }
30
32
  static {
31
- this.styles = [p];
33
+ this.styles = [f];
34
+ }
35
+ static {
36
+ this.RESPONSIVE_BUTTON_SIZE = JSON.stringify({
37
+ xs: "medium",
38
+ s: "medium",
39
+ m: "medium",
40
+ l: "medium",
41
+ xl: "large",
42
+ xxl: "large"
43
+ });
44
+ }
45
+ static {
46
+ this.VIEWPORT_ORDER = [
47
+ "xs",
48
+ "s",
49
+ "m",
50
+ "l",
51
+ "xl",
52
+ "xxl"
53
+ ];
54
+ }
55
+ static resolveResponsive(e, t, n) {
56
+ let r;
57
+ try {
58
+ r = JSON.parse(e);
59
+ } catch {
60
+ return e;
61
+ }
62
+ if (typeof r != "object" || !r || Array.isArray(r)) return e;
63
+ let i = r, a = p.VIEWPORT_ORDER.indexOf(t);
64
+ for (let e = a; e >= 0; e--) {
65
+ let t = p.VIEWPORT_ORDER[e];
66
+ if (t in i) return i[t];
67
+ }
68
+ return n;
69
+ }
70
+ get resolvedItemsMode() {
71
+ return p.resolveResponsive(this.itemsMode, this.viewport, "auto");
72
+ }
73
+ get resolvedActionsMode() {
74
+ return p.resolveResponsive(this.actionsMode, this.viewport, "auto");
32
75
  }
33
76
  updated(e) {
34
77
  super.updated(e), (e.has("viewport") || e.has("actionsMode")) && this.updateCtas(), e.has("selectedIndex") && this.updateSelectedItem();
@@ -90,18 +133,15 @@ var m = class extends d(s) {
90
133
  })), this.closeDropdowns();
91
134
  }
92
135
  }
93
- get textTransformStyle() {
94
- return { textTransform: this.textTransform };
95
- }
96
136
  get shouldShowItemsInline() {
97
- return this.itemsMode === "inline" ? !0 : this.itemsMode === "select" || this.itemsMode === "icon-button" ? !1 : [
137
+ return this.resolvedItemsMode === "inline" ? !0 : this.resolvedItemsMode === "select" || this.resolvedItemsMode === "icon-button" ? !1 : [
98
138
  "l",
99
139
  "xl",
100
140
  "xxl"
101
141
  ].includes(this.viewport);
102
142
  }
103
143
  get shouldShowItemsDropdownButton() {
104
- return this.itemsMode === "inline" ? !1 : this.itemsMode === "select" || this.itemsMode === "icon-button" ? !0 : [
144
+ return this.resolvedItemsMode === "inline" ? !1 : this.resolvedItemsMode === "select" || this.resolvedItemsMode === "icon-button" ? !0 : [
105
145
  "xxs",
106
146
  "xs",
107
147
  "s",
@@ -109,8 +149,8 @@ var m = class extends d(s) {
109
149
  ].includes(this.viewport);
110
150
  }
111
151
  get shouldShowActionsInline() {
112
- if (this.actionsMode === "inline") return !0;
113
- if (this.actionsMode === "dropdown") return !1;
152
+ if (this.resolvedActionsMode === "inline") return !0;
153
+ if (this.resolvedActionsMode === "dropdown") return !1;
114
154
  let e = [
115
155
  "xxs",
116
156
  "xs",
@@ -124,7 +164,7 @@ var m = class extends d(s) {
124
164
  ].includes(this.viewport) || e && !this.shouldShowActionsDropdownButton;
125
165
  }
126
166
  get shouldShowActionsDropdownButton() {
127
- return this.actionsMode === "inline" ? !1 : this.actionsMode === "dropdown" ? !0 : [
167
+ return this.resolvedActionsMode === "inline" ? !1 : this.resolvedActionsMode === "dropdown" ? !0 : [
128
168
  "xxs",
129
169
  "xs",
130
170
  "s"
@@ -139,16 +179,16 @@ var m = class extends d(s) {
139
179
  ${this.itemsDropdownButtonTemplate}
140
180
  ${this.actionsTemplate}
141
181
  ${this.actionsDropdownButtonTemplate}
182
+ ${this.itemsDropdownTemplate}
183
+ ${this.actionsDropdownTemplate}
142
184
  </nav>
143
- ${this.itemsDropdownTemplate}
144
- ${this.actionsDropdownTemplate}
145
185
  </div>
146
186
  `;
147
187
  }
148
188
  get itemsTemplate() {
149
189
  return this.shouldShowItemsInline ? t`
150
190
  <div class="items-container">
151
- <div style=${f(this.textTransformStyle)}>
191
+ <div>
152
192
  <slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
153
193
  </div>
154
194
  </div>
@@ -156,7 +196,7 @@ var m = class extends d(s) {
156
196
  }
157
197
  get actionsTemplate() {
158
198
  return this.shouldShowActionsInline ? t`
159
- <div class="actions-container" style=${f(this.textTransformStyle)}>
199
+ <div class="actions-container">
160
200
  <slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
161
201
  </div>
162
202
  ` : e;
@@ -164,28 +204,24 @@ var m = class extends d(s) {
164
204
  get iconTemplate() {
165
205
  return l`<ds-icon class="icon" icon-name=${this.openItems ? "arrow-down" : "arrow-up"} size="20"></ds-icon>`;
166
206
  }
167
- get listIconTemplate() {
168
- return l`<ds-icon class="icon" icon-name="list-line" size="20"></ds-icon>`;
169
- }
170
207
  get itemsDropdownButtonTemplate() {
171
- return this.shouldShowItemsDropdownButton ? this.itemsMode === "icon-button" ? l`<ds-icon-button
208
+ return this.shouldShowItemsDropdownButton ? this.resolvedItemsMode === "icon-button" ? l`<ds-icon-button
172
209
  class="items-list-button"
173
210
  data-aria-label="open items dropdown"
174
211
  @click=${this.toggleItemsDropdown}
175
- size="medium"
212
+ size=${p.RESPONSIVE_BUTTON_SIZE}
213
+ variant="secondary"
176
214
  icon-name="list-line"
177
- ></ds-icon-button>` : t`
178
- <button
179
- class="items-dropdown-button"
180
- @click=${this.toggleItemsDropdown}
181
- aria-expanded=${this.openItems}
182
- aria-haspopup="true"
183
- style=${f(this.textTransformStyle)}
184
- >
185
- <span>${this.selectedItemText}</span>
186
- ${this.iconTemplate}
187
- </button>
188
- ` : e;
215
+ ></ds-icon-button>` : l`<ds-button
216
+ class="items-dropdown-button"
217
+ variant="secondary"
218
+ size=${p.RESPONSIVE_BUTTON_SIZE}
219
+ icon-name=${this.openItems ? "arrow-down" : "arrow-up"}
220
+ icon-position="right"
221
+ @click=${this.toggleItemsDropdown}
222
+ aria-expanded=${this.openItems}
223
+ aria-haspopup="true"
224
+ ><span>${this.selectedItemText}</span></ds-button>` : e;
189
225
  }
190
226
  get itemsDropdownTemplate() {
191
227
  return this.shouldShowItemsDropdownButton ? t`
@@ -200,7 +236,7 @@ var m = class extends d(s) {
200
236
  aria-hidden=${!this.openItems}
201
237
  ?inert=${!this.openItems}
202
238
  >
203
- <div class="dropdown ds-blur" style=${f(this.textTransformStyle)}>
239
+ <div class="dropdown ds-blur">
204
240
  <slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
205
241
  </div>
206
242
  </div>
@@ -211,7 +247,7 @@ var m = class extends d(s) {
211
247
  class="nav-arrow"
212
248
  data-aria-label="open actions dropdown"
213
249
  @click=${this.toggleActionsDropdown}
214
- size="medium"
250
+ size=${p.RESPONSIVE_BUTTON_SIZE}
215
251
  icon-name="triple-dot-v"
216
252
  ></ds-icon-button>` : e;
217
253
  }
@@ -228,7 +264,7 @@ var m = class extends d(s) {
228
264
  aria-hidden=${!this.openCtas}
229
265
  ?inert=${!this.openCtas}
230
266
  >
231
- <div class="dropdown ds-blur" style=${f(this.textTransformStyle)}>
267
+ <div class="dropdown ds-blur">
232
268
  <slot name="actions"></slot>
233
269
  </div>
234
270
  </div>
@@ -245,9 +281,6 @@ o([n({
245
281
  type: Number,
246
282
  attribute: "selected-index"
247
283
  })], m.prototype, "selectedIndex", void 0), o([n({
248
- type: String,
249
- attribute: "text-transform"
250
- })], m.prototype, "textTransform", void 0), o([n({
251
284
  type: Boolean,
252
285
  attribute: "keep-dropdown-button-text"
253
286
  })], m.prototype, "keepDropdownButtonText", void 0), o([n({
@@ -256,5 +289,5 @@ o([n({
256
289
  })], m.prototype, "itemsMode", void 0), o([n({
257
290
  type: String,
258
291
  attribute: "actions-mode"
259
- })], m.prototype, "actionsMode", void 0), o([r()], m.prototype, "openItems", void 0), o([r()], m.prototype, "openCtas", void 0), o([r()], m.prototype, "hasScrollLeft", void 0), o([r()], m.prototype, "hasScrollRight", void 0), o([a({ slot: "items" })], m.prototype, "items", void 0), o([a({ slot: "actions" })], m.prototype, "ctas", void 0), o([i(".items-container")], m.prototype, "itemsContainer", void 0), m = o([c("ds-secondary-navigation")], m);
292
+ })], m.prototype, "actionsMode", void 0), o([r()], m.prototype, "openItems", void 0), o([r()], m.prototype, "openCtas", void 0), o([r()], m.prototype, "hasScrollLeft", void 0), o([r()], m.prototype, "hasScrollRight", void 0), o([a({ slot: "items" })], m.prototype, "items", void 0), o([a({ slot: "actions" })], m.prototype, "ctas", void 0), o([i(".items-container")], m.prototype, "itemsContainer", void 0), m = p = o([c("ds-secondary-navigation")], m);
260
293
  //#endregion
package/dist-react/esm/components/ds-theme-provider/ds-theme-provider.js CHANGED
@@ -50,7 +50,7 @@ var p = class extends o {
50
50
  }
51
51
  loadThemeStyles() {
52
52
  return this.loadStyles ? new Promise((e, t) => {
53
- let n = "/2.0.0-canary.137", r = `https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;
53
+ let n = "/2.0.0-canary.139", r = `https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;
54
54
  if (document.head.querySelector(`link[href="${r}"]`)) e();
55
55
  else {
56
56
  let i = `ui-kit-theme-${n}`, a = document.getElementById(i), o = document.createElement("link");
package/dist-react/esm/decorators/customUiKitElement.js CHANGED
@@ -11,7 +11,7 @@ function t(t, n) {
11
11
  this.componentName = a;
12
12
  }
13
13
  connectedCallback() {
14
- r.prototype.connectedCallback?.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.137");
14
+ r.prototype.connectedCallback?.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.139");
15
15
  }
16
16
  });
17
17
  };
package/dist-react/esm/utils/IconsManager.js CHANGED
@@ -25,7 +25,7 @@ var n = class {
25
25
  return console.error(`Failed to fetch icon "${e}":`, t), "";
26
26
  }), t.subscribe("theme", this.handleChangeTheme);
27
27
  }
28
- }, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.137"), i = globalThis, a = i[r];
28
+ }, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.139"), i = globalThis, a = i[r];
29
29
  a || (a = new n(), Object.defineProperty(i, r, {
30
30
  value: a,
31
31
  writable: !1,
package/dist-react/esm/utils/PubSub.js CHANGED
@@ -18,7 +18,7 @@ var e = class {
18
18
  }
19
19
  });
20
20
  }
21
- }, t = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.137"), n = globalThis, r = n[t];
21
+ }, t = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.139"), n = globalThis, r = n[t];
22
22
  r || (r = new e(), Object.defineProperty(n, t, {
23
23
  value: r,
24
24
  writable: !1,
package/dist-react/esm/utils/StylesRegistry/StylesRegistry.js CHANGED
@@ -4,7 +4,7 @@ var t = e(20), n = class e {
4
4
  constructor() {
5
5
  this.stylePromises = /* @__PURE__ */ new Map(), this.getStyles = async ({ componentName: e, theme: n }) => {
6
6
  if (!n || !e) return;
7
- let r = `https://ds-assets.cupra.com/2.0.0-canary.137/styles/${n}/components/${e}.css`, i = this.getCachedStyleSheetPromise({ url: r });
7
+ let r = `https://ds-assets.cupra.com/2.0.0-canary.139/styles/${n}/components/${e}.css`, i = this.getCachedStyleSheetPromise({ url: r });
8
8
  if (i) return i;
9
9
  let a = t(() => this.fetchStyle({ url: r })).then((e) => (e || this.stylePromises.delete(r), e));
10
10
  return this.stylePromises.set(r, a), this.stylePromises.get(r);
package/dist-react/esm/utils/version.js CHANGED
@@ -1,4 +1,4 @@
1
1
  //#region src/utils/version.ts
2
- var e = "2.0.0-canary.137", t = `--v${e.replaceAll(".", "-")}`;
2
+ var e = "2.0.0-canary.139", t = `--v${e.replaceAll(".", "-")}`;
3
3
  //#endregion
4
4
  export { e as VERSION, t as VERSION_TAG_SUFFIX };
package/dist-react/types/components/ds-secondary-navigation/ds-secondary-navigation.d.ts CHANGED
@@ -1,21 +1,26 @@
1
1
  import { UiKitElement } from '../base/UiKitElement.ts';
2
+ import '../ds-button/ds-button.ts';
2
3
  import '../ds-icon-button/ds-icon-button.ts';
3
4
  import '../ds-icon/ds-icon.ts';
4
5
  import { type PropertyValues } from 'lit';
5
- import type { ActionsMode, DsSecondaryNavigationAttrs, ItemsMode } from './ds-secondary-navigation.types';
6
+ import type { DsSecondaryNavigationAttrs } from './ds-secondary-navigation.types';
6
7
  declare const DsSecondaryNavigation_base: (new (...args: any[]) => import("../../mixins/ViewportMixin.ts").ViewportInterface) & typeof UiKitElement;
7
8
  export declare class DsSecondaryNavigation extends DsSecondaryNavigation_base {
8
9
  static styles: import("lit").CSSResult[];
9
10
  dropdownButtonText: DsSecondaryNavigationAttrs['dropdown-button-text'];
10
11
  selectedIndex: DsSecondaryNavigationAttrs['selected-index'];
11
- textTransform: DsSecondaryNavigationAttrs['text-transform'];
12
12
  keepDropdownButtonText: DsSecondaryNavigationAttrs['keep-dropdown-button-text'];
13
- itemsMode: ItemsMode;
14
- actionsMode: ActionsMode;
13
+ itemsMode: string;
14
+ actionsMode: string;
15
15
  private openItems;
16
16
  private openCtas;
17
17
  private hasScrollLeft;
18
18
  private hasScrollRight;
19
+ private static readonly RESPONSIVE_BUTTON_SIZE;
20
+ private static readonly VIEWPORT_ORDER;
21
+ private static resolveResponsive;
22
+ private get resolvedItemsMode();
23
+ private get resolvedActionsMode();
19
24
  private items;
20
25
  private ctas;
21
26
  private itemsContainer;
@@ -34,7 +39,6 @@ export declare class DsSecondaryNavigation extends DsSecondaryNavigation_base {
34
39
  private updateSelectedItem;
35
40
  private updateCtas;
36
41
  private handleItemClick;
37
- private get textTransformStyle();
38
42
  private get shouldShowItemsInline();
39
43
  private get shouldShowItemsDropdownButton();
40
44
  private get shouldShowActionsInline();
@@ -43,7 +47,6 @@ export declare class DsSecondaryNavigation extends DsSecondaryNavigation_base {
43
47
  private get itemsTemplate();
44
48
  private get actionsTemplate();
45
49
  protected get iconTemplate(): import("lit").HTMLTemplateResult;
46
- protected get listIconTemplate(): import("lit").HTMLTemplateResult;
47
50
  private get itemsDropdownButtonTemplate();
48
51
  private get itemsDropdownTemplate();
49
52
  private get actionsDropdownButtonTemplate();
package/dist-react/types/components/ds-secondary-navigation/ds-secondary-navigation.types.d.ts CHANGED
@@ -1,11 +1,13 @@
1
1
  import { CommonAttrs } from '../../types/types';
2
2
  export type ItemsMode = 'auto' | 'inline' | 'select' | 'icon-button';
3
3
  export type ActionsMode = 'auto' | 'inline' | 'dropdown';
4
+ export type ViewportKey = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
5
+ export type ResponsiveItemsMode = Partial<Record<ViewportKey, ItemsMode>>;
6
+ export type ResponsiveActionsMode = Partial<Record<ViewportKey, ActionsMode>>;
4
7
  export type DsSecondaryNavigationAttrs = {
5
8
  'dropdown-button-text'?: string;
6
9
  'selected-index'?: number;
7
- 'text-transform'?: string;
8
10
  'keep-dropdown-button-text'?: boolean;
9
- 'items-mode'?: ItemsMode;
10
- 'actions-mode'?: ActionsMode;
11
+ 'items-mode'?: ItemsMode | string;
12
+ 'actions-mode'?: ActionsMode | string;
11
13
  } & CommonAttrs;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cupra/ui-kit",
3
- "version": "2.0.0-canary.137",
3
+ "version": "2.0.0-canary.139",
4
4
  "description": "Web components library",
5
5
  "author": "SEAT S.A.",
6
6
  "license": "SEAT S.A. Library EULA 1.0",