@solid-design-system/components 3.13.0 → 3.14.1

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 (148) hide show
  1. package/dist/components/es/carousel.js +3 -3
  2. package/dist/components/es/navigation-item.js +1 -1
  3. package/dist/components/umd/solid-components.js +13 -13
  4. package/dist/custom-elements.json +1 -1
  5. package/dist/package/components/carousel/carousel.d.ts +4 -2
  6. package/dist/package/components/carousel/carousel.js +53 -14
  7. package/dist/package/components/navigation-item/navigation-item.d.ts +6 -4
  8. package/dist/package/components/navigation-item/navigation-item.js +50 -19
  9. package/dist/versioned-components/es/accordion-group.js +1 -1
  10. package/dist/versioned-components/es/accordion.js +1 -1
  11. package/dist/versioned-components/es/badge.js +1 -1
  12. package/dist/versioned-components/es/brandshape.js +1 -1
  13. package/dist/versioned-components/es/button.js +1 -1
  14. package/dist/versioned-components/es/carousel-item.js +1 -1
  15. package/dist/versioned-components/es/carousel.js +3 -3
  16. package/dist/versioned-components/es/checkbox-group.js +1 -1
  17. package/dist/versioned-components/es/checkbox.js +1 -1
  18. package/dist/versioned-components/es/dialog.js +1 -1
  19. package/dist/versioned-components/es/divider.js +1 -1
  20. package/dist/versioned-components/es/drawer.js +1 -1
  21. package/dist/versioned-components/es/dropdown.js +1 -1
  22. package/dist/versioned-components/es/expandable.js +1 -1
  23. package/dist/versioned-components/es/flipcard.js +1 -1
  24. package/dist/versioned-components/es/form.js +1 -1
  25. package/dist/versioned-components/es/header.js +1 -1
  26. package/dist/versioned-components/es/icon.js +1 -1
  27. package/dist/versioned-components/es/include.js +1 -1
  28. package/dist/versioned-components/es/input.js +1 -1
  29. package/dist/versioned-components/es/link.js +1 -1
  30. package/dist/versioned-components/es/map-marker.js +1 -1
  31. package/dist/versioned-components/es/navigation-item.js +1 -1
  32. package/dist/versioned-components/es/notification.js +1 -1
  33. package/dist/versioned-components/es/option.js +1 -1
  34. package/dist/versioned-components/es/quickfact.js +1 -1
  35. package/dist/versioned-components/es/radio-button.js +1 -1
  36. package/dist/versioned-components/es/radio-group.js +1 -1
  37. package/dist/versioned-components/es/radio.js +1 -1
  38. package/dist/versioned-components/es/scrollable.js +1 -1
  39. package/dist/versioned-components/es/select.js +3 -3
  40. package/dist/versioned-components/es/solid-components2.js +1 -1
  41. package/dist/versioned-components/es/spinner.js +1 -1
  42. package/dist/versioned-components/es/step-group.js +1 -1
  43. package/dist/versioned-components/es/step.js +1 -1
  44. package/dist/versioned-components/es/switch.js +1 -1
  45. package/dist/versioned-components/es/tab-group.js +1 -1
  46. package/dist/versioned-components/es/tab-panel.js +1 -1
  47. package/dist/versioned-components/es/tab.js +1 -1
  48. package/dist/versioned-components/es/tag.js +1 -1
  49. package/dist/versioned-components/es/teaser-media.js +1 -1
  50. package/dist/versioned-components/es/teaser.js +1 -1
  51. package/dist/versioned-components/es/textarea.js +1 -1
  52. package/dist/versioned-components/es/tooltip.js +2 -2
  53. package/dist/versioned-components/es/video.js +1 -1
  54. package/dist/versioned-package/_components/button-group/button-group.d.ts +1 -1
  55. package/dist/versioned-package/_components/button-group/button-group.js +11 -11
  56. package/dist/versioned-package/components/accordion/accordion.d.ts +1 -1
  57. package/dist/versioned-package/components/accordion/accordion.js +2 -2
  58. package/dist/versioned-package/components/accordion-group/accordion-group.d.ts +1 -1
  59. package/dist/versioned-package/components/accordion-group/accordion-group.js +3 -3
  60. package/dist/versioned-package/components/badge/badge.d.ts +1 -1
  61. package/dist/versioned-package/components/badge/badge.js +1 -1
  62. package/dist/versioned-package/components/brandshape/brandshape.d.ts +1 -1
  63. package/dist/versioned-package/components/brandshape/brandshape.js +1 -1
  64. package/dist/versioned-package/components/button/button.d.ts +1 -1
  65. package/dist/versioned-package/components/button/button.js +4 -4
  66. package/dist/versioned-package/components/carousel/carousel.d.ts +5 -3
  67. package/dist/versioned-package/components/carousel/carousel.js +59 -20
  68. package/dist/versioned-package/components/carousel-item/carousel-item.d.ts +1 -1
  69. package/dist/versioned-package/components/carousel-item/carousel-item.js +1 -1
  70. package/dist/versioned-package/components/checkbox/checkbox.d.ts +1 -1
  71. package/dist/versioned-package/components/checkbox/checkbox.js +3 -3
  72. package/dist/versioned-package/components/checkbox-group/checkbox-group.d.ts +1 -1
  73. package/dist/versioned-package/components/checkbox-group/checkbox-group.js +5 -5
  74. package/dist/versioned-package/components/dialog/dialog.d.ts +1 -1
  75. package/dist/versioned-package/components/dialog/dialog.js +2 -2
  76. package/dist/versioned-package/components/divider/divider.d.ts +1 -1
  77. package/dist/versioned-package/components/divider/divider.js +2 -2
  78. package/dist/versioned-package/components/drawer/drawer.d.ts +1 -1
  79. package/dist/versioned-package/components/drawer/drawer.js +2 -2
  80. package/dist/versioned-package/components/dropdown/dropdown.d.ts +1 -1
  81. package/dist/versioned-package/components/dropdown/dropdown.js +8 -8
  82. package/dist/versioned-package/components/expandable/expandable.d.ts +1 -1
  83. package/dist/versioned-package/components/expandable/expandable.js +2 -2
  84. package/dist/versioned-package/components/flipcard/flipcard.d.ts +1 -1
  85. package/dist/versioned-package/components/flipcard/flipcard.js +1 -1
  86. package/dist/versioned-package/components/header/header.d.ts +1 -1
  87. package/dist/versioned-package/components/header/header.js +4 -4
  88. package/dist/versioned-package/components/icon/icon.d.ts +1 -1
  89. package/dist/versioned-package/components/icon/icon.js +1 -1
  90. package/dist/versioned-package/components/include/include.d.ts +1 -1
  91. package/dist/versioned-package/components/include/include.js +1 -1
  92. package/dist/versioned-package/components/input/input.d.ts +1 -1
  93. package/dist/versioned-package/components/input/input.js +2 -2
  94. package/dist/versioned-package/components/link/link.d.ts +1 -1
  95. package/dist/versioned-package/components/link/link.js +2 -2
  96. package/dist/versioned-package/components/map-marker/map-marker.d.ts +1 -1
  97. package/dist/versioned-package/components/map-marker/map-marker.js +1 -1
  98. package/dist/versioned-package/components/navigation-item/navigation-item.d.ts +7 -5
  99. package/dist/versioned-package/components/navigation-item/navigation-item.js +52 -21
  100. package/dist/versioned-package/components/notification/notification.d.ts +1 -1
  101. package/dist/versioned-package/components/notification/notification.js +5 -5
  102. package/dist/versioned-package/components/option/option.d.ts +1 -1
  103. package/dist/versioned-package/components/option/option.js +2 -2
  104. package/dist/versioned-package/components/popup/popup.d.ts +1 -1
  105. package/dist/versioned-package/components/popup/popup.js +1 -1
  106. package/dist/versioned-package/components/quickfact/quickfact.d.ts +1 -1
  107. package/dist/versioned-package/components/quickfact/quickfact.js +2 -2
  108. package/dist/versioned-package/components/radio/radio.d.ts +1 -1
  109. package/dist/versioned-package/components/radio/radio.js +2 -2
  110. package/dist/versioned-package/components/radio-button/radio-button.d.ts +1 -1
  111. package/dist/versioned-package/components/radio-button/radio-button.js +2 -2
  112. package/dist/versioned-package/components/radio-group/radio-group.d.ts +2 -2
  113. package/dist/versioned-package/components/radio-group/radio-group.js +13 -13
  114. package/dist/versioned-package/components/scrollable/scrollable.d.ts +1 -1
  115. package/dist/versioned-package/components/scrollable/scrollable.js +3 -3
  116. package/dist/versioned-package/components/select/select.d.ts +4 -4
  117. package/dist/versioned-package/components/select/select.js +25 -25
  118. package/dist/versioned-package/components/spinner/spinner.d.ts +1 -1
  119. package/dist/versioned-package/components/spinner/spinner.js +1 -1
  120. package/dist/versioned-package/components/step/step.d.ts +1 -1
  121. package/dist/versioned-package/components/step/step.js +5 -5
  122. package/dist/versioned-package/components/step-group/step-group.d.ts +1 -1
  123. package/dist/versioned-package/components/step-group/step-group.js +2 -2
  124. package/dist/versioned-package/components/switch/switch.d.ts +1 -1
  125. package/dist/versioned-package/components/switch/switch.js +1 -1
  126. package/dist/versioned-package/components/tab/tab.d.ts +1 -1
  127. package/dist/versioned-package/components/tab/tab.js +2 -2
  128. package/dist/versioned-package/components/tab-group/tab-group.d.ts +1 -1
  129. package/dist/versioned-package/components/tab-group/tab-group.js +13 -13
  130. package/dist/versioned-package/components/tab-panel/tab-panel.d.ts +1 -1
  131. package/dist/versioned-package/components/tab-panel/tab-panel.js +2 -2
  132. package/dist/versioned-package/components/tag/tag.d.ts +1 -1
  133. package/dist/versioned-package/components/tag/tag.js +2 -2
  134. package/dist/versioned-package/components/teaser/teaser.js +1 -1
  135. package/dist/versioned-package/components/teaser-media/teaser-media.js +1 -1
  136. package/dist/versioned-package/components/textarea/textarea.d.ts +1 -1
  137. package/dist/versioned-package/components/textarea/textarea.js +2 -2
  138. package/dist/versioned-package/components/tooltip/tooltip.d.ts +1 -1
  139. package/dist/versioned-package/components/tooltip/tooltip.js +5 -5
  140. package/dist/versioned-package/components/video/video.d.ts +1 -1
  141. package/dist/versioned-package/components/video/video.js +2 -2
  142. package/dist/versioned-package/internal/form.js +3 -3
  143. package/dist/versioned-package/styles/headline/headline.css.js +1 -1
  144. package/dist/versioned-package/utilities/autocomplete-config.js +4 -4
  145. package/dist/versioned-styles/solid-styles.css +1 -1
  146. package/dist/vscode.html-custom-data.json +52 -44
  147. package/dist/web-types.json +107 -51
  148. package/package.json +3 -3
@@ -1 +1 @@
1
- import{S as t,x as e,t as a,c as l,i as s,e as r,n as i,a as o}from"./solid-components2.js";import{d as n}from"./default-value.js";import{F as h}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,v=(t,e,a,l)=>{for(var s,r=l>1?void 0:l?b(e,a):e,i=t.length-1;i>=0;i--)(s=t[i])&&(r=(l?s(e,a,r):s(r))||r);return l&&r&&m(e,a,r),r};let x=class extends t{constructor(){super(...arguments),this.formControlController=new h(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,r=!!this.helpText||!!l,i=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",o="sm"===this.size?"text-sm":"text-base",n={sm:"text-base ml-1",md:"text-lg ml-2",lg:"text-xl ml-2"}[this.size];return e`<div part="form-control" class="text-left"><label part="form-control-label" id="label" class="${a("mb-2",s?"inline-block":"hidden",o)}" for="input" aria-hidden="${s?"false":"true"}"><slot name="label">${this.label}</slot></label><div part="form-control-input" class="${a("relative 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"}[i])}"></div><div part="base" class="${a("textarea px-4 flex items-top rounded-default bg-white group",{sm:"textarea-sm py-1",md:"textarea-md py-1",lg:"textarea-lg py-2"}[this.size],{disabled:"text-neutral-500",readonly:"text-black",activeInvalid:"text-error",activeValid:"text-success",active:"text-black",invalid:"text-error",valid:"text-success",default:"text-black"}[i],this.disabled||this.readonly?"":"hover:bg-neutral-200",this.readonly&&"bg-neutral-100")}"><textarea part="textarea" id="input" class="${a("flex-grow focus:outline-none bg-transparent placeholder-neutral-700 resize-none",this.disabled&&"cursor-not-allowed",o)}" 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" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle?e`<sd-3-13-0-icon class="${a("text-error absolute right-4 bg-white group-hover:bg-neutral-200",n)}" library="system" name="risk" part="invalid-icon"></sd-3-13-0-icon>`:""} ${this.styleOnValid&&this.showValidStyle?e`<sd-3-13-0-icon class="${a("text-success absolute right-4 bg-white group-hover:bg-neutral-200",n)}" library="system" name="status-check" part="valid-icon"></sd-3-13-0-icon>`:""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${a("text-sm text-neutral-700",r?"block":"hidden")}" aria-hidden="${r?"false":"true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`}};x.styles=[l,t.styles,s`:host{display:block}:host([required]) #label::after{content:' *'}.no-scrollbar::-webkit-scrollbar{display:none}`],v([r("#input")],x.prototype,"textarea",2),v([r("#invalid-message")],x.prototype,"invalidMessage",2),v([c()],x.prototype,"hasFocus",2),v([c()],x.prototype,"showValidStyle",2),v([c()],x.prototype,"showInvalidStyle",2),v([i()],x.prototype,"title",2),v([i()],x.prototype,"name",2),v([i()],x.prototype,"value",2),v([i({reflect:!0})],x.prototype,"size",2),v([i()],x.prototype,"label",2),v([i({attribute:"help-text"})],x.prototype,"helpText",2),v([i()],x.prototype,"placeholder",2),v([i({type:Number})],x.prototype,"rows",2),v([i({type:Boolean,reflect:!0})],x.prototype,"disabled",2),v([i({type:Boolean,reflect:!0})],x.prototype,"readonly",2),v([i({reflect:!0})],x.prototype,"form",2),v([i({type:Boolean,reflect:!0})],x.prototype,"required",2),v([i({type:Number})],x.prototype,"minlength",2),v([i({type:Number})],x.prototype,"maxlength",2),v([i()],x.prototype,"autocapitalize",2),v([i()],x.prototype,"autocorrect",2),v([i()],x.prototype,"autocomplete",2),v([i({type:Boolean})],x.prototype,"autofocus",2),v([i()],x.prototype,"enterkeyhint",2),v([i({type:Boolean,reflect:!0,attribute:"style-on-valid"})],x.prototype,"styleOnValid",2),v([i({type:Boolean,converter:{fromAttribute:t=>!(!t||"false"===t),toAttribute:t=>t?"true":"false"}})],x.prototype,"spellcheck",2),v([i()],x.prototype,"inputmode",2),v([n()],x.prototype,"defaultValue",2),v([y("disabled",{waitUntilFirstUpdate:!0})],x.prototype,"handleDisabledChange",1),v([y("rows",{waitUntilFirstUpdate:!0})],x.prototype,"handleRowsChange",1),v([y("value",{waitUntilFirstUpdate:!0})],x.prototype,"handleValueChange",1),x=v([o("sd-3-13-0-textarea")],x);export{x as default};
1
+ import{S as t,x as e,t as a,c as l,i as s,e as r,n as i,a as o}from"./solid-components2.js";import{d as n}from"./default-value.js";import{F as h}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,v=(t,e,a,l)=>{for(var s,r=l>1?void 0:l?b(e,a):e,i=t.length-1;i>=0;i--)(s=t[i])&&(r=(l?s(e,a,r):s(r))||r);return l&&r&&m(e,a,r),r};let x=class extends t{constructor(){super(...arguments),this.formControlController=new h(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,r=!!this.helpText||!!l,i=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",o="sm"===this.size?"text-sm":"text-base",n={sm:"text-base ml-1",md:"text-lg ml-2",lg:"text-xl ml-2"}[this.size];return e`<div part="form-control" class="text-left"><label part="form-control-label" id="label" class="${a("mb-2",s?"inline-block":"hidden",o)}" for="input" aria-hidden="${s?"false":"true"}"><slot name="label">${this.label}</slot></label><div part="form-control-input" class="${a("relative 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"}[i])}"></div><div part="base" class="${a("textarea px-4 flex items-top rounded-default bg-white group",{sm:"textarea-sm py-1",md:"textarea-md py-1",lg:"textarea-lg py-2"}[this.size],{disabled:"text-neutral-500",readonly:"text-black",activeInvalid:"text-error",activeValid:"text-success",active:"text-black",invalid:"text-error",valid:"text-success",default:"text-black"}[i],this.disabled||this.readonly?"":"hover:bg-neutral-200",this.readonly&&"bg-neutral-100")}"><textarea part="textarea" id="input" class="${a("flex-grow focus:outline-none bg-transparent placeholder-neutral-700 resize-none",this.disabled&&"cursor-not-allowed",o)}" 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" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle?e`<sd-3-14-1-icon class="${a("text-error absolute right-4 bg-white group-hover:bg-neutral-200",n)}" library="system" name="risk" part="invalid-icon"></sd-3-14-1-icon>`:""} ${this.styleOnValid&&this.showValidStyle?e`<sd-3-14-1-icon class="${a("text-success absolute right-4 bg-white group-hover:bg-neutral-200",n)}" library="system" name="status-check" part="valid-icon"></sd-3-14-1-icon>`:""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${a("text-sm text-neutral-700",r?"block":"hidden")}" aria-hidden="${r?"false":"true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`}};x.styles=[l,t.styles,s`:host{display:block}:host([required]) #label::after{content:' *'}.no-scrollbar::-webkit-scrollbar{display:none}`],v([r("#input")],x.prototype,"textarea",2),v([r("#invalid-message")],x.prototype,"invalidMessage",2),v([c()],x.prototype,"hasFocus",2),v([c()],x.prototype,"showValidStyle",2),v([c()],x.prototype,"showInvalidStyle",2),v([i()],x.prototype,"title",2),v([i()],x.prototype,"name",2),v([i()],x.prototype,"value",2),v([i({reflect:!0})],x.prototype,"size",2),v([i()],x.prototype,"label",2),v([i({attribute:"help-text"})],x.prototype,"helpText",2),v([i()],x.prototype,"placeholder",2),v([i({type:Number})],x.prototype,"rows",2),v([i({type:Boolean,reflect:!0})],x.prototype,"disabled",2),v([i({type:Boolean,reflect:!0})],x.prototype,"readonly",2),v([i({reflect:!0})],x.prototype,"form",2),v([i({type:Boolean,reflect:!0})],x.prototype,"required",2),v([i({type:Number})],x.prototype,"minlength",2),v([i({type:Number})],x.prototype,"maxlength",2),v([i()],x.prototype,"autocapitalize",2),v([i()],x.prototype,"autocorrect",2),v([i()],x.prototype,"autocomplete",2),v([i({type:Boolean})],x.prototype,"autofocus",2),v([i()],x.prototype,"enterkeyhint",2),v([i({type:Boolean,reflect:!0,attribute:"style-on-valid"})],x.prototype,"styleOnValid",2),v([i({type:Boolean,converter:{fromAttribute:t=>!(!t||"false"===t),toAttribute:t=>t?"true":"false"}})],x.prototype,"spellcheck",2),v([i()],x.prototype,"inputmode",2),v([n()],x.prototype,"defaultValue",2),v([y("disabled",{waitUntilFirstUpdate:!0})],x.prototype,"handleDisabledChange",1),v([y("rows",{waitUntilFirstUpdate:!0})],x.prototype,"handleRowsChange",1),v([y("value",{waitUntilFirstUpdate:!0})],x.prototype,"handleValueChange",1),x=v([o("sd-3-14-1-textarea")],x);export{x 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.content="",this.placement="top",this.size="lg",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-13-0-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.content="",this.placement="top",this.size="lg",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-14-1-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-13-0-icon library="system" name="info-circle" class="${i(this.disabled&&"sd-interactive--disabled")}"></sd-3-13-0-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-13-0-popup>`}};b.styles=[t.styles,o(y),a`:host{--hide-delay:0ms;--show-delay:150ms;display:contents}sd-3-13-0-popup{--arrow-color:rgb(var(--sd-color-primary, 0 53 142) / 1);--arrow-size:10px}sd-3-13-0-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-13-0-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-13-0-popup[placement^=top]::part(popup){transform-origin:bottom}sd-3-13-0-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-13-0-popup")],b.prototype,"popup",2),f([r()],b.prototype,"content",2),f([r({reflect:!0})],b.prototype,"placement",2),f([r()],b.prototype,"size",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-13-0-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-14-1-icon library="system" name="info-circle" class="${i(this.disabled&&"sd-interactive--disabled")}"></sd-3-14-1-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-14-1-popup>`}};b.styles=[t.styles,o(y),a`:host{--hide-delay:0ms;--show-delay:150ms;display:contents}sd-3-14-1-popup{--arrow-color:rgb(var(--sd-color-primary, 0 53 142) / 1);--arrow-size:10px}sd-3-14-1-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-14-1-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-14-1-popup[placement^=top]::part(popup){transform-origin:bottom}sd-3-14-1-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-14-1-popup")],b.prototype,"popup",2),f([r()],b.prototype,"content",2),f([r({reflect:!0})],b.prototype,"placement",2),f([r()],b.prototype,"size",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-14-1-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 a,n as i,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 a,i=o>1?void 0:o?p(e,s):e,l=t.length-1;l>=0;l--)(a=t[l])&&(i=(o?a(e,s,i):a(i))||i);return o&&i&&n(e,s,i),i};let y=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}fadeoutPoster(){this.poster instanceof HTMLImageElement&&(this.poster.style.opacity="0")}hidePoster(){this.poster instanceof HTMLImageElement&&(this.poster.style.display="none")}play(){this.emit("sd-play"),this.playing=!0,this.fadeoutPoster()}handleKeydown(t){t instanceof KeyboardEvent&&("Enter"===t.key||" "===t.key)&&(this.play(),setTimeout((()=>{var t;null==(t=this.querySelector("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.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","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")}"><slot name="play-icon" part="play-icon" class="${s(this.isBelowBreakpoint?"text-[2rem]":"text-[4rem]")}"><sd-3-13-0-icon id="default-play-icon" library="system" name="start"></sd-3-13-0-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>`}};y.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([a("[part=base]")],y.prototype,"hostEl",2),d([i({type:Boolean,reflect:!0})],y.prototype,"playing",2),d([i({type:Boolean,reflect:!0})],y.prototype,"overlay",2),d([i({type:Boolean})],y.prototype,"isBelowBreakpoint",2),y=d([l("sd-3-13-0-video")],y);export{y as default};
1
+ import{S as t,x as e,t as s,i as o,e as a,n as i,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 a,i=o>1?void 0:o?p(e,s):e,l=t.length-1;l>=0;l--)(a=t[l])&&(i=(o?a(e,s,i):a(i))||i);return o&&i&&n(e,s,i),i};let y=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}fadeoutPoster(){this.poster instanceof HTMLImageElement&&(this.poster.style.opacity="0")}hidePoster(){this.poster instanceof HTMLImageElement&&(this.poster.style.display="none")}play(){this.emit("sd-play"),this.playing=!0,this.fadeoutPoster()}handleKeydown(t){t instanceof KeyboardEvent&&("Enter"===t.key||" "===t.key)&&(this.play(),setTimeout((()=>{var t;null==(t=this.querySelector("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.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","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")}"><slot name="play-icon" part="play-icon" class="${s(this.isBelowBreakpoint?"text-[2rem]":"text-[4rem]")}"><sd-3-14-1-icon id="default-play-icon" library="system" name="start"></sd-3-14-1-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>`}};y.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([a("[part=base]")],y.prototype,"hostEl",2),d([i({type:Boolean,reflect:!0})],y.prototype,"playing",2),d([i({type:Boolean,reflect:!0})],y.prototype,"overlay",2),d([i({type:Boolean})],y.prototype,"isBelowBreakpoint",2),y=d([l("sd-3-14-1-video")],y);export{y 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-13-0-button-group': SdButtonGroup;
17
+ 'sd-3-14-1-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-13-0-button-group__button--focus");
24
+ button == null ? void 0 : button.classList.add("sd-3-14-1-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-13-0-button-group__button--focus");
28
+ button == null ? void 0 : button.classList.remove("sd-3-14-1-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-13-0-button-group__button--hover");
32
+ button == null ? void 0 : button.classList.add("sd-3-14-1-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-13-0-button-group__button--hover");
36
+ button == null ? void 0 : button.classList.remove("sd-3-14-1-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-13-0-button-group__button");
45
- button.classList.toggle("sd-3-13-0-button-group__button--first", index === 0);
46
- button.classList.toggle("sd-3-13-0-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
47
- button.classList.toggle("sd-3-13-0-button-group__button--last", index === slottedElements.length - 1);
48
- button.classList.toggle("sd-3-13-0-button-group__button--radio", button.tagName.toLowerCase() === "sd-3-13-0-radio-button");
44
+ button.classList.add("sd-3-14-1-button-group__button");
45
+ button.classList.toggle("sd-3-14-1-button-group__button--first", index === 0);
46
+ button.classList.toggle("sd-3-14-1-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
47
+ button.classList.toggle("sd-3-14-1-button-group__button--last", index === slottedElements.length - 1);
48
+ button.classList.toggle("sd-3-14-1-button-group__button--radio", button.tagName.toLowerCase() === "sd-3-14-1-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-13-0-button-group")
67
+ customElement("sd-3-14-1-button-group")
68
68
  ], SdButtonGroup);
69
69
  function findButton(el) {
70
- const selector = "sd-3-13-0-button, sd-3-13-0-radio-button";
70
+ const selector = "sd-3-14-1-button, sd-3-14-1-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-13-0-accordion': SdAccordion;
22
+ 'sd-3-14-1-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-13-0-icon library="system" name="chevron-down"></sd-3-13-0-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-3-13-0-icon library="system" name="chevron-down"></sd-3-13-0-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-14-1-icon library="system" name="chevron-down"></sd-3-14-1-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-3-14-1-icon library="system" name="chevron-down"></sd-3-14-1-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-13-0-accordion")
135
+ customElement("sd-3-14-1-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-13-0-accordion-group': SdAccordionGroup;
14
+ 'sd-3-14-1-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-13-0-accordion:not(:first-of-type)){margin-top:-1px}`
50
+ css`:host{display:block}::slotted(sd-3-14-1-accordion:not(:first-of-type)){margin-top:-1px}`
51
51
  ];
52
52
  __decorateClass([
53
- queryAssignedElements({ selector: "sd-3-13-0-accordion" })
53
+ queryAssignedElements({ selector: "sd-3-14-1-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-13-0-accordion-group")
59
+ customElement("sd-3-14-1-accordion-group")
60
60
  ], SdAccordionGroup);
61
61
  export {
62
62
  SdAccordionGroup 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-13-0-badge': SdBadge;
11
+ 'sd-3-14-1-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-13-0-badge")
55
+ customElement("sd-3-14-1-badge")
56
56
  ], SdBadge);
57
57
  export {
58
58
  SdBadge as default
@@ -26,7 +26,7 @@ export default class SdBrandshape extends SolidElement {
26
26
  }
27
27
  declare global {
28
28
  interface HTMLElementTagNameMap {
29
- 'sd-3-13-0-brandshape': SdBrandshape;
29
+ 'sd-3-14-1-brandshape': SdBrandshape;
30
30
  }
31
31
  }
32
32
  export {};
@@ -146,7 +146,7 @@ __decorateClass([
146
146
  state()
147
147
  ], SdBrandshape.prototype, "componentBreakpoint", 2);
148
148
  SdBrandshape = __decorateClass([
149
- customElement("sd-3-13-0-brandshape")
149
+ customElement("sd-3-14-1-brandshape")
150
150
  ], SdBrandshape);
151
151
  export {
152
152
  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-13-0-button': SdButton;
50
+ 'sd-3-14-1-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-13-0-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-3-13-0-spinner>` : ""}</${tag}>`;
215
+ )}"></slot>${this.loading ? html`<sd-3-14-1-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-3-14-1-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-13-0-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-3-13-0-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-13-0-icon),sd-3-13-0-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-14-1-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-3-14-1-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-14-1-icon),sd-3-14-1-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-13-0-icon" })
227
+ queryAssignedElements({ selector: "sd-3-14-1-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-13-0-button")
290
+ customElement("sd-3-14-1-button")
291
291
  ], SdButton);
292
292
  export {
293
293
  SdButton as default
@@ -12,6 +12,7 @@ export default class SdCarousel extends SolidElement {
12
12
  scrollContainer: HTMLElement;
13
13
  paginationContainer: HTMLElement;
14
14
  activeSlide: number;
15
+ currentPage: number;
15
16
  pausedAutoplay: boolean;
16
17
  private autoplayController;
17
18
  private scrollController;
@@ -23,8 +24,8 @@ export default class SdCarousel extends SolidElement {
23
24
  connectedCallback(): void;
24
25
  disconnectedCallback(): void;
25
26
  protected firstUpdated(): void;
26
- private getPageCount;
27
- private getCurrentPage;
27
+ static getPageCount(totalSlides: number, slidesPerPage: number, slidesPerMove: number): number;
28
+ static getCurrentPage(totalSlides: number, activeSlide: number, slidesPerPage: number, slidesPerMove: number): number;
28
29
  private getSlides;
29
30
  private handleKeyDown;
30
31
  private handleScrollEnd;
@@ -36,12 +37,13 @@ export default class SdCarousel extends SolidElement {
36
37
  handleAutoplayChange(): void;
37
38
  previous(behavior?: ScrollBehavior): void;
38
39
  next(behavior?: ScrollBehavior): void;
40
+ nextTillFirst(behavior?: ScrollBehavior): void;
39
41
  goToSlide(index: number, behavior?: ScrollBehavior): void;
40
42
  render(): import("lit-html").TemplateResult<1>;
41
43
  static styles: import("lit").CSSResultGroup[];
42
44
  }
43
45
  declare global {
44
46
  interface HTMLElementTagNameMap {
45
- 'sd-3-13-0-carousel': SdCarousel;
47
+ 'sd-3-14-1-carousel': SdCarousel;
46
48
  }
47
49
  }
@@ -35,10 +35,11 @@ let SdCarousel = class extends SolidElement {
35
35
  this.slidesPerPage = 1;
36
36
  this.slidesPerMove = 1;
37
37
  this.activeSlide = 0;
38
+ this.currentPage = 1;
38
39
  this.pausedAutoplay = false;
39
40
  this.autoplayController = new AutoplayController(this, () => this.next());
40
41
  this.scrollController = new ScrollController(this);
41
- this.slides = this.getElementsByTagName("sd-3-13-0-carousel-item");
42
+ this.slides = this.getElementsByTagName("sd-3-14-1-carousel-item");
42
43
  this.intersectionObserverEntries = /* @__PURE__ */ new Map();
43
44
  this.localize = new LocalizeController(this);
44
45
  this.handleSlotChange = (mutations) => {
@@ -87,11 +88,14 @@ let SdCarousel = class extends SolidElement {
87
88
  this.mutationObserver = new MutationObserver(this.handleSlotChange);
88
89
  this.mutationObserver.observe(this, { childList: true, subtree: false });
89
90
  }
90
- getPageCount() {
91
- return Math.ceil(this.getSlides().length / this.slidesPerPage);
91
+ static getPageCount(totalSlides, slidesPerPage, slidesPerMove) {
92
+ return Math.ceil((totalSlides - slidesPerPage) / slidesPerMove) + 1 > 0 ? Math.ceil((totalSlides - slidesPerPage) / slidesPerMove) + 1 : (
93
+ // Returns 1 if the total number of slides is less than the number of slides per page
94
+ 1
95
+ );
92
96
  }
93
- getCurrentPage() {
94
- return Math.ceil(this.activeSlide / this.slidesPerPage);
97
+ static getCurrentPage(totalSlides, activeSlide, slidesPerPage, slidesPerMove) {
98
+ return Math.ceil((totalSlides - slidesPerPage) / slidesPerMove) - Math.ceil((totalSlides - slidesPerPage - activeSlide) / slidesPerMove) + 1;
95
99
  }
96
100
  getSlides({ excludeClones = true } = {}) {
97
101
  return [...this.slides].filter((slide) => !excludeClones || !slide.hasAttribute("data-clone"));
@@ -183,6 +187,12 @@ let SdCarousel = class extends SolidElement {
183
187
  this.goToSlide(this.activeSlide, "auto");
184
188
  }
185
189
  handelSlideChange() {
190
+ this.currentPage = SdCarousel.getCurrentPage(
191
+ this.getSlides().length,
192
+ this.activeSlide,
193
+ this.slidesPerPage,
194
+ this.slidesPerMove
195
+ );
186
196
  const slides = this.getSlides();
187
197
  slides.forEach((slide, i) => {
188
198
  slide.classList.toggle("--is-active", i === this.activeSlide);
@@ -195,6 +205,9 @@ let SdCarousel = class extends SolidElement {
195
205
  }
196
206
  });
197
207
  }
208
+ if (this.currentPage > SdCarousel.getPageCount(this.getSlides().length, this.slidesPerPage, this.slidesPerMove)) {
209
+ this.nextTillFirst();
210
+ }
198
211
  }
199
212
  handleSlidesPerMoveChange() {
200
213
  const slides = this.getSlides({ excludeClones: false });
@@ -226,7 +239,11 @@ let SdCarousel = class extends SolidElement {
226
239
  previousIndex -= 1;
227
240
  canSnap = Math.abs(previousIndex - this.slidesPerMove) % this.slidesPerMove === 0;
228
241
  }
229
- this.goToSlide(previousIndex, behavior);
242
+ if (this.currentPage - 1 === 0 && this.loop) {
243
+ this.goToSlide(this.activeSlide - this.slidesPerPage, behavior);
244
+ } else {
245
+ this.goToSlide(previousIndex, behavior);
246
+ }
230
247
  }
231
248
  /**
232
249
  * Move the carousel forward by `slides-per-move` slides.
@@ -234,7 +251,22 @@ let SdCarousel = class extends SolidElement {
234
251
  * @param behavior - The behavior used for scrolling.
235
252
  */
236
253
  next(behavior = "smooth") {
237
- this.goToSlide(this.activeSlide + this.slidesPerMove, behavior);
254
+ if (this.currentPage + 1 > SdCarousel.getPageCount(this.getSlides().length, this.slidesPerPage, this.slidesPerMove) && this.loop) {
255
+ this.nextTillFirst(behavior);
256
+ } else {
257
+ this.goToSlide(this.activeSlide + this.slidesPerMove, behavior);
258
+ }
259
+ }
260
+ nextTillFirst(behavior = "smooth") {
261
+ while (this.activeSlide !== 0) {
262
+ this.goToSlide(this.activeSlide + 1, behavior);
263
+ }
264
+ this.currentPage = SdCarousel.getCurrentPage(
265
+ this.getSlides().length,
266
+ this.activeSlide,
267
+ this.slidesPerPage,
268
+ this.slidesPerMove
269
+ );
238
270
  }
239
271
  /**
240
272
  * Scrolls the carousel to the slide specified by `index`.
@@ -248,7 +280,7 @@ let SdCarousel = class extends SolidElement {
248
280
  const slidesWithClones = this.getSlides({ excludeClones: false });
249
281
  const newActiveSlide = (index + slides.length) % slides.length;
250
282
  this.activeSlide = newActiveSlide;
251
- const nextSlideIndex = clamp(index + (loop ? slidesPerPage : 0), 0, slidesWithClones.length - 1);
283
+ const nextSlideIndex = clamp(index + (loop ? slidesPerPage : 0), 0, slidesWithClones.length + 1);
252
284
  const nextSlide = slidesWithClones[nextSlideIndex];
253
285
  const scrollContainerRect = scrollContainer.getBoundingClientRect();
254
286
  const nextSlideRect = nextSlide.getBoundingClientRect();
@@ -260,10 +292,15 @@ let SdCarousel = class extends SolidElement {
260
292
  }
261
293
  render() {
262
294
  const { scrollController, slidesPerPage } = this;
263
- const pagesCount = this.getPageCount();
264
- const currentPage = this.getCurrentPage();
265
- const prevEnabled = this.loop || currentPage > 0;
266
- const nextEnabled = this.loop || currentPage < pagesCount - 1;
295
+ const pagesCount = SdCarousel.getPageCount(this.getSlides().length, this.slidesPerPage, this.slidesPerMove);
296
+ const currentPage = SdCarousel.getCurrentPage(
297
+ this.getSlides().length,
298
+ this.activeSlide,
299
+ this.slidesPerPage,
300
+ this.slidesPerMove
301
+ );
302
+ const prevEnabled = this.loop || currentPage > 1;
303
+ const nextEnabled = this.loop || currentPage < pagesCount;
267
304
  const isLtr = this.localize.dir() === "ltr";
268
305
  return html`<div part="base" class="${cx(`carousel h-full w-full`)}"><div id="scroll-container" part="scroll-container" class="${cx(
269
306
  `carousel__slides mb-6
@@ -275,8 +312,8 @@ let SdCarousel = class extends SolidElement {
275
312
  "!mr-6 !rounded-sm sd-interactive",
276
313
  !prevEnabled && "sd-interactive--disabled",
277
314
  this.inverted ? "sd-interactive--inverted" : "sd-interactive--reset"
278
- )}" aria-label="${this.localize.term("previousSlide")}" aria-controls="scroll-container" aria-disabled="${prevEnabled ? "false" : "true"}" @click="${prevEnabled ? () => this.previous() : null}"><slot name="previous-icon"><sd-3-13-0-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-down" : "chevron-up"}"></sd-3-13-0-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) => {
279
- const isActive = index === currentPage;
315
+ )}" aria-label="${this.localize.term("previousSlide")}" aria-controls="scroll-container" aria-disabled="${prevEnabled ? "false" : "true"}" @click="${prevEnabled ? () => this.previous() : null}"><slot name="previous-icon"><sd-3-14-1-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-down" : "chevron-up"}"></sd-3-14-1-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) => {
316
+ const isActive = index + 1 === currentPage;
280
317
  return html`<button part="pagination-item ${isActive ? "pagination-item--active" : ""}" class="${cx(
281
318
  "carousel__pagination-item",
282
319
  "block cursor-pointer bg-none border-0 rounded-full",
@@ -288,26 +325,25 @@ let SdCarousel = class extends SolidElement {
288
325
  isActive && "bg-accent border-none",
289
326
  isActive ? this.inverted ? "hover:bg-accent-300" : "hover:bg-accent-550" : ""
290
327
  )}"></span></button>`;
291
- })}</div>` : html`<span part="pagination-number" class="carousel__pagination number flex gap-0.5 cursor-default select-none" aria-controls="scroll-container"><span part="pagination-item" class="${cx("w-5 text-center border-b-2 border-accent", this.inverted ? "text-white" : "text-black")}">${currentPage + 1}</span> <span part="pagination-divider" class="${cx("scale-y-[1.5]", "text-center", this.inverted ? "text-white" : "text-black")}">/</span> <span part="pagination-item" class="${cx("w-5 text-center", this.inverted ? "text-white" : "text-black")}">${pagesCount}</span></span>`} <button part="navigation-button navigation-button--next" id="carousel__navigation-button--next" ?disabled="${!nextEnabled ? true : false}" class="${cx(
328
+ })}</div>` : html`<span part="pagination-number" class="carousel__pagination number flex gap-0.5 cursor-default select-none" aria-controls="scroll-container"><span part="pagination-item" class="${cx("w-5 text-center border-b-2 border-accent", this.inverted ? "text-white" : "text-black")}">${currentPage}</span> <span part="pagination-divider" class="${cx("scale-y-[1.5]", "text-center", this.inverted ? "text-white" : "text-black")}">/</span> <span part="pagination-item" class="${cx("w-5 text-center", this.inverted ? "text-white" : "text-black")}">${pagesCount}</span></span>`} <button part="navigation-button navigation-button--next" id="carousel__navigation-button--next" ?disabled="${!nextEnabled ? true : false}" class="${cx(
292
329
  "!ml-6 !rounded-sm sd-interactive ",
293
330
  !nextEnabled && "sd-interactive--disabled",
294
331
  this.inverted ? "sd-interactive--inverted" : "sd-interactive--reset"
295
332
  )}" aria-label="${this.localize.term("nextSlide")}" aria-controls="scroll-container" aria-disabled="${nextEnabled ? "false" : "true"}" @click="${nextEnabled ? () => {
296
- console.log("click-next");
297
333
  this.next();
298
- } : null}"><slot name="next-icon"><sd-3-13-0-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-up" : "chevron-down"}"></sd-3-13-0-icon></slot></button></div><button class="${cx(
334
+ } : null}"><slot name="next-icon"><sd-3-14-1-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-up" : "chevron-down"}"></sd-3-14-1-icon></slot></button></div><button class="${cx(
299
335
  "ml-6 !rounded-sm",
300
336
  "!absolute !right-0 sd-interactive",
301
337
  this.inverted ? "sd-interactive--inverted" : "sd-interactive--reset",
302
338
  !this.autoplay && "!hidden"
303
- )}" part="autoplay-controls" @click="${() => this.pausedAutoplay = !this.pausedAutoplay}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-3-13-0-icon class="h-6 w-6 grid place-items-center" library="system" name="start"></sd-3-13-0-icon></slot><slot name="autoplay-pause" class="${cx(this.pausedAutoplay ? "hidden" : "")}"><sd-3-13-0-icon class="h-6 w-6 grid place-items-center" library="system" name="pause"></sd-3-13-0-icon></slot></button></div></div>`;
339
+ )}" part="autoplay-controls" @click="${() => this.pausedAutoplay = !this.pausedAutoplay}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-3-14-1-icon class="h-6 w-6 grid place-items-center" library="system" name="start"></sd-3-14-1-icon></slot><slot name="autoplay-pause" class="${cx(this.pausedAutoplay ? "hidden" : "")}"><sd-3-14-1-icon class="h-6 w-6 grid place-items-center" library="system" name="pause"></sd-3-14-1-icon></slot></button></div></div>`;
304
340
  }
305
341
  };
306
342
  SdCarousel.styles = [
307
343
  SolidElement.styles,
308
344
  unsafeCSS(InteractiveStyles),
309
345
  componentStyles,
310
- 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-13-0-button::part(label){pointer-events:none;display:flex;flex:1 1 auto;align-items:center}`
346
+ 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-14-1-button::part(label){pointer-events:none;display:flex;flex:1 1 auto;align-items:center}`
311
347
  ];
312
348
  __decorateClass([
313
349
  property({ type: String, reflect: true })
@@ -339,6 +375,9 @@ __decorateClass([
339
375
  __decorateClass([
340
376
  state()
341
377
  ], SdCarousel.prototype, "activeSlide", 2);
378
+ __decorateClass([
379
+ state()
380
+ ], SdCarousel.prototype, "currentPage", 2);
342
381
  __decorateClass([
343
382
  state()
344
383
  ], SdCarousel.prototype, "pausedAutoplay", 2);
@@ -359,7 +398,7 @@ __decorateClass([
359
398
  watch("autoplay")
360
399
  ], SdCarousel.prototype, "handleAutoplayChange", 1);
361
400
  SdCarousel = __decorateClass([
362
- customElement("sd-3-13-0-carousel")
401
+ customElement("sd-3-14-1-carousel")
363
402
  ], SdCarousel);
364
403
  export {
365
404
  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-13-0-carousel-item': SdCarouselItem;
10
+ 'sd-3-14-1-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-13-0-carousel-item")
33
+ customElement("sd-3-14-1-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-13-0-checkbox': SdCheckbox;
40
+ 'sd-3-14-1-checkbox': SdCheckbox;
41
41
  }
42
42
  }
@@ -109,7 +109,7 @@ let SdCheckbox = class extends SolidElement {
109
109
  render() {
110
110
  const checkboxState = this.disabled && this.indeterminate ? "disabledIndeterminate" : this.disabled && this.checked ? "disabledChecked" : this.disabled ? "disabled" : this.showInvalidStyle && this.indeterminate ? "invalidIndeterminate" : this.showInvalidStyle ? "invalid" : this.checked || this.indeterminate ? "filled" : "default";
111
111
  return html`<label part="base" class="${cx(
112
- "sd-3-13-0-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
112
+ "sd-3-14-1-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
113
113
  this.disabled && "hover:cursor-not-allowed",
114
114
  {
115
115
  /* sizes, fonts */
@@ -133,7 +133,7 @@ let SdCheckbox = class extends SolidElement {
133
133
  filled: "border-accent hover:border-accent-550 group-hover:border-accent-550 bg-accent group-hover:bg-accent-550",
134
134
  default: "border-neutral-800 hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white"
135
135
  }[checkboxState]
136
- )}">${this.checked ? html`<sd-3-13-0-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-check"></sd-3-13-0-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-3-13-0-icon part="indeterminate-icon" class="text-white w-3 h-3" library="system" name="status-minus"></sd-3-13-0-icon>` : ""} </span><span part="label" id="label" class="${cx(
136
+ )}">${this.checked ? html`<sd-3-14-1-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-check"></sd-3-14-1-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-3-14-1-icon part="indeterminate-icon" class="text-white w-3 h-3" library="system" name="status-minus"></sd-3-14-1-icon>` : ""} </span><span part="label" id="label" class="${cx(
137
137
  "select-none inline-block ml-2",
138
138
  this.disabled ? "text-neutral-500" : this.showInvalidStyle ? "text-error" : "text-black"
139
139
  )}"><slot></slot></span></label> ${this.formControlController.renderInvalidMessage()}`;
@@ -189,7 +189,7 @@ __decorateClass([
189
189
  watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
190
190
  ], SdCheckbox.prototype, "handleStateChange", 1);
191
191
  SdCheckbox = __decorateClass([
192
- customElement("sd-3-13-0-checkbox")
192
+ customElement("sd-3-14-1-checkbox")
193
193
  ], SdCheckbox);
194
194
  export {
195
195
  SdCheckbox as default
@@ -15,6 +15,6 @@ export default class SdCheckboxGroup extends SolidElement {
15
15
  }
16
16
  declare global {
17
17
  interface HTMLElementTagNameMap {
18
- 'sd-3-13-0-checkbox-group': SdCheckboxGroup;
18
+ 'sd-3-14-1-checkbox-group': SdCheckboxGroup;
19
19
  }
20
20
  }