godown 3.11.1 → 3.12.0

package/internal/global-style.js

@@ -1,2 +1,2 @@
-import{trim as r,declareLightDarkColors as o,joinRules as t,joinDeclarations as e,toVar as n,GodownElement as i}from"@godown/element";import{unsafeCSS as a,css as s}from"lit";class GlobalStyle extends i{}const d=r(GlobalStyle.godownConfig.prefix,"-");function l(r,o=1){return u(d+"-".repeat(o)+r)}function u(r){return a(`--${r}`)}const g={background:l("background",2),foreground:l("foreground",2),backgroundClip:l("background-clip",2),primaryBackground:l("primary",2),primaryForeground:l("primary-foreground",2),muted:l("muted",2),active:l("active",2),passive:l("passive",2),input:l("input",2),radius:l("radius",2),ringWidth:l("ring-width",2),ringColor:l("ring-color",2)};GlobalStyle.styles=[a(o(":host",[[g.background,["hsl(0 0% 96%)","hsl(0 0% 4%)"]],[g.foreground,["hsl(0 0% 4%)","hsl(0 0% 96%)"]],[g.muted,["hsl(0 0% 90%)","hsl(0 0% 18%)"]]],1)),a(t({":host":e([[g.primaryBackground,n(g.foreground)],[g.primaryForeground,n(g.background)],[g.active,n(g.primaryBackground)],[g.passive,n(g.muted)],[g.backgroundClip,`linear-gradient(to bottom, ${n(g.foreground)}, ${n(g.muted)})`],[g.ringColor,n(g.passive)],[g.ringWidth,".075em"]])})),s`button,dialog,input{border:0;outline:0}*{box-sizing:border-box;font-size:100%;font-style:normal;margin:0;padding:0}:host{border-style:none;box-sizing:border-box;outline-style:none}a{text-decoration:none}span{white-space:nowrap}svg{-webkit-user-select:none;user-select:none}:host([contents]){display:contents}[part=root]{height:100%;width:100%}:host([contents]) [part=root]{height:inherit;width:inherit}:where(:host([contents]) [part=root]){all:inherit;display:revert}`,s`:host{${g.radius}:0.2em;border-radius:var(${g.radius})}`];export{GlobalStyle,g as cssGlobalVars,GlobalStyle as default,l as scopePrefix,u as variablePrefix};
+import{trim as r,declareLightDarkColors as o,joinRules as t,joinDeclarations as e,toVar as n,GodownElement as i}from"@godown/element";import{unsafeCSS as a,css as s}from"lit";class GlobalStyle extends i{}const d=r(GlobalStyle.godownConfig.prefix,"-");function l(r,o=1){return u(d+"-".repeat(o)+r)}function u(r){return a(`--${r}`)}const g={background:l("background",2),foreground:l("foreground",2),backgroundClip:l("background-clip",2),primaryBackground:l("primary",2),primaryForeground:l("primary-foreground",2),muted:l("muted",2),active:l("active",2),passive:l("passive",2),input:l("input",2),radius:l("radius",2),ringWidth:l("ring-width",2),ringColor:l("ring-color",2)};GlobalStyle.styles=[a(o(":host",[[g.background,["hsl(0 0% 96%)","hsl(0 0% 4%)"]],[g.foreground,["hsl(0 0% 4%)","hsl(0 0% 96%)"]],[g.muted,["hsl(0 0% 88%)","hsl(0 0% 18%)"]]],1)),a(t({":host":e([[g.primaryBackground,n(g.foreground)],[g.primaryForeground,n(g.background)],[g.active,n(g.primaryBackground)],[g.passive,n(g.muted)],[g.backgroundClip,`linear-gradient(to bottom, ${n(g.foreground)}, ${n(g.muted)})`],[g.ringColor,n(g.passive)],[g.ringWidth,".075em"]])})),s`button,dialog,input{border:0;outline:0}*{box-sizing:border-box;font-size:100%;font-style:normal;margin:0;padding:0}:host{border-style:none;box-sizing:border-box;outline-style:none}a{text-decoration:none}span{white-space:nowrap}svg{-webkit-user-select:none;user-select:none}:host([contents]){display:contents}[part=root]{height:100%;width:100%}:host([contents]) [part=root]{height:inherit;width:inherit}:where(:host([contents]) [part=root]){all:inherit;display:revert}`,s`:host{${g.radius}:0.2em;border-radius:var(${g.radius})}`];export{GlobalStyle,g as cssGlobalVars,GlobalStyle as default,l as scopePrefix,u as variablePrefix};
 //# sourceMappingURL=global-style.js.map

package/internal/super-input.d.ts

@@ -7,7 +7,6 @@ declare class SuperInput<V = string> extends GlobalStyle {
     autocomplete: string | boolean;
     ringType: RingType;
     disabled: boolean;
-    type: InputType;
     placeholder: string;
     name: string;
     value: V;
@@ -32,7 +31,6 @@ declare class SuperInput<V = string> extends GlobalStyle {
     connectedCallback(): void;
     protected _connectedInit(): void;
     protected _compositionInit(): void;
-    protected _changeInputType(t: typeof this.type): void;
     focus(options?: FocusOptions): void;
     protected firstUpdated(): void;
     protected _renderPrefix(): TemplateResult<1>;
@@ -40,5 +38,4 @@ declare class SuperInput<V = string> extends GlobalStyle {
 }
 export default SuperInput;
 export { SuperInput };
-type InputType = "hidden" | "text" | "search" | "tel" | "url" | "email" | "password" | "datetime" | "date" | "month" | "week" | "time" | "datetime-local" | "number" | "range" | "color" | "checkbox" | "radio" | "file" | "image";
 //# sourceMappingURL=super-input.d.ts.map

package/internal/super-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"super-input.d.ts","sourceRoot":"__source__/","sources":["internal/super-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAqC,MAAM,iBAAiB,CAAC;AACvF,OAAO,EAAE,KAAK,cAAc,EAAa,MAAM,KAAK,CAAC;AAGrD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAkB1C,cACM,UAAU,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,WAAW;IAC9C,SAAS,UAAS;IAElB,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;IAG/B,QAAQ,EAAE,QAAQ,CAAY;IAG9B,QAAQ,UAAS;IAGjB,IAAI,EAAE,SAAS,CAAC;IAGhB,WAAW,EAAE,MAAM,CAAC;IAGpB,IAAI,EAAE,MAAM,CAAC;IAGb,KAAK,EAAE,CAAC,CAAC;IAET,IAAI,cAAc,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAExC;IAED;;OAEG;IAEH,OAAO,EAAE,GAAG,CAAC;IAGb,SAAS,CAAC,MAAM,EAAE,gBAAgB,CAAC;IAEnC;;OAEG;IACH,WAAW,UAAS;IAEpB,IAAI,YAAY,CAAC,KAAK,EAAE,OAAO,IAAI,CAAC,OAAO,EAE1C;IAED,IAAI,YAAY,IAJQ,OAAO,IAAI,CAAC,OAAO,CAM1C;IAED,SAAS,CAAC,MAAM,EAAE,MAAM,CAAuC;IAE/D,SAAS,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC;IAI1B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAkB;IAEhD,KAAK,IAAI,IAAI;IAKb,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,GAAG,IAAI;IAS/D,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,GAAG,IAAI;IAIhE,iBAAiB,IAAI,IAAI;IAKzB,SAAS,CAAC,cAAc,IAAI,IAAI;IAKhC,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAUlC,SAAS,CAAC,gBAAgB,CAAC,CAAC,EAAE,OAAO,IAAI,CAAC,IAAI,GAAG,IAAI;IAMrD,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInC,SAAS,CAAC,YAAY,IAAI,IAAI;IAI9B,SAAS,CAAC,aAAa,IAAI,cAAc,CAAC,CAAC,CAAC;IAM5C,SAAS,CAAC,aAAa,IAAI,cAAc,CAAC,CAAC,CAAC;CAK7C;AAED,eAAe,UAAU,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,KAAK,SAAS,GACV,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,KAAK,GACL,OAAO,GACP,UAAU,GACV,UAAU,GACV,MAAM,GACN,OAAO,GACP,MAAM,GACN,MAAM,GACN,gBAAgB,GAChB,QAAQ,GACR,OAAO,GACP,OAAO,GACP,UAAU,GACV,OAAO,GACP,MAAM,GACN,OAAO,CAAC"}
+{"version":3,"file":"super-input.d.ts","sourceRoot":"__source__/","sources":["internal/super-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAqC,MAAM,iBAAiB,CAAC;AACvF,OAAO,EAAE,KAAK,cAAc,EAAa,MAAM,KAAK,CAAC;AAGrD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAkB1C,cACM,UAAU,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,WAAW;IAC9C,SAAS,UAAS;IAElB,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;IAG/B,QAAQ,EAAE,QAAQ,CAAY;IAG9B,QAAQ,UAAS;IAGjB,WAAW,EAAE,MAAM,CAAC;IAGpB,IAAI,EAAE,MAAM,CAAC;IAGb,KAAK,EAAE,CAAC,CAAC;IAET,IAAI,cAAc,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAExC;IAED;;OAEG;IAEH,OAAO,EAAE,GAAG,CAAC;IAGb,SAAS,CAAC,MAAM,EAAE,gBAAgB,CAAC;IAEnC;;OAEG;IACH,WAAW,UAAS;IAEpB,IAAI,YAAY,CAAC,KAAK,EAAE,OAAO,IAAI,CAAC,OAAO,EAE1C;IAED,IAAI,YAAY,IAJQ,OAAO,IAAI,CAAC,OAAO,CAM1C;IAED,SAAS,CAAC,MAAM,EAAE,MAAM,CAAuC;IAE/D,SAAS,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC;IAI1B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAkB;IAEhD,KAAK,IAAI,IAAI;IAKb,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,GAAG,IAAI;IAS/D,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,GAAG,IAAI;IAIhE,iBAAiB,IAAI,IAAI;IAKzB,SAAS,CAAC,cAAc,IAAI,IAAI;IAKhC,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAUlC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInC,SAAS,CAAC,YAAY,IAAI,IAAI;IAI9B,SAAS,CAAC,aAAa,IAAI,cAAc,CAAC,CAAC,CAAC;IAM5C,SAAS,CAAC,aAAa,IAAI,cAAc,CAAC,CAAC,CAAC;CAK7C;AAED,eAAe,UAAU,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/internal/super-input.js

@@ -1,2 +1,2 @@
-import{__decorate as t}from"tslib";import{queryPart as e,styles as i,omit as o,htmlSlot as s}from"@godown/element";import{css as r,html as n}from"lit";import{property as a}from"lit/decorators.js";import{GlobalStyle as p}from"./global-style.js";const u=r`:host([disabled]){cursor:not-allowed;filter:brightness(.85)}input:disabled{cursor:inherit}input::-ms-clear,input::-ms-reveal{display:none}`;let l=class SuperInput extends p{constructor(){super(...arguments),this.autofocus=!1,this.ringType="border",this.disabled=!1,this.compositing=!1,this.makeId=Math.random().toString(36).slice(1),this.nameValue=this.namevalue}get observedRecord(){return o(super.observedRecord,"default","value")}set defaultValue(t){this.default=t}get defaultValue(){return this.default}namevalue(){return[this.name,this.value]}reset(){this.value=this.default,this._input.value=this.default}_handleInput(t){t.stopPropagation(),this.compositing||(this.value=t.target.value?.trim(),this.dispatchCustomEvent("input",this.value,{bubbles:!0}))}_handleChange(t){this.dispatchCustomEvent("change",this.value)}connectedCallback(){super.connectedCallback(),this._connectedInit()}_connectedInit(){this.default??=this.value||"",this.value??=this.default}_compositionInit(){this._input&&(this.events.add(this._input,"compositionstart",(()=>this.compositing=!0)),this.events.add(this._input,"compositionend",(t=>{this.compositing=!1,this._handleInput(t)})))}_changeInputType(t){this._input&&(this._input.type=t)}focus(t){this._input?.focus(t)}firstUpdated(){this._compositionInit()}_renderPrefix(){return n`<i part="prefix">${s("prefix")}</i>`}_renderSuffix(){return n`<i part="suffix">${s("suffix")}</i>`}};t([a()],l.prototype,"autocomplete",void 0),t([a({attribute:"ring-type"})],l.prototype,"ringType",void 0),t([a({type:Boolean,reflect:!0})],l.prototype,"disabled",void 0),t([a({reflect:!0})],l.prototype,"type",void 0),t([a({reflect:!0})],l.prototype,"placeholder",void 0),t([a({reflect:!0})],l.prototype,"name",void 0),t([a()],l.prototype,"value",void 0),t([a()],l.prototype,"default",void 0),t([e("input")],l.prototype,"_input",void 0),l=t([i(u)],l);var d=l;export{l as SuperInput,d as default};
+import{__decorate as t}from"tslib";import{queryPart as e,styles as i,omit as o,htmlSlot as s}from"@godown/element";import{css as r,html as a}from"lit";import{property as n}from"lit/decorators.js";import{GlobalStyle as u}from"./global-style.js";const p=r`:host([disabled]){cursor:not-allowed;filter:brightness(.85)}input:disabled{cursor:inherit}input::-ms-clear,input::-ms-reveal{display:none}`;let l=class SuperInput extends u{constructor(){super(...arguments),this.autofocus=!1,this.ringType="border",this.disabled=!1,this.compositing=!1,this.makeId=Math.random().toString(36).slice(1),this.nameValue=this.namevalue}get observedRecord(){return o(super.observedRecord,"default","value")}set defaultValue(t){this.default=t}get defaultValue(){return this.default}namevalue(){return[this.name,this.value]}reset(){this.value=this.default,this._input.value=this.default}_handleInput(t){t.stopPropagation(),this.compositing||(this.value=t.target.value?.trim(),this.dispatchCustomEvent("input",this.value,{bubbles:!0}))}_handleChange(t){this.dispatchCustomEvent("change",this.value)}connectedCallback(){super.connectedCallback(),this._connectedInit()}_connectedInit(){this.default??=this.value||"",this.value??=this.default}_compositionInit(){this._input&&(this.events.add(this._input,"compositionstart",(()=>this.compositing=!0)),this.events.add(this._input,"compositionend",(t=>{this.compositing=!1,this._handleInput(t)})))}focus(t){this._input?.focus(t)}firstUpdated(){this._compositionInit()}_renderPrefix(){return a`<i part="prefix">${s("prefix")}</i>`}_renderSuffix(){return a`<i part="suffix">${s("suffix")}</i>`}};t([n()],l.prototype,"autocomplete",void 0),t([n({attribute:"ring-type"})],l.prototype,"ringType",void 0),t([n({type:Boolean,reflect:!0})],l.prototype,"disabled",void 0),t([n({reflect:!0})],l.prototype,"placeholder",void 0),t([n({reflect:!0})],l.prototype,"name",void 0),t([n()],l.prototype,"value",void 0),t([n()],l.prototype,"default",void 0),t([e("input")],l.prototype,"_input",void 0),l=t([i(p)],l);var d=l;export{l as SuperInput,d as default};
 //# sourceMappingURL=super-input.js.map

package/internal/super-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"super-input.js","sources":["../src/internal/super-input.ts"],"sourcesContent":null,"names":["inputStyle","css","observedRecord","omit","super","this","default","value","defaultValue","namevalue","name","reset","_input","_handleInput","e","stopPropagation","compositing","target","trim","dispatchCustomEvent","bubbles","connectedCallback","_connectedInit","events","add","_changeInputType","t","type","focus","options","firstUpdated","_compositionInit","_renderPrefix","html","htmlSlot","_renderSuffix","property","SuperInput","prototype","attribute","Boolean","reflect","__decorate","queryPart","styles","SuperInput$1"],"mappings":"oPAOA,MAAMA,EAAaC,CAAG,4WAcpB,kBAAAC,GAGc,OAAAC,EAAVC,MAAAF,eAA+B,UAAW,QAAhD,qBACEG,KAASC,QAAAC,kBAQTC,GA2BA,OAAAH,KAAAC,QAEG,SAAAG,GACH,MAAW,CAAAJ,KAAAK,KAAGL,KAAKE,MAUT,CAMV,KAAAI,GAiEDN,KAAAE,MAAAF,KAAAC,QAjGKD,KAAcO,OAAAL,MAAAF,KAAAC,QAElB,YAAAO,CAACC,GAgBGA,EAAAC,kBACEV,KAACW,cAILX,KAAOE,MAAKO,EAAAG,OAAQV,OAAAW,OACrBb,KAAAc,oBAAA,QAAAd,KAAAE,MAAA,CAAAa,SAAA,sBAMAf,KAAAc,oBAAA,SAAAd,KAAAE,OAKC,iBAAAc,GACAjB,0BACDC,KAAAiB,gBAES,kBAERjB,KAAQC,UAAYD,KAAEE,OAAC,QACdA,QAAAF,KAAAC,2BAGLD,KAACO,SACNP,KAAAkB,OAAAC,IAAAnB,KAAAO,OAAA,oBAAA,IAAAP,KAAAW,aAAA,IAESX,KAAakB,OAAkCC,IAAAnB,KAAAO,OAAA,kBAAAE,sBAC9B,EAC1BT,KAAAQ,aAAAC,EAAA,KAKD,gBAAAW,CAACC,GAEuBrB,KAAAO,SAClBP,YAAasB,KAAUD,GAInB,KAAAE,CAAgBC,GACxBxB,KAAQO,QAAOgB,MAAGC,GAEhB,YAAAC,GACEzB,KAAA0B,kBACA,CACF,aAAAC,GACF,OAACC,CAAA,oBAAAC,EAAA,gBAGO,aAAAC,GACR,OAAAF,CAAA,oBAAAC,EAAA,eACE,KAEH,CAEDE,KACEC,EAAAC,UAAA,oBAAA,MAGQF,EAAY,CAAAG,UAAA,iBACfD,UAAA,gBAAA,KACN,CAESF,EAAa,CAAAT,KAAAa,QAAAC,SAAA,KACrBJ,EAAAC,UAAW,gBAAA,QAET,CAAAG,SAAA,OACHH,UAAA,YAAA,KAEsB,CACrBF,EAAA,CAAAK,SAAA,iBACqB,mBAAQ,KAC3B,CACJL,EAAC,CAAAK,SAAA,KACFJ,EAAAC,UAAA,YAAA,GArHCI,EAAA,CADCN,KAC8BC,EAAAC,UAAA,aAAA,GAG/BI,EAAA,CADCN,KAC6BC,EAAAC,UAAA,eAAA,GAG9BI,EAAA,CADCC,EAAQ,UACQN,EAAAC,UAAA,cAAA,GAGjBD,EAAAK,EAAA,CADCE,EAAA5C,IACeqC,GAGhB,IAAAQ,EAAAR"}
+{"version":3,"file":"super-input.js","sources":["../src/internal/super-input.ts"],"sourcesContent":null,"names":["inputStyle","css","observedRecord","omit","super","this","default","value","defaultValue","namevalue","name","reset","_input","_handleInput","e","stopPropagation","compositing","target","trim","dispatchCustomEvent","bubbles","connectedCallback","_connectedInit","events","add","focus","options","firstUpdated","_compositionInit","_renderPrefix","html","_renderSuffix","htmlSlot","property","SuperInput","prototype","attribute","type","Boolean","reflect","__decorate","queryPart","styles","SuperInput$1"],"mappings":"oPAOA,MAAMA,EAAaC,CAAG,4WAcpB,kBAAAC,GAGc,OAAAC,EAAVC,MAAAF,eAA+B,UAAW,QAAhD,qBACEG,KAASC,QAAAC,kBAQTC,GAwBA,OAAAH,KAAAC,QAEG,SAAAG,GACH,MAAW,CAAAJ,KAAAK,KAAGL,KAAKE,MAUT,CAMV,KAAAI,GA2DDN,KAAAE,MAAAF,KAAAC,QA3FKD,KAAcO,OAAAL,MAAAF,KAAAC,QAElB,YAAAO,CAACC,GAgBGA,EAAAC,kBACEV,KAACW,cAILX,KAAOE,MAAKO,EAAAG,OAAQV,OAAAW,OACrBb,KAAAc,oBAAA,QAAAd,KAAAE,MAAA,CAAAa,SAAA,sBAMAf,KAAAc,oBAAA,SAAAd,KAAAE,OAKC,iBAAAc,GACAjB,0BACDC,KAAAiB,gBAES,kBAERjB,KAAQC,UAAYD,KAAEE,OAAC,QACdA,QAAAF,KAAAC,2BAGLD,KAACO,SACNP,KAAAkB,OAAAC,IAAAnB,KAAAO,OAAA,oBAAA,IAAAP,KAAAW,aAAA,IAESX,KAAakB,OAAkCC,IAAAnB,KAAAO,OAAA,kBAAAE,sBAC9B,EAC1BT,KAAAQ,aAAAC,EAAA,KAKD,KAAAW,CAACC,GAEuBrB,KAAAO,QAAAa,MAAAC,GAEtB,YAAAC,GACDtB,KAAAuB,mBAGC,aAAAC,UACMC,sCACJ,CACE,aAAAC,GACA,OAAAD,CAAA,oBAAAE,EAAA,eACF,KAEH,CAEDC,KACEC,EAAAC,UAAA,oBAAA,MAGQF,EAAY,CAAAG,UAAA,iBACfD,UAAA,gBAAA,KACN,CAESF,EAAa,CAAAI,KAAAC,QAAAC,SAAA,KACrBL,EAAAC,UAAW,gBAAA,QAET,CAAAI,SAAA,OACHJ,UAAA,mBAAA,KAEsB,CACrBF,EAAA,CAAAM,SAAA,iBACqB,YAAQ,KAC3B,CACJN,KACDC,EAAAC,UAAA,aAAA,GA5GCK,EAAA,CADCP,KAC8BC,EAAAC,UAAA,eAAA,GAG/BK,EAAA,CADCC,EAAA,UAC6BP,EAAAC,UAAA,cAAA,GAG9BD,EAAAM,EAAA,CADCE,EAAQ1C,IACQkC,GAGjB,IAAAS,EAAAT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "godown",
-  "version": "3.11.1",
+  "version": "3.12.0",
   "description": "Web Components Library",
   "type": "module",
   "main": "index.js",
@@ -20,7 +20,7 @@
     "fmtime": "^0.0.3",
     "lit": "^3.0.0",
     "tslib": "^2.7.0",
-    "@godown/element": "^1.9.0"
+    "@godown/element": "^1.10.0"
   },
   "publishConfig": {
     "access": "public"

package/src/internal/global-style.ts

@@ -49,7 +49,7 @@ GlobalStyle.styles = [
       [
         [cssGlobalVars.background, ["hsl(0 0% 96%)", "hsl(0 0% 4%)"]],
         [cssGlobalVars.foreground, ["hsl(0 0% 4%)", "hsl(0 0% 96%)"]],
-        [cssGlobalVars.muted, ["hsl(0 0% 90%)", "hsl(0 0% 18%)"]],
+        [cssGlobalVars.muted, ["hsl(0 0% 88%)", "hsl(0 0% 18%)"]],
       ],
       1,
     ),

package/src/internal/super-input.ts

@@ -33,9 +33,6 @@ class SuperInput<V = string> extends GlobalStyle {
   @property({ type: Boolean, reflect: true })
   disabled = false;
 
-  @property({ reflect: true })
-  type: InputType;
-
   @property({ reflect: true })
   placeholder: string;
 
@@ -117,12 +114,6 @@ class SuperInput<V = string> extends GlobalStyle {
     }
   }
 
-  protected _changeInputType(t: typeof this.type): void {
-    if (this._input) {
-      this._input.type = t;
-    }
-  }
-
   focus(options?: FocusOptions): void {
     this._input?.focus(options);
   }
@@ -146,25 +137,3 @@ class SuperInput<V = string> extends GlobalStyle {
 
 export default SuperInput;
 export { SuperInput };
-
-type InputType =
-  | "hidden"
-  | "text"
-  | "search"
-  | "tel"
-  | "url"
-  | "email"
-  | "password"
-  | "datetime"
-  | "date"
-  | "month"
-  | "week"
-  | "time"
-  | "datetime-local"
-  | "number"
-  | "range"
-  | "color"
-  | "checkbox"
-  | "radio"
-  | "file"
-  | "image";

package/src/web-components/alert/component.ts

@@ -68,8 +68,8 @@ class Alert extends GlobalStyle {
       >
         <div>${htmlSlot("prefix")}</div>
         <div part="content">
-          <strong part="title">${this.title || htmlSlot("title")}</strong>
-          ${this.content || htmlSlot()}
+          <strong part="title">${htmlSlot("title", this.title)}</strong>
+          ${htmlSlot("", this.content)}
         </div>
         <div>${htmlSlot("suffix")}</div>
       </div>

package/src/web-components/button/component.ts

@@ -73,21 +73,7 @@ const cssScope = scopePrefix(protoName);
       visibility: visible;
       pointer-events: none;
       transform-origin: 0 0;
-      background: var(${cssScope}--modal-background, currentColor);
-      animation-duration: var(${cssScope}--modal-animation-duration);
-    }
-
-    @keyframes kf {
-      0% {
-        transform: scale(0) translate(-50%, -50%);
-        opacity: var(${cssScope}--modal-opacity, 0.1);
-      }
-      80% {
-        transform: scale(1) translate(-50%, -50%);
-      }
-      to {
-        opacity: 0;
-      }
+      background: currentColor;
     }
   `,
 )
@@ -133,7 +119,7 @@ class Button extends GlobalStyle {
         part="root"
         ${attr(this.observedRecord)}
       >
-        ${this.content || htmlSlot()}
+        ${htmlSlot("", this.content)}
         <span part="modal-root"></span>
       </div>
     `;
@@ -154,7 +140,7 @@ class Button extends GlobalStyle {
 
   connectedCallback(): void {
     super.connectedCallback();
-    this.events.add(this, "click", this._handelClick, true);
+    this.events.add(this, "click", this._handelClick);
   }
 
   protected _handelClick(e: MouseEvent): void {
@@ -177,8 +163,24 @@ class Button extends GlobalStyle {
     modal.style.width = size;
     modal.style.left = `${e.x - x}px`;
     modal.style.top = `${e.y - y}px`;
-    modal.style.animationName = "kf";
     this._modalRoot.appendChild(modal);
+    const keyframes = [
+      {
+        transform: "scale(0) translate(-50%, -50%)",
+        opacity: 0.1,
+      },
+      {
+        transform: "scale(1) translate(-50%, -50%)",
+        offset: 0.8,
+      },
+      {
+        opacity: 0,
+      },
+    ];
+    modal.animate(keyframes, {
+      duration: 800,
+      iterations: 1,
+    });
     modal.addEventListener("animationend", () => modal.remove(), { once: true });
   }
 }

package/src/web-components/details/component.ts

@@ -104,7 +104,7 @@ class Details extends SuperOpenable {
           part="title"
           @click="${() => this.toggle()}"
         >
-          <span part="summary">${this.summary || htmlSlot("summary")}</span>
+          <span part="summary">${htmlSlot("summary", this.summary)}</span>
           <span part="icon">${svgCaretDown()}</span>
         </dt>
         <dd

package/src/web-components/dialog/component.ts

@@ -29,6 +29,7 @@ const splitKeysRegexp = /[\s,]+/;
     display: block;
     margin: auto;
     background: none;
+    z-index: 1;
     left: 50%;
     top: 50%;
     position: fixed;

package/src/web-components/input/component.ts

@@ -1,4 +1,4 @@
-import { attr, godown, queryPart, styles, StyleController } from "@godown/element";
+import { attr, godown, queryPart, styles, StyleController, htmlSlot } from "@godown/element";
 import iconEyeSlash from "../../internal/icons/eye-slash.js";
 import { type TemplateResult, css, html, nothing } from "lit";
 import { property } from "lit/decorators.js";
@@ -7,6 +7,25 @@ import { cssGlobalVars } from "../../internal/global-style.js";
 import { SuperInput } from "../../internal/super-input.js";
 import { RingBuilder } from "../../internal/ring.js";
 
+type InputType =
+  | "text"
+  | "search"
+  | "tel"
+  | "url"
+  | "email"
+  | "password"
+  | "datetime"
+  | "date"
+  | "month"
+  | "week"
+  | "time"
+  | "datetime-local"
+  | "number"
+  | "range"
+  | "color"
+  | "file"
+  | "image";
+
 const protoName = "input";
 
 /**
@@ -46,41 +65,26 @@ const protoName = "input";
     background: none;
   }
 
-  [part~="icon"] {
+  [part="prefix"],
+  [part="suffix"] {
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(${cssGlobalVars.input}-icon-color);
   }
 
-  [part~="prefix"],
-  [part~="suffix"] {
-    height: 100%;
-    display: flex;
+  [part="suffix"] slot svg {
+    margin-inline-start: var(${cssGlobalVars.input}-space);
   }
 
-  [part~="suffix"][part~="icon"] {
-    padding-inline-start: var(${cssGlobalVars.input}-space);
-  }
-
-  [part~="prefix"][part~="icon"] {
-    padding-inline-end: var(${cssGlobalVars.input}-space);
+  [part="prefix"] slot svg {
+    margin-inline-end: var(${cssGlobalVars.input}-space);
   }
 `)
 class Input extends SuperInput {
-  type:
-    | "text"
-    | "search"
-    | "tel"
-    | "url"
-    | "email"
-    | "password"
-    | "number"
-    | "date"
-    | "time"
-    | "datetime-local"
-    | "month"
-    | "week" = "text";
+  @property({ reflect: true })
+  type: InputType = "text";
 
   value: string;
 
@@ -136,17 +140,23 @@ class Input extends SuperInput {
     if (this.type === PASSWORD) {
       return html`
         <i
-          part="suffix icon"
+          part="suffix"
           @mousedown="${() => this._changeInputType("text")}"
           @mouseup="${() => this._changeInputType(PASSWORD)}"
           @mouseleave="${() => this._changeInputType(PASSWORD)}"
         >
-          ${iconEyeSlash()}
+          ${htmlSlot("suffix", iconEyeSlash())}
         </i>
       `;
     }
     return super._renderSuffix();
   }
+
+  protected _changeInputType(t: typeof this.type): void {
+    if (this._input) {
+      this._input.type = t;
+    }
+  }
 }
 
 export default Input;

package/src/web-components/layout/component.ts

@@ -24,6 +24,7 @@ const protoName = "layout";
 @styles(css`
   :host {
     width: 100%;
+    height: 100%;
     min-height: 100%;
     flex-direction: column;
     grid-template-rows: auto 1fr auto;

package/src/web-components/text/component.ts

@@ -1,13 +1,11 @@
-import { attr, tokenList, godown, htmlSlot, styles } from "@godown/element";
+import { godown, htmlSlot, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { GlobalStyle, cssGlobalVars, scopePrefix } from "../../internal/global-style.js";
+import { GlobalStyle, cssGlobalVars } from "../../internal/global-style.js";
 
 const protoName = "text";
 
-const cssScope = scopePrefix(protoName);
-
 /**
  * {@linkcode Text} renders text.
  *
@@ -15,74 +13,71 @@ const cssScope = scopePrefix(protoName);
  */
 @godown(protoName)
 @styles(css`
-  :host {
-    ${cssScope}--color: currentColor;
-    ${cssScope}--color-hover: currentColor;
-    ${cssScope}--color-active: currentColor;
+  :host([clip]) {
+    background: var(${cssGlobalVars.backgroundClip});
     display: inline-block;
-    text-overflow: ellipsis;
-    overflow-wrap: break-word;
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    -webkit-background-clip: text;
   }
 
-  [part="root"] {
+  :host([nowrap]) {
     white-space: nowrap;
-    vertical-align: bottom;
-    display: inline-block;
-    text-overflow: inherit;
-    overflow-wrap: inherit;
-    overflow: hidden;
-    color: var(${cssScope}--color);
   }
 
-  [part="root"]:hover {
-    color: var(${cssScope}--color-hover, var(${cssScope}--color));
+  :host([italic]) {
+    font-style: italic;
   }
 
-  [part="root"]:active {
-    color: var(${cssScope}--color-active, var(${cssScope}--color));
-  }
-
-  .hover:hover,
-  .active:active,
-  .always {
-    text-decoration: underline;
+  :host([truncate]),
+  :host([truncate]) ::slotted(*) {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
-  .none {
-    text-decoration: none;
+  :host([strikethrough]) {
+    text-decoration: line-through;
   }
 
-  [clip] {
-    background: var(${cssGlobalVars.backgroundClip});
-    display: inline-block;
-    color: transparent;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    -webkit-background-clip: text;
+  :host([underline=""]),
+  :host([underline="always"]),
+  :host(:hover[underline="hover"]),
+  :host(:active[underline="active"]),
+  :host(:focus[underline="focus"]) {
+    text-decoration: underline;
   }
 `)
 class Text extends GlobalStyle {
-  /**
-   * Underline behavior.
-   */
-  @property()
-  underline: "none" | "hover" | "active" | "always" = "none";
+  @property({
+    converter: {
+      fromAttribute(value) {
+        return value === "" ? true : value;
+      },
+      toAttribute(value) {
+        return value === false ? null : value === true ? "" : value;
+      },
+    },
+    reflect: true,
+  })
+  underline: "none" | "hover" | "active" | "always" | boolean = "none";
+
+  @property({ type: Boolean, reflect: true })
+  nowrap = false;
+
+  @property({ type: Boolean, reflect: true })
+  italic = false;
+
+  @property({ type: Boolean, reflect: true })
+  truncate = false;
 
-  /**
-   * Set background-clip to text.
-   */
-  @property({ type: Boolean })
+  @property({ type: Boolean, reflect: true })
   clip = false;
 
   protected render(): TemplateResult<1> {
     return html`
-      <span
-        part="root"
-        ${attr(this.observedRecord)}
-        class="${tokenList(this.underline)}"
-      >
-        ${htmlSlot()}
-      </span>
+      <p part="root">${htmlSlot()}</p>
     `;
   }
 }

package/src/web-components/time/component.ts

@@ -1,9 +1,9 @@
-import { attr, godown, styles } from "@godown/element";
+import { attr, godown } from "@godown/element";
 import fmtime from "fmtime";
-import { type PropertyValues, type TemplateResult, css, html } from "lit";
+import { type PropertyValues, type TemplateResult, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { GlobalStyle } from "../../internal/global-style.js";
+import Text from "../text/component.js";
 
 const protoName = "time";
 
@@ -14,12 +14,7 @@ const protoName = "time";
  * @category display
  */
 @godown(protoName)
-@styles(css`
-  :host {
-    text-align: center;
-  }
-`)
-class Time extends GlobalStyle {
+class Time extends Text {
   /**
    * Escape symbol.
    */
@@ -54,12 +49,7 @@ class Time extends GlobalStyle {
 
   protected render(): TemplateResult<1> {
     return html`
-      <span
-        part="root"
-        ${attr(this.observedRecord)}
-      >
-        ${fmtime(this.format, this.time, this.escape)}
-      </span>
+      <p part="root">${fmtime(this.format, this.time, this.escape)}</p>
     `;
   }
 

package/src/web-components/tooltip/component.ts

@@ -124,11 +124,12 @@ class Tooltip extends SuperOpenable {
           part="tip"
           direction-outset-place
         >
-          ${this.tip
-            ? html`
-                <span class="passive">${this.tip}</span>
-              `
-            : htmlSlot("tip")}
+          ${htmlSlot(
+            "tip",
+            html`
+              <span class="passive">${this.tip}</span>
+            `,
+          )}
         </div>
       </div>
     `;