@florid-kit/components 2.3.2 → 2.3.4

package/aria.d.ts

@@ -15,7 +15,7 @@ export type ARIAAttribute = ARIAPropertyToAttribute<ARIAProperty>;
 /**
  * Accessibility Object Model aria attributes.
  */
-export declare const ARIA_ATTRIBUTES: ("aria-label" | "aria-modal" | "aria-expanded" | "aria-pressed" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-description" | "aria-disabled" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-live" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-placeholder" | "aria-posinset" | "aria-readonly" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext")[];
+export declare const ARIA_ATTRIBUTES: ("aria-label" | "aria-modal" | "aria-pressed" | "aria-expanded" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-description" | "aria-disabled" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-live" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-placeholder" | "aria-posinset" | "aria-readonly" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext")[];
 /**
  * Checks if an attribute is one of the AOM aria attributes.
  *

package/components/button.d.ts

@@ -27,8 +27,8 @@ export declare class OccitaneButton extends buttonBaseClass implements FormSubmi
     underlined: boolean;
     withbadge: boolean;
     hideRoleButton: boolean;
-    ariaDescribedBy: string | null;
-    ariaExpandedAttr: string | null;
+    describedBy: string | null;
+    ariaExpanded: string | null;
     private handleClick;
     protected render(): import('lit').TemplateResult<1>;
     private renderIcon;

package/index.js

@@ -1407,9 +1407,9 @@
 			overflow: auto;
 			box-sizing: border-box;
 		}
-	`;u.focusablesSelector='button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), o-icon-button, o-button';u.focusablesCustomElementsSelector="o-icon-button, o-button";u.shadowRootOptions={...p.shadowRootOptions,delegatesFocus:!0};b([l({type:Boolean,reflect:!0})],u.prototype,"open",2);b([l({type:Boolean,reflect:!0})],u.prototype,"showHeader",2);b([l({type:Boolean,reflect:!0})],u.prototype,"showFooter",2);b([l({type:Boolean,reflect:!0})],u.prototype,"showHeaderStartIcon",2);b([l({type:String,reflect:!0})],u.prototype,"headerTitle",2);b([l({type:String,reflect:!0})],u.prototype,"headerTitleClassName",2);b([l({type:String,reflect:!0})],u.prototype,"labelDialog",2);b([l({type:String,reflect:!0})],u.prototype,"labelAriaDialogPanel",2);b([l({type:String,reflect:!0})],u.prototype,"addToBagProductCount",2);b([l({type:String,reflect:!0})],u.prototype,"closeButtonLabel",2);b([l({type:String,reflect:!0})],u.prototype,"goBackButtonLabel",2);b([l({type:String,reflect:!0})],u.prototype,"firstButtonLabel",2);b([l({type:String,reflect:!0})],u.prototype,"firstButtonVariant",2);b([l({type:Object,reflect:!0})],u.prototype,"firstButtonProps",2);b([l({type:Boolean,reflect:!0})],u.prototype,"onFirstButtonClickClose",2);b([l({type:String,reflect:!0})],u.prototype,"secondButtonLabel",2);b([l({type:String,reflect:!0})],u.prototype,"secondButtonVariant",2);b([l({type:Object,reflect:!0})],u.prototype,"secondButtonProps",2);b([l({type:Boolean,reflect:!0})],u.prototype,"onSecondButtonClickClose",2);b([l({type:Boolean,reflect:!0})],u.prototype,"disablePortal",2);b([l({type:Number,reflect:!0})],u.prototype,"zIndex",2);b([l({type:Boolean,reflect:!0})],u.prototype,"initialized",2);b([l({type:Boolean})],u.prototype,"showDetail",2);b([l({type:Boolean})],u.prototype,"isHidingDetail",2);u=b([v("o-side-panel")],u);var x5=Object.defineProperty,V5=Object.getOwnPropertyDescriptor,L=(e,t,i,n)=>{for(var o=n>1?void 0:n?V5(t,i):t,s=e.length-1,r;s>=0;s--)(r=e[s])&&(o=(n?r(t,i,o):r(o))||o);return n&&o&&x5(t,i,o),o};const H5=X1(p);let m=class extends H5{constructor(){super(...arguments),this.type="submit",this.value="",this.variant="primary",this.text="",this.textsecond="",this.fullwidth=!1,this.disabled=!1,this.startIconModel="",this.endIconModel="",this.startIcon=!1,this.endIcon=!1,this.panelTarget="",this.href="",this.target="",this.underlined=!1,this.withbadge=!1,this.hideRoleButton=!1,this.ariaDescribedBy=null,this.ariaExpandedAttr=null}get name(){return this.getAttribute("name")??""}set name(e){this.setAttribute("name",e)}get form(){return this[F1].form}handleClick(e){if(!(e instanceof KeyboardEvent&&!["Enter"," "].includes(e.key))&&this.panelTarget){const t=document.getElementById(this.panelTarget);t instanceof u&&(t!=null&&t.openPanel)&&typeof t.openPanel=="function"?(e.preventDefault(),t.openPanel()):console.warn(`[o-button] No side panel with id="${this.panelTarget}" found or it does not have an openPanel method.`)}}render(){return this.href?this.renderLink():this.renderButton()}renderIcon(e){const t=e==="start"?this.startIconModel:this.endIconModel;if(!t)return d;const i=j1[t].replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return a`<span class="${e==="start"?"icon-start":"icon-end"}">${q(i)}</span>`}renderButton(){const e=this.text||this.textsecond;return a`
+	`;u.focusablesSelector='button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), o-icon-button, o-button';u.focusablesCustomElementsSelector="o-icon-button, o-button";u.shadowRootOptions={...p.shadowRootOptions,delegatesFocus:!0};b([l({type:Boolean,reflect:!0})],u.prototype,"open",2);b([l({type:Boolean,reflect:!0})],u.prototype,"showHeader",2);b([l({type:Boolean,reflect:!0})],u.prototype,"showFooter",2);b([l({type:Boolean,reflect:!0})],u.prototype,"showHeaderStartIcon",2);b([l({type:String,reflect:!0})],u.prototype,"headerTitle",2);b([l({type:String,reflect:!0})],u.prototype,"headerTitleClassName",2);b([l({type:String,reflect:!0})],u.prototype,"labelDialog",2);b([l({type:String,reflect:!0})],u.prototype,"labelAriaDialogPanel",2);b([l({type:String,reflect:!0})],u.prototype,"addToBagProductCount",2);b([l({type:String,reflect:!0})],u.prototype,"closeButtonLabel",2);b([l({type:String,reflect:!0})],u.prototype,"goBackButtonLabel",2);b([l({type:String,reflect:!0})],u.prototype,"firstButtonLabel",2);b([l({type:String,reflect:!0})],u.prototype,"firstButtonVariant",2);b([l({type:Object,reflect:!0})],u.prototype,"firstButtonProps",2);b([l({type:Boolean,reflect:!0})],u.prototype,"onFirstButtonClickClose",2);b([l({type:String,reflect:!0})],u.prototype,"secondButtonLabel",2);b([l({type:String,reflect:!0})],u.prototype,"secondButtonVariant",2);b([l({type:Object,reflect:!0})],u.prototype,"secondButtonProps",2);b([l({type:Boolean,reflect:!0})],u.prototype,"onSecondButtonClickClose",2);b([l({type:Boolean,reflect:!0})],u.prototype,"disablePortal",2);b([l({type:Number,reflect:!0})],u.prototype,"zIndex",2);b([l({type:Boolean,reflect:!0})],u.prototype,"initialized",2);b([l({type:Boolean})],u.prototype,"showDetail",2);b([l({type:Boolean})],u.prototype,"isHidingDetail",2);u=b([v("o-side-panel")],u);var x5=Object.defineProperty,V5=Object.getOwnPropertyDescriptor,L=(e,t,i,n)=>{for(var o=n>1?void 0:n?V5(t,i):t,s=e.length-1,r;s>=0;s--)(r=e[s])&&(o=(n?r(t,i,o):r(o))||o);return n&&o&&x5(t,i,o),o};const H5=X1(p);let m=class extends H5{constructor(){super(...arguments),this.type="submit",this.value="",this.variant="primary",this.text="",this.textsecond="",this.fullwidth=!1,this.disabled=!1,this.startIconModel="",this.endIconModel="",this.startIcon=!1,this.endIcon=!1,this.panelTarget="",this.href="",this.target="",this.underlined=!1,this.withbadge=!1,this.hideRoleButton=!1,this.describedBy=null,this.ariaExpanded=null}get name(){return this.getAttribute("name")??""}set name(e){this.setAttribute("name",e)}get form(){return this[F1].form}handleClick(e){if(!(e instanceof KeyboardEvent&&!["Enter"," "].includes(e.key))&&this.panelTarget){const t=document.getElementById(this.panelTarget);t instanceof u&&(t!=null&&t.openPanel)&&typeof t.openPanel=="function"?(e.preventDefault(),t.openPanel()):console.warn(`[o-button] No side panel with id="${this.panelTarget}" found or it does not have an openPanel method.`)}}render(){return this.href?this.renderLink():this.renderButton()}renderIcon(e){const t=e==="start"?this.startIconModel:this.endIconModel;if(!t)return d;const i=j1[t].replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return a`<span class="${e==="start"?"icon-start":"icon-end"}">${q(i)}</span>`}renderButton(){const e=this.text||this.textsecond;return a`
       <button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick} @keydown=${this.handleClick}
-        aria-describedby=${this.ariaDescribedBy||d} aria-expanded=${this.ariaExpandedAttr||d} >
+        aria-describedby=${this.describedBy||d} aria-expanded=${this.ariaExpanded||d} >
           ${this.startIcon?this.renderIcon("start"):d}
           ${e?a`
                 ${this.text?a`<span class="text">${this.text}</span>`:d}
@@ -1427,7 +1427,7 @@
         role=${this.hideRoleButton?d:"button"}
         @click=${this.handleClick}
         @keydown=${this.handleClick}
-        aria-describedby=${this.ariaDescribedBy||d}
+        aria-describedby=${this.describedBy||d}
       >
           ${this.startIcon?this.renderIcon("start"):d}
           ${e?a`
@@ -1646,7 +1646,7 @@
       transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
       transform: translateX(4px);
     }
-  `;L([l()],m.prototype,"type",2);L([l()],m.prototype,"value",2);L([l({type:String,reflect:!0})],m.prototype,"variant",2);L([l({type:String})],m.prototype,"text",2);L([l({type:String})],m.prototype,"textsecond",2);L([l({type:Boolean,reflect:!0})],m.prototype,"fullwidth",2);L([l({type:Boolean,reflect:!0})],m.prototype,"disabled",2);L([l({type:String})],m.prototype,"startIconModel",2);L([l({type:String})],m.prototype,"endIconModel",2);L([l({type:Boolean,reflect:!0,attribute:"starticon"})],m.prototype,"startIcon",2);L([l({type:Boolean,reflect:!0,attribute:"endicon"})],m.prototype,"endIcon",2);L([l({type:String,attribute:"paneltarget"})],m.prototype,"panelTarget",2);L([l({type:String})],m.prototype,"href",2);L([l({type:String})],m.prototype,"target",2);L([l({type:Boolean,reflect:!0})],m.prototype,"underlined",2);L([l({type:Boolean,reflect:!0})],m.prototype,"withbadge",2);L([l({type:Boolean,reflect:!0})],m.prototype,"hideRoleButton",2);L([l({reflect:!0,attribute:"aria-describedby"})],m.prototype,"ariaDescribedBy",2);L([l({reflect:!0,attribute:"aria-expanded"})],m.prototype,"ariaExpandedAttr",2);m=L([v("o-button")],m);var $5=Object.defineProperty,B5=Object.getOwnPropertyDescriptor,$1=(e,t,i,n)=>{for(var o=n>1?void 0:n?B5(t,i):t,s=e.length-1,r;s>=0;s--)(r=e[s])&&(o=(n?r(t,i,o):r(o))||o);return n&&o&&$5(t,i,o),o};let p1=class extends p{constructor(){super(...arguments),this.status="empty",this.icon="occ-wishlist-outlined",this.bgstyle="none-contrast",this.ariaDescribedBy="a-product-name",this.label="Add to wishlist",this.toggleStatus=()=>{this.status=this.status==="empty"?"filled":"empty",this.icon=this.status==="filled"?"occ-wishlist-filled":"occ-wishlist-outlined",this.bgstyle=this.status==="filled"?"none-contrast":"none-light",this.setAttribute("aria-pressed",String(this.status==="filled")),this.dispatchEvent(new CustomEvent("wishlist-toggle",{detail:{status:this.status},bubbles:!0,composed:!0}))}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","button"),this.setAttribute("aria-pressed",String(this.status==="filled"))}firstUpdated(){this.addEventListener("click",this.toggleStatus),this.addEventListener("keydown",this.handleKeydown)}handleKeydown(e){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.toggleStatus())}render(){const e=j1[this.icon].replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return a`
+  `;L([l()],m.prototype,"type",2);L([l()],m.prototype,"value",2);L([l({type:String,reflect:!0})],m.prototype,"variant",2);L([l({type:String})],m.prototype,"text",2);L([l({type:String})],m.prototype,"textsecond",2);L([l({type:Boolean,reflect:!0})],m.prototype,"fullwidth",2);L([l({type:Boolean,reflect:!0})],m.prototype,"disabled",2);L([l({type:String})],m.prototype,"startIconModel",2);L([l({type:String})],m.prototype,"endIconModel",2);L([l({type:Boolean,reflect:!0,attribute:"starticon"})],m.prototype,"startIcon",2);L([l({type:Boolean,reflect:!0,attribute:"endicon"})],m.prototype,"endIcon",2);L([l({type:String,attribute:"paneltarget"})],m.prototype,"panelTarget",2);L([l({type:String})],m.prototype,"href",2);L([l({type:String})],m.prototype,"target",2);L([l({type:Boolean,reflect:!0})],m.prototype,"underlined",2);L([l({type:Boolean,reflect:!0})],m.prototype,"withbadge",2);L([l({type:Boolean,reflect:!0})],m.prototype,"hideRoleButton",2);L([l({reflect:!0,attribute:"describedby"})],m.prototype,"describedBy",2);L([l({reflect:!0,attribute:"expanded"})],m.prototype,"ariaExpanded",2);m=L([v("o-button")],m);var $5=Object.defineProperty,B5=Object.getOwnPropertyDescriptor,$1=(e,t,i,n)=>{for(var o=n>1?void 0:n?B5(t,i):t,s=e.length-1,r;s>=0;s--)(r=e[s])&&(o=(n?r(t,i,o):r(o))||o);return n&&o&&$5(t,i,o),o};let p1=class extends p{constructor(){super(...arguments),this.status="empty",this.icon="occ-wishlist-outlined",this.bgstyle="none-contrast",this.ariaDescribedBy="a-product-name",this.label="Add to wishlist",this.toggleStatus=()=>{this.status=this.status==="empty"?"filled":"empty",this.icon=this.status==="filled"?"occ-wishlist-filled":"occ-wishlist-outlined",this.bgstyle=this.status==="filled"?"none-contrast":"none-light",this.setAttribute("aria-pressed",String(this.status==="filled")),this.dispatchEvent(new CustomEvent("wishlist-toggle",{detail:{status:this.status},bubbles:!0,composed:!0}))}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","button"),this.setAttribute("aria-pressed",String(this.status==="filled"))}firstUpdated(){this.addEventListener("click",this.toggleStatus),this.addEventListener("keydown",this.handleKeydown)}handleKeydown(e){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.toggleStatus())}render(){const e=j1[this.icon].replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return a`
 			<button type="button" aria-describedby="${this.ariaDescribedBy}" class="wishlist-button">
 				<span class="sr-only">${this.label}</span>
 				${q(e)}
@@ -4213,6 +4213,7 @@
       <button
         id=${this.headerId}
         class="header"
+        part="header"
         aria-expanded="${this.expanded?"true":"false"}"
         aria-controls=${this.panelId}
         ?disabled=${this.disabled}

package/index.mjs

@@ -2727,7 +2727,7 @@ var x5 = Object.defineProperty, V5 = Object.getOwnPropertyDescriptor, L = (e, t,
 const H5 = X1(p);
 let m = class extends H5 {
   constructor() {
-    super(...arguments), this.type = "submit", this.value = "", this.variant = "primary", this.text = "", this.textsecond = "", this.fullwidth = !1, this.disabled = !1, this.startIconModel = "", this.endIconModel = "", this.startIcon = !1, this.endIcon = !1, this.panelTarget = "", this.href = "", this.target = "", this.underlined = !1, this.withbadge = !1, this.hideRoleButton = !1, this.ariaDescribedBy = null, this.ariaExpandedAttr = null;
+    super(...arguments), this.type = "submit", this.value = "", this.variant = "primary", this.text = "", this.textsecond = "", this.fullwidth = !1, this.disabled = !1, this.startIconModel = "", this.endIconModel = "", this.startIcon = !1, this.endIcon = !1, this.panelTarget = "", this.href = "", this.target = "", this.underlined = !1, this.withbadge = !1, this.hideRoleButton = !1, this.describedBy = null, this.ariaExpanded = null;
   }
   get name() {
     return this.getAttribute("name") ?? "";
@@ -2760,7 +2760,7 @@ let m = class extends H5 {
     const e = this.text || this.textsecond;
     return a`
       <button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick} @keydown=${this.handleClick}
-        aria-describedby=${this.ariaDescribedBy || d} aria-expanded=${this.ariaExpandedAttr || d} >
+        aria-describedby=${this.describedBy || d} aria-expanded=${this.ariaExpanded || d} >
           ${this.startIcon ? this.renderIcon("start") : d}
           ${e ? a`
                 ${this.text ? a`<span class="text">${this.text}</span>` : d}
@@ -2782,7 +2782,7 @@ let m = class extends H5 {
         role=${this.hideRoleButton ? d : "button"}
         @click=${this.handleClick}
         @keydown=${this.handleClick}
-        aria-describedby=${this.ariaDescribedBy || d}
+        aria-describedby=${this.describedBy || d}
       >
           ${this.startIcon ? this.renderIcon("start") : d}
           ${e ? a`
@@ -3059,11 +3059,11 @@ L([
   l({ type: Boolean, reflect: !0 })
 ], m.prototype, "hideRoleButton", 2);
 L([
-  l({ reflect: !0, attribute: "aria-describedby" })
-], m.prototype, "ariaDescribedBy", 2);
+  l({ reflect: !0, attribute: "describedby" })
+], m.prototype, "describedBy", 2);
 L([
-  l({ reflect: !0, attribute: "aria-expanded" })
-], m.prototype, "ariaExpandedAttr", 2);
+  l({ reflect: !0, attribute: "expanded" })
+], m.prototype, "ariaExpanded", 2);
 m = L([
   v("o-button")
 ], m);
@@ -7130,6 +7130,7 @@ let k6 = 0, H1 = class extends p {
       <button
         id=${this.headerId}
         class="header"
+        part="header"
         aria-expanded="${this.expanded ? "true" : "false"}"
         aria-controls=${this.panelId}
         ?disabled=${this.disabled}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@florid-kit/components",
-  "version": "2.3.2",
+  "version": "2.3.4",
   "main": "index.js",
   "module": "index.mjs",
   "typings": "index.d.ts",