@wrrdev/fenix-ui 1.0.9 → 1.0.10

package/dist/docs/shared.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/docs/shared.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAE/E,eAAO,MAAM,GAAG,GAAI,GAAG,MAAM,KAAG,MACsC,CAAC;AAEvE,eAAO,MAAM,cAAc,UAA+E,CAAC;AAC3G,eAAO,MAAM,aAAa,UAAiE,CAAC;AAC5F,eAAO,MAAM,KAAK,UAAqB,CAAC;AAExC,gFAAgF;AAChF,eAAO,MAAM,SAAS,QAAoC,CAAC;AAC3D,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAmC9C"}
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/docs/shared.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAE/E,eAAO,MAAM,GAAG,GAAI,GAAG,MAAM,KAAG,MACsC,CAAC;AAEvE,eAAO,MAAM,cAAc,UAAuF,CAAC;AACnH,eAAO,MAAM,aAAa,UAAiE,CAAC;AAC5F,eAAO,MAAM,KAAK,UAAqB,CAAC;AAExC,gFAAgF;AAChF,eAAO,MAAM,SAAS,QAAoC,CAAC;AAC3D,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAmC9C"}

package/dist/fenix-ui.umd.min.js

@@ -53,6 +53,7 @@
     :host([variant='success']) .btn { background: var(--fx-color-success); }
     :host([variant='warning']) .btn { background: var(--fx-color-warning); }
     :host([variant='danger']) .btn { background: var(--fx-color-danger); }
+    :host([variant='info']) .btn { background: var(--fx-color-info); }
     :host([variant='ghost']) .btn { background: transparent; color: var(--fx-text-default); }
     :host([variant='ghost']) .btn:hover { background: var(--fx-surface-surface-hover); filter: none; }
     :host([variant='outline']) .btn { background: transparent; color: var(--fx-color-primary); border-color: var(--fx-color-primary); }
@@ -2579,22 +2580,24 @@
     }
     .list-item { animation: slideIn 0.2s ease-out; }
   `;let at=jt;function $(v){return v.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function $e(){return b("fx-picklist",at)}$e();const Vt=class Vt extends f{constructor(){super(...arguments),this._mo=null}static get observedAttributes(){return["header","expanded","disabled"]}get header(){return this.getAttr("header","")}set header(t){this.setAttribute("header",t)}get value(){return this.getAttr("value","")}set value(t){this.setAttribute("value",t)}get expanded(){return this.hasAttr("expanded")}set expanded(t){this.toggleAttr("expanded",t)}get disabled(){return this.hasAttr("disabled")}set disabled(t){this.toggleAttr("disabled",t)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",t=>{t.composedPath().some(r=>{var s;return(s=r.classList)==null?void 0:s.contains("header")})&&(this.disabled||this.dispatchEvent(new CustomEvent("fx-accordion-toggle",{bubbles:!0,composed:!0,detail:{panel:this}})))}),this._mo=new MutationObserver(()=>this.render()),this._mo.observe(this,{attributes:!0,attributeFilter:["expanded","header","disabled"]})}disconnectedCallback(){var t;(t=this._mo)==null||t.disconnect(),this._mo=null}render(){this.setTemplate(`
-      <button type="button" class="header" part="header" role="button"
-        aria-expanded="${this.expanded}"
-        ${this.disabled?'aria-disabled="true"':""}>
-        <span class="header-text" part="header-text">
-          <slot name="header">${this.header}</slot>
-        </span>
-        <span class="chevron" part="chevron" aria-hidden="true">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
-            stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-            <polyline points="6 9 12 15 18 9"></polyline>
-          </svg>
-        </span>
-      </button>
-      <div class="content" part="content" role="region">
-        <div class="content-inner">
-          <div class="content-pad" part="content-pad"><slot></slot></div>
+      <div class="panel" part="panel">
+        <button type="button" class="header" part="header" role="button"
+          aria-expanded="${this.expanded}"
+          ${this.disabled?'aria-disabled="true"':""}>
+          <span class="header-text" part="header-text">
+            <slot name="header">${this.header}</slot>
+          </span>
+          <span class="chevron" part="chevron" aria-hidden="true">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="6 9 12 15 18 9"></polyline>
+            </svg>
+          </span>
+        </button>
+        <div class="content" part="content" role="region">
+          <div class="content-inner">
+            <div class="content-pad" part="content-pad"><slot></slot></div>
+          </div>
         </div>
       </div>
     `)}};Vt.styles=p`
@@ -2603,9 +2606,14 @@
       font-family: var(--fx-font-family);
       font-size: var(--fx-font-size);
       color: var(--fx-text-default);
+    }
+    /* A borda fica no wrapper interno (nao no :host): regras do documento
+       externo (ex.: preflight do Tailwind com border-width: 0) vencem as
+       regras :host do shadow tree, o que apagaria a linha divisoria. */
+    .panel {
       border-bottom: 1px solid var(--fx-border-default);
     }
-    :host(:last-child) { border-bottom: none; }
+    :host(:last-child) .panel { border-bottom: none; }
     :host([disabled]) { opacity: 0.6; pointer-events: none; }
     .header {
       display: flex;

package/dist/fenix-ui2.esm.js

@@ -436,6 +436,7 @@ _FxButton.styles = css`
     :host([variant='success']) .btn { background: var(--fx-color-success); }
     :host([variant='warning']) .btn { background: var(--fx-color-warning); }
     :host([variant='danger']) .btn { background: var(--fx-color-danger); }
+    :host([variant='info']) .btn { background: var(--fx-color-info); }
     :host([variant='ghost']) .btn { background: transparent; color: var(--fx-text-default); }
     :host([variant='ghost']) .btn:hover { background: var(--fx-surface-surface-hover); filter: none; }
     :host([variant='outline']) .btn { background: transparent; color: var(--fx-color-primary); border-color: var(--fx-color-primary); }
@@ -6617,22 +6618,24 @@ const _FxAccordionPanel = class _FxAccordionPanel extends FxElement {
   }
   render() {
     this.setTemplate(`
-      <button type="button" class="header" part="header" role="button"
-        aria-expanded="${this.expanded}"
-        ${this.disabled ? 'aria-disabled="true"' : ""}>
-        <span class="header-text" part="header-text">
-          <slot name="header">${this.header}</slot>
-        </span>
-        <span class="chevron" part="chevron" aria-hidden="true">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
-            stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-            <polyline points="6 9 12 15 18 9"></polyline>
-          </svg>
-        </span>
-      </button>
-      <div class="content" part="content" role="region">
-        <div class="content-inner">
-          <div class="content-pad" part="content-pad"><slot></slot></div>
+      <div class="panel" part="panel">
+        <button type="button" class="header" part="header" role="button"
+          aria-expanded="${this.expanded}"
+          ${this.disabled ? 'aria-disabled="true"' : ""}>
+          <span class="header-text" part="header-text">
+            <slot name="header">${this.header}</slot>
+          </span>
+          <span class="chevron" part="chevron" aria-hidden="true">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="6 9 12 15 18 9"></polyline>
+            </svg>
+          </span>
+        </button>
+        <div class="content" part="content" role="region">
+          <div class="content-inner">
+            <div class="content-pad" part="content-pad"><slot></slot></div>
+          </div>
         </div>
       </div>
     `);
@@ -6644,9 +6647,14 @@ _FxAccordionPanel.styles = css`
       font-family: var(--fx-font-family);
       font-size: var(--fx-font-size);
       color: var(--fx-text-default);
+    }
+    /* A borda fica no wrapper interno (nao no :host): regras do documento
+       externo (ex.: preflight do Tailwind com border-width: 0) vencem as
+       regras :host do shadow tree, o que apagaria a linha divisoria. */
+    .panel {
       border-bottom: 1px solid var(--fx-border-default);
     }
-    :host(:last-child) { border-bottom: none; }
+    :host(:last-child) .panel { border-bottom: none; }
     :host([disabled]) { opacity: 0.6; pointer-events: none; }
     .header {
       display: flex;