From fdd54372f0c591b75a510540aba26f0f612c54c6 Mon Sep 17 00:00:00 2001 From: Issack John <117320405+issackjohn@users.noreply.github.com> Date: Thu, 20 Aug 2026 16:12:55 -0700 Subject: [PATCH] Improve Responsive Design accessibility --- .../responsive-design/dist/app.js | 164 +++++++++++------- .../src/lib/components/app-ribbon.js | 83 ++++++++- .../src/lib/components/chat-input.js | 2 +- .../src/lib/components/chat-messages.js | 2 +- .../src/lib/components/chat-window.js | 22 ++- .../src/lib/components/newsletter-signup.js | 2 +- .../src/lib/components/recipe-card.js | 6 +- .../src/lib/components/ribbon-button.js | 2 +- .../src/tailwind.chat-window.generated.css | 2 +- .../src/tailwind.generated.css | 2 +- 10 files changed, 202 insertions(+), 85 deletions(-) diff --git a/suites-experimental/responsive-design/dist/app.js b/suites-experimental/responsive-design/dist/app.js index 3128266f9..73541dd98 100644 --- a/suites-experimental/responsive-design/dist/app.js +++ b/suites-experimental/responsive-design/dist/app.js @@ -3,58 +3,82 @@ * Copyright 2019 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ -const e=globalThis,t=e.ShadowRoot&&(void 0===e.ShadyCSS||e.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),r=new WeakMap;let o=class{constructor(e,t,r){if(this._$cssResult$=!0,r!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const i=this.t;if(t&&void 0===e){const t=void 0!==i&&1===i.length;t&&(e=r.get(i)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),t&&r.set(i,e))}return e}toString(){return this.cssText}};const a=(i,r)=>{if(t)i.adoptedStyleSheets=r.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet));else for(const t of r){const r=document.createElement("style"),o=e.litNonce;void 0!==o&&r.setAttribute("nonce",o),r.textContent=t.cssText,i.appendChild(r)}},s=t?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const i of e.cssRules)t+=i.cssText;return(e=>new o("string"==typeof e?e:e+"",void 0,i))(t)})(e):e +const e=globalThis,t=e.ShadowRoot&&(void 0===e.ShadyCSS||e.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),r=new WeakMap;let o=class{constructor(e,t,r){if(this._$cssResult$=!0,r!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const i=this.t;if(t&&void 0===e){const t=void 0!==i&&1===i.length;t&&(e=r.get(i)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),t&&r.set(i,e))}return e}toString(){return this.cssText}};const s=(i,r)=>{if(t)i.adoptedStyleSheets=r.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet));else for(const t of r){const r=document.createElement("style"),o=e.litNonce;void 0!==o&&r.setAttribute("nonce",o),r.textContent=t.cssText,i.appendChild(r)}},a=t?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const i of e.cssRules)t+=i.cssText;return(e=>new o("string"==typeof e?e:e+"",void 0,i))(t)})(e):e /** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause - */,{is:n,defineProperty:c,getOwnPropertyDescriptor:l,getOwnPropertyNames:d,getOwnPropertySymbols:h,getPrototypeOf:p}=Object,g=globalThis,u=g.trustedTypes,m=u?u.emptyScript:"",b=g.reactiveElementPolyfillSupport,w=(e,t)=>e,f={toAttribute(e,t){switch(t){case Boolean:e=e?m:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let i=e;switch(t){case Boolean:i=null!==e;break;case Number:i=null===e?null:Number(e);break;case Object:case Array:try{i=JSON.parse(e)}catch(e){i=null}}return i}},x=(e,t)=>!n(e,t),y={attribute:!0,type:String,converter:f,reflect:!1,useDefault:!1,hasChanged:x};Symbol.metadata??=Symbol("metadata"),g.litPropertyMetadata??=new WeakMap;let v=class extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=y){if(t.state&&(t.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(e,i,t);void 0!==r&&c(this.prototype,e,r)}}static getPropertyDescriptor(e,t,i){const{get:r,set:o}=l(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get:r,set(t){const a=r?.call(this);o?.call(this,t),this.requestUpdate(e,a,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??y}static _$Ei(){if(this.hasOwnProperty(w("elementProperties")))return;const e=p(this);e.finalize(),void 0!==e.l&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(w("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(w("properties"))){const e=this.properties,t=[...d(e),...h(e)];for(const i of t)this.createProperty(i,e[i])}const e=this[Symbol.metadata];if(null!==e){const t=litPropertyMetadata.get(e);if(void 0!==t)for(const[e,i]of t)this.elementProperties.set(e,i)}this._$Eh=new Map;for(const[e,t]of this.elementProperties){const i=this._$Eu(e,t);void 0!==i&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const i=new Set(e.flat(1/0).reverse());for(const e of i)t.unshift(s(e))}else void 0!==e&&t.push(s(e));return t}static _$Eu(e,t){const i=t.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof e?e.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((e=>this.enableUpdating=e)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((e=>e(this)))}addController(e){(this._$EO??=new Set).add(e),void 0!==this.renderRoot&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){const e=new Map,t=this.constructor.elementProperties;for(const i of t.keys())this.hasOwnProperty(i)&&(e.set(i,this[i]),delete this[i]);e.size>0&&(this._$Ep=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return a(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((e=>e.hostConnected?.()))}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach((e=>e.hostDisconnected?.()))}attributeChangedCallback(e,t,i){this._$AK(e,i)}_$ET(e,t){const i=this.constructor.elementProperties.get(e),r=this.constructor._$Eu(e,i);if(void 0!==r&&!0===i.reflect){const o=(void 0!==i.converter?.toAttribute?i.converter:f).toAttribute(t,i.type);this._$Em=e,null==o?this.removeAttribute(r):this.setAttribute(r,o),this._$Em=null}}_$AK(e,t){const i=this.constructor,r=i._$Eh.get(e);if(void 0!==r&&this._$Em!==r){const e=i.getPropertyOptions(r),o="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:f;this._$Em=r,this[r]=o.fromAttribute(t,e.type)??this._$Ej?.get(r)??null,this._$Em=null}}requestUpdate(e,t,i){if(void 0!==e){const r=this.constructor,o=this[e];if(i??=r.getPropertyOptions(e),!((i.hasChanged??x)(o,t)||i.useDefault&&i.reflect&&o===this._$Ej?.get(e)&&!this.hasAttribute(r._$Eu(e,i))))return;this.C(e,t,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(e,t,{useDefault:i,reflect:r,wrapped:o},a){i&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,a??t??this[e]),!0!==o||void 0!==a)||(this._$AL.has(e)||(this.hasUpdated||i||(t=void 0),this._$AL.set(e,t)),!0===r&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[e,t]of this._$Ep)this[e]=t;this._$Ep=void 0}const e=this.constructor.elementProperties;if(e.size>0)for(const[t,i]of e){const{wrapped:e}=i,r=this[t];!0!==e||this._$AL.has(t)||void 0===r||this.C(t,void 0,i,r)}}let e=!1;const t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach((e=>e.hostUpdate?.())),this.update(t)):this._$EM()}catch(t){throw e=!1,this._$EM(),t}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach((e=>e.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&=this._$Eq.forEach((e=>this._$ET(e,this[e]))),this._$EM()}updated(e){}firstUpdated(e){}};v.elementStyles=[],v.shadowRootOptions={mode:"open"},v[w("elementProperties")]=new Map,v[w("finalized")]=new Map,b?.({ReactiveElement:v}),(g.reactiveElementVersions??=[]).push("2.1.0"); + */,{is:n,defineProperty:l,getOwnPropertyDescriptor:c,getOwnPropertyNames:d,getOwnPropertySymbols:h,getPrototypeOf:p}=Object,g=globalThis,u=g.trustedTypes,m=u?u.emptyScript:"",b=g.reactiveElementPolyfillSupport,w=(e,t)=>e,f={toAttribute(e,t){switch(t){case Boolean:e=e?m:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let i=e;switch(t){case Boolean:i=null!==e;break;case Number:i=null===e?null:Number(e);break;case Object:case Array:try{i=JSON.parse(e)}catch(e){i=null}}return i}},x=(e,t)=>!n(e,t),v={attribute:!0,type:String,converter:f,reflect:!1,useDefault:!1,hasChanged:x};Symbol.metadata??=Symbol("metadata"),g.litPropertyMetadata??=new WeakMap;let y=class extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=v){if(t.state&&(t.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(e,i,t);void 0!==r&&l(this.prototype,e,r)}}static getPropertyDescriptor(e,t,i){const{get:r,set:o}=c(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get:r,set(t){const s=r?.call(this);o?.call(this,t),this.requestUpdate(e,s,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??v}static _$Ei(){if(this.hasOwnProperty(w("elementProperties")))return;const e=p(this);e.finalize(),void 0!==e.l&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(w("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(w("properties"))){const e=this.properties,t=[...d(e),...h(e)];for(const i of t)this.createProperty(i,e[i])}const e=this[Symbol.metadata];if(null!==e){const t=litPropertyMetadata.get(e);if(void 0!==t)for(const[e,i]of t)this.elementProperties.set(e,i)}this._$Eh=new Map;for(const[e,t]of this.elementProperties){const i=this._$Eu(e,t);void 0!==i&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const i=new Set(e.flat(1/0).reverse());for(const e of i)t.unshift(a(e))}else void 0!==e&&t.push(a(e));return t}static _$Eu(e,t){const i=t.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof e?e.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((e=>this.enableUpdating=e)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((e=>e(this)))}addController(e){(this._$EO??=new Set).add(e),void 0!==this.renderRoot&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){const e=new Map,t=this.constructor.elementProperties;for(const i of t.keys())this.hasOwnProperty(i)&&(e.set(i,this[i]),delete this[i]);e.size>0&&(this._$Ep=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return s(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((e=>e.hostConnected?.()))}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach((e=>e.hostDisconnected?.()))}attributeChangedCallback(e,t,i){this._$AK(e,i)}_$ET(e,t){const i=this.constructor.elementProperties.get(e),r=this.constructor._$Eu(e,i);if(void 0!==r&&!0===i.reflect){const o=(void 0!==i.converter?.toAttribute?i.converter:f).toAttribute(t,i.type);this._$Em=e,null==o?this.removeAttribute(r):this.setAttribute(r,o),this._$Em=null}}_$AK(e,t){const i=this.constructor,r=i._$Eh.get(e);if(void 0!==r&&this._$Em!==r){const e=i.getPropertyOptions(r),o="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:f;this._$Em=r,this[r]=o.fromAttribute(t,e.type)??this._$Ej?.get(r)??null,this._$Em=null}}requestUpdate(e,t,i){if(void 0!==e){const r=this.constructor,o=this[e];if(i??=r.getPropertyOptions(e),!((i.hasChanged??x)(o,t)||i.useDefault&&i.reflect&&o===this._$Ej?.get(e)&&!this.hasAttribute(r._$Eu(e,i))))return;this.C(e,t,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(e,t,{useDefault:i,reflect:r,wrapped:o},s){i&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,s??t??this[e]),!0!==o||void 0!==s)||(this._$AL.has(e)||(this.hasUpdated||i||(t=void 0),this._$AL.set(e,t)),!0===r&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[e,t]of this._$Ep)this[e]=t;this._$Ep=void 0}const e=this.constructor.elementProperties;if(e.size>0)for(const[t,i]of e){const{wrapped:e}=i,r=this[t];!0!==e||this._$AL.has(t)||void 0===r||this.C(t,void 0,i,r)}}let e=!1;const t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach((e=>e.hostUpdate?.())),this.update(t)):this._$EM()}catch(t){throw e=!1,this._$EM(),t}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach((e=>e.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&=this._$Eq.forEach((e=>this._$ET(e,this[e]))),this._$EM()}updated(e){}firstUpdated(e){}};y.elementStyles=[],y.shadowRootOptions={mode:"open"},y[w("elementProperties")]=new Map,y[w("finalized")]=new Map,b?.({ReactiveElement:y}),(g.reactiveElementVersions??=[]).push("2.1.0"); /** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ -const k=globalThis,_=k.trustedTypes,$=_?_.createPolicy("lit-html",{createHTML:e=>e}):void 0,C="$lit$",S=`lit$${Math.random().toFixed(9).slice(2)}$`,A="?"+S,z=`<${A}>`,E=document,T=()=>E.createComment(""),P=e=>null===e||"object"!=typeof e&&"function"!=typeof e,M=Array.isArray,I="[ \t\n\f\r]",j=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,R=/-->/g,B=/>/g,O=RegExp(`>|${I}(?:([^\\s"'>=/]+)(${I}*=${I}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),L=/'/g,H=/"/g,U=/^(?:script|style|textarea|title)$/i,N=(e=>(t,...i)=>({_$litType$:e,strings:t,values:i}))(1),q=Symbol.for("lit-noChange"),D=Symbol.for("lit-nothing"),W=new WeakMap,G=E.createTreeWalker(E,129);function F(e,t){if(!M(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==$?$.createHTML(t):t}const V=(e,t)=>{const i=e.length-1,r=[];let o,a=2===t?"":3===t?"":"",s=j;for(let t=0;t"===c[0]?(s=o??j,l=-1):void 0===c[1]?l=-2:(l=s.lastIndex-c[2].length,n=c[1],s=void 0===c[3]?O:'"'===c[3]?H:L):s===H||s===L?s=O:s===R||s===B?s=j:(s=O,o=void 0);const h=s===O&&e[t+1].startsWith("/>")?" ":"";a+=s===j?i+z:l>=0?(r.push(n),i.slice(0,l)+C+i.slice(l)+S+h):i+S+(-2===l?t:h)}return[F(e,a+(e[i]||"")+(2===t?"":3===t?"":"")),r]};class Y{constructor({strings:e,_$litType$:t},i){let r;this.parts=[];let o=0,a=0;const s=e.length-1,n=this.parts,[c,l]=V(e,t);if(this.el=Y.createElement(c,i),G.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(r=G.nextNode())&&n.length0){r.textContent=_?_.emptyScript:"";for(let i=0;iM(e)||"function"==typeof e?.[Symbol.iterator])(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==D&&P(this._$AH)?this._$AA.nextSibling.data=e:this.T(E.createTextNode(e)),this._$AH=e}$(e){const{values:t,_$litType$:i}=e,r="number"==typeof i?this._$AC(e):(void 0===i.el&&(i.el=Y.createElement(F(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===r)this._$AH.p(t);else{const e=new Q(r,this),i=e.u(this.options);e.p(t),this.T(i),this._$AH=e}}_$AC(e){let t=W.get(e.strings);return void 0===t&&W.set(e.strings,t=new Y(e)),t}k(e){M(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let i,r=0;for(const o of e)r===t.length?t.push(i=new K(this.O(T()),this.O(T()),this,this.options)):i=t[r],i._$AI(o),r++;r2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=D}_$AI(e,t=this,i,r){const o=this.strings;let a=!1;if(void 0===o)e=J(this,e,t,0),a=!P(e)||e!==this._$AH&&e!==q,a&&(this._$AH=e);else{const r=e;let s,n;for(e=o[0],s=0;se}):void 0,C="$lit$",S=`lit$${Math.random().toFixed(9).slice(2)}$`,A="?"+S,z=`<${A}>`,E=document,T=()=>E.createComment(""),P=e=>null===e||"object"!=typeof e&&"function"!=typeof e,M=Array.isArray,I="[ \t\n\f\r]",O=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,j=/-->/g,B=/>/g,R=RegExp(`>|${I}(?:([^\\s"'>=/]+)(${I}*=${I}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),L=/'/g,U=/"/g,H=/^(?:script|style|textarea|title)$/i,q=(e=>(t,...i)=>({_$litType$:e,strings:t,values:i}))(1),N=Symbol.for("lit-noChange"),D=Symbol.for("lit-nothing"),W=new WeakMap,G=E.createTreeWalker(E,129);function F(e,t){if(!M(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==$?$.createHTML(t):t}const V=(e,t)=>{const i=e.length-1,r=[];let o,s=2===t?"":3===t?"":"",a=O;for(let t=0;t"===l[0]?(a=o??O,c=-1):void 0===l[1]?c=-2:(c=a.lastIndex-l[2].length,n=l[1],a=void 0===l[3]?R:'"'===l[3]?U:L):a===U||a===L?a=R:a===j||a===B?a=O:(a=R,o=void 0);const h=a===R&&e[t+1].startsWith("/>")?" ":"";s+=a===O?i+z:c>=0?(r.push(n),i.slice(0,c)+C+i.slice(c)+S+h):i+S+(-2===c?t:h)}return[F(e,s+(e[i]||"")+(2===t?"":3===t?"":"")),r]};class Y{constructor({strings:e,_$litType$:t},i){let r;this.parts=[];let o=0,s=0;const a=e.length-1,n=this.parts,[l,c]=V(e,t);if(this.el=Y.createElement(l,i),G.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(r=G.nextNode())&&n.length0){r.textContent=_?_.emptyScript:"";for(let i=0;iM(e)||"function"==typeof e?.[Symbol.iterator])(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==D&&P(this._$AH)?this._$AA.nextSibling.data=e:this.T(E.createTextNode(e)),this._$AH=e}$(e){const{values:t,_$litType$:i}=e,r="number"==typeof i?this._$AC(e):(void 0===i.el&&(i.el=Y.createElement(F(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===r)this._$AH.p(t);else{const e=new Q(r,this),i=e.u(this.options);e.p(t),this.T(i),this._$AH=e}}_$AC(e){let t=W.get(e.strings);return void 0===t&&W.set(e.strings,t=new Y(e)),t}k(e){M(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let i,r=0;for(const o of e)r===t.length?t.push(i=new K(this.O(T()),this.O(T()),this,this.options)):i=t[r],i._$AI(o),r++;r2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=D}_$AI(e,t=this,i,r){const o=this.strings;let s=!1;if(void 0===o)e=J(this,e,t,0),s=!P(e)||e!==this._$AH&&e!==N,s&&(this._$AH=e);else{const r=e;let a,n;for(e=o[0],a=0;a{const r=i?.renderBefore??t;let o=r._$litPart$;if(void 0===o){const e=i?.renderBefore??null;r._$litPart$=o=new K(t.insertBefore(T(),e),e,void 0,i??{})}return o._$AI(e),o})(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return q}};ae._$litElement$=!0,ae.finalized=!0,oe.litElementHydrateSupport?.({LitElement:ae});const se=oe.litElementPolyfillSupport; + */let se=class extends y{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=((e,t,i)=>{const r=i?.renderBefore??t;let o=r._$litPart$;if(void 0===o){const e=i?.renderBefore??null;r._$litPart$=o=new K(t.insertBefore(T(),e),e,void 0,i??{})}return o._$AI(e),o})(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return N}};se._$litElement$=!0,se.finalized=!0,oe.litElementHydrateSupport?.({LitElement:se});const ae=oe.litElementPolyfillSupport; /** * @license * Copyright 2021 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ -function ne(e,t,i){return e?t(e):i?.(e)}se?.({LitElement:ae}),(oe.litElementVersions??=[]).push("4.2.0");class ce extends ae{createRenderRoot(){return this}}const le=[{id:"new-button",text:"New",variant:"primary",iconPosition:"-24px 0px"},{id:"home-button",text:"Home",variant:"secondary",iconPosition:"-48px -24px"},{id:"recipes-button",text:"Recipes",variant:"secondary",iconPosition:"0px -24px"},{id:"ingredients-button",text:"Ingredients",variant:"secondary",iconPosition:"-72px -24px"},{id:"favorites-button",text:"Favorites",variant:"secondary",iconPosition:"0px 0px"},{id:"chef-tips-button",text:"Chefs Tips",variant:"secondary",iconPosition:"0px -48px"},{id:"blog-button",text:"Blog",variant:"secondary",iconPosition:"-24px -48px"},{id:"shop-button",text:"Shop",variant:"secondary",iconPosition:"-24px -24px"},{id:"events-button",text:"Events",variant:"secondary",iconPosition:"-48px -48px"},{id:"faq-button",text:"FAQ",variant:"secondary",iconPosition:"-72px -48px"},{id:"profile-button",text:"Profile",variant:"secondary",iconPosition:"-48px 0px"},{id:"report-button",text:"Report",variant:"secondary",iconPosition:"-72px 0px"}];customElements.define("ribbon-button",class extends ce{static properties={text:{type:String},variant:{type:String},iconPosition:{type:String}};constructor(){super(),this.text="Button",this.variant="secondary",this.iconPosition="0px 0px"}render(){const e="primary"===this.variant?"bg-orange-400 hover:bg-orange-500":"bg-teal-600 hover:bg-teal-800";return N` +function ne(e,t,i){return e?t(e):i?.(e)}ae?.({LitElement:se}),(oe.litElementVersions??=[]).push("4.2.0");class le extends se{createRenderRoot(){return this}}const ce=[{id:"new-button",text:"New",variant:"primary",iconPosition:"-24px 0px"},{id:"home-button",text:"Home",variant:"secondary",iconPosition:"-48px -24px"},{id:"recipes-button",text:"Recipes",variant:"secondary",iconPosition:"0px -24px"},{id:"ingredients-button",text:"Ingredients",variant:"secondary",iconPosition:"-72px -24px"},{id:"favorites-button",text:"Favorites",variant:"secondary",iconPosition:"0px 0px"},{id:"chef-tips-button",text:"Chefs Tips",variant:"secondary",iconPosition:"0px -48px"},{id:"blog-button",text:"Blog",variant:"secondary",iconPosition:"-24px -48px"},{id:"shop-button",text:"Shop",variant:"secondary",iconPosition:"-24px -24px"},{id:"events-button",text:"Events",variant:"secondary",iconPosition:"-48px -48px"},{id:"faq-button",text:"FAQ",variant:"secondary",iconPosition:"-72px -48px"},{id:"profile-button",text:"Profile",variant:"secondary",iconPosition:"-48px 0px"},{id:"report-button",text:"Report",variant:"secondary",iconPosition:"-72px 0px"}];customElements.define("ribbon-button",class extends le{static properties={text:{type:String},variant:{type:String},iconPosition:{type:String}};constructor(){super(),this.text="Button",this.variant="secondary",this.iconPosition="0px 0px"}render(){const e="primary"===this.variant?"bg-orange-700 hover:bg-orange-800":"bg-teal-700 hover:bg-teal-800";return q` - `}});customElements.define("app-ribbon",class extends ce{static properties={buttons:{type:Array},visibleButtons:{type:Array}};constructor(){super(),this.buttons=le,this.visibleButtons=this.buttons,this._resizeObserver=new ResizeObserver((e=>{for(const t of e)t.contentBoxSize&&t.contentBoxSize[0]?this._updateVisibleButtons(t.contentBoxSize[0].inlineSize):this._updateVisibleButtons(t.contentRect.width)}))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this._resizeObserver.observe(this)}firstUpdated(){this._resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect()}_updateVisibleButtons(e){const t=[{minWidth:1134,buttons:12},{minWidth:1069,buttons:11},{minWidth:985,buttons:10},{minWidth:905,buttons:9},{minWidth:818,buttons:8},{minWidth:735,buttons:7},{minWidth:660,buttons:6},{minWidth:540,buttons:5},{minWidth:440,buttons:4},{minWidth:318,buttons:3}].find((t=>e>=t.minWidth)),i=t?t.buttons:2;this.visibleButtons.length!==i&&(this.visibleButtons=this.buttons.slice(0,i))}_getVisibleButtonsTemplate(){return this.visibleButtons.map(((e,t)=>N` + `}});class de extends le{static properties={buttons:{type:Array},visibleButtons:{type:Array},_isOverflowOpen:{type:Boolean}};constructor(){super(),this.buttons=ce,this.visibleButtons=this.buttons,this._isOverflowOpen=!1,this._resizeObserver=new ResizeObserver((e=>{for(const t of e)t.contentBoxSize&&t.contentBoxSize[0]?this._updateVisibleButtons(t.contentBoxSize[0].inlineSize):this._updateVisibleButtons(t.contentRect.width)}))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this._resizeObserver.observe(this)}firstUpdated(){this._resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect()}async _updateVisibleButtons(e){const t=[{minWidth:1134,buttons:12},{minWidth:1069,buttons:11},{minWidth:985,buttons:10},{minWidth:905,buttons:9},{minWidth:818,buttons:8},{minWidth:735,buttons:7},{minWidth:660,buttons:6},{minWidth:540,buttons:5},{minWidth:440,buttons:4},{minWidth:318,buttons:3}].find((t=>e>=t.minWidth)),i=t?t.buttons:2;if(this.visibleButtons.length!==i){const e=this.querySelector('[aria-controls="overflow-navigation"]'),t=this.querySelector("#overflow-navigation"),r=this.getRootNode().activeElement,o=[...this.querySelectorAll("ribbon-button button")].indexOf(r),s=r===e||t?.contains(r)||o>=i;if(this.visibleButtons=this.buttons.slice(0,i),this._isOverflowOpen=!1,s){await this.updateComplete;const e=this.querySelector('[aria-controls="overflow-navigation"]'),t=this.querySelectorAll("ribbon-button button");(e??t[t.length-1])?.focus()}}}async _toggleOverflow(){const e=this._isOverflowOpen;this._isOverflowOpen=!this._isOverflowOpen,e&&(await this.updateComplete,this.querySelector('[aria-controls="overflow-navigation"]')?.focus())}_getVisibleButtonsTemplate(){return this.visibleButtons.map(((e,t)=>q` - ${ne(0===t,(()=>N`
`))} - `))}render(){return N` -