@solid-design-system/components 3.22.12 → 3.22.13

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 (144) hide show
  1. package/dist/custom-elements.json +1 -1
  2. package/dist/versioned-components/es/accordion-group.js +1 -1
  3. package/dist/versioned-components/es/accordion.js +1 -1
  4. package/dist/versioned-components/es/audio.js +1 -1
  5. package/dist/versioned-components/es/badge.js +1 -1
  6. package/dist/versioned-components/es/brandshape.js +1 -1
  7. package/dist/versioned-components/es/button.js +1 -1
  8. package/dist/versioned-components/es/carousel-item.js +1 -1
  9. package/dist/versioned-components/es/carousel.js +3 -3
  10. package/dist/versioned-components/es/checkbox-group.js +1 -1
  11. package/dist/versioned-components/es/checkbox.js +1 -1
  12. package/dist/versioned-components/es/dialog.js +1 -1
  13. package/dist/versioned-components/es/divider.js +1 -1
  14. package/dist/versioned-components/es/drawer.js +1 -1
  15. package/dist/versioned-components/es/dropdown.js +1 -1
  16. package/dist/versioned-components/es/expandable.js +1 -1
  17. package/dist/versioned-components/es/flipcard.js +1 -1
  18. package/dist/versioned-components/es/form.js +1 -1
  19. package/dist/versioned-components/es/header.js +1 -1
  20. package/dist/versioned-components/es/icon.js +1 -1
  21. package/dist/versioned-components/es/include.js +1 -1
  22. package/dist/versioned-components/es/input.js +1 -1
  23. package/dist/versioned-components/es/link.js +1 -1
  24. package/dist/versioned-components/es/map-marker.js +1 -1
  25. package/dist/versioned-components/es/navigation-item.js +1 -1
  26. package/dist/versioned-components/es/notification.js +1 -1
  27. package/dist/versioned-components/es/option.js +1 -1
  28. package/dist/versioned-components/es/quickfact.js +1 -1
  29. package/dist/versioned-components/es/radio-button.js +1 -1
  30. package/dist/versioned-components/es/radio-group.js +1 -1
  31. package/dist/versioned-components/es/radio.js +1 -1
  32. package/dist/versioned-components/es/scrollable.js +1 -1
  33. package/dist/versioned-components/es/select.js +3 -3
  34. package/dist/versioned-components/es/solid-components2.js +1 -1
  35. package/dist/versioned-components/es/spinner.js +1 -1
  36. package/dist/versioned-components/es/step-group.js +1 -1
  37. package/dist/versioned-components/es/step.js +1 -1
  38. package/dist/versioned-components/es/switch.js +1 -1
  39. package/dist/versioned-components/es/tab-group.js +1 -1
  40. package/dist/versioned-components/es/tab-panel.js +1 -1
  41. package/dist/versioned-components/es/tab.js +1 -1
  42. package/dist/versioned-components/es/tag.js +1 -1
  43. package/dist/versioned-components/es/teaser-media.js +1 -1
  44. package/dist/versioned-components/es/teaser.js +1 -1
  45. package/dist/versioned-components/es/textarea.js +1 -1
  46. package/dist/versioned-components/es/tooltip.js +2 -2
  47. package/dist/versioned-components/es/video.js +1 -1
  48. package/dist/versioned-package/_components/button-group/button-group.d.ts +1 -1
  49. package/dist/versioned-package/_components/button-group/button-group.js +11 -11
  50. package/dist/versioned-package/components/accordion/accordion.d.ts +1 -1
  51. package/dist/versioned-package/components/accordion/accordion.js +2 -2
  52. package/dist/versioned-package/components/accordion-group/accordion-group.d.ts +1 -1
  53. package/dist/versioned-package/components/accordion-group/accordion-group.js +3 -3
  54. package/dist/versioned-package/components/audio/audio.d.ts +1 -1
  55. package/dist/versioned-package/components/audio/audio.js +6 -6
  56. package/dist/versioned-package/components/badge/badge.d.ts +1 -1
  57. package/dist/versioned-package/components/badge/badge.js +1 -1
  58. package/dist/versioned-package/components/brandshape/brandshape.d.ts +1 -1
  59. package/dist/versioned-package/components/brandshape/brandshape.js +1 -1
  60. package/dist/versioned-package/components/button/button.d.ts +1 -1
  61. package/dist/versioned-package/components/button/button.js +4 -4
  62. package/dist/versioned-package/components/carousel/carousel.d.ts +1 -1
  63. package/dist/versioned-package/components/carousel/carousel.js +6 -6
  64. package/dist/versioned-package/components/carousel-item/carousel-item.d.ts +1 -1
  65. package/dist/versioned-package/components/carousel-item/carousel-item.js +1 -1
  66. package/dist/versioned-package/components/checkbox/checkbox.d.ts +1 -1
  67. package/dist/versioned-package/components/checkbox/checkbox.js +3 -3
  68. package/dist/versioned-package/components/checkbox-group/checkbox-group.d.ts +1 -1
  69. package/dist/versioned-package/components/checkbox-group/checkbox-group.js +5 -5
  70. package/dist/versioned-package/components/dialog/dialog.d.ts +1 -1
  71. package/dist/versioned-package/components/dialog/dialog.js +2 -2
  72. package/dist/versioned-package/components/divider/divider.d.ts +1 -1
  73. package/dist/versioned-package/components/divider/divider.js +2 -2
  74. package/dist/versioned-package/components/drawer/drawer.d.ts +1 -1
  75. package/dist/versioned-package/components/drawer/drawer.js +2 -2
  76. package/dist/versioned-package/components/dropdown/dropdown.d.ts +1 -1
  77. package/dist/versioned-package/components/dropdown/dropdown.js +8 -8
  78. package/dist/versioned-package/components/expandable/expandable.d.ts +1 -1
  79. package/dist/versioned-package/components/expandable/expandable.js +2 -2
  80. package/dist/versioned-package/components/flipcard/flipcard.d.ts +1 -1
  81. package/dist/versioned-package/components/flipcard/flipcard.js +1 -1
  82. package/dist/versioned-package/components/header/header.d.ts +1 -1
  83. package/dist/versioned-package/components/header/header.js +4 -4
  84. package/dist/versioned-package/components/icon/icon.d.ts +1 -1
  85. package/dist/versioned-package/components/icon/icon.js +1 -1
  86. package/dist/versioned-package/components/include/include.d.ts +1 -1
  87. package/dist/versioned-package/components/include/include.js +1 -1
  88. package/dist/versioned-package/components/input/input.d.ts +1 -1
  89. package/dist/versioned-package/components/input/input.js +3 -3
  90. package/dist/versioned-package/components/link/link.d.ts +1 -1
  91. package/dist/versioned-package/components/link/link.js +2 -2
  92. package/dist/versioned-package/components/map-marker/map-marker.d.ts +1 -1
  93. package/dist/versioned-package/components/map-marker/map-marker.js +1 -1
  94. package/dist/versioned-package/components/navigation-item/navigation-item.d.ts +1 -1
  95. package/dist/versioned-package/components/navigation-item/navigation-item.js +5 -5
  96. package/dist/versioned-package/components/notification/notification.d.ts +1 -1
  97. package/dist/versioned-package/components/notification/notification.js +5 -5
  98. package/dist/versioned-package/components/option/option.d.ts +1 -1
  99. package/dist/versioned-package/components/option/option.js +2 -2
  100. package/dist/versioned-package/components/popup/popup.d.ts +1 -1
  101. package/dist/versioned-package/components/popup/popup.js +1 -1
  102. package/dist/versioned-package/components/quickfact/quickfact.d.ts +1 -1
  103. package/dist/versioned-package/components/quickfact/quickfact.js +2 -2
  104. package/dist/versioned-package/components/radio/radio.d.ts +1 -1
  105. package/dist/versioned-package/components/radio/radio.js +2 -2
  106. package/dist/versioned-package/components/radio-button/radio-button.d.ts +1 -1
  107. package/dist/versioned-package/components/radio-button/radio-button.js +2 -2
  108. package/dist/versioned-package/components/radio-group/radio-group.d.ts +2 -2
  109. package/dist/versioned-package/components/radio-group/radio-group.js +13 -13
  110. package/dist/versioned-package/components/scrollable/scrollable.d.ts +1 -1
  111. package/dist/versioned-package/components/scrollable/scrollable.js +3 -3
  112. package/dist/versioned-package/components/select/select.d.ts +4 -4
  113. package/dist/versioned-package/components/select/select.js +25 -25
  114. package/dist/versioned-package/components/spinner/spinner.d.ts +1 -1
  115. package/dist/versioned-package/components/spinner/spinner.js +1 -1
  116. package/dist/versioned-package/components/step/step.d.ts +1 -1
  117. package/dist/versioned-package/components/step/step.js +2 -2
  118. package/dist/versioned-package/components/step-group/step-group.d.ts +1 -1
  119. package/dist/versioned-package/components/step-group/step-group.js +2 -2
  120. package/dist/versioned-package/components/switch/switch.d.ts +1 -1
  121. package/dist/versioned-package/components/switch/switch.js +1 -1
  122. package/dist/versioned-package/components/tab/tab.d.ts +1 -1
  123. package/dist/versioned-package/components/tab/tab.js +2 -2
  124. package/dist/versioned-package/components/tab-group/tab-group.d.ts +1 -1
  125. package/dist/versioned-package/components/tab-group/tab-group.js +13 -13
  126. package/dist/versioned-package/components/tab-panel/tab-panel.d.ts +1 -1
  127. package/dist/versioned-package/components/tab-panel/tab-panel.js +2 -2
  128. package/dist/versioned-package/components/tag/tag.d.ts +1 -1
  129. package/dist/versioned-package/components/tag/tag.js +2 -2
  130. package/dist/versioned-package/components/teaser/teaser.js +1 -1
  131. package/dist/versioned-package/components/teaser-media/teaser-media.js +1 -1
  132. package/dist/versioned-package/components/textarea/textarea.d.ts +1 -1
  133. package/dist/versioned-package/components/textarea/textarea.js +2 -2
  134. package/dist/versioned-package/components/tooltip/tooltip.d.ts +1 -1
  135. package/dist/versioned-package/components/tooltip/tooltip.js +5 -5
  136. package/dist/versioned-package/components/video/video.d.ts +1 -1
  137. package/dist/versioned-package/components/video/video.js +2 -2
  138. package/dist/versioned-package/internal/form.js +3 -3
  139. package/dist/versioned-package/styles/headline/headline.css.js +1 -1
  140. package/dist/versioned-package/utilities/autocomplete-config.js +4 -4
  141. package/dist/versioned-styles/solid-styles.css +1 -1
  142. package/dist/vscode.html-custom-data.json +45 -45
  143. package/dist/web-types.json +46 -46
  144. package/package.json +1 -1
@@ -1 +1 @@
1
- import{S as t,x as e,t as a,c as i,i as r,e as s,n as o,a as l}from"./solid-components2.js";import{w as n}from"./watch.js";var d=Object.defineProperty,b=Object.getOwnPropertyDescriptor,c=(t,e,a,i)=>{for(var r,s=i>1?void 0:i?b(e,a):e,o=t.length-1;o>=0;o--)(r=t[o])&&(s=(i?r(e,a,s):r(s))||s);return i&&s&&d(e,a,s),s};let h=0,p=class extends t{constructor(){super(...arguments),this.attrId=++h,this.componentId=`sd-3-22-12-tab-${this.attrId}`,this.variant="default",this.active=!1,this.disabled=!1,this.panel=""}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tab")}handleActiveChange(){this.setAttribute("aria-selected",this.active?"true":"false")}handleDisabledChange(){this.setAttribute("aria-disabled",this.disabled?"true":"false")}focus(t){this.tab.focus(t)}blur(){this.tab.blur()}render(){return this.id=this.id.length>0?this.id:this.componentId,e`<div part="base" class="${a("inline-flex min-w-max h-12 px-3 leading-none items-center justify-center whitespace-nowrap select-none cursor-pointer group relative focus-visible:focus-outline outline-2 !-outline-offset-2","container"===this.variant&&" rounded-[4px_4px_0_0]","container"===this.variant&&this.active&&"tab--active-container-border bg-white",this.disabled?"opacity-50 !cursor-not-allowed":"hover:bg-neutral-200")}" tabindex="${this.disabled?"-1":this.active?"0":"-1"}"><slot name="left" class="${a("pr-2",this.disabled?"text-neutral-500":"text-primary")}"></slot><slot class="${a(this.disabled?"text-neutral-500":"text-primary")}"></slot><div part="active-tab-indicator" class="${a((!this.active||this.disabled)&&"hidden","absolute bottom-0 h-1 bg-accent","default"===this.variant?"w-full":"w-3/4 group-hover:w-full transition-all duration-200 ease-in-out")}"></div><div part="hover-bottom-border" class="${a(!this.active&&!this.disabled&&"absolute w-full h-0.25 bottom-0 border-b border-neutral-400 invisible group-hover:visible")}"></div></div>`}};p.styles=[t.styles,i,r`:host{box-sizing:border-box;display:block}.tab--active-container-border::after{content:'';position:absolute;height:100%;width:100%;border-width:1px;--tw-border-opacity:1;border-color:rgb(var(--sd-color-neutral-400,195 195 195) / var(--tw-border-opacity));border-bottom:none;border-radius:4px 4px 0 0}`],c([s("[part=base]")],p.prototype,"tab",2),c([o({type:String,reflect:!0})],p.prototype,"variant",2),c([o({type:Boolean,reflect:!0})],p.prototype,"active",2),c([o({type:Boolean,reflect:!0})],p.prototype,"disabled",2),c([o({reflect:!0})],p.prototype,"panel",2),c([n("active")],p.prototype,"handleActiveChange",1),c([n("disabled")],p.prototype,"handleDisabledChange",1),p=c([l("sd-3-22-12-tab")],p);export{p as default};
1
+ import{S as t,x as e,t as a,c as i,i as r,e as s,n as o,a as l}from"./solid-components2.js";import{w as n}from"./watch.js";var d=Object.defineProperty,b=Object.getOwnPropertyDescriptor,c=(t,e,a,i)=>{for(var r,s=i>1?void 0:i?b(e,a):e,o=t.length-1;o>=0;o--)(r=t[o])&&(s=(i?r(e,a,s):r(s))||s);return i&&s&&d(e,a,s),s};let h=0,p=class extends t{constructor(){super(...arguments),this.attrId=++h,this.componentId=`sd-3-22-13-tab-${this.attrId}`,this.variant="default",this.active=!1,this.disabled=!1,this.panel=""}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tab")}handleActiveChange(){this.setAttribute("aria-selected",this.active?"true":"false")}handleDisabledChange(){this.setAttribute("aria-disabled",this.disabled?"true":"false")}focus(t){this.tab.focus(t)}blur(){this.tab.blur()}render(){return this.id=this.id.length>0?this.id:this.componentId,e`<div part="base" class="${a("inline-flex min-w-max h-12 px-3 leading-none items-center justify-center whitespace-nowrap select-none cursor-pointer group relative focus-visible:focus-outline outline-2 !-outline-offset-2","container"===this.variant&&" rounded-[4px_4px_0_0]","container"===this.variant&&this.active&&"tab--active-container-border bg-white",this.disabled?"opacity-50 !cursor-not-allowed":"hover:bg-neutral-200")}" tabindex="${this.disabled?"-1":this.active?"0":"-1"}"><slot name="left" class="${a("pr-2",this.disabled?"text-neutral-500":"text-primary")}"></slot><slot class="${a(this.disabled?"text-neutral-500":"text-primary")}"></slot><div part="active-tab-indicator" class="${a((!this.active||this.disabled)&&"hidden","absolute bottom-0 h-1 bg-accent","default"===this.variant?"w-full":"w-3/4 group-hover:w-full transition-all duration-200 ease-in-out")}"></div><div part="hover-bottom-border" class="${a(!this.active&&!this.disabled&&"absolute w-full h-0.25 bottom-0 border-b border-neutral-400 invisible group-hover:visible")}"></div></div>`}};p.styles=[t.styles,i,r`:host{box-sizing:border-box;display:block}.tab--active-container-border::after{content:'';position:absolute;height:100%;width:100%;border-width:1px;--tw-border-opacity:1;border-color:rgb(var(--sd-color-neutral-400,195 195 195) / var(--tw-border-opacity));border-bottom:none;border-radius:4px 4px 0 0}`],c([s("[part=base]")],p.prototype,"tab",2),c([o({type:String,reflect:!0})],p.prototype,"variant",2),c([o({type:Boolean,reflect:!0})],p.prototype,"active",2),c([o({type:Boolean,reflect:!0})],p.prototype,"disabled",2),c([o({reflect:!0})],p.prototype,"panel",2),c([n("active")],p.prototype,"handleActiveChange",1),c([n("disabled")],p.prototype,"handleDisabledChange",1),p=c([l("sd-3-22-13-tab")],p);export{p as default};
@@ -1 +1 @@
1
- import{S as e,t,i as r,e as s,n as o,a as i}from"./solid-components2.js";import{s as a,n as l}from"./static.js";import{o as d}from"./if-defined.js";var n=Object.defineProperty,p=Object.getOwnPropertyDescriptor,h=(e,t,r,s)=>{for(var o,i=s>1?void 0:s?p(t,r):t,a=e.length-1;a>=0;a--)(o=e[a])&&(i=(s?o(t,r,i):o(i))||i);return s&&i&&n(t,r,i),i};let b=class extends e{constructor(){super(...arguments),this.size="lg",this.selected=!1,this.toggleable=!1,this.removable=!1,this.disabled=!1,this.href=""}handleBlur(){this.emit("sd-blur")}handleFocus(){this.emit("sd-focus")}handleRemoveClick(){this.emit("sd-remove")}isLink(){return!!this.href}click(){this.tag.click()}focus(e){this.tag.focus(e)}blur(){this.tag.blur()}render(){const e=this.isLink(),r=e?a`a`:a`button`;return l`<${r} part="base" type="${d(e?void 0:"button")}" href="${d(e?this.href:void 0)}" rel="${d(e&&this.target?"noreferrer noopener":void 0)}" target="${d(e?this.target:void 0)}" download="${d(e?this.download:void 0)}" ?disabled="${d(e?void 0:this.disabled)}" aria-disabled="${this.disabled?"true":"false"}" aria-pressed="${d(this.toggleable?this.selected:void 0)}" tabindex="${this.disabled?"-1":"0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" class="${t("inline-flex border box-border rounded-full items-center leading-none whitespace-nowrap focus-visible:focus-outline",{lg:"h-8 text-base gap-2",sm:"h-6 text-sm gap-1"}[this.size],{lg:this.removable?"pl-4 pr-3 py-2":"px-4 py-2",sm:this.removable?"pl-3 pr-2 py-2":"px-3 py-[5px]"}[this.size],this.selected?"bg-primary border-primary text-white hover:bg-primary-500 hover:border-primary-500 disabled:bg-neutral-500 disabled:border-neutral-500":"border-primary text-primary hover:border-primary-500 hover:bg-neutral-100 hover:text-primary-500 disabled:border-neutral-500 disabled:text-neutral-500",this.disabled&&!e&&"cursor-not-allowed")}"><slot part="content"></slot>${this.removable?l`<slot part="removable-indicator" name="removable-indicator" @click="${this.handleRemoveClick}" class="${t({lg:"text-base",sm:"text-[12px]"}[this.size])}"><sd-3-22-12-icon library="system" name="close" label="remove"></sd-3-22-12-icon></slot>`:""}</${r}>`}};b.styles=[e.styles,r`:host{display:inline-block}`],h([s("a, button")],b.prototype,"tag",2),h([o({reflect:!0})],b.prototype,"size",2),h([o({type:Boolean,reflect:!0})],b.prototype,"selected",2),h([o({type:Boolean,reflect:!0})],b.prototype,"toggleable",2),h([o({type:Boolean,reflect:!0})],b.prototype,"removable",2),h([o({type:Boolean,reflect:!0})],b.prototype,"disabled",2),h([o()],b.prototype,"href",2),h([o()],b.prototype,"target",2),h([o()],b.prototype,"download",2),b=h([i("sd-3-22-12-tag")],b);export{b as default};
1
+ import{S as e,t,i as r,e as s,n as o,a as i}from"./solid-components2.js";import{s as a,n as l}from"./static.js";import{o as d}from"./if-defined.js";var n=Object.defineProperty,p=Object.getOwnPropertyDescriptor,h=(e,t,r,s)=>{for(var o,i=s>1?void 0:s?p(t,r):t,a=e.length-1;a>=0;a--)(o=e[a])&&(i=(s?o(t,r,i):o(i))||i);return s&&i&&n(t,r,i),i};let b=class extends e{constructor(){super(...arguments),this.size="lg",this.selected=!1,this.toggleable=!1,this.removable=!1,this.disabled=!1,this.href=""}handleBlur(){this.emit("sd-blur")}handleFocus(){this.emit("sd-focus")}handleRemoveClick(){this.emit("sd-remove")}isLink(){return!!this.href}click(){this.tag.click()}focus(e){this.tag.focus(e)}blur(){this.tag.blur()}render(){const e=this.isLink(),r=e?a`a`:a`button`;return l`<${r} part="base" type="${d(e?void 0:"button")}" href="${d(e?this.href:void 0)}" rel="${d(e&&this.target?"noreferrer noopener":void 0)}" target="${d(e?this.target:void 0)}" download="${d(e?this.download:void 0)}" ?disabled="${d(e?void 0:this.disabled)}" aria-disabled="${this.disabled?"true":"false"}" aria-pressed="${d(this.toggleable?this.selected:void 0)}" tabindex="${this.disabled?"-1":"0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" class="${t("inline-flex border box-border rounded-full items-center leading-none whitespace-nowrap focus-visible:focus-outline",{lg:"h-8 text-base gap-2",sm:"h-6 text-sm gap-1"}[this.size],{lg:this.removable?"pl-4 pr-3 py-2":"px-4 py-2",sm:this.removable?"pl-3 pr-2 py-2":"px-3 py-[5px]"}[this.size],this.selected?"bg-primary border-primary text-white hover:bg-primary-500 hover:border-primary-500 disabled:bg-neutral-500 disabled:border-neutral-500":"border-primary text-primary hover:border-primary-500 hover:bg-neutral-100 hover:text-primary-500 disabled:border-neutral-500 disabled:text-neutral-500",this.disabled&&!e&&"cursor-not-allowed")}"><slot part="content"></slot>${this.removable?l`<slot part="removable-indicator" name="removable-indicator" @click="${this.handleRemoveClick}" class="${t({lg:"text-base",sm:"text-[12px]"}[this.size])}"><sd-3-22-13-icon library="system" name="close" label="remove"></sd-3-22-13-icon></slot>`:""}</${r}>`}};b.styles=[e.styles,r`:host{display:inline-block}`],h([s("a, button")],b.prototype,"tag",2),h([o({reflect:!0})],b.prototype,"size",2),h([o({type:Boolean,reflect:!0})],b.prototype,"selected",2),h([o({type:Boolean,reflect:!0})],b.prototype,"toggleable",2),h([o({type:Boolean,reflect:!0})],b.prototype,"removable",2),h([o({type:Boolean,reflect:!0})],b.prototype,"disabled",2),h([o()],b.prototype,"href",2),h([o()],b.prototype,"target",2),h([o()],b.prototype,"download",2),b=h([i("sd-3-22-13-tag")],b);export{b as default};
@@ -1 +1 @@
1
- import{S as e,x as t,t as a,i as r,n as s,e as i,a as o}from"./solid-components2.js";import{H as l}from"./slot.js";var d=Object.defineProperty,n=Object.getOwnPropertyDescriptor,h=(e,t,a,r)=>{for(var s,i=r>1?void 0:r?n(t,a):t,o=e.length-1;o>=0;o--)(s=e[o])&&(i=(r?s(t,a,i):s(i))||i);return r&&i&&d(t,a,i),i};let p=class extends e{constructor(){super(...arguments),this.variant="white",this.hasSlotController=new l(this,"[default]","media","meta","headline","expandable")}render(){const e={"teaser-has-default":this.hasSlotController.test("[default]"),"teaser-has-media":this.hasSlotController.test("media"),"teaser-has-meta":this.hasSlotController.test("meta"),"teaser-has-headline":this.hasSlotController.test("headline"),"teaser-has-expandable":this.hasSlotController.test("expandable")};return t`<div class="relative flex flex-col group" part="base"><div class="${a("mb-4",!e["teaser-has-media"]&&"hidden")}" part="media"><slot name="media"></slot></div><div class="absolute flex flex-col justify-end h-full w-full pb-4"><div class="${a("flex-1","gradient-white"===this.variant&&"bg-gradient-to-t from-white/[.8] to-60%","gradient-dark"===this.variant&&"bg-gradient-to-t from-primary-800/[.6] to-60%")}"></div><div class="${a({white:"bg-white/[.8] group-hover:bg-white/90","neutral-100":"bg-neutral-100/[.8] group-hover:bg-neutral-100/90",primary:"bg-primary/[.8] text-white group-hover:bg-primary/90","primary-100":"bg-primary-100/[.8] group-hover:bg-primary-100/90","gradient-white":"bg-gradient-to-t from-white/90 to-white/[.8]","gradient-dark":"bg-gradient-to-t from-primary-800/75 to-primary-800/[.6] text-white"}[this.variant])}"><div class="flex-col text-left p-4" part="content"><div part="meta" class="${a("gap-2 mb-4",!e["teaser-has-meta"]&&"hidden")}"><slot name="meta"></slot></div><div part="headline" class="text-lg font-bold m-0"><slot name="headline">Always insert one semantically correct heading element here (e. g. &lt;h2>)</slot></div><div class="${a("hidden",e["teaser-has-expandable"]&&"h-[0px] invisible opacity-0 md:[transition:_height_0.2s_linear,opacity_0.1s_linear_0.1s] md:block md:group-hover:h-auto md:group-hover:my-4 md:group-hover:opacity-[100%] md:group-hover:visible")}" part="expandable" aria-hidden="true"><slot name="expandable"></slot></div><div part="main" class="${a(!e["teaser-has-default"]&&"hidden")}"><slot></slot></div></div></div></div></div>`}};p.styles=[e.styles,r`:host{display:block}::slotted(*){margin:var(--sd-spacing-0,0)}::slotted([slot=headline]){margin:var(--sd-spacing-0,0)!important;font-size:var(--sd-font-size-lg,1.25rem)!important;font-weight:700}`],h([s({reflect:!0})],p.prototype,"variant",2),h([i('[part="base"]')],p.prototype,"teaserMedia",2),p=h([o("sd-3-22-12-teaser-media")],p);export{p as default};
1
+ import{S as e,x as t,t as a,i as r,n as s,e as i,a as o}from"./solid-components2.js";import{H as l}from"./slot.js";var d=Object.defineProperty,n=Object.getOwnPropertyDescriptor,h=(e,t,a,r)=>{for(var s,i=r>1?void 0:r?n(t,a):t,o=e.length-1;o>=0;o--)(s=e[o])&&(i=(r?s(t,a,i):s(i))||i);return r&&i&&d(t,a,i),i};let p=class extends e{constructor(){super(...arguments),this.variant="white",this.hasSlotController=new l(this,"[default]","media","meta","headline","expandable")}render(){const e={"teaser-has-default":this.hasSlotController.test("[default]"),"teaser-has-media":this.hasSlotController.test("media"),"teaser-has-meta":this.hasSlotController.test("meta"),"teaser-has-headline":this.hasSlotController.test("headline"),"teaser-has-expandable":this.hasSlotController.test("expandable")};return t`<div class="relative flex flex-col group" part="base"><div class="${a("mb-4",!e["teaser-has-media"]&&"hidden")}" part="media"><slot name="media"></slot></div><div class="absolute flex flex-col justify-end h-full w-full pb-4"><div class="${a("flex-1","gradient-white"===this.variant&&"bg-gradient-to-t from-white/[.8] to-60%","gradient-dark"===this.variant&&"bg-gradient-to-t from-primary-800/[.6] to-60%")}"></div><div class="${a({white:"bg-white/[.8] group-hover:bg-white/90","neutral-100":"bg-neutral-100/[.8] group-hover:bg-neutral-100/90",primary:"bg-primary/[.8] text-white group-hover:bg-primary/90","primary-100":"bg-primary-100/[.8] group-hover:bg-primary-100/90","gradient-white":"bg-gradient-to-t from-white/90 to-white/[.8]","gradient-dark":"bg-gradient-to-t from-primary-800/75 to-primary-800/[.6] text-white"}[this.variant])}"><div class="flex-col text-left p-4" part="content"><div part="meta" class="${a("gap-2 mb-4",!e["teaser-has-meta"]&&"hidden")}"><slot name="meta"></slot></div><div part="headline" class="text-lg font-bold m-0"><slot name="headline">Always insert one semantically correct heading element here (e. g. &lt;h2>)</slot></div><div class="${a("hidden",e["teaser-has-expandable"]&&"h-[0px] invisible opacity-0 md:[transition:_height_0.2s_linear,opacity_0.1s_linear_0.1s] md:block md:group-hover:h-auto md:group-hover:my-4 md:group-hover:opacity-[100%] md:group-hover:visible")}" part="expandable" aria-hidden="true"><slot name="expandable"></slot></div><div part="main" class="${a(!e["teaser-has-default"]&&"hidden")}"><slot></slot></div></div></div></div></div>`}};p.styles=[e.styles,r`:host{display:block}::slotted(*){margin:var(--sd-spacing-0,0)}::slotted([slot=headline]){margin:var(--sd-spacing-0,0)!important;font-size:var(--sd-font-size-lg,1.25rem)!important;font-weight:700}`],h([s({reflect:!0})],p.prototype,"variant",2),h([i('[part="base"]')],p.prototype,"teaserMedia",2),p=h([o("sd-3-22-13-teaser-media")],p);export{p as default};
@@ -1 +1 @@
1
- import{S as t,x as e,t as i,i as r,n as a,e as s,a as o}from"./solid-components2.js";import{H as n}from"./slot.js";import{r as l}from"./state.js";var h=Object.defineProperty,d=Object.getOwnPropertyDescriptor,p=(t,e,i,r)=>{for(var a,s=r>1?void 0:r?d(e,i):e,o=t.length-1;o>=0;o--)(a=t[o])&&(s=(r?a(e,i,s):a(s))||s);return r&&s&&h(e,i,s),s};let c=class extends t{constructor(){super(...arguments),this.variant="white",this.breakpoint=448,this.inset=!1,this.hasSlotController=new n(this,"[default]","media","meta","headline")}connectedCallback(){super.connectedCallback(),0===this.breakpoint?this._orientation="horizontal":9999===this.breakpoint?this._orientation="vertical":window.ResizeObserver&&(this.resizeObserver=new ResizeObserver((()=>this.updateOrientation())),this.resizeObserver.observe(this))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver&&this.resizeObserver.disconnect()}updated(t){super.updated(t),t.has("breakpoint")&&this.updateOrientation()}updateOrientation(){this._orientation=this.offsetWidth>=this.breakpoint?"horizontal":"vertical"}render(){const t="white border-neutral-400"===this.variant||this.inset,r=this.hasSlotController.test("[default]"),a=this.hasSlotController.test("media"),s=this.hasSlotController.test("meta");return this.hasSlotController.test("headline"),e`<div class="${i("flex",{white:"bg-white","white border-neutral-400":"bg-white border border-neutral-400","neutral-100":"bg-neutral-100",primary:"bg-primary text-white","primary-100":"bg-primary-100"}[this.variant],"vertical"===this._orientation&&"flex-col","horizontal"===this._orientation&&"flex-row gap-8","horizontal"===this._orientation&&t&&"py-8 px-10")}" part="base"><div style="${"horizontal"===this._orientation?"width: var(--distribution-media, 100%);":""}" class="${i(!t&&"vertical"===this._orientation&&"mb-4",!a&&"hidden","white border-neutral-400"===this.variant&&"vertical"===this._orientation&&"mx-[-1px] mt-[-1px]")}" part="media"><slot name="media"></slot></div><div style="${"horizontal"===this._orientation?"width: var(--distribution-content, 100%); "+(t?"width: var(--distribution-content, calc(100% - 2rem));":""):""}" class="${i("flex flex-col text-left","horizontal"===this._orientation&&"flex flex-col","vertical"===this._orientation&&t&&"m-4")}" part="content"><div part="meta" class="${i("gap-2 mb-4",!s&&"hidden")}"><slot name="meta"></slot></div><div part="headline" class="${i("text-lg font-bold m-0","primary"===this.variant?"text-white":"text-black")}"><slot name="headline">Always insert one semantically correct heading element here (e. g. &lt;h2>)</slot></div><div part="main" class="${i(!r&&"hidden")}"><slot></slot></div></div></div>`}};c.styles=[t.styles,r`:host{display:block}::slotted(*){margin:var(--sd-spacing-0,0)}::slotted([slot=headline]){margin:var(--sd-spacing-0,0)!important;font-size:var(--sd-font-size-lg,1.25rem)!important;font-weight:700}`],p([a({reflect:!0})],c.prototype,"variant",2),p([a({reflect:!0,type:Number})],c.prototype,"breakpoint",2),p([a({type:Boolean,reflect:!0})],c.prototype,"inset",2),p([s('[part="base"]')],c.prototype,"teaser",2),p([l()],c.prototype,"_orientation",2),c=p([o("sd-3-22-12-teaser")],c);export{c as default};
1
+ import{S as t,x as e,t as i,i as r,n as a,e as s,a as o}from"./solid-components2.js";import{H as n}from"./slot.js";import{r as l}from"./state.js";var h=Object.defineProperty,d=Object.getOwnPropertyDescriptor,p=(t,e,i,r)=>{for(var a,s=r>1?void 0:r?d(e,i):e,o=t.length-1;o>=0;o--)(a=t[o])&&(s=(r?a(e,i,s):a(s))||s);return r&&s&&h(e,i,s),s};let c=class extends t{constructor(){super(...arguments),this.variant="white",this.breakpoint=448,this.inset=!1,this.hasSlotController=new n(this,"[default]","media","meta","headline")}connectedCallback(){super.connectedCallback(),0===this.breakpoint?this._orientation="horizontal":9999===this.breakpoint?this._orientation="vertical":window.ResizeObserver&&(this.resizeObserver=new ResizeObserver((()=>this.updateOrientation())),this.resizeObserver.observe(this))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver&&this.resizeObserver.disconnect()}updated(t){super.updated(t),t.has("breakpoint")&&this.updateOrientation()}updateOrientation(){this._orientation=this.offsetWidth>=this.breakpoint?"horizontal":"vertical"}render(){const t="white border-neutral-400"===this.variant||this.inset,r=this.hasSlotController.test("[default]"),a=this.hasSlotController.test("media"),s=this.hasSlotController.test("meta");return this.hasSlotController.test("headline"),e`<div class="${i("flex",{white:"bg-white","white border-neutral-400":"bg-white border border-neutral-400","neutral-100":"bg-neutral-100",primary:"bg-primary text-white","primary-100":"bg-primary-100"}[this.variant],"vertical"===this._orientation&&"flex-col","horizontal"===this._orientation&&"flex-row gap-8","horizontal"===this._orientation&&t&&"py-8 px-10")}" part="base"><div style="${"horizontal"===this._orientation?"width: var(--distribution-media, 100%);":""}" class="${i(!t&&"vertical"===this._orientation&&"mb-4",!a&&"hidden","white border-neutral-400"===this.variant&&"vertical"===this._orientation&&"mx-[-1px] mt-[-1px]")}" part="media"><slot name="media"></slot></div><div style="${"horizontal"===this._orientation?"width: var(--distribution-content, 100%); "+(t?"width: var(--distribution-content, calc(100% - 2rem));":""):""}" class="${i("flex flex-col text-left","horizontal"===this._orientation&&"flex flex-col","vertical"===this._orientation&&t&&"m-4")}" part="content"><div part="meta" class="${i("gap-2 mb-4",!s&&"hidden")}"><slot name="meta"></slot></div><div part="headline" class="${i("text-lg font-bold m-0","primary"===this.variant?"text-white":"text-black")}"><slot name="headline">Always insert one semantically correct heading element here (e. g. &lt;h2>)</slot></div><div part="main" class="${i(!r&&"hidden")}"><slot></slot></div></div></div>`}};c.styles=[t.styles,r`:host{display:block}::slotted(*){margin:var(--sd-spacing-0,0)}::slotted([slot=headline]){margin:var(--sd-spacing-0,0)!important;font-size:var(--sd-font-size-lg,1.25rem)!important;font-weight:700}`],p([a({reflect:!0})],c.prototype,"variant",2),p([a({reflect:!0,type:Number})],c.prototype,"breakpoint",2),p([a({type:Boolean,reflect:!0})],c.prototype,"inset",2),p([s('[part="base"]')],c.prototype,"teaser",2),p([l()],c.prototype,"_orientation",2),c=p([o("sd-3-22-13-teaser")],c);export{c as default};
@@ -1 +1 @@
1
- import{S as t,x as e,t as a,c as l,i as s,e as i,n as o,a as r}from"./solid-components2.js";import{d as h}from"./default-value.js";import{F as n}from"./form.js";import{H as d}from"./slot.js";import{o as p}from"./if-defined.js";import{l as u}from"./live.js";import{r as c}from"./state.js";import{w as y}from"./watch.js";var m=Object.defineProperty,b=Object.getOwnPropertyDescriptor,f=(t,e,a,l)=>{for(var s,i=l>1?void 0:l?b(e,a):e,o=t.length-1;o>=0;o--)(s=t[o])&&(i=(l?s(e,a,i):s(i))||i);return l&&i&&m(e,a,i),i};let v=class extends t{constructor(){super(...arguments),this.formControlController=new n(this),this.hasSlotController=new d(this,"help-text","label"),this.hasFocus=!1,this.showValidStyle=!1,this.showInvalidStyle=!1,this.title="",this.name="",this.value="",this.size="lg",this.label="",this.helpText="",this.placeholder="",this.rows=4,this.disabled=!1,this.readonly=!1,this.form="",this.required=!1,this.styleOnValid=!1,this.spellcheck=!0,this.defaultValue=""}get validity(){return this.textarea.validity}get validationMessage(){return this.textarea.validationMessage}connectedCallback(){super.connectedCallback(),this.updateComplete.then((()=>{this.setTextareaHeight()}))}firstUpdated(){this.formControlController.updateValidity()}disconnectedCallback(){super.disconnectedCallback()}handleBlur(){this.hasFocus=!1,this.emit("sd-blur")}handleChange(){this.value=this.textarea.value,this.setTextareaHeight(),this.emit("sd-change")}handleFocus(){this.hasFocus=!0,this.emit("sd-focus")}handleInput(){this.value=this.textarea.value,this.formControlController.updateValidity(),this.emit("sd-input")}handleInvalid(t){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t),this.invalidMessage.textContent=t.target.validationMessage}setTextareaHeight(){this.textarea.style.height=void 0}handleDisabledChange(){this.formControlController.setValidity(this.disabled)}handleRowsChange(){this.setTextareaHeight()}async handleValueChange(){await this.updateComplete,this.formControlController.updateValidity(),this.setTextareaHeight()}focus(t){this.textarea.focus(t)}blur(){this.textarea.blur()}select(){this.textarea.select()}scrollPosition(t){return t?("number"==typeof t.top&&(this.textarea.scrollTop=t.top),void("number"==typeof t.left&&(this.textarea.scrollLeft=t.left))):{top:this.textarea.scrollTop,left:this.textarea.scrollTop}}setSelectionRange(t,e,a="none"){this.textarea.setSelectionRange(t,e,a)}setRangeText(t,e,a,l){this.textarea.setRangeText(t,e,a,l),this.value!==this.textarea.value&&(this.value=this.textarea.value),this.value!==this.textarea.value&&(this.value=this.textarea.value,this.setTextareaHeight())}checkValidity(){var t;return null==(t=this.textarea)?void 0:t.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.formControlController.fakeUserInteraction(),this.textarea.reportValidity()}setCustomValidity(t){this.textarea.setCustomValidity(t),this.formControlController.updateValidity()}render(){const t=this.hasSlotController.test("label"),l=this.hasSlotController.test("help-text"),s=!!this.label||!!t,i=!!this.helpText||!!l,o=this.disabled?"disabled":this.readonly?"readonly":this.hasFocus&&this.showInvalidStyle?"activeInvalid":this.hasFocus&&this.styleOnValid&&this.showValidStyle?"activeValid":this.hasFocus?"active":this.showInvalidStyle?"invalid":this.styleOnValid&&this.showValidStyle?"valid":"default",r="sm"===this.size?"text-sm":"text-base",h={sm:"text-base ml-1",md:"text-lg ml-2",lg:"text-xl ml-2"}[this.size];return e`<div part="form-control" class="flex flex-col h-full text-left"><div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${a(s?"inline-block":"hidden",r)}" for="input" aria-hidden="${s?"false":"true"}"><slot name="label">${this.label}</slot></label><slot name="tooltip"></slot></div><div part="form-control-input" class="${a("relative h-full w-full",this.disabled&&"cursor-not-allowed")}"><div part="border" class="${a("absolute w-full h-full pointer-events-none border rounded-default",{disabled:"border-neutral-500",readonly:"border-neutral-800",activeInvalid:"border-error border-2",activeValid:"border-success border-2",active:"border-primary border-2",invalid:"border-error",valid:"border-success",default:"border-neutral-800"}[o])}"></div><div part="base" class="${a("textarea h-full px-4 flex items-top rounded-default group",{sm:"textarea-sm py-1",md:"textarea-md py-1",lg:"textarea-lg py-2"}[this.size],this.disabled||this.readonly?"":"hover:bg-neutral-200",this.readonly?"bg-neutral-100":"bg-white","disabled"===o?"text-neutral-500":"text-black")}"><textarea part="textarea" id="input" class="${a("flex-grow focus:outline-none bg-transparent placeholder-neutral-700 resize-none",this.disabled&&"cursor-not-allowed",r)}" title="${this.title}" name="${p(this.name)}" .value="${u(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${p(this.placeholder)}" minlength="${p(this.minlength)}" maxlength="${p(this.maxlength)}" rows="${p(this.rows)}" autocapitalize="${p(this.autocapitalize)}" autocorrect="${p(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${p(this.spellcheck)}" enterkeyhint="${p(this.enterkeyhint)}" inputmode="${p(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle?e`<sd-3-22-12-icon class="${a("text-error absolute right-4 bg-white group-hover:bg-neutral-200",h)}" library="system" name="risk" part="invalid-icon"></sd-3-22-12-icon>`:""} ${this.styleOnValid&&this.showValidStyle?e`<sd-3-22-12-icon class="${a("text-success absolute right-4 bg-white group-hover:bg-neutral-200",h)}" library="system" name="status-check" part="valid-icon"></sd-3-22-12-icon>`:""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${a("text-sm text-neutral-700",i?"block":"hidden")}" aria-hidden="${i?"false":"true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`}};v.styles=[l,t.styles,s`:host{display:block;height:100%}:host([required]) #label::after{content:' *'}.no-scrollbar::-webkit-scrollbar{display:none}`],f([i("#input")],v.prototype,"textarea",2),f([i("#invalid-message")],v.prototype,"invalidMessage",2),f([c()],v.prototype,"hasFocus",2),f([c()],v.prototype,"showValidStyle",2),f([c()],v.prototype,"showInvalidStyle",2),f([o()],v.prototype,"title",2),f([o()],v.prototype,"name",2),f([o()],v.prototype,"value",2),f([o({reflect:!0})],v.prototype,"size",2),f([o()],v.prototype,"label",2),f([o({attribute:"help-text"})],v.prototype,"helpText",2),f([o()],v.prototype,"placeholder",2),f([o({type:Number})],v.prototype,"rows",2),f([o({type:Boolean,reflect:!0})],v.prototype,"disabled",2),f([o({type:Boolean,reflect:!0})],v.prototype,"readonly",2),f([o({reflect:!0})],v.prototype,"form",2),f([o({type:Boolean,reflect:!0})],v.prototype,"required",2),f([o({type:Number})],v.prototype,"minlength",2),f([o({type:Number})],v.prototype,"maxlength",2),f([o()],v.prototype,"autocapitalize",2),f([o()],v.prototype,"autocorrect",2),f([o()],v.prototype,"autocomplete",2),f([o({type:Boolean})],v.prototype,"autofocus",2),f([o()],v.prototype,"enterkeyhint",2),f([o({type:Boolean,reflect:!0,attribute:"style-on-valid"})],v.prototype,"styleOnValid",2),f([o({type:Boolean,converter:{fromAttribute:t=>!(!t||"false"===t),toAttribute:t=>t?"true":"false"}})],v.prototype,"spellcheck",2),f([o()],v.prototype,"inputmode",2),f([h()],v.prototype,"defaultValue",2),f([y("disabled",{waitUntilFirstUpdate:!0})],v.prototype,"handleDisabledChange",1),f([y("rows",{waitUntilFirstUpdate:!0})],v.prototype,"handleRowsChange",1),f([y("value",{waitUntilFirstUpdate:!0})],v.prototype,"handleValueChange",1),v=f([r("sd-3-22-12-textarea")],v);export{v as default};
1
+ import{S as t,x as e,t as a,c as l,i as s,e as i,n as o,a as r}from"./solid-components2.js";import{d as h}from"./default-value.js";import{F as n}from"./form.js";import{H as d}from"./slot.js";import{o as p}from"./if-defined.js";import{l as u}from"./live.js";import{r as c}from"./state.js";import{w as y}from"./watch.js";var m=Object.defineProperty,b=Object.getOwnPropertyDescriptor,f=(t,e,a,l)=>{for(var s,i=l>1?void 0:l?b(e,a):e,o=t.length-1;o>=0;o--)(s=t[o])&&(i=(l?s(e,a,i):s(i))||i);return l&&i&&m(e,a,i),i};let v=class extends t{constructor(){super(...arguments),this.formControlController=new n(this),this.hasSlotController=new d(this,"help-text","label"),this.hasFocus=!1,this.showValidStyle=!1,this.showInvalidStyle=!1,this.title="",this.name="",this.value="",this.size="lg",this.label="",this.helpText="",this.placeholder="",this.rows=4,this.disabled=!1,this.readonly=!1,this.form="",this.required=!1,this.styleOnValid=!1,this.spellcheck=!0,this.defaultValue=""}get validity(){return this.textarea.validity}get validationMessage(){return this.textarea.validationMessage}connectedCallback(){super.connectedCallback(),this.updateComplete.then((()=>{this.setTextareaHeight()}))}firstUpdated(){this.formControlController.updateValidity()}disconnectedCallback(){super.disconnectedCallback()}handleBlur(){this.hasFocus=!1,this.emit("sd-blur")}handleChange(){this.value=this.textarea.value,this.setTextareaHeight(),this.emit("sd-change")}handleFocus(){this.hasFocus=!0,this.emit("sd-focus")}handleInput(){this.value=this.textarea.value,this.formControlController.updateValidity(),this.emit("sd-input")}handleInvalid(t){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t),this.invalidMessage.textContent=t.target.validationMessage}setTextareaHeight(){this.textarea.style.height=void 0}handleDisabledChange(){this.formControlController.setValidity(this.disabled)}handleRowsChange(){this.setTextareaHeight()}async handleValueChange(){await this.updateComplete,this.formControlController.updateValidity(),this.setTextareaHeight()}focus(t){this.textarea.focus(t)}blur(){this.textarea.blur()}select(){this.textarea.select()}scrollPosition(t){return t?("number"==typeof t.top&&(this.textarea.scrollTop=t.top),void("number"==typeof t.left&&(this.textarea.scrollLeft=t.left))):{top:this.textarea.scrollTop,left:this.textarea.scrollTop}}setSelectionRange(t,e,a="none"){this.textarea.setSelectionRange(t,e,a)}setRangeText(t,e,a,l){this.textarea.setRangeText(t,e,a,l),this.value!==this.textarea.value&&(this.value=this.textarea.value),this.value!==this.textarea.value&&(this.value=this.textarea.value,this.setTextareaHeight())}checkValidity(){var t;return null==(t=this.textarea)?void 0:t.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.formControlController.fakeUserInteraction(),this.textarea.reportValidity()}setCustomValidity(t){this.textarea.setCustomValidity(t),this.formControlController.updateValidity()}render(){const t=this.hasSlotController.test("label"),l=this.hasSlotController.test("help-text"),s=!!this.label||!!t,i=!!this.helpText||!!l,o=this.disabled?"disabled":this.readonly?"readonly":this.hasFocus&&this.showInvalidStyle?"activeInvalid":this.hasFocus&&this.styleOnValid&&this.showValidStyle?"activeValid":this.hasFocus?"active":this.showInvalidStyle?"invalid":this.styleOnValid&&this.showValidStyle?"valid":"default",r="sm"===this.size?"text-sm":"text-base",h={sm:"text-base ml-1",md:"text-lg ml-2",lg:"text-xl ml-2"}[this.size];return e`<div part="form-control" class="flex flex-col h-full text-left"><div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${a(s?"inline-block":"hidden",r)}" for="input" aria-hidden="${s?"false":"true"}"><slot name="label">${this.label}</slot></label><slot name="tooltip"></slot></div><div part="form-control-input" class="${a("relative h-full w-full",this.disabled&&"cursor-not-allowed")}"><div part="border" class="${a("absolute w-full h-full pointer-events-none border rounded-default",{disabled:"border-neutral-500",readonly:"border-neutral-800",activeInvalid:"border-error border-2",activeValid:"border-success border-2",active:"border-primary border-2",invalid:"border-error",valid:"border-success",default:"border-neutral-800"}[o])}"></div><div part="base" class="${a("textarea h-full px-4 flex items-top rounded-default group",{sm:"textarea-sm py-1",md:"textarea-md py-1",lg:"textarea-lg py-2"}[this.size],this.disabled||this.readonly?"":"hover:bg-neutral-200",this.readonly?"bg-neutral-100":"bg-white","disabled"===o?"text-neutral-500":"text-black")}"><textarea part="textarea" id="input" class="${a("flex-grow focus:outline-none bg-transparent placeholder-neutral-700 resize-none",this.disabled&&"cursor-not-allowed",r)}" title="${this.title}" name="${p(this.name)}" .value="${u(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${p(this.placeholder)}" minlength="${p(this.minlength)}" maxlength="${p(this.maxlength)}" rows="${p(this.rows)}" autocapitalize="${p(this.autocapitalize)}" autocorrect="${p(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${p(this.spellcheck)}" enterkeyhint="${p(this.enterkeyhint)}" inputmode="${p(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle?e`<sd-3-22-13-icon class="${a("text-error absolute right-4 bg-white group-hover:bg-neutral-200",h)}" library="system" name="risk" part="invalid-icon"></sd-3-22-13-icon>`:""} ${this.styleOnValid&&this.showValidStyle?e`<sd-3-22-13-icon class="${a("text-success absolute right-4 bg-white group-hover:bg-neutral-200",h)}" library="system" name="status-check" part="valid-icon"></sd-3-22-13-icon>`:""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${a("text-sm text-neutral-700",i?"block":"hidden")}" aria-hidden="${i?"false":"true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`}};v.styles=[l,t.styles,s`:host{display:block;height:100%}:host([required]) #label::after{content:' *'}.no-scrollbar::-webkit-scrollbar{display:none}`],f([i("#input")],v.prototype,"textarea",2),f([i("#invalid-message")],v.prototype,"invalidMessage",2),f([c()],v.prototype,"hasFocus",2),f([c()],v.prototype,"showValidStyle",2),f([c()],v.prototype,"showInvalidStyle",2),f([o()],v.prototype,"title",2),f([o()],v.prototype,"name",2),f([o()],v.prototype,"value",2),f([o({reflect:!0})],v.prototype,"size",2),f([o()],v.prototype,"label",2),f([o({attribute:"help-text"})],v.prototype,"helpText",2),f([o()],v.prototype,"placeholder",2),f([o({type:Number})],v.prototype,"rows",2),f([o({type:Boolean,reflect:!0})],v.prototype,"disabled",2),f([o({type:Boolean,reflect:!0})],v.prototype,"readonly",2),f([o({reflect:!0})],v.prototype,"form",2),f([o({type:Boolean,reflect:!0})],v.prototype,"required",2),f([o({type:Number})],v.prototype,"minlength",2),f([o({type:Number})],v.prototype,"maxlength",2),f([o()],v.prototype,"autocapitalize",2),f([o()],v.prototype,"autocorrect",2),f([o()],v.prototype,"autocomplete",2),f([o({type:Boolean})],v.prototype,"autofocus",2),f([o()],v.prototype,"enterkeyhint",2),f([o({type:Boolean,reflect:!0,attribute:"style-on-valid"})],v.prototype,"styleOnValid",2),f([o({type:Boolean,converter:{fromAttribute:t=>!(!t||"false"===t),toAttribute:t=>t?"true":"false"}})],v.prototype,"spellcheck",2),f([o()],v.prototype,"inputmode",2),f([h()],v.prototype,"defaultValue",2),f([y("disabled",{waitUntilFirstUpdate:!0})],v.prototype,"handleDisabledChange",1),f([y("rows",{waitUntilFirstUpdate:!0})],v.prototype,"handleRowsChange",1),f([y("value",{waitUntilFirstUpdate:!0})],v.prototype,"handleValueChange",1),v=f([r("sd-3-22-13-textarea")],v);export{v as default};
@@ -1,4 +1,4 @@
1
- import{S as t,L as e,x as s,t as i,r as o,i as a,e as h,n as r,a as n}from"./solid-components2.js";import{c as p,s as d,a as l}from"./animate.js";import{g as c,s as u}from"./animation-registry.js";import{w as m}from"./event.js";import{w}from"./watch.js";import{I as y}from"./interactive.js";var v=Object.defineProperty,g=Object.getOwnPropertyDescriptor,f=(t,e,s,i)=>{for(var o,a=i>1?void 0:i?g(e,s):e,h=t.length-1;h>=0;h--)(o=t[h])&&(a=(i?o(e,s,a):o(a))||a);return i&&a&&v(e,s,a),a};let b=class extends t{constructor(){super(...arguments),this.isFocusTriggered=!1,this.localize=new e(this),this.size="lg",this.content="",this.placement="top",this.disabled=!1,this.open=!1,this.trigger="click focus",this.hoist=!1}connectedCallback(){super.connectedCallback(),this.handleBlur=this.handleBlur.bind(this),this.handleClick=this.handleClick.bind(this),this.handleFocus=this.handleFocus.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleMouseOver=this.handleMouseOver.bind(this),this.handleMouseOut=this.handleMouseOut.bind(this),this.updateComplete.then((()=>{this.addEventListener("blur",this.handleBlur,!0),this.addEventListener("focus",this.handleFocus,!0),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("mouseover",this.handleMouseOver),this.addEventListener("mouseout",this.handleMouseOut)}))}firstUpdated(){this.body.hidden=!this.open,this.open&&(this.popup.active=!0,this.popup.reposition())}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("blur",this.handleBlur,!0),this.removeEventListener("focus",this.handleFocus,!0),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("mouseover",this.handleMouseOver),this.removeEventListener("mouseout",this.handleMouseOut)}handleBlur(){this.hasTrigger("focus")&&this.hide()}handleClick(){if(this.hasTrigger("click")){if(this.isFocusTriggered)return void(this.isFocusTriggered=!1);this.open?this.hide():this.show()}}handleFocus(){this.hasTrigger("focus")&&(this.isFocusTriggered=!0,this.show())}handleKeyDown(t){this.open&&"Escape"===t.key&&(t.stopPropagation(),this.hide())}handleMouseOver(){if(this.hasTrigger("hover")){const t=p(getComputedStyle(this).getPropertyValue("--show-delay"));clearTimeout(this.hoverTimeout),this.hoverTimeout=window.setTimeout((()=>this.show()),t)}}handleMouseOut(){if(this.hasTrigger("hover")){const t=p(getComputedStyle(this).getPropertyValue("--hide-delay"));clearTimeout(this.hoverTimeout),this.hoverTimeout=window.setTimeout((()=>this.hide()),t)}}hasTrigger(t){return this.trigger.split(" ").includes(t)}async handleOpenChange(){if(this.open){if(this.disabled)return;this.emit("sd-show"),await d(this.body),this.body.hidden=!1,this.popup.active=!0;const{keyframes:t,options:e}=c(this,"tooltip.show",{dir:this.localize.dir()});await l(this.popup.popup,t,e),this.emit("sd-after-show")}else{this.emit("sd-hide"),await d(this.body);const{keyframes:t,options:e}=c(this,"tooltip.hide",{dir:this.localize.dir()});await l(this.popup.popup,t,e),this.popup.active=!1,this.body.hidden=!0,this.emit("sd-after-hide")}}async handleOptionsChange(){this.hasUpdated&&(await this.updateComplete,this.popup.reposition())}handleDisabledChange(){this.disabled&&this.open&&this.hide()}async show(){if(!this.open)return this.open=!0,m(this,"sd-after-show")}async hide(){if(this.open)return this.open=!1,m(this,"sd-after-hide")}render(){const t=this.placement.endsWith("-start"),e=this.placement.endsWith("-end");return s`<sd-3-22-12-popup part="base" exportparts="
1
+ import{S as t,L as e,x as s,t as i,r as o,i as a,e as h,n as r,a as n}from"./solid-components2.js";import{c as p,s as d,a as l}from"./animate.js";import{g as c,s as u}from"./animation-registry.js";import{w as m}from"./event.js";import{w}from"./watch.js";import{I as y}from"./interactive.js";var v=Object.defineProperty,g=Object.getOwnPropertyDescriptor,f=(t,e,s,i)=>{for(var o,a=i>1?void 0:i?g(e,s):e,h=t.length-1;h>=0;h--)(o=t[h])&&(a=(i?o(e,s,a):o(a))||a);return i&&a&&v(e,s,a),a};let b=class extends t{constructor(){super(...arguments),this.isFocusTriggered=!1,this.localize=new e(this),this.size="lg",this.content="",this.placement="top",this.disabled=!1,this.open=!1,this.trigger="click focus",this.hoist=!1}connectedCallback(){super.connectedCallback(),this.handleBlur=this.handleBlur.bind(this),this.handleClick=this.handleClick.bind(this),this.handleFocus=this.handleFocus.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleMouseOver=this.handleMouseOver.bind(this),this.handleMouseOut=this.handleMouseOut.bind(this),this.updateComplete.then((()=>{this.addEventListener("blur",this.handleBlur,!0),this.addEventListener("focus",this.handleFocus,!0),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("mouseover",this.handleMouseOver),this.addEventListener("mouseout",this.handleMouseOut)}))}firstUpdated(){this.body.hidden=!this.open,this.open&&(this.popup.active=!0,this.popup.reposition())}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("blur",this.handleBlur,!0),this.removeEventListener("focus",this.handleFocus,!0),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("mouseover",this.handleMouseOver),this.removeEventListener("mouseout",this.handleMouseOut)}handleBlur(){this.hasTrigger("focus")&&this.hide()}handleClick(){if(this.hasTrigger("click")){if(this.isFocusTriggered)return void(this.isFocusTriggered=!1);this.open?this.hide():this.show()}}handleFocus(){this.hasTrigger("focus")&&(this.isFocusTriggered=!0,this.show())}handleKeyDown(t){this.open&&"Escape"===t.key&&(t.stopPropagation(),this.hide())}handleMouseOver(){if(this.hasTrigger("hover")){const t=p(getComputedStyle(this).getPropertyValue("--show-delay"));clearTimeout(this.hoverTimeout),this.hoverTimeout=window.setTimeout((()=>this.show()),t)}}handleMouseOut(){if(this.hasTrigger("hover")){const t=p(getComputedStyle(this).getPropertyValue("--hide-delay"));clearTimeout(this.hoverTimeout),this.hoverTimeout=window.setTimeout((()=>this.hide()),t)}}hasTrigger(t){return this.trigger.split(" ").includes(t)}async handleOpenChange(){if(this.open){if(this.disabled)return;this.emit("sd-show"),await d(this.body),this.body.hidden=!1,this.popup.active=!0;const{keyframes:t,options:e}=c(this,"tooltip.show",{dir:this.localize.dir()});await l(this.popup.popup,t,e),this.emit("sd-after-show")}else{this.emit("sd-hide"),await d(this.body);const{keyframes:t,options:e}=c(this,"tooltip.hide",{dir:this.localize.dir()});await l(this.popup.popup,t,e),this.popup.active=!1,this.body.hidden=!0,this.emit("sd-after-hide")}}async handleOptionsChange(){this.hasUpdated&&(await this.updateComplete,this.popup.reposition())}handleDisabledChange(){this.disabled&&this.open&&this.hide()}async show(){if(!this.open)return this.open=!0,m(this,"sd-after-show")}async hide(){if(this.open)return this.open=!1,m(this,"sd-after-hide")}render(){const t=this.placement.endsWith("-start"),e=this.placement.endsWith("-end");return s`<sd-3-22-13-popup part="base" exportparts="
2
2
  popup:base__popup,
3
3
  arrow:base__arrow
4
- " class="${i(this.open&&"tooltip--open")}" placement="${this.placement}" distance="10" skidding="${{start:2,end:-2,default:0}[t?"start":e?"end":"default"]*("sm"===this.size?-1:1)}" strategy="${this.hoist?"fixed":"absolute"}" flip shift arrow auto-size="vertical" arrow-padding="0"><slot slot="anchor" aria-describedby="tooltip" class="${i("lg"===this.size?"text-xl":"text-base")}"><button class="flex sd-interactive rounded-full"><sd-3-22-12-icon library="system" name="info-circle" class="${i(this.disabled&&"sd-interactive--disabled")}"></sd-3-22-12-icon></button></slot><slot name="content" part="body" id="tooltip" class="bg-primary text-white py-3 px-4 block rounded-none text-sm text-left" role="tooltip" aria-label="Tooltip" aria-live="${this.open?"polite":"off"}">${this.content}</slot></sd-3-22-12-popup>`}};b.styles=[t.styles,o(y),a`:host{--hide-delay:0ms;--show-delay:150ms;display:contents}sd-3-22-12-popup{--arrow-color:rgb(var(--sd-color-primary, 0 53 142) / 1);--arrow-size:10px}sd-3-22-12-popup::part(popup){pointer-events:none;z-index:10;--tw-shadow:var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-3-22-12-popup::part(arrow){--tw-shadow:var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-3-22-12-popup[placement^=top]::part(popup){transform-origin:bottom}sd-3-22-12-popup[placement^=bottom]::part(popup){transform-origin:top}#tooltip{max-width:var(--max-width)}::slotted([slot=content]){overflow:auto;max-width:var(--auto-size-available-width)!important;max-height:var(--auto-size-available-height)!important}`],f([h("slot:not([name])")],b.prototype,"defaultSlot",2),f([h("#tooltip")],b.prototype,"body",2),f([h("sd-3-22-12-popup")],b.prototype,"popup",2),f([r()],b.prototype,"size",2),f([r()],b.prototype,"content",2),f([r({reflect:!0})],b.prototype,"placement",2),f([r({type:Boolean,reflect:!0})],b.prototype,"disabled",2),f([r({type:Boolean,reflect:!0})],b.prototype,"open",2),f([r()],b.prototype,"trigger",2),f([r({type:Boolean})],b.prototype,"hoist",2),f([w("open",{waitUntilFirstUpdate:!0})],b.prototype,"handleOpenChange",1),f([w(["content","hoist","placement"])],b.prototype,"handleOptionsChange",1),f([w("disabled")],b.prototype,"handleDisabledChange",1),b=f([n("sd-3-22-12-tooltip")],b),u("tooltip.show",{keyframes:[{opacity:0,scale:.8},{opacity:1,scale:1}],options:{duration:150,easing:"ease"}}),u("tooltip.hide",{keyframes:[{opacity:1,scale:1},{opacity:0,scale:.8}],options:{duration:150,easing:"ease"}});export{b as default};
4
+ " class="${i(this.open&&"tooltip--open")}" placement="${this.placement}" distance="10" skidding="${{start:2,end:-2,default:0}[t?"start":e?"end":"default"]*("sm"===this.size?-1:1)}" strategy="${this.hoist?"fixed":"absolute"}" flip shift arrow auto-size="vertical" arrow-padding="0"><slot slot="anchor" aria-describedby="tooltip" class="${i("lg"===this.size?"text-xl":"text-base")}"><button class="flex sd-interactive rounded-full"><sd-3-22-13-icon library="system" name="info-circle" class="${i(this.disabled&&"sd-interactive--disabled")}"></sd-3-22-13-icon></button></slot><slot name="content" part="body" id="tooltip" class="bg-primary text-white py-3 px-4 block rounded-none text-sm text-left" role="tooltip" aria-label="Tooltip" aria-live="${this.open?"polite":"off"}">${this.content}</slot></sd-3-22-13-popup>`}};b.styles=[t.styles,o(y),a`:host{--hide-delay:0ms;--show-delay:150ms;display:contents}sd-3-22-13-popup{--arrow-color:rgb(var(--sd-color-primary, 0 53 142) / 1);--arrow-size:10px}sd-3-22-13-popup::part(popup){pointer-events:none;z-index:10;--tw-shadow:var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-3-22-13-popup::part(arrow){--tw-shadow:var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-3-22-13-popup[placement^=top]::part(popup){transform-origin:bottom}sd-3-22-13-popup[placement^=bottom]::part(popup){transform-origin:top}#tooltip{max-width:var(--max-width)}::slotted([slot=content]){overflow:auto;max-width:var(--auto-size-available-width)!important;max-height:var(--auto-size-available-height)!important}`],f([h("slot:not([name])")],b.prototype,"defaultSlot",2),f([h("#tooltip")],b.prototype,"body",2),f([h("sd-3-22-13-popup")],b.prototype,"popup",2),f([r()],b.prototype,"size",2),f([r()],b.prototype,"content",2),f([r({reflect:!0})],b.prototype,"placement",2),f([r({type:Boolean,reflect:!0})],b.prototype,"disabled",2),f([r({type:Boolean,reflect:!0})],b.prototype,"open",2),f([r()],b.prototype,"trigger",2),f([r({type:Boolean})],b.prototype,"hoist",2),f([w("open",{waitUntilFirstUpdate:!0})],b.prototype,"handleOpenChange",1),f([w(["content","hoist","placement"])],b.prototype,"handleOptionsChange",1),f([w("disabled")],b.prototype,"handleDisabledChange",1),b=f([n("sd-3-22-13-tooltip")],b),u("tooltip.show",{keyframes:[{opacity:0,scale:.8},{opacity:1,scale:1}],options:{duration:150,easing:"ease"}}),u("tooltip.hide",{keyframes:[{opacity:1,scale:1},{opacity:0,scale:.8}],options:{duration:150,easing:"ease"}});export{b as default};
@@ -1 +1 @@
1
- import{S as t,x as e,t as s,i as o,e as i,n as a,a as l}from"./solid-components2.js";import{H as r}from"./slot.js";var n=Object.defineProperty,p=Object.getOwnPropertyDescriptor,d=(t,e,s,o)=>{for(var i,a=o>1?void 0:o?p(e,s):e,l=t.length-1;l>=0;l--)(i=t[l])&&(a=(o?i(e,s,a):i(a))||a);return o&&a&&n(e,s,a),a};let h=class extends t{constructor(){super(...arguments),this.playing=!1,this.overlay=!1,this.isBelowBreakpoint=!1,this.hasSlotController=new r(this,"[default]","play-icon","poster")}get poster(){const t=this.shadowRoot.querySelector("slot[name=poster]");return(null==t?void 0:t.assignedElements().length)>0?t.assignedElements()[0]:null}get video(){return this.querySelector("video")}fadeoutPoster(){this.poster instanceof HTMLImageElement&&(this.poster.style.opacity="0")}hidePoster(){this.poster instanceof HTMLImageElement&&(this.poster.style.display="none")}setVideoInert(t){var e,s;t?null==(e=this.video)||e.setAttribute("inert",""):null==(s=this.video)||s.removeAttribute("inert")}play(){var t;this.emit("sd-play"),this.playing=!0,null==(t=this.video)||t.play(),this.fadeoutPoster(),this.setVideoInert(!1)}handleKeydown(t){t instanceof KeyboardEvent&&("Enter"===t.key||" "===t.key)&&(this.play(),setTimeout((()=>{var t;null==(t=this.video)||t.focus()})))}handleButtonResize(){this.hostEl.clientWidth<=414&&!this.isBelowBreakpoint&&(this.isBelowBreakpoint=!0),this.hostEl.clientWidth>414&&this.isBelowBreakpoint&&(this.isBelowBreakpoint=!1)}connectedCallback(){super.connectedCallback(),this.setVideoInert(!0),this.resizeObserver=new ResizeObserver((()=>this.handleButtonResize())),this.updateComplete.then((()=>{this.resizeObserver.observe(this.hostEl)}))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.unobserve(this.hostEl)}render(){return e`<div part="base" aria-label="Video Player" class="cursor-pointer"><button part="play-button" aria-label="Play video" tabindex="0" @click="${this.play}" @keydown="${this.handleKeydown}" class="${s(this.playing&&"pointer-events-none","group w-full h-full absolute top-0 left-0 z-30 text-primary hover:text-primary-500 sd-interactive sd-interactive--reset focus-visible:focus-outline")}"><div part="play-button-bg" class="${s(this.playing?"opacity-0":"opacity-100",this.isBelowBreakpoint?"w-[48px] h-[48px]":"w-[96px] h-[96px]","absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-4 bg-white bg-opacity-75 rounded-full play-pause-transition outline-2 outline-offset-2 group-focus-visible:outline")}"><slot name="play-icon" part="play-icon" class="${s(this.isBelowBreakpoint?"text-[2rem]":"text-[4rem]")}"><sd-3-22-12-icon id="default-play-icon" library="system" name="start"></sd-3-22-12-icon></slot></div></button> ${this.hasSlotController.test("poster")?e`<slot name="poster" role="presentation" @transitionend="${this.hidePoster}"></slot>`:null}<div part="overlay" id="overlay" role="presentation" class="${s(this.overlay&&!this.playing?"opacity-100":"opacity-0","bg-[rgba(0,0,0,0.65)] w-full h-full absolute top-0 left-0 pointer-events-none z-20 play-pause-transition")}"></div><slot></slot></div>`}};h.styles=[t.styles,o`:host{position:relative;display:inline-block;overflow:hidden}.play-pause-transition,::slotted([slot=poster]){transition-property:opacity;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1)}::slotted([slot=poster]){position:absolute;left:var(--sd-spacing-0,0);top:var(--sd-spacing-0,0);z-index:10;width:100%}#default-play-icon,::slotted([slot=play-icon]){position:absolute;left:50%;top:50%;--tw-translate-x:-50%!important;--tw-translate-y:-50%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}`],d([i("[part=base]")],h.prototype,"hostEl",2),d([a({type:Boolean,reflect:!0})],h.prototype,"playing",2),d([a({type:Boolean,reflect:!0})],h.prototype,"overlay",2),d([a({type:Boolean})],h.prototype,"isBelowBreakpoint",2),h=d([l("sd-3-22-12-video")],h);export{h as default};
1
+ import{S as t,x as e,t as s,i as o,e as i,n as a,a as l}from"./solid-components2.js";import{H as r}from"./slot.js";var n=Object.defineProperty,p=Object.getOwnPropertyDescriptor,d=(t,e,s,o)=>{for(var i,a=o>1?void 0:o?p(e,s):e,l=t.length-1;l>=0;l--)(i=t[l])&&(a=(o?i(e,s,a):i(a))||a);return o&&a&&n(e,s,a),a};let h=class extends t{constructor(){super(...arguments),this.playing=!1,this.overlay=!1,this.isBelowBreakpoint=!1,this.hasSlotController=new r(this,"[default]","play-icon","poster")}get poster(){const t=this.shadowRoot.querySelector("slot[name=poster]");return(null==t?void 0:t.assignedElements().length)>0?t.assignedElements()[0]:null}get video(){return this.querySelector("video")}fadeoutPoster(){this.poster instanceof HTMLImageElement&&(this.poster.style.opacity="0")}hidePoster(){this.poster instanceof HTMLImageElement&&(this.poster.style.display="none")}setVideoInert(t){var e,s;t?null==(e=this.video)||e.setAttribute("inert",""):null==(s=this.video)||s.removeAttribute("inert")}play(){var t;this.emit("sd-play"),this.playing=!0,null==(t=this.video)||t.play(),this.fadeoutPoster(),this.setVideoInert(!1)}handleKeydown(t){t instanceof KeyboardEvent&&("Enter"===t.key||" "===t.key)&&(this.play(),setTimeout((()=>{var t;null==(t=this.video)||t.focus()})))}handleButtonResize(){this.hostEl.clientWidth<=414&&!this.isBelowBreakpoint&&(this.isBelowBreakpoint=!0),this.hostEl.clientWidth>414&&this.isBelowBreakpoint&&(this.isBelowBreakpoint=!1)}connectedCallback(){super.connectedCallback(),this.setVideoInert(!0),this.resizeObserver=new ResizeObserver((()=>this.handleButtonResize())),this.updateComplete.then((()=>{this.resizeObserver.observe(this.hostEl)}))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.unobserve(this.hostEl)}render(){return e`<div part="base" aria-label="Video Player" class="cursor-pointer"><button part="play-button" aria-label="Play video" tabindex="0" @click="${this.play}" @keydown="${this.handleKeydown}" class="${s(this.playing&&"pointer-events-none","group w-full h-full absolute top-0 left-0 z-30 text-primary hover:text-primary-500 sd-interactive sd-interactive--reset focus-visible:focus-outline")}"><div part="play-button-bg" class="${s(this.playing?"opacity-0":"opacity-100",this.isBelowBreakpoint?"w-[48px] h-[48px]":"w-[96px] h-[96px]","absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-4 bg-white bg-opacity-75 rounded-full play-pause-transition outline-2 outline-offset-2 group-focus-visible:outline")}"><slot name="play-icon" part="play-icon" class="${s(this.isBelowBreakpoint?"text-[2rem]":"text-[4rem]")}"><sd-3-22-13-icon id="default-play-icon" library="system" name="start"></sd-3-22-13-icon></slot></div></button> ${this.hasSlotController.test("poster")?e`<slot name="poster" role="presentation" @transitionend="${this.hidePoster}"></slot>`:null}<div part="overlay" id="overlay" role="presentation" class="${s(this.overlay&&!this.playing?"opacity-100":"opacity-0","bg-[rgba(0,0,0,0.65)] w-full h-full absolute top-0 left-0 pointer-events-none z-20 play-pause-transition")}"></div><slot></slot></div>`}};h.styles=[t.styles,o`:host{position:relative;display:inline-block;overflow:hidden}.play-pause-transition,::slotted([slot=poster]){transition-property:opacity;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1)}::slotted([slot=poster]){position:absolute;left:var(--sd-spacing-0,0);top:var(--sd-spacing-0,0);z-index:10;width:100%}#default-play-icon,::slotted([slot=play-icon]){position:absolute;left:50%;top:50%;--tw-translate-x:-50%!important;--tw-translate-y:-50%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}`],d([i("[part=base]")],h.prototype,"hostEl",2),d([a({type:Boolean,reflect:!0})],h.prototype,"playing",2),d([a({type:Boolean,reflect:!0})],h.prototype,"overlay",2),d([a({type:Boolean})],h.prototype,"isBelowBreakpoint",2),h=d([l("sd-3-22-13-video")],h);export{h as default};
@@ -14,6 +14,6 @@ export default class SdButtonGroup extends SolidElement {
14
14
  }
15
15
  declare global {
16
16
  interface HTMLElementTagNameMap {
17
- 'sd-3-22-12-button-group': SdButtonGroup;
17
+ 'sd-3-22-13-button-group': SdButtonGroup;
18
18
  }
19
19
  }
@@ -21,19 +21,19 @@ let SdButtonGroup = class extends SolidElement {
21
21
  }
22
22
  handleFocus(event) {
23
23
  const button = findButton(event.target);
24
- button == null ? void 0 : button.classList.add("sd-3-22-12-button-group__button--focus");
24
+ button == null ? void 0 : button.classList.add("sd-3-22-13-button-group__button--focus");
25
25
  }
26
26
  handleBlur(event) {
27
27
  const button = findButton(event.target);
28
- button == null ? void 0 : button.classList.remove("sd-3-22-12-button-group__button--focus");
28
+ button == null ? void 0 : button.classList.remove("sd-3-22-13-button-group__button--focus");
29
29
  }
30
30
  handleMouseOver(event) {
31
31
  const button = findButton(event.target);
32
- button == null ? void 0 : button.classList.add("sd-3-22-12-button-group__button--hover");
32
+ button == null ? void 0 : button.classList.add("sd-3-22-13-button-group__button--hover");
33
33
  }
34
34
  handleMouseOut(event) {
35
35
  const button = findButton(event.target);
36
- button == null ? void 0 : button.classList.remove("sd-3-22-12-button-group__button--hover");
36
+ button == null ? void 0 : button.classList.remove("sd-3-22-13-button-group__button--hover");
37
37
  }
38
38
  handleSlotChange() {
39
39
  const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })];
@@ -41,11 +41,11 @@ let SdButtonGroup = class extends SolidElement {
41
41
  const index = slottedElements.indexOf(el);
42
42
  const button = findButton(el);
43
43
  if (button !== null) {
44
- button.classList.add("sd-3-22-12-button-group__button");
45
- button.classList.toggle("sd-3-22-12-button-group__button--first", index === 0);
46
- button.classList.toggle("sd-3-22-12-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
47
- button.classList.toggle("sd-3-22-12-button-group__button--last", index === slottedElements.length - 1);
48
- button.classList.toggle("sd-3-22-12-button-group__button--radio", button.tagName.toLowerCase() === "sd-3-22-12-radio-button");
44
+ button.classList.add("sd-3-22-13-button-group__button");
45
+ button.classList.toggle("sd-3-22-13-button-group__button--first", index === 0);
46
+ button.classList.toggle("sd-3-22-13-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
47
+ button.classList.toggle("sd-3-22-13-button-group__button--last", index === slottedElements.length - 1);
48
+ button.classList.toggle("sd-3-22-13-button-group__button--radio", button.tagName.toLowerCase() === "sd-3-22-13-radio-button");
49
49
  }
50
50
  });
51
51
  }
@@ -64,10 +64,10 @@ __decorateClass([
64
64
  property()
65
65
  ], SdButtonGroup.prototype, "label", 2);
66
66
  SdButtonGroup = __decorateClass([
67
- customElement("sd-3-22-12-button-group")
67
+ customElement("sd-3-22-13-button-group")
68
68
  ], SdButtonGroup);
69
69
  function findButton(el) {
70
- const selector = "sd-3-22-12-button, sd-3-22-12-radio-button";
70
+ const selector = "sd-3-22-13-button, sd-3-22-13-radio-button";
71
71
  return el.closest(selector) ?? el.querySelector(selector);
72
72
  }
73
73
  export {
@@ -19,6 +19,6 @@ export default class SdAccordion extends SolidElement {
19
19
  }
20
20
  declare global {
21
21
  interface HTMLElementTagNameMap {
22
- 'sd-3-22-12-accordion': SdAccordion;
22
+ 'sd-3-22-13-accordion': SdAccordion;
23
23
  }
24
24
  }
@@ -106,7 +106,7 @@ let SdAccordion = class extends SolidElement {
106
106
  )}"></div><slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot><span part="summary-icon" class="${cx(
107
107
  "flex flex-grow-0 flex-shrink-0 flex-auto items-center transition-all ease-in-out duration-300 text-xl",
108
108
  this.open && "rotate-180"
109
- )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-3-22-12-icon library="system" name="chevron-down"></sd-3-22-12-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-3-22-12-icon library="system" name="chevron-down"></sd-3-22-12-icon></slot></span></header><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></div>`;
109
+ )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-3-22-13-icon library="system" name="chevron-down"></sd-3-22-13-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-3-22-13-icon library="system" name="chevron-down"></sd-3-22-13-icon></slot></span></header><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></div>`;
110
110
  }
111
111
  };
112
112
  SdAccordion.styles = [
@@ -132,7 +132,7 @@ __decorateClass([
132
132
  watch("open", { waitUntilFirstUpdate: true })
133
133
  ], SdAccordion.prototype, "handleOpenChange", 1);
134
134
  SdAccordion = __decorateClass([
135
- customElement("sd-3-22-12-accordion")
135
+ customElement("sd-3-22-13-accordion")
136
136
  ], SdAccordion);
137
137
  setDefaultAnimation("accordion.show", {
138
138
  keyframes: [
@@ -11,6 +11,6 @@ export default class SdAccordionGroup extends SolidElement {
11
11
  }
12
12
  declare global {
13
13
  interface HTMLElementTagNameMap {
14
- 'sd-3-22-12-accordion-group': SdAccordionGroup;
14
+ 'sd-3-22-13-accordion-group': SdAccordionGroup;
15
15
  }
16
16
  }
@@ -47,16 +47,16 @@ let SdAccordionGroup = class extends SolidElement {
47
47
  SdAccordionGroup.styles = [
48
48
  componentStyles,
49
49
  SolidElement.styles,
50
- css`:host{display:block}::slotted(sd-3-22-12-accordion:not(:first-of-type)){margin-top:-1px}`
50
+ css`:host{display:block}::slotted(sd-3-22-13-accordion:not(:first-of-type)){margin-top:-1px}`
51
51
  ];
52
52
  __decorateClass([
53
- queryAssignedElements({ selector: "sd-3-22-12-accordion" })
53
+ queryAssignedElements({ selector: "sd-3-22-13-accordion" })
54
54
  ], SdAccordionGroup.prototype, "_accordionsInDefaultSlot", 2);
55
55
  __decorateClass([
56
56
  property({ attribute: "close-others", type: Boolean })
57
57
  ], SdAccordionGroup.prototype, "closeOthers", 2);
58
58
  SdAccordionGroup = __decorateClass([
59
- customElement("sd-3-22-12-accordion-group")
59
+ customElement("sd-3-22-13-accordion-group")
60
60
  ], SdAccordionGroup);
61
61
  export {
62
62
  SdAccordionGroup as default
@@ -50,6 +50,6 @@ export default class SdAudio extends SolidElement {
50
50
  }
51
51
  declare global {
52
52
  interface HTMLElementTagNameMap {
53
- 'sd-3-22-12-audio': SdAudio;
53
+ 'sd-3-22-13-audio': SdAudio;
54
54
  }
55
55
  }
@@ -282,10 +282,10 @@ let SdAudio = class extends SolidElement {
282
282
  )}" part="audio-controls"><button class="${cx(
283
283
  "playback-speed justify-self-start text-base font-bold hover:cursor-pointer sd-interactive",
284
284
  this.inverted && "sd-interactive--inverted"
285
- )}" aria-label="${this.localize.term("playbackSpeed")}" tabindex="0" @click="${this.togglePlaybackSpeed}" @keydown="${this.togglePlaybackSpeedKeydown}" part="playback-speed">${this.speed}x</button><sd-3-22-12-button ?inverted="${this.inverted ? true : false}" part="play-button" size="lg" @click="${!this.isPlaying ? this.playAudio : this.pauseAudio}" aria-label="${this.isPlaying ? this.localize.term("pauseAudio") : this.localize.term("playAudio")}">${this.isPlaying ? html`<sd-3-22-12-icon name="pause" library="system"></sd-3-22-12-icon>` : html`<sd-3-22-12-icon name="start" library="system"></sd-3-22-12-icon>`}</sd-3-22-12-button><div class="flex items-center justify-self-end">${this.hasSlotController.test("transcript") ? html`<button class="${cx(
285
+ )}" aria-label="${this.localize.term("playbackSpeed")}" tabindex="0" @click="${this.togglePlaybackSpeed}" @keydown="${this.togglePlaybackSpeedKeydown}" part="playback-speed">${this.speed}x</button><sd-3-22-13-button ?inverted="${this.inverted ? true : false}" part="play-button" size="lg" @click="${!this.isPlaying ? this.playAudio : this.pauseAudio}" aria-label="${this.isPlaying ? this.localize.term("pauseAudio") : this.localize.term("playAudio")}">${this.isPlaying ? html`<sd-3-22-13-icon name="pause" library="system"></sd-3-22-13-icon>` : html`<sd-3-22-13-icon name="start" library="system"></sd-3-22-13-icon>`}</sd-3-22-13-button><div class="flex items-center justify-self-end">${this.hasSlotController.test("transcript") ? html`<button class="${cx(
286
286
  "mr-6 w-6 h-6 hover:cursor-pointer sd-interactive",
287
287
  this.inverted && "sd-interactive--inverted"
288
- )}" @click="${this.showTranscript}" @keydown="${this.showTranscriptKeydown}" tab-index="0"><sd-3-22-12-icon class="w-6 h-6" name="transcript" library="system" label="${this.isMuted ? this.localize.term("unmute") : this.localize.term("mute")}"></sd-3-22-12-icon></button>` : null} <button class="${cx("w-6 h-6 hover:cursor-pointer sd-interactive", this.inverted && "sd-interactive--inverted")}" part="volume" aria-label="${this.localize.term("mute")}" tabindex="0" @click="${this.toggleMute}" @keydown="${this.toggleMuteKeydown}"><sd-3-22-12-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="system"></sd-3-22-12-icon></button></div></div>`;
288
+ )}" @click="${this.showTranscript}" @keydown="${this.showTranscriptKeydown}" tab-index="0"><sd-3-22-13-icon class="w-6 h-6" name="transcript" library="system" label="${this.isMuted ? this.localize.term("unmute") : this.localize.term("mute")}"></sd-3-22-13-icon></button>` : null} <button class="${cx("w-6 h-6 hover:cursor-pointer sd-interactive", this.inverted && "sd-interactive--inverted")}" part="volume" aria-label="${this.localize.term("mute")}" tabindex="0" @click="${this.toggleMute}" @keydown="${this.toggleMuteKeydown}"><sd-3-22-13-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="system"></sd-3-22-13-icon></button></div></div>`;
289
289
  const renderTimestamps = html`<div class="${cx(
290
290
  "w-full flex justify-between",
291
291
  this.reversedLayout ? "mb-2" : "mt-2",
@@ -295,13 +295,13 @@ let SdAudio = class extends SolidElement {
295
295
  return html`<div class="${cx("w-full flex relative", this.reversedLayout ? "flex-col-reverse" : "flex-col")}" aria-label="${this.localize.term("audioPlayer")}" part="audio-player"><slot @slotchange="${this.updateAudioDuration}"></slot>${!this.animated || this.animated && this.reversedLayout ? renderAudioControls : null}<div class="relative">${this.animated && !this.reversedLayout ? html`${renderAudioControls}` : null} ${this.animated ? html`<canvas class="w-full h-16"></canvas>` : null} ${!this.hideTimestamps && this.animated && this.reversedLayout ? renderTimestamps : null} <input class="${cx(
296
296
  "progress-slider bg-primary appearance-none w-full cursor-pointer outline-none h-1 flex items-center sd-interactive",
297
297
  this.inverted && "sd-interactive--inverted"
298
- )}" type="range" max="100" step="0.001" value="${this.progress}" tabindex="0" @input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}" part="progress-slider" style="background:linear-gradient(to right,${this.inverted ? "rgb(var(--sd-color-white, 255 255 255) / 1)" : "rgb(var(--sd-color-primary, 0 53 142) / 1)"} ${progressPercentage}%,${this.animated ? "transparent" : this.inverted ? "rgb(var(--sd-color-primary-400, 153 171 208) / 1)" : "rgb(var(--sd-color-grey-400, 195 195 195) / 1)"} ${progressPercentage}%)"></div>${this.hasSlotController.test("transcript") ? html`<sd-3-22-12-drawer><slot name="transcript"></slot></sd-3-22-12-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div>`;
298
+ )}" type="range" max="100" step="0.001" value="${this.progress}" tabindex="0" @input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}" part="progress-slider" style="background:linear-gradient(to right,${this.inverted ? "rgb(var(--sd-color-white, 255 255 255) / 1)" : "rgb(var(--sd-color-primary, 0 53 142) / 1)"} ${progressPercentage}%,${this.animated ? "transparent" : this.inverted ? "rgb(var(--sd-color-primary-400, 153 171 208) / 1)" : "rgb(var(--sd-color-grey-400, 195 195 195) / 1)"} ${progressPercentage}%)"></div>${this.hasSlotController.test("transcript") ? html`<sd-3-22-13-drawer><slot name="transcript"></slot></sd-3-22-13-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div>`;
299
299
  }
300
300
  };
301
301
  SdAudio.styles = [
302
302
  SolidElement.styles,
303
303
  unsafeCSS(InteractiveStyles),
304
- css`.progress-slider:focus-visible{outline:2px solid transparent;outline-offset:2px}.progress-slider::-webkit-slider-thumb{background-color:currentColor;height:var(--sd-spacing-4,1rem);width:var(--sd-spacing-4,1rem);-webkit-appearance:none;appearance:none;border-radius:var(--sd-border-radius-full,9999px);border-style:none;-webkit-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.progress-slider:focus-visible::-webkit-slider-thumb{outline-style:solid;outline-offset:2px}.progress-slider::-moz-range-thumb{background-color:currentColor;height:var(--sd-spacing-4,1rem);width:var(--sd-spacing-4,1rem);-moz-appearance:none;appearance:none;border-radius:var(--sd-border-radius-full,9999px);border-style:none;-moz-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.progress-slider:focus-visible::-moz-range-thumb{outline-style:solid;outline-offset:2px}sd-3-22-12-button::part(base){display:flex;height:var(--sd-spacing-16,4rem);width:var(--sd-spacing-16,4rem);align-items:center;justify-content:center;border-radius:var(--sd-border-radius-full,9999px)}sd-3-22-12-button::part(label){flex-grow:0}`
304
+ css`.progress-slider:focus-visible{outline:2px solid transparent;outline-offset:2px}.progress-slider::-webkit-slider-thumb{background-color:currentColor;height:var(--sd-spacing-4,1rem);width:var(--sd-spacing-4,1rem);-webkit-appearance:none;appearance:none;border-radius:var(--sd-border-radius-full,9999px);border-style:none;-webkit-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.progress-slider:focus-visible::-webkit-slider-thumb{outline-style:solid;outline-offset:2px}.progress-slider::-moz-range-thumb{background-color:currentColor;height:var(--sd-spacing-4,1rem);width:var(--sd-spacing-4,1rem);-moz-appearance:none;appearance:none;border-radius:var(--sd-border-radius-full,9999px);border-style:none;-moz-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.progress-slider:focus-visible::-moz-range-thumb{outline-style:solid;outline-offset:2px}sd-3-22-13-button::part(base){display:flex;height:var(--sd-spacing-16,4rem);width:var(--sd-spacing-16,4rem);align-items:center;justify-content:center;border-radius:var(--sd-border-radius-full,9999px)}sd-3-22-13-button::part(label){flex-grow:0}`
305
305
  ];
306
306
  __decorateClass([
307
307
  property({ type: Boolean, reflect: true, attribute: "reversed-layout" })
@@ -340,13 +340,13 @@ __decorateClass([
340
340
  query('[part="audio-player"]')
341
341
  ], SdAudio.prototype, "audioPlayerContainer", 2);
342
342
  __decorateClass([
343
- query("sd-3-22-12-drawer")
343
+ query("sd-3-22-13-drawer")
344
344
  ], SdAudio.prototype, "drawer", 2);
345
345
  __decorateClass([
346
346
  query("canvas")
347
347
  ], SdAudio.prototype, "canvas", 2);
348
348
  SdAudio = __decorateClass([
349
- customElement("sd-3-22-12-audio")
349
+ customElement("sd-3-22-13-audio")
350
350
  ], SdAudio);
351
351
  export {
352
352
  SdAudio as default
@@ -8,6 +8,6 @@ export default class SdBadge extends SolidElement {
8
8
  }
9
9
  declare global {
10
10
  interface HTMLElementTagNameMap {
11
- 'sd-3-22-12-badge': SdBadge;
11
+ 'sd-3-22-13-badge': SdBadge;
12
12
  }
13
13
  }
@@ -52,7 +52,7 @@ __decorateClass([
52
52
  property({ type: Boolean, reflect: true })
53
53
  ], SdBadge.prototype, "inverted", 2);
54
54
  SdBadge = __decorateClass([
55
- customElement("sd-3-22-12-badge")
55
+ customElement("sd-3-22-13-badge")
56
56
  ], SdBadge);
57
57
  export {
58
58
  SdBadge as default
@@ -25,7 +25,7 @@ export default class SdBrandshape extends SolidElement {
25
25
  }
26
26
  declare global {
27
27
  interface HTMLElementTagNameMap {
28
- 'sd-3-22-12-brandshape': SdBrandshape;
28
+ 'sd-3-22-13-brandshape': SdBrandshape;
29
29
  }
30
30
  }
31
31
  export {};
@@ -141,7 +141,7 @@ __decorateClass([
141
141
  state()
142
142
  ], SdBrandshape.prototype, "componentBreakpoint", 2);
143
143
  SdBrandshape = __decorateClass([
144
- customElement("sd-3-22-12-brandshape")
144
+ customElement("sd-3-22-13-brandshape")
145
145
  ], SdBrandshape);
146
146
  export {
147
147
  SdBrandshape as default
@@ -47,6 +47,6 @@ export default class SdButton extends SolidElement implements SolidFormControl {
47
47
  }
48
48
  declare global {
49
49
  interface HTMLElementTagNameMap {
50
- 'sd-3-22-12-button': SdButton;
50
+ 'sd-3-22-13-button': SdButton;
51
51
  }
52
52
  }
@@ -212,19 +212,19 @@ let SdButton = class extends SolidElement {
212
212
  md: "ml-2",
213
213
  lg: "ml-2"
214
214
  }[this.size]
215
- )}"></slot>${this.loading ? html`<sd-3-22-12-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-3-22-12-spinner>` : ""}</${tag}>`;
215
+ )}"></slot>${this.loading ? html`<sd-3-22-13-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-3-22-13-spinner>` : ""}</${tag}>`;
216
216
  }
217
217
  };
218
218
  SdButton.styles = [
219
219
  componentStyles,
220
220
  SolidElement.styles,
221
- css`:host{position:relative;display:inline-block;width:var(--sd-spacing-auto,auto);cursor:pointer}sd-3-22-12-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-3-22-12-badge){pointer-events:none;position:absolute;top:var(--sd-spacing-0,0);right:var(--sd-spacing-0,0);--tw-translate-x:50%!important;--tw-translate-y:-50%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}::slotted(sd-3-22-12-icon),sd-3-22-12-spinner{font-size:calc(var(--tw-varspacing)/ 2)}`
221
+ css`:host{position:relative;display:inline-block;width:var(--sd-spacing-auto,auto);cursor:pointer}sd-3-22-13-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-3-22-13-badge){pointer-events:none;position:absolute;top:var(--sd-spacing-0,0);right:var(--sd-spacing-0,0);--tw-translate-x:50%!important;--tw-translate-y:-50%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}::slotted(sd-3-22-13-icon),sd-3-22-13-spinner{font-size:calc(var(--tw-varspacing)/ 2)}`
222
222
  ];
223
223
  __decorateClass([
224
224
  query("a, button")
225
225
  ], SdButton.prototype, "button", 2);
226
226
  __decorateClass([
227
- queryAssignedElements({ selector: "sd-3-22-12-icon" })
227
+ queryAssignedElements({ selector: "sd-3-22-13-icon" })
228
228
  ], SdButton.prototype, "_iconsInDefaultSlot", 2);
229
229
  __decorateClass([
230
230
  state()
@@ -287,7 +287,7 @@ __decorateClass([
287
287
  watch("disabled", { waitUntilFirstUpdate: true })
288
288
  ], SdButton.prototype, "handleDisabledChange", 1);
289
289
  SdButton = __decorateClass([
290
- customElement("sd-3-22-12-button")
290
+ customElement("sd-3-22-13-button")
291
291
  ], SdButton);
292
292
  export {
293
293
  SdButton as default
@@ -51,6 +51,6 @@ export default class SdCarousel extends SolidElement {
51
51
  }
52
52
  declare global {
53
53
  interface HTMLElementTagNameMap {
54
- 'sd-3-22-12-carousel': SdCarousel;
54
+ 'sd-3-22-13-carousel': SdCarousel;
55
55
  }
56
56
  }
@@ -39,7 +39,7 @@ let SdCarousel = class extends SolidElement {
39
39
  this.pausedAutoplay = false;
40
40
  this.autoplayController = new AutoplayController(this, () => this.next());
41
41
  this.scrollController = new ScrollController(this);
42
- this.slides = this.getElementsByTagName("sd-3-22-12-carousel-item");
42
+ this.slides = this.getElementsByTagName("sd-3-22-13-carousel-item");
43
43
  this.intersectionObserverEntries = /* @__PURE__ */ new Map();
44
44
  this.localize = new LocalizeController(this);
45
45
  this.handleSlotChange = (mutations) => {
@@ -348,7 +348,7 @@ let SdCarousel = class extends SolidElement {
348
348
  )}" aria-label="${this.localize.term("previousSlide")}" aria-controls="scroll-container" aria-disabled="${prevEnabled ? "false" : "true"}" @click="${prevEnabled ? (e) => {
349
349
  this.previous();
350
350
  this.unblockAutoplay(e, this.previousButton);
351
- } : null}"><slot name="previous-icon"><sd-3-22-12-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-down" : "chevron-up"}"></sd-3-22-12-icon></slot></button> ${this.variant === "dot" ? html`<div part="pagination-dot" role="tablist" class="${cx("carousel__pagination dot flex wrap items-center gap-2")}" aria-controls="scroll-container">${map(range(pagesCount), (index) => {
351
+ } : null}"><slot name="previous-icon"><sd-3-22-13-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-down" : "chevron-up"}"></sd-3-22-13-icon></slot></button> ${this.variant === "dot" ? html`<div part="pagination-dot" role="tablist" class="${cx("carousel__pagination dot flex wrap items-center gap-2")}" aria-controls="scroll-container">${map(range(pagesCount), (index) => {
352
352
  const isActive = index + 1 === currentPage;
353
353
  return html`<button part="pagination-item ${isActive ? "pagination-item--active" : ""}" class="${cx(
354
354
  "carousel__pagination-item",
@@ -371,7 +371,7 @@ let SdCarousel = class extends SolidElement {
371
371
  )}" aria-label="${this.localize.term("nextSlide")}" aria-controls="scroll-container" aria-disabled="${nextEnabled ? "false" : "true"}" @click="${nextEnabled ? (e) => {
372
372
  this.next();
373
373
  this.unblockAutoplay(e, this.nextButton);
374
- } : null}"><slot name="next-icon"><sd-3-22-12-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-up" : "chevron-down"}"></sd-3-22-12-icon></slot></button></div><button class="${cx(
374
+ } : null}"><slot name="next-icon"><sd-3-22-13-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-up" : "chevron-down"}"></sd-3-22-13-icon></slot></button></div><button class="${cx(
375
375
  "ml-6 !rounded-sm",
376
376
  "!absolute !right-0 sd-interactive",
377
377
  this.inverted ? "sd-interactive--inverted" : "sd-interactive--reset",
@@ -381,14 +381,14 @@ let SdCarousel = class extends SolidElement {
381
381
  if (e.detail) {
382
382
  this.autoplayControls.blur();
383
383
  }
384
- }}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-3-22-12-icon class="h-6 w-6 grid place-items-center" library="system" name="start"></sd-3-22-12-icon></slot><slot name="autoplay-pause" class="${cx(this.pausedAutoplay ? "hidden" : "")}"><sd-3-22-12-icon class="h-6 w-6 grid place-items-center" library="system" name="pause"></sd-3-22-12-icon></slot></button></div></div>`;
384
+ }}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-3-22-13-icon class="h-6 w-6 grid place-items-center" library="system" name="start"></sd-3-22-13-icon></slot><slot name="autoplay-pause" class="${cx(this.pausedAutoplay ? "hidden" : "")}"><sd-3-22-13-icon class="h-6 w-6 grid place-items-center" library="system" name="pause"></sd-3-22-13-icon></slot></button></div></div>`;
385
385
  }
386
386
  };
387
387
  SdCarousel.styles = [
388
388
  SolidElement.styles,
389
389
  unsafeCSS(InteractiveStyles),
390
390
  componentStyles,
391
- css`:host{--slide-gap:var(--sl-spacing-medium, 1rem);--scroll-hint:0px;display:flex}.carousel{grid-template-areas:'. slides .' '. pagination .'}.carousel__pagination{grid-area:pagination}.carousel__slides{grid-area:slides;scrollbar-width:none;--slide-size:calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));grid-auto-columns:var(--slide-size);-moz-column-gap:var(--slide-gap);column-gap:var(--slide-gap);scroll-padding-inline:var(--scroll-hint);padding-inline:var(--scroll-hint)}.carousel__slides::-webkit-scrollbar{display:none}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-3-22-12-button::part(label){pointer-events:none;display:flex;flex:1 1 auto;align-items:center}`
391
+ css`:host{--slide-gap:var(--sl-spacing-medium, 1rem);--scroll-hint:0px;display:flex}.carousel{grid-template-areas:'. slides .' '. pagination .'}.carousel__pagination{grid-area:pagination}.carousel__slides{grid-area:slides;scrollbar-width:none;--slide-size:calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));grid-auto-columns:var(--slide-size);-moz-column-gap:var(--slide-gap);column-gap:var(--slide-gap);scroll-padding-inline:var(--scroll-hint);padding-inline:var(--scroll-hint)}.carousel__slides::-webkit-scrollbar{display:none}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-3-22-13-button::part(label){pointer-events:none;display:flex;flex:1 1 auto;align-items:center}`
392
392
  ];
393
393
  __decorateClass([
394
394
  query('[part~="autoplay-controls"]')
@@ -455,7 +455,7 @@ __decorateClass([
455
455
  watch("autoplay")
456
456
  ], SdCarousel.prototype, "handleAutoplayChange", 1);
457
457
  SdCarousel = __decorateClass([
458
- customElement("sd-3-22-12-carousel")
458
+ customElement("sd-3-22-13-carousel")
459
459
  ], SdCarousel);
460
460
  export {
461
461
  SdCarousel as default
@@ -7,6 +7,6 @@ export default class SdCarouselItem extends SolidElement {
7
7
  }
8
8
  declare global {
9
9
  interface HTMLElementTagNameMap {
10
- 'sd-3-22-12-carousel-item': SdCarouselItem;
10
+ 'sd-3-22-13-carousel-item': SdCarouselItem;
11
11
  }
12
12
  }
@@ -30,7 +30,7 @@ SdCarouselItem.styles = [
30
30
  css`:host{aspect-ratio:var(--aspect-ratio);scroll-snap-align:start;scroll-snap-stop:always;display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center}::slotted(img){height:100%;width:100%;-o-object-fit:cover;object-fit:cover}`
31
31
  ];
32
32
  SdCarouselItem = __decorateClass([
33
- customElement("sd-3-22-12-carousel-item")
33
+ customElement("sd-3-22-13-carousel-item")
34
34
  ], SdCarouselItem);
35
35
  export {
36
36
  SdCarouselItem as default
@@ -37,6 +37,6 @@ export default class SdCheckbox extends SolidElement implements SolidFormControl
37
37
  }
38
38
  declare global {
39
39
  interface HTMLElementTagNameMap {
40
- 'sd-3-22-12-checkbox': SdCheckbox;
40
+ 'sd-3-22-13-checkbox': SdCheckbox;
41
41
  }
42
42
  }