@florid-kit/components 0.10.24 → 0.10.26

package/index.js

@@ -185,6 +185,7 @@
 				<button
 					type="button"
 					aria-label=${P(i)}
+					aria-describedby=${this.getAttribute("aria-describedby")||d}
 					class="icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}"
 					?disabled="${this.disabled}"
 				>
@@ -396,14 +397,15 @@
 				${this.addToBagProductCount?l`<span class="a-quantity">${this.addToBagProductCount}</span>`:null}
 			</div>
 			<o-icon-button
-			icon="cross"
-			size="small"
-			class="close-btn"
-			bgstyle="background-light"
-			@click=${this.handleClosePanel}
-			@keydown=${this.handleClosePanel}
-			srlabel="${this.closeButtonLabel}"
-			?showsrlabel=${!0}
+				icon="cross"
+				size="small"
+				class="close-btn"
+				bgstyle="background-light"
+				@click=${this.handleClosePanel}
+				@keydown=${this.handleClosePanel}
+				srlabel="${this.closeButtonLabel}"
+				?showsrlabel=${!0}
+				aria-describedby="panel-title"
 			></o-icon-button>
 			</div>
 			`:null;return l`
@@ -696,7 +698,8 @@
 			box-sizing: border-box;
 		}
 	`;p.focusablesSelector='button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), o-icon-button, o-button';p.focusablesCustomElementsSelector="o-icon-button, o-button";p.shadowRootOptions={...u.shadowRootOptions,delegatesFocus:!0};y([a({type:Boolean,reflect:!0})],p.prototype,"open",2);y([a({type:Boolean,reflect:!0})],p.prototype,"showHeader",2);y([a({type:Boolean,reflect:!0})],p.prototype,"showFooter",2);y([a({type:Boolean,reflect:!0})],p.prototype,"showHeaderStartIcon",2);y([a({type:String,reflect:!0})],p.prototype,"headerTitle",2);y([a({type:String,reflect:!0})],p.prototype,"headerTitleClassName",2);y([a({type:String,reflect:!0})],p.prototype,"labelDialog",2);y([a({type:String,reflect:!0})],p.prototype,"addToBagProductCount",2);y([a({type:String,reflect:!0})],p.prototype,"closeButtonLabel",2);y([a({type:String,reflect:!0})],p.prototype,"goBackButtonLabel",2);y([a({type:String,reflect:!0})],p.prototype,"firstButtonLabel",2);y([a({type:String,reflect:!0})],p.prototype,"firstButtonVariant",2);y([a({type:Object,reflect:!0})],p.prototype,"firstButtonProps",2);y([a({type:Boolean,reflect:!0})],p.prototype,"onFirstButtonClickClose",2);y([a({type:String,reflect:!0})],p.prototype,"secondButtonLabel",2);y([a({type:String,reflect:!0})],p.prototype,"secondButtonVariant",2);y([a({type:Object,reflect:!0})],p.prototype,"secondButtonProps",2);y([a({type:Boolean,reflect:!0})],p.prototype,"onSecondButtonClickClose",2);y([a({type:Boolean,reflect:!0})],p.prototype,"disablePortal",2);y([a({type:Number,reflect:!0})],p.prototype,"zIndex",2);y([a({type:Boolean,reflect:!0})],p.prototype,"initialized",2);y([a({type:Boolean})],p.prototype,"showDetail",2);y([a({type:Boolean})],p.prototype,"isHidingDetail",2);p=y([b("o-side-panel")],p);var No=Object.defineProperty,qo=Object.getOwnPropertyDescriptor,_=(o,t,e,n)=>{for(var i=n>1?void 0:n?qo(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&No(t,e,i),i};const Vo=Xt(u);let m=class extends Vo{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}get name(){return this.getAttribute("name")??""}set name(o){this.setAttribute("name",o)}get form(){return this[Gt].form}handleClick(o){if(!(o instanceof KeyboardEvent&&!["Enter"," "].includes(o.key))&&this.panelTarget){const t=document.getElementById(this.panelTarget);t instanceof p&&(t!=null&&t.openPanel)&&typeof t.openPanel=="function"?(o.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(o){const t=o==="start"?this.startIconModel:this.endIconModel;if(!t)return d;const e=Z[t].replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return l`<span class="${o==="start"?"icon-start":"icon-end"}">${S(e)}</span>`}renderButton(){const o=this.text||this.textsecond;return l`
-      <button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick} @keydown=${this.handleClick}>
+      <button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick} @keydown=${this.handleClick}
+        aria-describedby=${this.getAttribute("aria-describedby")||d} >
           ${this.startIcon?this.renderIcon("start"):d}
           ${o?l`
                 ${this.text?l`<span class="text">${this.text}</span>`:d}
@@ -1298,6 +1301,7 @@
     .tag.background-emphasis {
 			background-color: var(--color-container-bg-emphasis);
       color: var(--color-content-body);
+      
 		}
 
     .tag.background-white {
@@ -2347,7 +2351,7 @@
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
-      -webkit-line-clamp: 2;
+      -webkit-line-clamp: 1;
       -webkit-box-orient: vertical;
     }
 

package/index.mjs

@@ -1080,6 +1080,7 @@ let B = class extends u {
 				<button
 					type="button"
 					aria-label=${P(i)}
+					aria-describedby=${this.getAttribute("aria-describedby") || d}
 					class="icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}"
 					?disabled="${this.disabled}"
 				>
@@ -1529,14 +1530,15 @@ let p = class extends u {
 				${this.addToBagProductCount ? l`<span class="a-quantity">${this.addToBagProductCount}</span>` : null}
 			</div>
 			<o-icon-button
-			icon="cross"
-			size="small"
-			class="close-btn"
-			bgstyle="background-light"
-			@click=${this.handleClosePanel}
-			@keydown=${this.handleClosePanel}
-			srlabel="${this.closeButtonLabel}"
-			?showsrlabel=${!0}
+				icon="cross"
+				size="small"
+				class="close-btn"
+				bgstyle="background-light"
+				@click=${this.handleClosePanel}
+				@keydown=${this.handleClosePanel}
+				srlabel="${this.closeButtonLabel}"
+				?showsrlabel=${!0}
+				aria-describedby="panel-title"
 			></o-icon-button>
 			</div>
 			` : null;
@@ -1952,7 +1954,8 @@ let m = class extends Vo {
   renderButton() {
     const o = this.text || this.textsecond;
     return l`
-      <button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick} @keydown=${this.handleClick}>
+      <button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick} @keydown=${this.handleClick}
+        aria-describedby=${this.getAttribute("aria-describedby") || d} >
           ${this.startIcon ? this.renderIcon("start") : d}
           ${o ? l`
                 ${this.text ? l`<span class="text">${this.text}</span>` : d}
@@ -2851,6 +2854,7 @@ wt.styles = v`
     .tag.background-emphasis {
 			background-color: var(--color-container-bg-emphasis);
       color: var(--color-content-body);
+      
 		}
 
     .tag.background-white {
@@ -4396,7 +4400,7 @@ se.styles = v`
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
-      -webkit-line-clamp: 2;
+      -webkit-line-clamp: 1;
       -webkit-box-orient: vertical;
     }
 

package/package.json

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