@venite/components 0.16.7 → 0.16.13

package/dist/collection/components/editor-cursors/editor-cursors.js

@@ -0,0 +1,228 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  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 { Component, State, Listen, Prop, Watch, h } from '@stencil/core';
+import Debounce from 'debounce-decorator';
+import { elementFromPath } from '../../utils/element-from-path';
+import Values from 'values.js';
+import getCaretCoordinates from 'textarea-caret';
+export class EditorComponent {
+  constructor() {
+    this.cursorPos = {};
+  }
+  cursorsChanged() {
+    this.clearCursors();
+    this.resetCursors();
+    //console.log('(ldf-editor-cursors) cursors updated, to ', this.cursors, ' now ', this.cursorPos);
+  }
+  // Life Cycle
+  componentWillLoad() {
+    //console.log('(ldf-editor-cursors) initial cursor load, cursors = ', this.cursors);
+    this.cursorsChanged();
+  }
+  // Listen for scroll and window resize events and reset the cursors accordingly
+  // (the cursor reset method is debounced)
+  onScroll() {
+    this.clearCursors();
+    this.resetCursors();
+  }
+  onResize() {
+    this.clearCursors();
+    this.resetCursors();
+  }
+  // Debounce resetCursors() for e.g., scroll
+  resetCursors() {
+    const newCursorPos = {}, cursors = this.cursors || {};
+    Object.keys(cursors).forEach(username => {
+      const cursor = cursors[username];
+      this.cursorToPos(cursor, username, newCursorPos);
+    });
+    this.cursorPos = newCursorPos;
+  }
+  clearCursors() {
+    this.cursorPos = {};
+  }
+  // mutates cursorPos
+  cursorToPos(data, user, cursorPos) {
+    if (data && data.path) {
+      // Cursor is somewhere
+      const target = elementFromPath(this.parent, data.path);
+      if (target) {
+        const textarea = target.shadowRoot
+          ? target.shadowRoot.querySelector('textarea') || target.shadowRoot.querySelector('input') || target.shadowRoot.querySelector('> *')
+          : target.querySelector('textarea') || target.querySelector('input') || target.querySelector('> *');
+        const rect = textarea.getBoundingClientRect();
+        const start = getCaretCoordinates(textarea, data.start, undefined), end = getCaretCoordinates(textarea, data.end, undefined);
+        cursorPos[user] = {
+          start: { top: start.top + rect.top, left: start.left + rect.left },
+          end: { top: end.top + rect.top, left: end.left + rect.left },
+          target: textarea
+        };
+      }
+      else {
+        // Cursor is nowhere; hide this user's cursor
+        cursorPos[user] = undefined;
+      }
+    }
+    else {
+      // Cursor is nowhere; hide this user's cursor
+      cursorPos[user] = undefined;
+    }
+  }
+  // Render helpers
+  buildCursorMarker(uid) {
+    const user = this.users[uid], pos = this.cursorPos[uid];
+    if (user && pos && this.uid !== uid) {
+      console;
+      const fontSize = getComputedStyle(pos.target).fontSize;
+      return [
+        // label
+        this.buildCursorLabel(user, fontSize, pos.start.left, pos.start.top),
+        // basic rectangle
+        this.buildCursorRectangle('main-wing', user, pos.start.left == pos.end.left, fontSize, pos.start.left, pos.start.top, pos.end.left - pos.start.left, pos.end.top - pos.start.top),
+        // "right-wing" rectangle
+        pos.end.top !== pos.start.top && this.buildCursorRectangle('right-wing', user, false, fontSize, pos.start.left, pos.start.top, parseInt(getComputedStyle(pos.target).width), pos.end.top - pos.start.top, 0),
+        // "left-wing" rectangle
+        pos.end.top !== pos.start.top && this.buildCursorRectangle('left-wing', user, false, fontSize, pos.target.getBoundingClientRect().x, pos.start.top, pos.start.left, pos.end.top - pos.start.top, 0, 1.5)
+      ];
+      ;
+    }
+    else {
+      return [];
+    }
+  }
+  buildCursorLabel(user, fontSize, left, top) {
+    return (h("div", { class: 'cursor-label', style: {
+        left: `${Math.round(left)}px`,
+        top: `calc(${Math.round(top)}px - ${fontSize})`,
+        backgroundColor: new Values(user.color).tint(75).hexString(),
+        borderColor: new Values(user.color).shade(40).hexString()
+      } }, user.displayName));
+  }
+  buildCursorRectangle(wing, user, collapsed, fontSize, left, top, width, height = 0, addlHeight = 1.5, addlTop = 0) {
+    const style = {
+      left: `${Math.round(left)}px`,
+      top: `calc(${Math.round(top)}px + calc(${addlTop} * ${fontSize}))`,
+      width: `${Math.round(width)}px`,
+      height: `calc(${Math.round(height)}px + calc(${addlHeight} * ${fontSize}))`,
+      backgroundColor: new Values(user.color).tint(75).hexString(),
+      borderColor: new Values(user.color).shade(40).hexString()
+    };
+    return (h("div", { class: collapsed ? `cursor collapsed ${wing}` : `cursor ${wing}`, style: style }));
+  }
+  render() {
+    return (this.cursorPos && Object.keys(this.cursorPos).map(username => this.buildCursorMarker(username)));
+  }
+  static get is() { return "ldf-editor-cursors"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["editor-cursors.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["editor-cursors.css"]
+  }; }
+  static get properties() { return {
+    "parent": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "HTMLElement",
+        "resolved": "HTMLElement",
+        "references": {
+          "HTMLElement": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "users": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "{ [uid: string]: User; }",
+        "resolved": "{ [uid: string]: User; }",
+        "references": {
+          "User": {
+            "location": "import",
+            "path": "@venite/ldf"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Users currently active in the document"
+      }
+    },
+    "uid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Unique ID for the user editing in this editor"
+      },
+      "attribute": "uid",
+      "reflect": true
+    },
+    "cursors": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "{ [user: string]: Cursor }",
+        "resolved": "{ [user: string]: Cursor; }",
+        "references": {
+          "Cursor": {
+            "location": "import",
+            "path": "@venite/ldf"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Cursor positions of active users"
+      }
+    }
+  }; }
+  static get states() { return {
+    "cursorPos": {}
+  }; }
+  static get watchers() { return [{
+      "propName": "cursors",
+      "methodName": "cursorsChanged"
+    }]; }
+  static get listeners() { return [{
+      "name": "scroll",
+      "method": "onScroll",
+      "target": "document",
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "resize",
+      "method": "onResize",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
+}
+__decorate([
+  Debounce(20)
+], EditorComponent.prototype, "resetCursors", null);

package/dist/collection/components/heading/dist/heading.js

@@ -0,0 +1,210 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+exports.__esModule = true;
+exports.HeadingComponent = void 0;
+var core_1 = require("@stencil/core");
+var ldf_1 = require("@venite/ldf");
+var editable_node_1 = require("./editable-node");
+var locale_1 = require("../../utils/locale");
+var heading_i18n_en_json_1 = require("./heading.i18n.en.json");
+var LOCALE = {
+    'en': heading_i18n_en_json_1["default"]
+};
+var HeadingComponent = /** @class */ (function () {
+    function HeadingComponent() {
+    }
+    HeadingComponent.prototype.docChanged = function (newDoc) {
+        try {
+            if (typeof newDoc == 'string') {
+                this.obj = new ldf_1.Heading(JSON.parse(newDoc));
+            }
+            else {
+                this.obj = new ldf_1.Heading(newDoc);
+            }
+        }
+        catch (e) {
+            console.warn('HEADING ERROR', e);
+            this.obj = new ldf_1.Heading();
+        }
+    };
+    // Lifecycle events
+    HeadingComponent.prototype.componentWillLoad = function () {
+        this.docChanged(this.doc);
+        this.loadLocaleStrings();
+    };
+    HeadingComponent.prototype.loadLocaleStrings = function () {
+        return __awaiter(this, void 0, Promise, function () {
+            return __generator(this, function (_a) {
+                try {
+                    this.localeStrings = LOCALE[locale_1.getComponentClosestLanguage(this.element)];
+                }
+                catch (e) {
+                    console.warn(e);
+                }
+                return [2 /*return*/];
+            });
+        });
+    };
+    // Convert level/text into an H... node
+    HeadingComponent.prototype.headerNode = function (level, contentNode, display) {
+        if (display === void 0) { display = true; }
+        var node;
+        switch (level) {
+            case 1:
+                node = React.createElement("h1", null, contentNode);
+                break;
+            case 2:
+                node = React.createElement("h2", null, contentNode);
+                break;
+            case 3:
+                node = React.createElement("h3", { slot: 'start' }, contentNode);
+                break;
+            case 4:
+                node = React.createElement("h4", { slot: 'start' }, contentNode);
+                break;
+            case 5:
+                node = React.createElement("h5", { slot: 'start' }, contentNode);
+                break;
+            default:
+                node = React.createElement("h6", null, contentNode);
+        }
+        return display && node;
+    };
+    HeadingComponent.prototype.textNode = function (text, index, bodyText) {
+        return this.editable
+            ? React.createElement(editable_node_1.EditableNode, { uidOrSlug: this.obj.uid || this.obj.slug || '', path: this.path, text: text, index: index, bodyText: Boolean(bodyText) })
+            : React.createElement("ldf-string", { text: text, fragment: this.path });
+    };
+    HeadingComponent.prototype.dateNode = function () {
+        var _a, _b, _c, _d, _e, _f;
+        var hasDate = !!((_b = (_a = this.obj) === null || _a === void 0 ? void 0 : _a.day) === null || _b === void 0 ? void 0 : _b.date);
+        if (hasDate) {
+            var date = ldf_1.dateFromYMDString((_d = (_c = this.obj) === null || _c === void 0 ? void 0 : _c.day) === null || _d === void 0 ? void 0 : _d.date), locale = ((_f = (_e = this.element) === null || _e === void 0 ? void 0 : _e.closest('[lang]')) === null || _f === void 0 ? void 0 : _f.lang) || 'en';
+            return React.createElement("div", { "class": "date" }, date.toLocaleDateString(locale, { year: 'numeric', month: 'long', day: 'numeric' }));
+        }
+        else {
+            return [];
+        }
+    };
+    HeadingComponent.prototype.citationNode = function (c, slot) {
+        if (slot === void 0) { slot = 'end'; }
+        return (React.createElement("div", { "class": 'citation', slot: slot }, this.editable ?
+            React.createElement("ldf-editable-text", { id: (this.obj.uid || this.obj.slug) + "-citation", text: c, path: this.path + "/citation" }) :
+            c));
+    };
+    HeadingComponent.prototype.sourceNode = function (c) {
+        var text = new ldf_1.Citation(c).toString().replace('bcp1979', 'BCP');
+        return (React.createElement("div", { slot: 'end', "class": 'source' }, this.editable ?
+            [
+                React.createElement("ldf-editable-text", { id: (this.obj.uid || this.obj.slug) + "-source-source", text: c === null || c === void 0 ? void 0 : c.source, path: this.path + "/source/source" }),
+                React.createElement("ldf-editable-text", { id: (this.obj.uid || this.obj.slug) + "-source-citation", text: c === null || c === void 0 ? void 0 : c.citation, path: this.path + "/source/citation" }),
+            ] :
+            text));
+    };
+    // Render
+    HeadingComponent.prototype.render = function () {
+        var _this = this;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+        var localeStrings = this.localeStrings || {};
+        var level = this.obj.metadata ? this.obj.metadata.level : 4, hasCitation = Boolean((_a = this.obj) === null || _a === void 0 ? void 0 : _a.citation), hasSource = Boolean((_b = this.obj) === null || _b === void 0 ? void 0 : _b.source), isDate = ((_c = this.obj) === null || _c === void 0 ? void 0 : _c.style) == 'date', isDay = ((_d = this.obj) === null || _d === void 0 ? void 0 : _d.style) == 'day', isText = ((_e = this.obj) === null || _e === void 0 ? void 0 : _e.style) == undefined || ((_f = this.obj) === null || _f === void 0 ? void 0 : _f.style) == 'text' || (!isDate && !isDay);
+        // Render
+        return (React.createElement(core_1.Host, { lang: ((_g = this.obj) === null || _g === void 0 ? void 0 : _g.language) || 'en' },
+            this.editable && React.createElement("ldf-label-bar", null,
+                React.createElement("slot", { slot: 'end', name: 'controls' })),
+            React.createElement("ldf-label-bar", { center: ((_j = (_h = this.obj) === null || _h === void 0 ? void 0 : _h.metadata) === null || _j === void 0 ? void 0 : _j.level) <= 2, "class": {
+                    'text': isText && (((_k = this === null || this === void 0 ? void 0 : this.obj) === null || _k === void 0 ? void 0 : _k.value) || []).filter(function (n) { return Boolean(n); }).length > 0
+                } },
+                isText && ((_m = (_l = this.obj) === null || _l === void 0 ? void 0 : _l.value) === null || _m === void 0 ? void 0 : _m.length) > 0 && this.headerNode(level, this.textNode(this.obj.value[0], 0), true),
+                isDate && !this.editable && this.dateNode(),
+                isDate && this.editable && React.createElement("code", { "class": "lookup" }, localeStrings.date),
+                isDay && !this.editable && React.createElement("div", { "class": "date" },
+                    React.createElement("ldf-day-name", { day: (_o = this.obj) === null || _o === void 0 ? void 0 : _o.day })),
+                isDay && !this.editable && ((_r = (_q = (_p = this.obj) === null || _p === void 0 ? void 0 : _p.day) === null || _q === void 0 ? void 0 : _q.holy_days) === null || _r === void 0 ? void 0 : _r.length) > 0 && React.createElement("ul", { "class": "holy-days" }, (_t = (_s = this.obj) === null || _s === void 0 ? void 0 : _s.day) === null || _t === void 0 ? void 0 : _t.holy_days.filter(function (day) { var _a; return ((_a = day.type) === null || _a === void 0 ? void 0 : _a.rank) < 3; }).map(function (day) {
+                    return day.bio
+                        ? React.createElement("li", { "class": "holy-day" },
+                            React.createElement("details", null,
+                                React.createElement("summary", null, day.name),
+                                React.createElement("ldf-text", { doc: new ldf_1.Text({ type: "text", style: "text", value: day.bio }) })))
+                        : React.createElement("li", { "class": "holy-day" }, day.name);
+                })),
+                isDay && this.editable && React.createElement("code", { "class": "lookup" }, localeStrings.day),
+                ((_v = (_u = this.obj) === null || _u === void 0 ? void 0 : _u.value) === null || _v === void 0 ? void 0 : _v.length) > 1 && this.textNode(this.obj.value[1], 1),
+                React.createElement("slot", { name: 'additional' }),
+                React.createElement("slot", { name: 'citation', slot: 'end' },
+                    hasSource && this.sourceNode(this.obj.source),
+                    hasCitation && !hasSource && this.obj.citation !== this.obj.label && this.obj.citation !== this.obj.value[0] && this.citationNode(this.obj.citation))),
+            React.createElement("div", null, hasSource && hasCitation && this.obj.citation !== this.obj.label && this.citationNode(this.obj.citation, 'none')),
+            ((_x = (_w = this.obj) === null || _w === void 0 ? void 0 : _w.value) === null || _x === void 0 ? void 0 : _x.length) > 2 && this.obj.value.slice(2, this.obj.value.length).map(function (text, index) { return _this.textNode(text, index + 2, true); })));
+    };
+    __decorate([
+        core_1.Element()
+    ], HeadingComponent.prototype, "element");
+    __decorate([
+        core_1.State()
+    ], HeadingComponent.prototype, "obj");
+    __decorate([
+        core_1.State()
+    ], HeadingComponent.prototype, "localeStrings");
+    __decorate([
+        core_1.Prop()
+    ], HeadingComponent.prototype, "doc");
+    __decorate([
+        core_1.Watch('doc')
+    ], HeadingComponent.prototype, "docChanged");
+    __decorate([
+        core_1.Prop({ reflect: true })
+    ], HeadingComponent.prototype, "path");
+    __decorate([
+        core_1.Prop()
+    ], HeadingComponent.prototype, "editable");
+    HeadingComponent = __decorate([
+        core_1.Component({
+            tag: 'ldf-heading',
+            styleUrl: 'heading.scss',
+            shadow: true
+        })
+    ], HeadingComponent);
+    return HeadingComponent;
+}());
+exports.HeadingComponent = HeadingComponent;

package/dist/collection/components/heading/editable-node.js

@@ -0,0 +1,2 @@
+import { h } from '@stencil/core';
+export const EditableNode = ({ uidOrSlug, path, text, index, bodyText }) => h("ldf-editable-text", { class: { 'body-text': bodyText }, id: `${uidOrSlug}-heading-${index}`, text: text, path: `${path}/value/${index}`, short: true, inputType: "text" });

package/dist/collection/components/heading/heading.css

@@ -0,0 +1,96 @@
+ldf-heading, :host {
+  font-family: var(--ldf-font-face);
+}
+ldf-heading ldf-string, :host ldf-string {
+  display: block;
+}
+ldf-heading ldf-label-bar.text, :host ldf-label-bar.text {
+  margin-top: var(--ldf-heading-margin-top);
+}
+ldf-heading h1, :host h1 {
+  text-align: var(--ldf-title-text-align);
+  font-weight: var(--ldf-title-font-weight);
+  font-style: var(--ldf-title-font-style);
+  font-variant: var(--ldf-title-font-variant);
+  font-size: var(--ldf-title-font-size);
+  text-transform: var(--ldf-title-text-transform);
+}
+ldf-heading h2, :host h2 {
+  text-align: var(--ldf-subtitle-text-align);
+  font-weight: var(--ldf-subtitle-font-weight);
+  font-style: var(--ldf-subtitle-font-style);
+  font-variant: var(--ldf-subtitle-font-variant);
+  font-size: var(--ldf-subtitle-font-size);
+  text-transform: var(--ldf-subtitle-text-transform);
+}
+ldf-heading h3, :host h3 {
+  text-align: var(--ldf-h3-text-align);
+  font-weight: var(--ldf-h3-font-weight);
+  font-style: var(--ldf-h3-font-style);
+  font-variant: var(--ldf-h3-font-variant);
+  font-size: var(--ldf-h3-font-size);
+  text-transform: var(--ldf-h3-text-transform);
+}
+ldf-heading h4, :host h4 {
+  text-align: var(--ldf-h4-text-align);
+  font-weight: var(--ldf-h4-font-weight);
+  font-style: var(--ldf-h4-font-style);
+  font-variant: var(--ldf-h4-font-variant);
+  font-size: var(--ldf-h4-font-size);
+  text-transform: var(--ldf-h4-text-transform);
+}
+ldf-heading h5, :host h5 {
+  text-align: var(--ldf-h5-text-align);
+  font-weight: var(--ldf-h5-font-weight);
+  font-style: var(--ldf-h5-font-style);
+  font-variant: var(--ldf-h5-font-variant);
+  font-size: var(--ldf-h5-font-size);
+  text-transform: var(--ldf-h5-text-transform);
+}
+ldf-heading .date,
+ldf-heading .holy-days,
+ldf-heading .holy-day, :host .date,
+:host .holy-days,
+:host .holy-day {
+  font-size: var(--ldf-date-font-size);
+  text-transform: var(--ldf-date-text-transform);
+  text-align: var(--ldf-date-text-align);
+  font-style: var(--ldf-date-font-style);
+}
+ldf-heading .holy-days, :host .holy-days {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}
+ldf-heading .holy-day, :host .holy-day {
+  margin: var(--ldf-holy-day-margin);
+  padding: 0;
+}
+
+.lookup {
+  background-color: var(--ldf-editable-lookup-background-color);
+  color: var(--ldf-editable-lookup-color);
+  border-radius: 4px;
+  padding: 1em;
+  width: 100%;
+}
+
+::slotted[slot=citation] {
+  text-align: right;
+  width: 100%;
+}
+
+.citation {
+  font-style: var(--ldf-heading-citation-font-style, italic);
+  display: var(--ldf-heading-citation-display, block);
+}
+
+.source {
+  width: 100%;
+}
+
+ldf-editable-text.body-text {
+  display: block;
+  padding-bottom: 1em;
+}

package/dist/collection/components/heading/heading.i18n.en.json

@@ -0,0 +1,4 @@
+{
+  "date": "The Date of the Liturgy",
+  "day": "The Name of the Liturgical Day"
+}