Packages
noora
0.85.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
priv/static/noora-web-components.js
var H=globalThis,L=H.ShadowRoot&&(H.ShadyCSS===void 0||H.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,J=Symbol(),st=new WeakMap,N=class{constructor(t,e,o){if(this._$cssResult$=!0,o!==J)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o,e=this.t;if(L&&t===void 0){let o=e!==void 0&&e.length===1;o&&(t=st.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),o&&st.set(e,t))}return t}toString(){return this.cssText}},C=r=>new N(typeof r=="string"?r:r+"",void 0,J),O=(r,...t)=>{let e=r.length===1?r[0]:t.reduce((o,a,n)=>o+(i=>{if(i._$cssResult$===!0)return i.cssText;if(typeof i=="number")return i;throw Error("Value passed to 'css' function must be a 'css' function result: "+i+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(a)+r[n+1],r[0]);return new N(e,r,J)},lt=(r,t)=>{if(L)r.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(let e of t){let o=document.createElement("style"),a=H.litNonce;a!==void 0&&o.setAttribute("nonce",a),o.textContent=e.cssText,r.appendChild(o)}},G=L?r=>r:r=>r instanceof CSSStyleSheet?(t=>{let e="";for(let o of t.cssRules)e+=o.cssText;return C(e)})(r):r;var{is:Ct,defineProperty:zt,getOwnPropertyDescriptor:Pt,getOwnPropertyNames:Nt,getOwnPropertySymbols:Ot,getPrototypeOf:Tt}=Object,j=globalThis,dt=j.trustedTypes,Ut=dt?dt.emptyScript:"",Mt=j.reactiveElementPolyfillSupport,T=(r,t)=>r,Z={toAttribute(r,t){switch(t){case Boolean:r=r?Ut:null;break;case Object:case Array:r=r==null?r:JSON.stringify(r)}return r},fromAttribute(r,t){let e=r;switch(t){case Boolean:e=r!==null;break;case Number:e=r===null?null:Number(r);break;case Object:case Array:try{e=JSON.parse(r)}catch{e=null}}return e}},ht=(r,t)=>!Ct(r,t),ct={attribute:!0,type:String,converter:Z,reflect:!1,useDefault:!1,hasChanged:ht};Symbol.metadata??=Symbol("metadata"),j.litPropertyMetadata??=new WeakMap;var f=class extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=ct){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){let o=Symbol(),a=this.getPropertyDescriptor(t,o,e);a!==void 0&&zt(this.prototype,t,a)}}static getPropertyDescriptor(t,e,o){let{get:a,set:n}=Pt(this.prototype,t)??{get(){return this[e]},set(i){this[e]=i}};return{get:a,set(i){let c=a?.call(this);n?.call(this,i),this.requestUpdate(t,c,o)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??ct}static _$Ei(){if(this.hasOwnProperty(T("elementProperties")))return;let t=Tt(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(T("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(T("properties"))){let e=this.properties,o=[...Nt(e),...Ot(e)];for(let a of o)this.createProperty(a,e[a])}let t=this[Symbol.metadata];if(t!==null){let e=litPropertyMetadata.get(t);if(e!==void 0)for(let[o,a]of e)this.elementProperties.set(o,a)}this._$Eh=new Map;for(let[e,o]of this.elementProperties){let a=this._$Eu(e,o);a!==void 0&&this._$Eh.set(a,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){let e=[];if(Array.isArray(t)){let o=new Set(t.flat(1/0).reverse());for(let a of o)e.unshift(G(a))}else t!==void 0&&e.push(G(t));return e}static _$Eu(t,e){let o=e.attribute;return o===!1?void 0:typeof o=="string"?o:typeof t=="string"?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this))}addController(t){(this._$EO??=new Set).add(t),this.renderRoot!==void 0&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){let t=new Map,e=this.constructor.elementProperties;for(let o of e.keys())this.hasOwnProperty(o)&&(t.set(o,this[o]),delete this[o]);t.size>0&&(this._$Ep=t)}createRenderRoot(){let t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return lt(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,o){this._$AK(t,o)}_$ET(t,e){let o=this.constructor.elementProperties.get(t),a=this.constructor._$Eu(t,o);if(a!==void 0&&o.reflect===!0){let n=(o.converter?.toAttribute!==void 0?o.converter:Z).toAttribute(e,o.type);this._$Em=t,n==null?this.removeAttribute(a):this.setAttribute(a,n),this._$Em=null}}_$AK(t,e){let o=this.constructor,a=o._$Eh.get(t);if(a!==void 0&&this._$Em!==a){let n=o.getPropertyOptions(a),i=typeof n.converter=="function"?{fromAttribute:n.converter}:n.converter?.fromAttribute!==void 0?n.converter:Z;this._$Em=a;let c=i.fromAttribute(e,n.type);this[a]=c??this._$Ej?.get(a)??c,this._$Em=null}}requestUpdate(t,e,o,a=!1,n){if(t!==void 0){let i=this.constructor;if(a===!1&&(n=this[t]),o??=i.getPropertyOptions(t),!((o.hasChanged??ht)(n,e)||o.useDefault&&o.reflect&&n===this._$Ej?.get(t)&&!this.hasAttribute(i._$Eu(t,o))))return;this.C(t,e,o)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(t,e,{useDefault:o,reflect:a,wrapped:n},i){o&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,i??e??this[t]),n!==!0||i!==void 0)||(this._$AL.has(t)||(this.hasUpdated||o||(e=void 0),this._$AL.set(t,e)),a===!0&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}let t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(let[a,n]of this._$Ep)this[a]=n;this._$Ep=void 0}let o=this.constructor.elementProperties;if(o.size>0)for(let[a,n]of o){let{wrapped:i}=n,c=this[a];i!==!0||this._$AL.has(a)||c===void 0||this.C(a,void 0,n,c)}}let t=!1,e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach(o=>o.hostUpdate?.()),this.update(e)):this._$EM()}catch(o){throw t=!1,this._$EM(),o}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach(e=>e.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach(e=>this._$ET(e,this[e])),this._$EM()}updated(t){}firstUpdated(t){}};f.elementStyles=[],f.shadowRootOptions={mode:"open"},f[T("elementProperties")]=new Map,f[T("finalized")]=new Map,Mt?.({ReactiveElement:f}),(j.reactiveElementVersions??=[]).push("2.1.2");var at=globalThis,ut=r=>r,V=at.trustedTypes,pt=V?V.createPolicy("lit-html",{createHTML:r=>r}):void 0,yt="$lit$",_=`lit$${Math.random().toFixed(9).slice(2)}$`,$t="?"+_,Bt=`<${$t}>`,S=document,M=()=>S.createComment(""),B=r=>r===null||typeof r!="object"&&typeof r!="function",rt=Array.isArray,Dt=r=>rt(r)||typeof r?.[Symbol.iterator]=="function",Q=`[
\f\r]`,U=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,bt=/-->/g,mt=/>/g,A=RegExp(`>|${Q}(?:([^\\s"'>=/]+)(${Q}*=${Q}*(?:[^
\f\r"'\`<>=]|("|')|))|$)`,"g"),gt=/'/g,ft=/"/g,_t=/^(?:script|style|textarea|title)$/i,nt=r=>(t,...e)=>({_$litType$:r,strings:t,values:e}),v=nt(1),ee=nt(2),oe=nt(3),E=Symbol.for("lit-noChange"),d=Symbol.for("lit-nothing"),vt=new WeakMap,k=S.createTreeWalker(S,129);function wt(r,t){if(!rt(r)||!r.hasOwnProperty("raw"))throw Error("invalid template strings array");return pt!==void 0?pt.createHTML(t):t}var Rt=(r,t)=>{let e=r.length-1,o=[],a,n=t===2?"<svg>":t===3?"<math>":"",i=U;for(let c=0;c<e;c++){let s=r[c],u,p,l=-1,g=0;for(;g<s.length&&(i.lastIndex=g,p=i.exec(s),p!==null);)g=i.lastIndex,i===U?p[1]==="!--"?i=bt:p[1]!==void 0?i=mt:p[2]!==void 0?(_t.test(p[2])&&(a=RegExp("</"+p[2],"g")),i=A):p[3]!==void 0&&(i=A):i===A?p[0]===">"?(i=a??U,l=-1):p[1]===void 0?l=-2:(l=i.lastIndex-p[2].length,u=p[1],i=p[3]===void 0?A:p[3]==='"'?ft:gt):i===ft||i===gt?i=A:i===bt||i===mt?i=U:(i=A,a=void 0);let $=i===A&&r[c+1].startsWith("/>")?" ":"";n+=i===U?s+Bt:l>=0?(o.push(u),s.slice(0,l)+yt+s.slice(l)+_+$):s+_+(l===-2?c:$)}return[wt(r,n+(r[e]||"<?>")+(t===2?"</svg>":t===3?"</math>":"")),o]},D=class r{constructor({strings:t,_$litType$:e},o){let a;this.parts=[];let n=0,i=0,c=t.length-1,s=this.parts,[u,p]=Rt(t,e);if(this.el=r.createElement(u,o),k.currentNode=this.el.content,e===2||e===3){let l=this.el.content.firstChild;l.replaceWith(...l.childNodes)}for(;(a=k.nextNode())!==null&&s.length<c;){if(a.nodeType===1){if(a.hasAttributes())for(let l of a.getAttributeNames())if(l.endsWith(yt)){let g=p[i++],$=a.getAttribute(l).split(_),I=/([.?@])?(.*)/.exec(g);s.push({type:1,index:n,name:I[2],strings:$,ctor:I[1]==="."?Y:I[1]==="?"?tt:I[1]==="@"?et:P}),a.removeAttribute(l)}else l.startsWith(_)&&(s.push({type:6,index:n}),a.removeAttribute(l));if(_t.test(a.tagName)){let l=a.textContent.split(_),g=l.length-1;if(g>0){a.textContent=V?V.emptyScript:"";for(let $=0;$<g;$++)a.append(l[$],M()),k.nextNode(),s.push({type:2,index:++n});a.append(l[g],M())}}}else if(a.nodeType===8)if(a.data===$t)s.push({type:2,index:n});else{let l=-1;for(;(l=a.data.indexOf(_,l+1))!==-1;)s.push({type:7,index:n}),l+=_.length-1}n++}}static createElement(t,e){let o=S.createElement("template");return o.innerHTML=t,o}};function z(r,t,e=r,o){if(t===E)return t;let a=o!==void 0?e._$Co?.[o]:e._$Cl,n=B(t)?void 0:t._$litDirective$;return a?.constructor!==n&&(a?._$AO?.(!1),n===void 0?a=void 0:(a=new n(r),a._$AT(r,e,o)),o!==void 0?(e._$Co??=[])[o]=a:e._$Cl=a),a!==void 0&&(t=z(r,a._$AS(r,t.values),a,o)),t}var X=class{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){let{el:{content:e},parts:o}=this._$AD,a=(t?.creationScope??S).importNode(e,!0);k.currentNode=a;let n=k.nextNode(),i=0,c=0,s=o[0];for(;s!==void 0;){if(i===s.index){let u;s.type===2?u=new R(n,n.nextSibling,this,t):s.type===1?u=new s.ctor(n,s.name,s.strings,this,t):s.type===6&&(u=new ot(n,this,t)),this._$AV.push(u),s=o[++c]}i!==s?.index&&(n=k.nextNode(),i++)}return k.currentNode=S,a}p(t){let e=0;for(let o of this._$AV)o!==void 0&&(o.strings!==void 0?(o._$AI(t,o,e),e+=o.strings.length-2):o._$AI(t[e])),e++}},R=class r{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,o,a){this.type=2,this._$AH=d,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=o,this.options=a,this._$Cv=a?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode,e=this._$AM;return e!==void 0&&t?.nodeType===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=z(this,t,e),B(t)?t===d||t==null||t===""?(this._$AH!==d&&this._$AR(),this._$AH=d):t!==this._$AH&&t!==E&&this._(t):t._$litType$!==void 0?this.$(t):t.nodeType!==void 0?this.T(t):Dt(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==d&&B(this._$AH)?this._$AA.nextSibling.data=t:this.T(S.createTextNode(t)),this._$AH=t}$(t){let{values:e,_$litType$:o}=t,a=typeof o=="number"?this._$AC(t):(o.el===void 0&&(o.el=D.createElement(wt(o.h,o.h[0]),this.options)),o);if(this._$AH?._$AD===a)this._$AH.p(e);else{let n=new X(a,this),i=n.u(this.options);n.p(e),this.T(i),this._$AH=n}}_$AC(t){let e=vt.get(t.strings);return e===void 0&&vt.set(t.strings,e=new D(t)),e}k(t){rt(this._$AH)||(this._$AH=[],this._$AR());let e=this._$AH,o,a=0;for(let n of t)a===e.length?e.push(o=new r(this.O(M()),this.O(M()),this,this.options)):o=e[a],o._$AI(n),a++;a<e.length&&(this._$AR(o&&o._$AB.nextSibling,a),e.length=a)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t!==this._$AB;){let o=ut(t).nextSibling;ut(t).remove(),t=o}}setConnected(t){this._$AM===void 0&&(this._$Cv=t,this._$AP?.(t))}},P=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,o,a,n){this.type=1,this._$AH=d,this._$AN=void 0,this.element=t,this.name=e,this._$AM=a,this.options=n,o.length>2||o[0]!==""||o[1]!==""?(this._$AH=Array(o.length-1).fill(new String),this.strings=o):this._$AH=d}_$AI(t,e=this,o,a){let n=this.strings,i=!1;if(n===void 0)t=z(this,t,e,0),i=!B(t)||t!==this._$AH&&t!==E,i&&(this._$AH=t);else{let c=t,s,u;for(t=n[0],s=0;s<n.length-1;s++)u=z(this,c[o+s],e,s),u===E&&(u=this._$AH[s]),i||=!B(u)||u!==this._$AH[s],u===d?t=d:t!==d&&(t+=(u??"")+n[s+1]),this._$AH[s]=u}i&&!a&&this.j(t)}j(t){t===d?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}},Y=class extends P{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===d?void 0:t}},tt=class extends P{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==d)}},et=class extends P{constructor(t,e,o,a,n){super(t,e,o,a,n),this.type=5}_$AI(t,e=this){if((t=z(this,t,e,0)??d)===E)return;let o=this._$AH,a=t===d&&o!==d||t.capture!==o.capture||t.once!==o.once||t.passive!==o.passive,n=t!==d&&(o===d||a);a&&this.element.removeEventListener(this.name,this,o),n&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){typeof this._$AH=="function"?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}},ot=class{constructor(t,e,o){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=o}get _$AU(){return this._$AM._$AU}_$AI(t){z(this,t)}};var It=at.litHtmlPolyfillSupport;It?.(D,R),(at.litHtmlVersions??=[]).push("3.3.3");var xt=(r,t,e)=>{let o=e?.renderBefore??t,a=o._$litPart$;if(a===void 0){let n=e?.renderBefore??null;o._$litPart$=a=new R(t.insertBefore(M(),n),n,void 0,e??{})}return a._$AI(r),a};var it=globalThis,b=class extends f{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){let t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){let e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=xt(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return E}};b._$litElement$=!0,b.finalized=!0,it.litElementHydrateSupport?.({LitElement:b});var Ht=it.litElementPolyfillSupport;Ht?.({LitElement:b});(it.litElementVersions??=[]).push("4.2.2");var h=r=>r??d;var At=`.noora-badge {
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: var(--noora-radius-2);
padding: var(--noora-spacing-1) var(--noora-spacing-4);
&[data-disabled] {
background: var(--noora-badge-disabled-background) !important;
color: var(--noora-badge-disabled-label) !important;
}
&[data-icon] {
padding-left: var(--noora-spacing-2);
}
&[data-dot] {
padding-left: var(--noora-spacing-0);
}
&[data-icon-only] {
padding: var(--noora-spacing-1);
}
&[data-size="small"] {
font: var(--noora-font-weight-medium) var(--noora-font-body-xsmall);
&[data-icon] {
gap: var(--noora-spacing-1);
}
& [data-part="icon"] {
width: var(--noora-icon-size-small);
height: var(--noora-icon-size-small);
& svg {
width: 100%;
height: 100%;
}
}
}
&[data-size="large"] {
font: var(--noora-font-weight-medium) var(--noora-font-body-small);
&[data-icon] {
gap: var(--noora-spacing-2);
}
&[data-icon-only] {
padding: var(--noora-spacing-2);
}
& [data-part="icon"] {
width: var(--noora-icon-size-medium);
height: var(--noora-icon-size-medium);
& svg {
width: 100%;
height: 100%;
}
}
}
&[data-style="fill"] {
color: var(--noora-badge-fill-label);
&[data-color="neutral"] {
background: var(--noora-badge-fill-neutral);
}
&[data-color="destructive"] {
background: var(--noora-badge-fill-destructive);
}
&[data-color="warning"] {
background: var(--noora-badge-fill-warning);
}
&[data-color="attention"] {
background: var(--noora-badge-fill-attention);
}
&[data-color="success"] {
background: var(--noora-badge-fill-success);
}
&[data-color="information"] {
background: var(--noora-badge-fill-information);
}
&[data-color="focus"] {
background: var(--noora-badge-fill-focus);
}
&[data-color="primary"] {
background: var(--noora-badge-fill-primary);
}
&[data-color="secondary"] {
background: var(--noora-badge-fill-secondary);
}
}
&[data-style="light-fill"] {
&[data-color="neutral"] {
background: var(--noora-badge-light-fill-neutral-background);
color: var(--noora-badge-light-fill-neutral-label);
box-shadow: 0 0 0 1px
light-dark(
color-mix(in oklch, var(--noora-neutral-light-1100) 40%, transparent),
color-mix(in oklch, var(--noora-neutral-light-100) 20%, transparent)
);
}
&[data-color="destructive"] {
background: var(--noora-badge-light-fill-destructive-background);
color: var(--noora-badge-light-fill-destructive-label);
box-shadow: 0 0 0 1px
color-mix(
in oklch,
var(--noora-badge-light-fill-destructive-label) 40%,
transparent
);
}
&[data-color="warning"] {
background: var(--noora-badge-light-fill-warning-background);
color: var(--noora-badge-light-fill-warning-label);
box-shadow: 0 0 0 1px
color-mix(
in oklch,
var(--noora-badge-light-fill-warning-label) 40%,
transparent
);
}
&[data-color="attention"] {
background: var(--noora-badge-light-fill-attention-background);
color: var(--noora-badge-light-fill-attention-label);
box-shadow: 0 0 0 1px
color-mix(
in oklch,
var(--noora-badge-light-fill-attention-label) 40%,
transparent
);
}
&[data-color="success"] {
background: var(--noora-badge-light-fill-success-background);
color: var(--noora-badge-light-fill-success-label);
box-shadow: 0 0 0 1px
color-mix(
in oklch,
var(--noora-badge-light-fill-success-label) 40%,
transparent
);
}
&[data-color="information"] {
background: var(--noora-badge-light-fill-information-background);
color: var(--noora-badge-light-fill-information-label);
box-shadow: 0 0 0 1px
color-mix(
in oklch,
var(--noora-badge-light-fill-information-label) 40%,
transparent
);
}
&[data-color="focus"] {
background: var(--noora-badge-light-fill-focus-background);
color: var(--noora-badge-light-fill-focus-label);
box-shadow: 0 0 0 1px
color-mix(
in oklch,
var(--noora-badge-light-fill-focus-label) 40%,
transparent
);
}
&[data-color="primary"] {
background: var(--noora-badge-light-fill-primary-background);
color: var(--noora-badge-light-fill-primary-label);
box-shadow: 0 0 0 1px
color-mix(
in oklch,
var(--noora-badge-light-fill-primary-label) 40%,
transparent
);
}
&[data-color="secondary"] {
background: var(--noora-badge-light-fill-secondary-background);
color: var(--noora-badge-light-fill-secondary-label);
box-shadow: 0 0 0 1px
color-mix(
in oklch,
var(--noora-badge-light-fill-secondary-label) 40%,
transparent
);
}
}
}
.noora-status-badge {
display: inline-flex;
justify-content: center;
align-items: center;
gap: var(--noora-spacing-2);
box-shadow: var(--noora-border-light-default);
border-radius: var(--noora-radius-3);
background: var(--noora-surface-background-primary);
padding: var(--noora-spacing-2) var(--noora-spacing-4) var(--noora-spacing-2)
var(--noora-spacing-2);
& [data-part="icon"] {
display: inline-flex;
justify-content: center;
align-items: center;
& svg {
width: var(--noora-icon-size-medium);
height: var(--noora-icon-size-medium);
}
}
& [data-part="label"] {
font: var(--noora-font-weight-medium) var(--noora-font-body-small);
}
&:not([data-status="disabled"]) {
color: var(--noora-surface-label-primary);
}
&[data-status="disabled"] {
color: var(--noora-surface-label-disabled);
}
&[data-status="success"] [data-part="icon"] {
color: var(--noora-badge-status-success);
}
&[data-status="error"] [data-part="icon"] {
color: var(--noora-badge-status-error);
}
&[data-status="warning"] [data-part="icon"] {
color: var(--noora-badge-status-warning);
}
&[data-status="attention"] [data-part="icon"] {
color: var(--noora-badge-status-attention);
}
&[data-status="in_progress"] [data-part="icon"] {
color: var(--noora-badge-status-in-progress);
}
}
`;var y={name:"Badge",tagName:"noora-badge",elementClassName:"NooraBadge",className:"noora-badge",modulePath:"./priv/static/noora-web-components.js",description:"Labels an item with compact status or categorization information.",usage:'<noora-badge color="success">Available</noora-badge>',attributes:[{name:"aria-label",property:"_ariaLabel",publicProperty:!1,type:"string",description:"Provides an accessible name when visible text is unavailable."},{name:"appearance",property:"appearance",phoenixName:"style",type:"string",values:["fill","light-fill"],default:"fill",description:"Controls whether the badge uses a solid or light fill."},{name:"color",property:"color",type:"string",values:["neutral","destructive","warning","attention","success","information","focus","primary","secondary"],default:"neutral",description:"Controls the semantic color. Disabled badges ignore this value."},{name:"size",property:"size",type:"string",values:["small","large"],default:"small",description:"Controls the badge dimensions and text size."},{name:"disabled",property:"disabled",type:"boolean",default:!1,reflect:!0,description:"Uses the disabled presentation regardless of color."},{name:"dot",property:"dot",type:"boolean",default:!1,reflect:!0,description:"Displays a dot before the label when the icon slot is empty."},{name:"icon-only",property:"iconOnly",type:"boolean",default:!1,reflect:!0,description:"Hides the label and displays only the icon slot."},{name:"label",property:"label",type:"string",default:"",description:"Provides fallback text when the default slot is empty."}],readonlyProperties:[],slots:[{name:"",description:"The visible label."},{name:"icon",description:"An icon displayed before the label. It takes precedence over dot."}],cssParts:[{name:"badge",description:"The badge container."},{name:"icon",description:"The icon or dot container."},{name:"label",description:"The visible label."}],stylingExample:`noora-badge::part(badge) {
text-transform: uppercase;
}`,notes:["The browser component uses appearance for the visual style because style is a native element property. The Phoenix component keeps its existing style attribute, and both map to the same contract value.","A slotted icon takes precedence over the generated dot."],examples:[{id:"colors",title:"Colors",description:"Colors communicate semantic meaning while sharing the same compact shape.",markup:`<noora-badge color="neutral">Neutral</noora-badge>
<noora-badge color="destructive">Destructive</noora-badge>
<noora-badge color="warning">Warning</noora-badge>
<noora-badge color="attention">Attention</noora-badge>
<noora-badge color="success">Success</noora-badge>
<noora-badge color="information">Information</noora-badge>
<noora-badge color="focus">Focus</noora-badge>
<noora-badge color="primary">Primary</noora-badge>
<noora-badge color="secondary">Secondary</noora-badge>`},{id:"appearances-and-sizes",title:"Appearances and sizes",description:"Use a light fill for lower emphasis and choose between small and large sizing.",markup:`<noora-badge appearance="fill" size="small" color="success">Small fill</noora-badge>
<noora-badge appearance="light-fill" size="small" color="success">Small light fill</noora-badge>
<noora-badge appearance="fill" size="large" color="information">Large fill</noora-badge>
<noora-badge appearance="light-fill" size="large" color="information">Large light fill</noora-badge>`},{id:"icons-and-states",title:"Icons and states",description:"Use a generated dot, provide an icon through its named slot, or apply the disabled presentation.",markup:`<noora-badge dot color="success">Online</noora-badge>
<noora-badge appearance="light-fill" color="warning">
<svg slot="icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<circle cx="12" cy="12" r="9" stroke-width="2"></circle>
<path d="M12 7v6" stroke-width="2"></path>
<path d="M12 17h.01" stroke-width="2"></path>
</svg>
Needs attention
</noora-badge>
<noora-badge disabled>Disabled</noora-badge>`}]};function w(r,t){let e=r.attributes.find(o=>o.name===t);if(!e)throw new Error(`${r.tagName} does not define ${t}`);return e}function q(r){return Object.fromEntries(r.attributes.map(t=>{let e={};return t.property!==t.name&&(e.attribute=t.name),t.type==="boolean"&&(e.type=Boolean),t.reflect&&(e.reflect=!0),[t.property,e]}))}function F(r,t){for(let e of t.attributes)Object.hasOwn(e,"default")&&(r[e.property]=e.default)}function x(r,t){return!t.values||t.values.includes(r)?r:t.default}var Vt=w(y,"appearance"),qt=w(y,"color"),Ft=w(y,"size"),W=class extends b{static properties={...q(y),_hasIcon:{state:!0}};static styles=[C(At),O`
slot[name="icon"]::slotted(svg) {
width: 100%;
height: 100%;
pointer-events: none;
}
`];constructor(){super(),F(this,y),this._hasIcon=!1}updated(){this.#e(this.renderRoot.querySelector('slot[name="icon"]'))}render(){let t=this.dot&&!this._hasIcon,e=this._hasIcon||t;return v`
<span
class=${y.className}
part="badge"
data-style=${this.#a()}
data-color=${this.#r()}
data-size=${this.#i()}
?data-disabled=${this.disabled}
?data-dot=${t}
?data-icon=${this._hasIcon}
?data-icon-only=${this.iconOnly}
aria-label=${h(this._ariaLabel)}
>
<span data-part="icon" part="icon" ?hidden=${!e}>
<slot name="icon" @slotchange=${this.#t}></slot>
${t?this.#n():null}
</span>
<span data-part="label" part="label" ?hidden=${this.iconOnly}>
<slot>${this.label}</slot>
</span>
</span>
`}#a(){return x(this.appearance,Vt)}#r(){return x(this.color,qt)}#n(){return this.#i()==="small"?v`
<svg
aria-hidden="true"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
>
<rect x="4" y="4" width="4" height="4" rx="1" fill="#FDFDFD"></rect>
</svg>
`:v`
<svg
aria-hidden="true"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
>
<rect
x="5"
y="5"
width="6"
height="6"
rx="1.33333"
fill="currentColor"
></rect>
</svg>
`}#t(t){this.#e(t.currentTarget)}#i(){return x(this.size,Ft)}#e(t){let e=t.assignedElements({flatten:!0}).length>0;e!==this._hasIcon&&(this._hasIcon=e)}};function kt(){customElements.get(y.tagName)||customElements.define(y.tagName,W)}var St=`.noora-button,
.noora-link-button,
.noora-neutral-button {
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
-webkit-appearance: button;
border: 0;
border-radius: var(--noora-radius-3);
padding: 0;
text-decoration: none;
& svg {
pointer-events: none;
}
}
.noora-button {
--noora-button-icon-size: var(--noora-icon-size-large);
cursor: pointer;
outline: unset;
transition: transform 150ms var(--ease-out-cubic);
/* Reserve space for box-shadow to ensure consistent height across variants */
box-shadow:
0px 0px 0px 0px transparent,
0px 0px 0px 0px transparent,
0px 0px 0px 0px transparent,
0px 0px 0px 0px transparent;
&[disabled] {
cursor: not-allowed;
}
&:not(:disabled):active {
transform: scale(0.97);
}
& > span {
padding: 0rem var(--noora-spacing-2);
}
&[data-variant="primary"] {
box-shadow: var(--noora-button-border-primary);
background: var(--noora-button-background-primary);
color: var(--noora-button-primary-label);
&:hover {
box-shadow: var(--noora-button-border-primary-hover);
background: var(--noora-button-background-primary-hover);
}
&:focus-visible {
box-shadow: var(--noora-button-border-primary-focus);
}
&[disabled] {
box-shadow: var(--noora-button-border-primary-disabled);
background: var(--noora-button-background-primary-disabled);
color: var(--noora-button-primary-disabled-label);
}
&:not(:disabled):active {
box-shadow: var(--noora-button-border-primary-active);
background: var(--noora-button-background-primary-active);
}
}
&[data-variant="secondary"] {
box-shadow: var(--noora-button-border-secondary);
background: var(--noora-button-background-secondary);
color: var(--noora-button-secondary-label);
&:hover {
background: var(--noora-button-background-secondary-hover);
}
&:focus-visible {
box-shadow: var(--noora-button-border-secondary-focus);
}
&[disabled] {
box-shadow: var(--noora-button-border-secondary-disabled);
background: var(--noora-button-background-secondary-disabled);
color: var(--noora-button-secondary-disabled-label);
}
&:not(:disabled):active {
box-shadow: var(--noora-button-border-secondary-active);
background: var(--noora-button-background-secondary-active);
}
}
&[data-variant="destructive"] {
box-shadow: var(--noora-button-border-destructive);
background: var(--noora-button-background-destructive);
color: var(--noora-button-destructive-label);
&:hover {
box-shadow: var(--noora-button-border-destructive-hover);
background: var(--noora-button-background-destructive-hover);
}
&:focus-visible {
box-shadow: var(--noora-button-border-destructive-focus);
}
&[disabled] {
box-shadow: var(--noora-button-border-destructive-disabled);
background: var(--noora-button-background-destructive-disabled);
color: var(--noora-button-destructive-disabled-label);
}
&:not(:disabled):active {
box-shadow: var(--noora-button-border-destructive-active);
background: var(--noora-button-destructive-background);
}
}
&[data-icon-only] {
padding: var(--noora-spacing-3);
}
&[data-size="small"] {
--noora-button-icon-size: var(--noora-icon-size-small);
font: var(--noora-font-weight-medium) var(--noora-font-body-xsmall);
&:not([data-icon-only]) {
padding: var(--noora-spacing-3) var(--noora-spacing-2);
}
& svg {
width: var(--noora-button-icon-size);
height: var(--noora-button-icon-size);
}
}
&[data-size="medium"],
&[data-size="large"] {
&:not([data-icon-only]) {
padding: var(--noora-spacing-3);
}
}
&[data-size="medium"] {
--noora-button-icon-size: var(--noora-icon-size-medium);
font: var(--noora-font-weight-medium) var(--noora-font-body-small);
& svg {
width: var(--noora-button-icon-size);
height: var(--noora-button-icon-size);
}
}
&[data-size="large"] {
--noora-button-icon-size: var(--noora-icon-size-large);
font: var(--noora-font-weight-medium) var(--noora-font-body-medium);
& svg {
width: var(--noora-button-icon-size);
height: var(--noora-button-icon-size);
}
}
}
.noora-link-button {
--noora-link-button-primary-label: light-dark(
var(--noora-purple-500),
var(--noora-purple-300)
);
--noora-link-button-secondary-label: light-dark(
var(--noora-neutral-light-1200),
var(--noora-neutral-light-50)
);
--noora-link-button-destructive-label: light-dark(
var(--noora-red-500),
var(--noora-red-300)
);
--noora-link-button-disabled-label: light-dark(
var(--noora-neutral-light-600),
var(--noora-neutral-light-300)
);
display: inline-flex;
gap: var(--noora-spacing-1);
border-radius: var(--noora-radius-1);
background: transparent;
&:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
&:disabled {
cursor: not-allowed;
color: var(--noora-link-button-disabled-label) !important;
}
&:not(:disabled)[data-underline] {
text-decoration: underline;
&:hover {
text-decoration-style: dotted;
}
}
&:not(:disabled):not([data-underline]):hover {
text-decoration: underline;
}
&[data-variant="primary"] {
color: var(--noora-link-button-primary-label);
}
&[data-variant="secondary"] {
color: var(--noora-link-button-secondary-label);
}
&[data-variant="destructive"] {
color: var(--noora-link-button-destructive-label);
}
&[data-size="small"] {
font: var(--noora-font-weight-medium) var(--noora-font-body-xsmall);
& svg {
width: var(--noora-icon-size-small);
height: var(--noora-icon-size-small);
}
}
&[data-size="medium"] {
font: var(--noora-font-weight-medium) var(--noora-font-body-small);
& svg {
width: var(--noora-icon-size-medium);
height: var(--noora-icon-size-medium);
}
}
&[data-size="large"] {
font: var(--noora-font-weight-medium) var(--noora-font-body-medium);
& svg {
width: var(--noora-icon-size-large);
height: var(--noora-icon-size-large);
}
}
}
.noora-neutral-button {
cursor: pointer;
border-radius: var(--noora-radius-3);
background: unset;
padding: var(--noora-spacing-3);
color: var(--noora-button-neutral-label);
transition: transform 150ms var(--ease-out-cubic);
&:not(:disabled):hover {
background: var(--noora-button-neutral-background-hover);
}
&:not(:disabled):active {
background: var(--noora-button-neutral-background-active);
transform: scale(0.97);
}
&[disabled] {
cursor: not-allowed;
color: var(--noora-button-neutral-disabled-label);
}
&[data-size="large"] {
& > svg {
width: var(--noora-icon-size-large);
height: var(--noora-icon-size-large);
}
}
&[data-size="medium"] {
& > svg {
width: var(--noora-icon-size-medium);
height: var(--noora-icon-size-medium);
}
}
&[data-size="small"] {
& > svg {
width: var(--noora-icon-size-small);
height: var(--noora-icon-size-small);
}
}
}
@media (prefers-reduced-motion: reduce) {
.noora-button,
.noora-neutral-button {
transition: none;
&:not(:disabled):active {
transform: none;
}
}
}
`;var m={name:"Button",tagName:"noora-button",elementClassName:"NooraButton",className:"noora-button",modulePath:"./priv/static/noora-web-components.js",description:"Triggers an action, submits a form, or navigates to another location.",usage:'<noora-button type="button">Create project</noora-button>',attributes:[{name:"aria-describedby",property:"_ariaDescribedBy",publicProperty:!1,type:"string",description:"Identifies the element that describes the button."},{name:"aria-label",property:"_ariaLabel",publicProperty:!1,type:"string",description:"Provides an accessible name when visible text is unavailable."},{name:"aria-labelledby",property:"_ariaLabelledBy",publicProperty:!1,type:"string",description:"Identifies the element that labels the button."},{name:"title",property:"_title",publicProperty:!1,type:"string",description:"Provides advisory information for the button."},{name:"autofocus",property:"autofocus",type:"boolean",default:!1,description:"Focuses the button when the page loads."},{name:"disabled",property:"disabled",type:"boolean",default:!1,reflect:!0,description:"Prevents activation and form submission."},{name:"download",property:"download",type:"string",description:"Downloads the linked resource, optionally using this value as the filename."},{name:"form",property:"formId",type:"string",description:"Associates the button with a form by element identifier."},{name:"formaction",property:"formAction",type:"string",description:"Overrides the associated form action for this submit button."},{name:"formenctype",property:"formEnctype",type:"string",description:"Overrides the associated form encoding type for this submit button."},{name:"formmethod",property:"formMethod",type:"string",description:"Overrides the associated form method for this submit button."},{name:"formnovalidate",property:"formNoValidate",type:"boolean",default:!1,description:"Skips validation when this button submits its associated form."},{name:"formtarget",property:"formTarget",type:"string",description:"Overrides where the associated form response is displayed."},{name:"href",property:"href",type:"string",default:"",description:"Renders the control as a link to this location."},{name:"icon-only",property:"iconOnly",type:"boolean",default:!1,reflect:!0,description:"Uses the default slot as the entire button content. An accessible label is required."},{name:"label",property:"label",type:"string",default:"",description:"Provides fallback text when the default slot is empty."},{name:"name",property:"name",type:"string",default:"",description:"Sets the form field name submitted with the button value."},{name:"rel",property:"rel",type:"string",description:"Sets the relationship between the current page and a linked resource."},{name:"size",property:"size",type:"string",values:["small","medium","large"],default:"large",description:"Controls the button dimensions and text size."},{name:"target",property:"target",type:"string",description:"Controls where a linked resource is opened."},{name:"type",property:"type",type:"string",values:["button","reset","submit"],default:"submit",description:"Controls native button behavior when href is absent."},{name:"value",property:"value",type:"string",default:"",description:"Sets the form value submitted with the button name."},{name:"variant",property:"variant",type:"string",values:["primary","secondary","destructive"],default:"primary",description:"Controls the visual emphasis and semantic intent."}],readonlyProperties:[{name:"control",type:"HTMLAnchorElement | HTMLButtonElement | null",description:"The native link or button rendered inside the component."},{name:"form",type:"HTMLFormElement | null",description:"The form associated with the button, if one exists."}],slots:[{name:"",description:"The visible label, or the complete content when icon-only is present."},{name:"icon-left",description:"An icon displayed before the label."},{name:"icon-right",description:"An icon displayed after the label."}],cssParts:[{name:"control",description:"The native link or button control."}],stylingExample:`noora-button::part(control) {
inline-size: 100%;
}`,notes:["The component emits the standard browser click event.","It renders a native link when href is present and the component is enabled. Otherwise, it renders a native button and supports form submission and reset."],examples:[{id:"variants",title:"Variants",description:"Choose a semantic variant through the variant attribute.",markup:`<noora-button type="button" variant="primary">Primary</noora-button>
<noora-button type="button" variant="secondary">Secondary</noora-button>
<noora-button type="button" variant="destructive">Destructive</noora-button>`},{id:"sizes",title:"Sizes",description:"The default size is large.",markup:`<noora-button type="button" size="small">Small</noora-button>
<noora-button type="button" size="medium">Medium</noora-button>
<noora-button type="button" size="large">Large</noora-button>`},{id:"icons-and-states",title:"Icons and states",description:"Named slots place icons around the label. Icon-only buttons require an accessible label.",markup:`<noora-button type="button">
<svg
slot="icon-left"
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
>
<path d="m15 18-6-6 6-6" stroke-width="2"></path>
</svg>
Previous
</noora-button>
<noora-button type="button" variant="secondary">
Continue
<svg
slot="icon-right"
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
>
<path d="m9 18 6-6-6-6" stroke-width="2"></path>
</svg>
</noora-button>
<noora-button type="button" icon-only aria-label="Go back">
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="m15 18-6-6 6-6" stroke-width="2"></path>
</svg>
</noora-button>
<noora-button type="button" variant="secondary" disabled>
Disabled
</noora-button>`}]};var Jt=w(m,"size"),Gt=w(m,"type"),Zt=w(m,"variant"),K=class extends b{static formAssociated=!0;static shadowRootOptions={...b.shadowRootOptions,delegatesFocus:!0};static properties=q(m);static styles=[C(St),O`
slot::slotted(svg) {
width: var(--noora-button-icon-size);
height: var(--noora-button-icon-size);
pointer-events: none;
}
`];#a=!1;#r;#n=!1;#t;constructor(){super(),this.#r=this.attachInternals?.(),F(this,m)}connectedCallback(){super.connectedCallback(),this.#e(),this.#l()}disconnectedCallback(){super.disconnectedCallback(),queueMicrotask(()=>{this.isConnected||this.#t?.remove()})}get form(){return this.#r?.form??this.#h()??this.closest("form")}get control(){return this.renderRoot?.querySelector('[part="control"]')??null}click(){this.control?.click()}focus(t){this.control?.focus(t)}formDisabledCallback(t){this.#a=t,this.#t&&(this.#t.disabled=this.#o()),this.requestUpdate()}willUpdate(){this.#n=this.control===this.renderRoot?.activeElement}updated(){this.#n&&this.control?.focus(),this.#e(),this.#l()}render(){let t=this.iconOnly?v`<slot></slot>`:v`
<slot name="icon-left"></slot>
<span><slot>${this.label}</slot></span>
<slot name="icon-right"></slot>
`;return this.href&&!this.#o()?v`
<a
class=${m.className}
part="control"
href=${this.href}
data-variant=${this.#c()}
data-size=${this.#d()}
?data-icon-only=${this.iconOnly}
aria-describedby=${h(this._ariaDescribedBy)}
aria-label=${h(this._ariaLabel)}
aria-labelledby=${h(this._ariaLabelledBy)}
download=${h(this.download)}
rel=${h(this.rel)}
target=${h(this.target)}
title=${h(this._title)}
>
${t}
</a>
`:v`
<button
class=${m.className}
part="control"
type=${this.#s()}
name=${this.name}
value=${this.value}
data-variant=${this.#c()}
data-size=${this.#d()}
?data-icon-only=${this.iconOnly}
?autofocus=${this.autofocus}
?disabled=${this.#o()}
aria-describedby=${h(this._ariaDescribedBy)}
aria-label=${h(this._ariaLabel)}
aria-labelledby=${h(this._ariaLabelledBy)}
form=${h(this.formId)}
formaction=${h(this.formAction)}
formenctype=${h(this.formEnctype)}
formmethod=${h(this.formMethod)}
?formnovalidate=${this.formNoValidate}
formtarget=${h(this.formTarget)}
title=${h(this._title)}
@click=${this.#i}
>
${t}
</button>
`}#i(t){this.#o()||this.#s()==="button"||queueMicrotask(()=>{if(t.defaultPrevented)return;let e=this.form;if(e){if(this.#s()==="reset"){e.reset();return}this.#l(),this.#t?.form?.requestSubmit(this.#t)}})}#e(){let t=this.control,e=this.getRootNode();if(!(!t||!("getElementById"in e)))for(let[o,a]of[["ariaDescribedByElements",this._ariaDescribedBy],["ariaLabelledByElements",this._ariaLabelledBy]])o in t&&(t[o]=a?.trim().split(/\s+/).map(n=>e.getElementById(n)).filter(Boolean)??[])}#l(){if(this.href||this.#s()!=="submit"){this.#t?.remove();return}this.#t||(this.#t=this.ownerDocument.createElement("button"),this.#t.hidden=!0,this.#t.tabIndex=-1,this.#t.type="submit",this.#t.setAttribute("aria-hidden","true"));for(let[t,e]of[["form",this.formId],["formaction",this.formAction],["formenctype",this.formEnctype],["formmethod",this.formMethod],["formtarget",this.formTarget],["name",this.name],["value",this.value]])e==null?this.#t.removeAttribute(t):this.#t.setAttribute(t,e);this.#t.disabled=this.#o(),this.#t.formNoValidate=this.formNoValidate,this.parentNode&&this.nextSibling!==this.#t&&this.parentNode.insertBefore(this.#t,this.nextSibling)}#h(){if(!this.formId)return null;let t=this.ownerDocument.getElementById(this.formId);return t instanceof HTMLFormElement?t:null}#o(){return this.disabled||this.#a}#d(){return x(this.size,Jt)}#s(){return x(this.type,Gt)}#c(){return x(this.variant,Zt)}};function Et(){customElements.get(m.tagName)||customElements.define(m.tagName,K)}kt();Et();export{W as NooraBadge,K as NooraButton,kt as registerNooraBadge,Et as registerNooraButton};
/*! Bundled license information:
@lit/reactive-element/css-tag.js:
(**
* @license
* Copyright 2019 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*)
@lit/reactive-element/reactive-element.js:
lit-html/lit-html.js:
lit-element/lit-element.js:
(**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*)
lit-html/is-server.js:
(**
* @license
* Copyright 2022 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*)
lit-html/directives/if-defined.js:
(**
* @license
* Copyright 2018 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*)
*/
//# sourceMappingURL=noora-web-components.js.map