@myuw-web-components/myuw-app-bar - npm Package Compare versions

Comparing version 1.5.4 to 1.5.5

CHANGELOG.md

@@ -5,2 +5,8 @@ # myuw-app-bar versions
 
+### 1.5.5
+
+#### Added
+
+* Exposed a new css property to set the font size of the app bar title (`--myuw-app-bar-title-font-size`). Usage instructions are in the README. 
+
 ### 1.5.3
@@ -7,0 +13,0 @@

dist/myuw-app-bar.js

@@ -141,3 +141,3 @@ var MyUWAppBar = (function (exports) {
 
-  var tpl = "<style> :host([hidden]) {\n        display: none;\n    }\n\n    #myuw-app-bar {\n        position: -webkit-sticky;\n        position: sticky;\n        top: 0;\n        background: var(--myuw-app-bar-bg, var( --myuw-primary-bg, #c5050c));\n        font-family: var(--myuw-app-bar-font, var( --myuw-font, Arial, sans-serif));\n        font-size: 14px;\n        font-weight: var(--myuw-app-bar-font-weight, 400);\n        -webkit-font-smoothing: antialiased;\n        background-color: var(--myuw-app-bar-bg, var( --myuw-primary-bg, #c5050c));\n        color: var(--myuw-app-bar-color, var(--myuw-primary-color, #fff));\n        z-index: var(--z-index, 80);\n        width: 100%;\n        height: 64px;\n        box-sizing: border-box;\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: flex;\n        -webkit-box-align: center;\n        -webkit-align-items: center;\n        align-items: center;\n        -webkit-box-orient: horizontal;\n        -webkit-box-direction: normal;\n        -webkit-flex-direction: row;\n        flex-direction: row;\n        padding: 0 16px;\n        margin: 0;\n        transition: box-shadow 0.3s ease-in-out;\n    }\n\n    #myuw-app-bar.shadow {\n        box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12);\n    }\n\n    #myuw-app-bar .region {\n        box-sizing: border-box;\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: flex;\n        -webkit-box-orient: horizontal;\n        -webkit-flex-direction: row;\n        flex-direction: row;\n        -webkit-box-align: center;\n        -webkit-align-items: center;\n        -ms-grid-row-align: center;\n        align-items: center;\n        -webkit-align-content: center;\n        align-content: center;\n        -webkit-box-pack: start;\n        -webkit-justify-content: flex-start;\n        justify-content: flex-start;\n    }\n\n    #region__left, \n    #region__right {\n        -webkit-box-flex: 1;\n        -webkit-flex: 1 1 30%;\n        flex: 1 1 30%;\n        box-sizing: border-box;\n        max-width: 30%;\n    }\n\n    #myuw-app-bar #region__right {\n        -webkit-box-pack: end;\n        -webkit-justify-content: flex-end;\n        justify-content: flex-end;\n    }\n\n    #slot__navigation,\n    #slot__help,\n    #slot__notifications,\n    #slot__profile {\n        margin: 0;\n    }\n\n    #myuw-app-bar #region__center {\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: flex;\n        flex: auto;\n        margin: 0 24px;\n        -webkit-justify-content: center;\n        justify-content: center;\n    }\n\n    #title {\n        height: 100%;\n        display: flex;\n        align-items: center;\n        margin-left: 8px;\n    }\n\n    #myuw-app-bar__title {\n        font-size: 18px;\n        font-weight: 500;\n        margin: 0 auto;\n    }\n\n    #myuw-app-bar__title #themeText {\n        font-weight: var(--theme-name-font-weight, 600);\n    }\n\n    #myuw-app-bar__title a {\n        text-decoration: none;\n        color: inherit;\n    }\n\n    #myuw-app-bar__title a:hover,\n    #myuw-app-bar__title a:visited, {\n            text-decoration: none;\n            cursor: pointer;\n            color: inherit;\n    }\n    @media (max-width: 600px) {\n        #myuw-app-bar #region__left {\n            flex: auto;\n            max-width: none;\n        }\n        #myuw-app-bar #region__center {\n            max-width: 42px;\n            margin: 0;\n            justify-content: flex-end;\n        }\n        #myuw-app-bar #region__right {\n            flex: 0;\n            max-width: 50%;\n            justify-content: flex-end;\n        }\n    } </style> <div id=\"myuw-app-bar\" class=\"myuw-app-bar\"> <div class=\"region\" id=\"region__left\"> <div class=\"slot\" id=\"slot__navigation\"> <slot id=\"navigation-slot\" name=\"myuw-navigation\"> </div> <div id=\"title\"> <h1 id=\"myuw-app-bar__title\"></h1> </div> </div> <div class=\"region\" id=\"region__center\"> <slot id=\"search-slot\" name=\"myuw-search\"> </div> <div class=\"region\" id=\"region__right\"> <div class=\"slot\" id=\"slot__help\"> <slot id=\"help-slot\" name=\"myuw-help\"> </div> <div class=\"slot\" id=\"slot__notifications\"> <slot id=\"notifications-slot\" name=\"myuw-notifications\"> </div> <div class=\"slot\" id=\"slot__profile\"> <slot id=\"profile-slot\" name=\"myuw-profile\"> </div> </div> </div> ";
+  var tpl = "<style> :host([hidden]) {\n        display: none;\n    }\n\n    #myuw-app-bar {\n        position: -webkit-sticky;\n        position: sticky;\n        top: 0;\n        background: var(--myuw-app-bar-bg, var( --myuw-primary-bg, #c5050c));\n        font-family: var(--myuw-app-bar-font, var( --myuw-font, Arial, sans-serif));\n        font-size: 14px;\n        font-weight: var(--myuw-app-bar-font-weight, 400);\n        -webkit-font-smoothing: antialiased;\n        background-color: var(--myuw-app-bar-bg, var( --myuw-primary-bg, #c5050c));\n        color: var(--myuw-app-bar-color, var(--myuw-primary-color, #fff));\n        z-index: var(--z-index, 80);\n        width: 100%;\n        height: 64px;\n        box-sizing: border-box;\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: flex;\n        -webkit-box-align: center;\n        -webkit-align-items: center;\n        align-items: center;\n        -webkit-box-orient: horizontal;\n        -webkit-box-direction: normal;\n        -webkit-flex-direction: row;\n        flex-direction: row;\n        padding: 0 16px;\n        margin: 0;\n        transition: box-shadow 0.3s ease-in-out;\n    }\n\n    #myuw-app-bar.shadow {\n        box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12);\n    }\n\n    #myuw-app-bar .region {\n        box-sizing: border-box;\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: flex;\n        -webkit-box-orient: horizontal;\n        -webkit-flex-direction: row;\n        flex-direction: row;\n        -webkit-box-align: center;\n        -webkit-align-items: center;\n        -ms-grid-row-align: center;\n        align-items: center;\n        -webkit-align-content: center;\n        align-content: center;\n        -webkit-box-pack: start;\n        -webkit-justify-content: flex-start;\n        justify-content: flex-start;\n    }\n\n    #region__left, \n    #region__right {\n        -webkit-box-flex: 1;\n        -webkit-flex: 1 1 30%;\n        flex: 1 1 30%;\n        box-sizing: border-box;\n        max-width: 30%;\n    }\n\n    #myuw-app-bar #region__right {\n        -webkit-box-pack: end;\n        -webkit-justify-content: flex-end;\n        justify-content: flex-end;\n    }\n\n    #slot__navigation,\n    #slot__help,\n    #slot__notifications,\n    #slot__profile {\n        margin: 0;\n    }\n\n    #myuw-app-bar #region__center {\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: flex;\n        flex: auto;\n        margin: 0 24px;\n        -webkit-justify-content: center;\n        justify-content: center;\n    }\n\n    #title {\n        height: 100%;\n        display: flex;\n        align-items: center;\n        margin-left: 8px;\n    }\n\n    #myuw-app-bar__title {\n        font-size:  var(--myuw-app-bar-title-font-size, 18px);\n        font-weight: 500;\n        margin: 0 auto;\n    }\n\n    #myuw-app-bar__title #themeText {\n        font-weight: var(--theme-name-font-weight, 600);\n    }\n\n    #myuw-app-bar__title a {\n        text-decoration: none;\n        color: inherit;\n    }\n\n    #myuw-app-bar__title a:hover,\n    #myuw-app-bar__title a:visited, {\n            text-decoration: none;\n            cursor: pointer;\n            color: inherit;\n    }\n    @media (max-width: 600px) {\n        #myuw-app-bar #region__left {\n            flex: auto;\n            max-width: none;\n        }\n        #myuw-app-bar #region__center {\n            max-width: 42px;\n            margin: 0;\n            justify-content: flex-end;\n        }\n        #myuw-app-bar #region__right {\n            flex: 0;\n            max-width: 50%;\n            justify-content: flex-end;\n        }\n    } </style> <div id=\"myuw-app-bar\" class=\"myuw-app-bar\"> <div class=\"region\" id=\"region__left\"> <div class=\"slot\" id=\"slot__navigation\"> <slot id=\"navigation-slot\" name=\"myuw-navigation\"> </div> <div id=\"title\"> <h1 id=\"myuw-app-bar__title\"></h1> </div> </div> <div class=\"region\" id=\"region__center\"> <slot id=\"search-slot\" name=\"myuw-search\"> </div> <div class=\"region\" id=\"region__right\"> <div class=\"slot\" id=\"slot__help\"> <slot id=\"help-slot\" name=\"myuw-help\"> </div> <div class=\"slot\" id=\"slot__notifications\"> <slot id=\"notifications-slot\" name=\"myuw-notifications\"> </div> <div class=\"slot\" id=\"slot__profile\"> <slot id=\"profile-slot\" name=\"myuw-profile\"> </div> </div> </div> ";
 
@@ -144,0 +144,0 @@ var MyUWAppBar =

dist/myuw-app-bar.min.js

@@ -1,1 +0,1 @@
-var MyUWAppBar=(function(t){"use strict";function e(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function n(t){return(n=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function i(t,e){return(i=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function o(t,e,n){return(o=(function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}})()?Reflect.construct:function(t,e,n){var o=[null];o.push.apply(o,e);var r=new(Function.bind.apply(t,o));return n&&i(r,n.prototype),r}).apply(null,arguments)}function r(t){var e="function"==typeof Map?new Map:void 0;return(r=function(t){if(null===t||(r=t,-1===Function.toString.call(r).indexOf("[native code]")))return t;var r;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==e){if(e.has(t))return e.get(t);e.set(t,a)}function a(){return o(t,arguments,n(this).constructor)}return a.prototype=Object.create(t.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),i(a,t)})(t)}function a(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?(function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t})(t):e}var l,s,p=(function(t){function o(){var t;return(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")})(this,o),(t=a(this,n(o).call(this))).attachShadow({mode:"open"}),t.shadowRoot.appendChild(o.template.content.cloneNode(!0)),t}var l,s,p;return(function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&i(t,e)})(o,r(HTMLElement)),l=o,p=[{key:"observedAttributes",get:function(){return["app-url","app-name","theme-name"]}}],(s=[{key:"attributeChangedCallback",value:function(t,e,n){switch(this[t]=n,t){case"theme-name":(i=this.shadowRoot.getElementById("themeText"))&&(i.innerText=n);case"app-name":var i;(i=this["app-text"])&&(i.innerText=n);case"app-url":this.updateTitle()}}},{key:"connectedCallback",value:function(){var t=this;this["app-url"]=this.getAttribute("app-url")||this.getAttribute("theme-url"),this["app-name"]=this.getAttribute("app-name")||"Hello World",this["theme-name"]=this.getAttribute("theme-name"),this.updateTitle(),window.addEventListener("scroll",function(e){0!==window.scrollY?t.shadowRoot.getElementById("myuw-app-bar").classList.add("shadow"):t.shadowRoot.getElementById("myuw-app-bar").classList.remove("shadow")})}},{key:"disconnectedCallback",value:function(){var t=this;window.removeEventListener("scroll",function(e){t.shadowRoot.getElementById("myuw-app-bar").classList.remove("shadow")})}},{key:"updateTitle",value:function(){var t=this.shadowRoot.getElementById("myuw-app-bar__title");t.childNodes[0]?t.replaceChild(this.buildTitle(),t.childNodes[0]):t.appendChild(this.buildTitle())}},{key:"buildTitle",value:function(){var t=HTMLElement,e=document.createElement("span");e.setAttribute("id","themeText"),e.innerText=this["theme-name"]?this["theme-name"]+" ":"";var n=document.createElement("span");return n.setAttribute("id","appText"),n.innerText=this["app-name"]?this["app-name"]:"",this["app-url"]&&null!==this["app-url"]?((t=document.createElement("a")).setAttribute("target","_self"),t.setAttribute("href",this["app-url"])):(t=document.createElement("div")).setAttribute("tabindex","0"),t.appendChild(e),t.appendChild(n),t}}])&&e(l.prototype,s),p&&e(l,p),o})();return p.template=(l='<style> :host([hidden]) {\n        display: none;\n    }\n\n    #myuw-app-bar {\n        position: -webkit-sticky;\n        position: sticky;\n        top: 0;\n        background: var(--myuw-app-bar-bg, var( --myuw-primary-bg, #c5050c));\n        font-family: var(--myuw-app-bar-font, var( --myuw-font, Arial, sans-serif));\n        font-size: 14px;\n        font-weight: var(--myuw-app-bar-font-weight, 400);\n        -webkit-font-smoothing: antialiased;\n        background-color: var(--myuw-app-bar-bg, var( --myuw-primary-bg, #c5050c));\n        color: var(--myuw-app-bar-color, var(--myuw-primary-color, #fff));\n        z-index: var(--z-index, 80);\n        width: 100%;\n        height: 64px;\n        box-sizing: border-box;\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: flex;\n        -webkit-box-align: center;\n        -webkit-align-items: center;\n        align-items: center;\n        -webkit-box-orient: horizontal;\n        -webkit-box-direction: normal;\n        -webkit-flex-direction: row;\n        flex-direction: row;\n        padding: 0 16px;\n        margin: 0;\n        transition: box-shadow 0.3s ease-in-out;\n    }\n\n    #myuw-app-bar.shadow {\n        box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12);\n    }\n\n    #myuw-app-bar .region {\n        box-sizing: border-box;\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: flex;\n        -webkit-box-orient: horizontal;\n        -webkit-flex-direction: row;\n        flex-direction: row;\n        -webkit-box-align: center;\n        -webkit-align-items: center;\n        -ms-grid-row-align: center;\n        align-items: center;\n        -webkit-align-content: center;\n        align-content: center;\n        -webkit-box-pack: start;\n        -webkit-justify-content: flex-start;\n        justify-content: flex-start;\n    }\n\n    #region__left, \n    #region__right {\n        -webkit-box-flex: 1;\n        -webkit-flex: 1 1 30%;\n        flex: 1 1 30%;\n        box-sizing: border-box;\n        max-width: 30%;\n    }\n\n    #myuw-app-bar #region__right {\n        -webkit-box-pack: end;\n        -webkit-justify-content: flex-end;\n        justify-content: flex-end;\n    }\n\n    #slot__navigation,\n    #slot__help,\n    #slot__notifications,\n    #slot__profile {\n        margin: 0;\n    }\n\n    #myuw-app-bar #region__center {\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: flex;\n        flex: auto;\n        margin: 0 24px;\n        -webkit-justify-content: center;\n        justify-content: center;\n    }\n\n    #title {\n        height: 100%;\n        display: flex;\n        align-items: center;\n        margin-left: 8px;\n    }\n\n    #myuw-app-bar__title {\n        font-size: 18px;\n        font-weight: 500;\n        margin: 0 auto;\n    }\n\n    #myuw-app-bar__title #themeText {\n        font-weight: var(--theme-name-font-weight, 600);\n    }\n\n    #myuw-app-bar__title a {\n        text-decoration: none;\n        color: inherit;\n    }\n\n    #myuw-app-bar__title a:hover,\n    #myuw-app-bar__title a:visited, {\n            text-decoration: none;\n            cursor: pointer;\n            color: inherit;\n    }\n    @media (max-width: 600px) {\n        #myuw-app-bar #region__left {\n            flex: auto;\n            max-width: none;\n        }\n        #myuw-app-bar #region__center {\n            max-width: 42px;\n            margin: 0;\n            justify-content: flex-end;\n        }\n        #myuw-app-bar #region__right {\n            flex: 0;\n            max-width: 50%;\n            justify-content: flex-end;\n        }\n    } </style> <div id="myuw-app-bar" class="myuw-app-bar"> <div class="region" id="region__left"> <div class="slot" id="slot__navigation"> <slot id="navigation-slot" name="myuw-navigation"> </div> <div id="title"> <h1 id="myuw-app-bar__title"></h1> </div> </div> <div class="region" id="region__center"> <slot id="search-slot" name="myuw-search"> </div> <div class="region" id="region__right"> <div class="slot" id="slot__help"> <slot id="help-slot" name="myuw-help"> </div> <div class="slot" id="slot__notifications"> <slot id="notifications-slot" name="myuw-notifications"> </div> <div class="slot" id="slot__profile"> <slot id="profile-slot" name="myuw-profile"> </div> </div> </div> ',s=document.createElement("template"),s.innerHTML=l,s),window.customElements.define("myuw-app-bar",p),t.MyUWAppBar=p,t})({});
+var MyUWAppBar=(function(t){"use strict";function e(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function n(t){return(n=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function i(t,e){return(i=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function o(t,e,n){return(o=(function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}})()?Reflect.construct:function(t,e,n){var o=[null];o.push.apply(o,e);var r=new(Function.bind.apply(t,o));return n&&i(r,n.prototype),r}).apply(null,arguments)}function r(t){var e="function"==typeof Map?new Map:void 0;return(r=function(t){if(null===t||(r=t,-1===Function.toString.call(r).indexOf("[native code]")))return t;var r;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==e){if(e.has(t))return e.get(t);e.set(t,a)}function a(){return o(t,arguments,n(this).constructor)}return a.prototype=Object.create(t.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),i(a,t)})(t)}function a(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?(function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t})(t):e}var l,s,p=(function(t){function o(){var t;return(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")})(this,o),(t=a(this,n(o).call(this))).attachShadow({mode:"open"}),t.shadowRoot.appendChild(o.template.content.cloneNode(!0)),t}var l,s,p;return(function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&i(t,e)})(o,r(HTMLElement)),l=o,p=[{key:"observedAttributes",get:function(){return["app-url","app-name","theme-name"]}}],(s=[{key:"attributeChangedCallback",value:function(t,e,n){switch(this[t]=n,t){case"theme-name":(i=this.shadowRoot.getElementById("themeText"))&&(i.innerText=n);case"app-name":var i;(i=this["app-text"])&&(i.innerText=n);case"app-url":this.updateTitle()}}},{key:"connectedCallback",value:function(){var t=this;this["app-url"]=this.getAttribute("app-url")||this.getAttribute("theme-url"),this["app-name"]=this.getAttribute("app-name")||"Hello World",this["theme-name"]=this.getAttribute("theme-name"),this.updateTitle(),window.addEventListener("scroll",function(e){0!==window.scrollY?t.shadowRoot.getElementById("myuw-app-bar").classList.add("shadow"):t.shadowRoot.getElementById("myuw-app-bar").classList.remove("shadow")})}},{key:"disconnectedCallback",value:function(){var t=this;window.removeEventListener("scroll",function(e){t.shadowRoot.getElementById("myuw-app-bar").classList.remove("shadow")})}},{key:"updateTitle",value:function(){var t=this.shadowRoot.getElementById("myuw-app-bar__title");t.childNodes[0]?t.replaceChild(this.buildTitle(),t.childNodes[0]):t.appendChild(this.buildTitle())}},{key:"buildTitle",value:function(){var t=HTMLElement,e=document.createElement("span");e.setAttribute("id","themeText"),e.innerText=this["theme-name"]?this["theme-name"]+" ":"";var n=document.createElement("span");return n.setAttribute("id","appText"),n.innerText=this["app-name"]?this["app-name"]:"",this["app-url"]&&null!==this["app-url"]?((t=document.createElement("a")).setAttribute("target","_self"),t.setAttribute("href",this["app-url"])):(t=document.createElement("div")).setAttribute("tabindex","0"),t.appendChild(e),t.appendChild(n),t}}])&&e(l.prototype,s),p&&e(l,p),o})();return p.template=(l='<style> :host([hidden]) {\n        display: none;\n    }\n\n    #myuw-app-bar {\n        position: -webkit-sticky;\n        position: sticky;\n        top: 0;\n        background: var(--myuw-app-bar-bg, var( --myuw-primary-bg, #c5050c));\n        font-family: var(--myuw-app-bar-font, var( --myuw-font, Arial, sans-serif));\n        font-size: 14px;\n        font-weight: var(--myuw-app-bar-font-weight, 400);\n        -webkit-font-smoothing: antialiased;\n        background-color: var(--myuw-app-bar-bg, var( --myuw-primary-bg, #c5050c));\n        color: var(--myuw-app-bar-color, var(--myuw-primary-color, #fff));\n        z-index: var(--z-index, 80);\n        width: 100%;\n        height: 64px;\n        box-sizing: border-box;\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: flex;\n        -webkit-box-align: center;\n        -webkit-align-items: center;\n        align-items: center;\n        -webkit-box-orient: horizontal;\n        -webkit-box-direction: normal;\n        -webkit-flex-direction: row;\n        flex-direction: row;\n        padding: 0 16px;\n        margin: 0;\n        transition: box-shadow 0.3s ease-in-out;\n    }\n\n    #myuw-app-bar.shadow {\n        box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12);\n    }\n\n    #myuw-app-bar .region {\n        box-sizing: border-box;\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: flex;\n        -webkit-box-orient: horizontal;\n        -webkit-flex-direction: row;\n        flex-direction: row;\n        -webkit-box-align: center;\n        -webkit-align-items: center;\n        -ms-grid-row-align: center;\n        align-items: center;\n        -webkit-align-content: center;\n        align-content: center;\n        -webkit-box-pack: start;\n        -webkit-justify-content: flex-start;\n        justify-content: flex-start;\n    }\n\n    #region__left, \n    #region__right {\n        -webkit-box-flex: 1;\n        -webkit-flex: 1 1 30%;\n        flex: 1 1 30%;\n        box-sizing: border-box;\n        max-width: 30%;\n    }\n\n    #myuw-app-bar #region__right {\n        -webkit-box-pack: end;\n        -webkit-justify-content: flex-end;\n        justify-content: flex-end;\n    }\n\n    #slot__navigation,\n    #slot__help,\n    #slot__notifications,\n    #slot__profile {\n        margin: 0;\n    }\n\n    #myuw-app-bar #region__center {\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: flex;\n        flex: auto;\n        margin: 0 24px;\n        -webkit-justify-content: center;\n        justify-content: center;\n    }\n\n    #title {\n        height: 100%;\n        display: flex;\n        align-items: center;\n        margin-left: 8px;\n    }\n\n    #myuw-app-bar__title {\n        font-size:  var(--myuw-app-bar-title-font-size, 18px);\n        font-weight: 500;\n        margin: 0 auto;\n    }\n\n    #myuw-app-bar__title #themeText {\n        font-weight: var(--theme-name-font-weight, 600);\n    }\n\n    #myuw-app-bar__title a {\n        text-decoration: none;\n        color: inherit;\n    }\n\n    #myuw-app-bar__title a:hover,\n    #myuw-app-bar__title a:visited, {\n            text-decoration: none;\n            cursor: pointer;\n            color: inherit;\n    }\n    @media (max-width: 600px) {\n        #myuw-app-bar #region__left {\n            flex: auto;\n            max-width: none;\n        }\n        #myuw-app-bar #region__center {\n            max-width: 42px;\n            margin: 0;\n            justify-content: flex-end;\n        }\n        #myuw-app-bar #region__right {\n            flex: 0;\n            max-width: 50%;\n            justify-content: flex-end;\n        }\n    } </style> <div id="myuw-app-bar" class="myuw-app-bar"> <div class="region" id="region__left"> <div class="slot" id="slot__navigation"> <slot id="navigation-slot" name="myuw-navigation"> </div> <div id="title"> <h1 id="myuw-app-bar__title"></h1> </div> </div> <div class="region" id="region__center"> <slot id="search-slot" name="myuw-search"> </div> <div class="region" id="region__right"> <div class="slot" id="slot__help"> <slot id="help-slot" name="myuw-help"> </div> <div class="slot" id="slot__notifications"> <slot id="notifications-slot" name="myuw-notifications"> </div> <div class="slot" id="slot__profile"> <slot id="profile-slot" name="myuw-profile"> </div> </div> </div> ',s=document.createElement("template"),s.innerHTML=l,s),window.customElements.define("myuw-app-bar",p),t.MyUWAppBar=p,t})({});

package.json

 {
   "name": "@myuw-web-components/myuw-app-bar",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "description": "A material top app bar designed for use with other MyUW web components",
@@ -5,0 +5,0 @@ "module": "dist/myuw-app-bar.min.mjs",

README.md

@@ -56,2 +56,3 @@ # `<myuw-app-bar>`
     --myuw-app-bar-font: 'Roboto', sans-serif;
+    --myuw-app-bar-title-font-size: 18px;
     --myuw-app-bar-font-weight: 400;
@@ -88,2 +89,6 @@ --theme-text-font-weight: 600;
 $ npm start
-```
+```
+
+
+Cross-browser testing provided by:<br/>
+<a href="https://www.browserstack.com/"><img width="160" src="https://myuw-web-components.github.io/img/Browserstack-logo.svg" alt="BrowserStack"/></a>

No alert changes

Improved metrics

Total package byte prevSize

54415

increased by1.04%

Number of lines in readme file

93

increased by6.9%

No dependency changes