@fluid-topics/ft-top-bar 0.3.12 → 0.3.13

package/build/ft-top-bar.css.d.ts

@@ -0,0 +1,8 @@
+export declare const FtTopBarCssVariables: {
+    colorSurface: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    elevation02: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    titleFont: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorOnSurfaceHigh: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=ft-top-bar.css.d.ts.map

package/build/ft-top-bar.css.js

@@ -0,0 +1,62 @@
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
+export const FtTopBarCssVariables = {
+    colorSurface: FtCssVariableFactory.external(designSystemVariables.colorSurface, "Design system"),
+    elevation02: FtCssVariableFactory.external(designSystemVariables.elevation02, "Design system"),
+    titleFont: FtCssVariableFactory.external(designSystemVariables.titleFont, "Design system"),
+    colorOnSurfaceHigh: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceHigh, "Design system"),
+};
+// language=CSS
+export const styles = css `
+    :host {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 48px;
+        z-index: 1;
+    }
+
+    #container {
+        background: ${FtTopBarCssVariables.colorSurface};
+        display: flex;
+        align-items: center;
+        box-shadow: ${FtTopBarCssVariables.elevation02};
+        padding: 0 16px;
+        height: 100%;
+        font-family: ${FtTopBarCssVariables.titleFont}, system-ui, sans-serif;
+    }
+
+    #left {
+        flex-grow: 1;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        min-width: 0;
+    }
+
+    #right {
+        height: 100%;
+        display: flex;
+        align-items: center;
+    }
+
+    .title {
+        color: ${FtTopBarCssVariables.colorOnSurfaceHigh};
+        -webkit-font-smoothing: antialiased;
+        font-size: 0.875rem;
+        line-height: 2.25rem;
+        font-weight: 500;
+        letter-spacing: 0.0892857em;
+        text-transform: uppercase;
+        margin-right: 16px;
+    }
+
+    slot {
+        display: flex;
+        align-items: center;
+        min-width: 0;
+    }
+`;
+//# sourceMappingURL=ft-top-bar.css.js.map

package/build/ft-top-bar.d.ts

@@ -1,14 +1,5 @@
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
-export interface FtTopBarProperties {
-    title: string;
-    heading: string;
-}
-export declare const FtTopBarCssVariables: {
-    colorSurface: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    elevation02: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    titleFont: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    colorOnSurfaceHigh: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-};
+import { FtTopBarProperties } from "./ft-top-bar.properties";
 export declare class FtTopBar extends FtLitElement implements FtTopBarProperties {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult;

package/build/ft-top-bar.js

@@ -4,15 +4,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, html } from "lit";
+import { html } from "lit";
 import { property } from "lit/decorators.js";
-import { designSystemVariables, FtCssVariableFactory, FtLitElement } from "@fluid-topics/ft-wc-utils";
-export const FtTopBarCssVariables = {
-    colorSurface: FtCssVariableFactory.external(designSystemVariables.colorSurface, "Design system"),
-    elevation02: FtCssVariableFactory.external(designSystemVariables.elevation02, "Design system"),
-    titleFont: FtCssVariableFactory.external(designSystemVariables.titleFont, "Design system"),
-    colorOnSurfaceHigh: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceHigh, "Design system"),
-};
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { styles } from "./ft-top-bar.css";
 export class FtTopBar extends FtLitElement {
     constructor() {
         super(...arguments);
@@ -34,59 +29,7 @@ export class FtTopBar extends FtLitElement {
     }
 }
 FtTopBar.elementDefinitions = {};
-// language=CSS
-FtTopBar.styles = css `
-        :host {
-            display: block;
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 48px;
-            z-index: 1;
-        }
-
-        #container {
-            background: ${FtTopBarCssVariables.colorSurface};
-            display: flex;
-            align-items: center;
-            box-shadow: ${FtTopBarCssVariables.elevation02};
-            padding: 0 16px;
-            height: 100%;
-            font-family: ${FtTopBarCssVariables.titleFont}, system-ui, sans-serif;
-        }
-
-        #left {
-            flex-grow: 1;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            min-width: 0;
-        }
-
-        #right {
-            height: 100%;
-            display: flex;
-            align-items: center;
-        }
-
-        .title {
-            color: ${FtTopBarCssVariables.colorOnSurfaceHigh};
-            -webkit-font-smoothing: antialiased;
-            font-size: 0.875rem;
-            line-height: 2.25rem;
-            font-weight: 500;
-            letter-spacing: 0.0892857em;
-            text-transform: uppercase;
-            margin-right: 16px;
-        }
-
-        slot {
-            display: flex;
-            align-items: center;
-            min-width: 0;
-        }
-    `;
+FtTopBar.styles = styles;
 __decorate([
     property({ type: String })
 ], FtTopBar.prototype, "title", void 0);

package/build/ft-top-bar.light.js

@@ -1,4 +1,55 @@
-!function(t,e,i,s){var n=function(t,e,i,s){for(var n,l=arguments.length,o=l<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,a=t.length-1;a>=0;a--)(n=t[a])&&(o=(l<3?n(o):l>3?n(e,i,o):n(e,i))||o);return l>3&&o&&Object.defineProperty(e,i,o),o};const l={colorSurface:e.FtCssVariableFactory.external(e.designSystemVariables.colorSurface,"Design system"),elevation02:e.FtCssVariableFactory.external(e.designSystemVariables.elevation02,"Design system"),titleFont:e.FtCssVariableFactory.external(e.designSystemVariables.titleFont,"Design system"),colorOnSurfaceHigh:e.FtCssVariableFactory.external(e.designSystemVariables.colorOnSurfaceHigh,"Design system")};class o extends e.FtLitElement{constructor(){super(...arguments),this.title="",this.heading=""}render(){return i.html`
+!function(t,e,i,s){const n={colorSurface:e.FtCssVariableFactory.external(e.designSystemVariables.colorSurface,"Design system"),elevation02:e.FtCssVariableFactory.external(e.designSystemVariables.elevation02,"Design system"),titleFont:e.FtCssVariableFactory.external(e.designSystemVariables.titleFont,"Design system"),colorOnSurfaceHigh:e.FtCssVariableFactory.external(e.designSystemVariables.colorOnSurfaceHigh,"Design system")},l=i.css`
+    :host {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 48px;
+        z-index: 1;
+    }
+
+    #container {
+        background: ${n.colorSurface};
+        display: flex;
+        align-items: center;
+        box-shadow: ${n.elevation02};
+        padding: 0 16px;
+        height: 100%;
+        font-family: ${n.titleFont}, system-ui, sans-serif;
+    }
+
+    #left {
+        flex-grow: 1;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        min-width: 0;
+    }
+
+    #right {
+        height: 100%;
+        display: flex;
+        align-items: center;
+    }
+
+    .title {
+        color: ${n.colorOnSurfaceHigh};
+        -webkit-font-smoothing: antialiased;
+        font-size: 0.875rem;
+        line-height: 2.25rem;
+        font-weight: 500;
+        letter-spacing: 0.0892857em;
+        text-transform: uppercase;
+        margin-right: 16px;
+    }
+
+    slot {
+        display: flex;
+        align-items: center;
+        min-width: 0;
+    }
+`;var o=function(t,e,i,s){for(var n,l=arguments.length,o=l<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,a=t.length-1;a>=0;a--)(n=t[a])&&(o=(l<3?n(o):l>3?n(e,i,o):n(e,i))||o);return l>3&&o&&Object.defineProperty(e,i,o),o};class a extends e.FtLitElement{constructor(){super(...arguments),this.title="",this.heading=""}render(){return i.html`
             <div id="container">
                 <div id="left">
                     <span class="title" ?hidden=${!this.title&&!this.heading}>${this.heading||this.title}</span>
@@ -8,55 +59,4 @@
                     <slot name="rightSlot"></slot>
                 </div>
             </div>
-        `}}o.elementDefinitions={},o.styles=i.css`
-        :host {
-            display: block;
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 48px;
-            z-index: 1;
-        }
-
-        #container {
-            background: ${l.colorSurface};
-            display: flex;
-            align-items: center;
-            box-shadow: ${l.elevation02};
-            padding: 0 16px;
-            height: 100%;
-            font-family: ${l.titleFont}, system-ui, sans-serif;
-        }
-
-        #left {
-            flex-grow: 1;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            min-width: 0;
-        }
-
-        #right {
-            height: 100%;
-            display: flex;
-            align-items: center;
-        }
-
-        .title {
-            color: ${l.colorOnSurfaceHigh};
-            -webkit-font-smoothing: antialiased;
-            font-size: 0.875rem;
-            line-height: 2.25rem;
-            font-weight: 500;
-            letter-spacing: 0.0892857em;
-            text-transform: uppercase;
-            margin-right: 16px;
-        }
-
-        slot {
-            display: flex;
-            align-items: center;
-            min-width: 0;
-        }
-    `,n([s.property({type:String})],o.prototype,"title",void 0),n([s.property({type:String})],o.prototype,"heading",void 0),e.customElement("ft-top-bar")(o),t.FtTopBar=o,t.FtTopBarCssVariables=l,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators);
+        `}}a.elementDefinitions={},a.styles=l,o([s.property({type:String})],a.prototype,"title",void 0),o([s.property({type:String})],a.prototype,"heading",void 0),e.customElement("ft-top-bar")(a),t.FtTopBar=a,t.FtTopBarCssVariables=n,t.styles=l,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators);

package/build/ft-top-bar.min.js

@@ -66,7 +66,58 @@ var tt,et;null==Y||Y(K,V),(null!==(x=globalThis.litHtmlVersions)&&void 0!==x?x:g
         -ms-user-select: none;
         user-select: none;
     }
-`,navigator.vendor&&navigator.vendor.match(/apple/i)||(null===(at=null===(rt=window.safari)||void 0===rt?void 0:rt.pushNotification)||void 0===at||at.toString());var ht=function(t,e,i,s){for(var o,n=arguments.length,r=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,a=t.length-1;a>=0;a--)(o=t[a])&&(r=(n<3?o(r):n>3?o(e,i,r):o(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r};const dt={colorSurface:ot.external(nt.colorSurface,"Design system"),elevation02:ot.external(nt.elevation02,"Design system"),titleFont:ot.external(nt.titleFont,"Design system"),colorOnSurfaceHigh:ot.external(nt.colorOnSurfaceHigh,"Design system")};class ut extends ct{constructor(){super(...arguments),this.title="",this.heading=""}render(){return j`
+`,navigator.vendor&&navigator.vendor.match(/apple/i)||(null===(at=null===(rt=window.safari)||void 0===rt?void 0:rt.pushNotification)||void 0===at||at.toString());const ht={colorSurface:ot.external(nt.colorSurface,"Design system"),elevation02:ot.external(nt.elevation02,"Design system"),titleFont:ot.external(nt.titleFont,"Design system"),colorOnSurfaceHigh:ot.external(nt.colorOnSurfaceHigh,"Design system")},dt=c`
+    :host {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 48px;
+        z-index: 1;
+    }
+
+    #container {
+        background: ${ht.colorSurface};
+        display: flex;
+        align-items: center;
+        box-shadow: ${ht.elevation02};
+        padding: 0 16px;
+        height: 100%;
+        font-family: ${ht.titleFont}, system-ui, sans-serif;
+    }
+
+    #left {
+        flex-grow: 1;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        min-width: 0;
+    }
+
+    #right {
+        height: 100%;
+        display: flex;
+        align-items: center;
+    }
+
+    .title {
+        color: ${ht.colorOnSurfaceHigh};
+        -webkit-font-smoothing: antialiased;
+        font-size: 0.875rem;
+        line-height: 2.25rem;
+        font-weight: 500;
+        letter-spacing: 0.0892857em;
+        text-transform: uppercase;
+        margin-right: 16px;
+    }
+
+    slot {
+        display: flex;
+        align-items: center;
+        min-width: 0;
+    }
+`;var ut,pt=function(t,e,i,s){for(var o,n=arguments.length,r=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,a=t.length-1;a>=0;a--)(o=t[a])&&(r=(n<3?o(r):n>3?o(e,i,r):o(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r};class ft extends ct{constructor(){super(...arguments),this.title="",this.heading=""}render(){return j`
             <div id="container">
                 <div id="left">
                     <span class="title" ?hidden=${!this.title&&!this.heading}>${this.heading||this.title}</span>
@@ -76,55 +127,4 @@ var tt,et;null==Y||Y(K,V),(null!==(x=globalThis.litHtmlVersions)&&void 0!==x?x:g
                     <slot name="rightSlot"></slot>
                 </div>
             </div>
-        `}}var pt;ut.elementDefinitions={},ut.styles=c`
-        :host {
-            display: block;
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 48px;
-            z-index: 1;
-        }
-
-        #container {
-            background: ${dt.colorSurface};
-            display: flex;
-            align-items: center;
-            box-shadow: ${dt.elevation02};
-            padding: 0 16px;
-            height: 100%;
-            font-family: ${dt.titleFont}, system-ui, sans-serif;
-        }
-
-        #left {
-            flex-grow: 1;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            min-width: 0;
-        }
-
-        #right {
-            height: 100%;
-            display: flex;
-            align-items: center;
-        }
-
-        .title {
-            color: ${dt.colorOnSurfaceHigh};
-            -webkit-font-smoothing: antialiased;
-            font-size: 0.875rem;
-            line-height: 2.25rem;
-            font-weight: 500;
-            letter-spacing: 0.0892857em;
-            text-transform: uppercase;
-            margin-right: 16px;
-        }
-
-        slot {
-            display: flex;
-            align-items: center;
-            min-width: 0;
-        }
-    `,ht([i({type:String})],ut.prototype,"title",void 0),ht([i({type:String})],ut.prototype,"heading",void 0),(pt="ft-top-bar",t=>{window.customElements.get(pt)||window.customElements.define(pt,t)})(ut),t.FtTopBar=ut,t.FtTopBarCssVariables=dt,Object.defineProperty(t,"i",{value:!0})}({});
+        `}}ft.elementDefinitions={},ft.styles=dt,pt([i({type:String})],ft.prototype,"title",void 0),pt([i({type:String})],ft.prototype,"heading",void 0),(ut="ft-top-bar",t=>{window.customElements.get(ut)||window.customElements.define(ut,t)})(ft),t.FtTopBar=ft,t.FtTopBarCssVariables=ht,t.styles=dt,Object.defineProperty(t,"i",{value:!0})}({});

package/build/ft-top-bar.properties.d.ts

@@ -0,0 +1,5 @@
+export interface FtTopBarProperties {
+    title: string;
+    heading: string;
+}
+//# sourceMappingURL=ft-top-bar.properties.d.ts.map

package/build/ft-top-bar.properties.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ft-top-bar.properties.js.map

package/build/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./ft-top-bar";
+export * from "./ft-top-bar.css";
+export * from "./ft-top-bar.properties";
 //# sourceMappingURL=index.d.ts.map

package/build/index.js

@@ -1,5 +1,7 @@
 import { customElement } from "@fluid-topics/ft-wc-utils";
 import { FtTopBar } from "./ft-top-bar";
 export * from "./ft-top-bar";
+export * from "./ft-top-bar.css";
+export * from "./ft-top-bar.properties";
 customElement("ft-top-bar")(FtTopBar);
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-top-bar",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "description": "A top bar for FT admin screens",
   "keywords": [
     "Lit"
@@ -19,8 +19,8 @@
     "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
   },
   "dependencies": {
-    "@fluid-topics/ft-wc-utils": "0.3.12",
+    "@fluid-topics/ft-wc-utils": "0.3.13",
     "lit": "2.2.8"
   },
-  "gitHead": "126fc60c5ec4b89c3897901d1a92ee9b17286686"
+  "gitHead": "84b5fc920bc5d2bdb646b5da8815ad51caaf228e"
 }