@venite/components 0.16.7 → 0.16.13

package/dist/collection/components/responsive-prayer/responsive-prayer.js

@@ -0,0 +1,215 @@
+import { Component, Prop, Watch, State, Element, Host, h } from '@stencil/core';
+import { ResponsivePrayer, Heading } from '@venite/ldf';
+import { getComponentClosestLanguage } from '../../utils/locale';
+import EN from './responsive-prayer.i18n.en.json';
+const LOCALE = {
+  'en': EN,
+};
+export class ResponsivePrayerComponent {
+  docChanged(newDoc) {
+    try {
+      if (typeof newDoc == 'string') {
+        this.obj = new ResponsivePrayer(JSON.parse(newDoc));
+      }
+      else {
+        this.obj = new ResponsivePrayer(newDoc);
+      }
+    }
+    catch (e) {
+      console.warn(e);
+      this.obj = new ResponsivePrayer();
+    }
+  }
+  // Lifecycle events
+  async componentWillLoad() {
+    this.docChanged(this.doc);
+    this.loadLocaleStrings();
+  }
+  async loadLocaleStrings() {
+    try {
+      this.localeStrings = LOCALE[getComponentClosestLanguage(this.element)];
+    }
+    catch (e) {
+      console.warn(e);
+    }
+  }
+  // Render helpers
+  /** renders a `ResponsivePrayerLine` as an `ldf-editable-text` */
+  editableNode(line, index, part, template = undefined, templateMaker) {
+    return (h("ldf-editable-text", { id: `${this.obj.uid}-${index}-${part}`, text: line[part], path: `${this.path}/value/${index}/${part}`, template: template, templateMaker: templateMaker }));
+  }
+  /** renders a `ResponsivePrayerLine` as an `ldf-string` */
+  stringNode(line, index, part) {
+    return (h("ldf-string", { citation: { label: this.obj.label }, id: `${this.obj.uid}-${index}-${part}`, text: line[part], dropcap: index == 0 ? "enabled" : "disabled", fragment: this.path }));
+  }
+  // Render the `response` in a litany, and handle `[Silence]` value
+  litanyResponseStringNode(line, index) {
+    const text = line.response || this.obj.metadata.response;
+    if (text == '[Silence]') {
+      return (h("span", { class: 'rubric' },
+        h("br", null),
+        "Silence"));
+    }
+    else {
+      return (h("span", { class: 'response' },
+        h("ldf-string", { citation: { label: this.obj.label }, id: `${this.obj.uid}-${index}-response`, text: text, fragment: this.path })));
+    }
+  }
+  editableHeader() {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    return h("ldf-label-bar", null,
+      h("h3", { slot: "start", class: "editable-label" },
+        h("ldf-editable-text", { id: "label", text: (_a = this.obj) === null || _a === void 0 ? void 0 : _a.label, path: `${this.path}/label`, placeholder: (_b = this.localeStrings) === null || _b === void 0 ? void 0 : _b.label })),
+      h("ldf-editable-text", { slot: "end", id: "source-source", text: (_d = (_c = this.obj) === null || _c === void 0 ? void 0 : _c.source) === null || _d === void 0 ? void 0 : _d.source, path: `${this.path}/source/source`, placeholder: (_e = this.localeStrings) === null || _e === void 0 ? void 0 : _e.source }),
+      h("ldf-editable-text", { slot: "end", id: "source-citation", text: (_g = (_f = this.obj) === null || _f === void 0 ? void 0 : _f.source) === null || _g === void 0 ? void 0 : _g.citation, path: `${this.path}/source/citation`, placeholder: (_h = this.localeStrings) === null || _h === void 0 ? void 0 : _h.citation }));
+  }
+  // Render
+  render() {
+    var _a, _b, _c, _d, _e;
+    const needsHeader = ((_a = this.obj) === null || _a === void 0 ? void 0 : _a.label) || ((_b = this.obj) === null || _b === void 0 ? void 0 : _b.citation) || ((_c = this.obj) === null || _c === void 0 ? void 0 : _c.source);
+    if (this.obj.style == 'preces') {
+      /* `preces` type returns a table like
+       *    V.  O Lord, open our lips.
+       *    R.  And our mouth shall proclaim thy praise. */
+      const template = { label: '', text: '' }, templateMaker = (text) => ({ label: '', text });
+      return (h(Host, { class: this.obj.style, lang: this.obj.language },
+        h("ldf-label-bar", null,
+          h("slot", { slot: 'end', name: 'controls' })),
+        !this.editable && needsHeader && h("ldf-heading", { doc: new Heading({ type: 'heading', metadata: { level: 3 }, value: [this.obj.label], citation: this.obj.citation, source: this.obj.source }) }),
+        this.editable && needsHeader && this.editableHeader(),
+        h("table", { class: "preces" }, this.obj.value.map((line, index) => h("tr", { class: "row" },
+          h("td", { class: "cell" }, this.editable ? this.editableNode(line, index, 'label', template, templateMaker) : this.stringNode(line, index, 'label')),
+          h("td", { class: index % 2 == 0 ? 'cell' : 'cell response' }, this.editable ? this.editableNode(line, index, 'text', template, templateMaker) : this.stringNode(line, index, 'text')))))));
+    }
+    else if (this.obj.style == 'litany') {
+      /* `litany`type returns prayers and responses with a break between each pair, like
+       *    That this evening may be holy, good, and peaceful,
+       *    We entreat you, O Lord.
+       *
+       *    That your holy angels may lead us in paths of peace and goodwill,
+       *    We entreat you, O Lord. */
+      const template = { text: '', response: ((_d = this.obj.metadata) === null || _d === void 0 ? void 0 : _d.response) || '' }, templateMaker = (text) => { var _a; return ({ text, response: ((_a = this.obj.metadata) === null || _a === void 0 ? void 0 : _a.response) || '' }); };
+      return (h(Host, { class: this.obj.style, lang: this.obj.language },
+        this.editable && h("ldf-label-bar", null,
+          h("slot", { slot: 'end', name: 'controls' })),
+        !this.editable && needsHeader && h("ldf-heading", { doc: new Heading({ type: 'heading', metadata: { level: 3 }, value: [this.obj.label], citation: this.obj.citation, source: this.obj.source }) }),
+        this.editable && needsHeader && this.editableHeader(),
+        this.obj.value.map((line, index) => {
+          var _a, _b;
+          // Classes depending on style and whether this line is optional
+          let classes = new Array('litany');
+          if (line.optional) {
+            classes.push('optional');
+          }
+          // Render the line
+          return h("div", { class: { "line": true, "editable": this.editable } },
+            h("p", { class: classes.join(' ') },
+              this.editable
+                ? this.editableNode(line, index, 'text', template, templateMaker)
+                : this.stringNode(line, index, 'text'),
+              line.response && (this.editable ?
+                h("span", { class: 'response' }, this.editableNode(line, index, 'response', template, templateMaker)) :
+                [h("br", null), this.litanyResponseStringNode(line, index)]),
+              (!line.response && ((_a = this.obj.metadata) === null || _a === void 0 ? void 0 : _a.response)) && (this.editable ?
+                h("span", { class: 'response' },
+                  h("ldf-editable-text", { id: `${this.obj.uid}-${index}-response`, text: this.obj.metadata.response, path: `${this.path}/response` })) :
+                [h("br", null), this.litanyResponseStringNode(line, index)])),
+            this.editable && h("label", { class: "optional-label", htmlFor: `optional-${index}` }, (_b = this.localeStrings) === null || _b === void 0 ? void 0 : _b.optional),
+            this.editable && h("ldf-editable-boolean", { id: `optional-${index}`, slot: "start", path: `${this.path}/value/${index}/optional`, value: line.optional }));
+        })));
+    }
+    else {
+      /* `responsive` type returns alternating lines like
+       *    Lord, hear our prayer.
+       *    And let our cry come to you.
+       *    Let us pray. */
+      const template = { text: '', response: ((_e = this.obj.metadata) === null || _e === void 0 ? void 0 : _e.response) || '' }, templateMaker = (text) => { var _a; return ({ text, response: ((_a = this.obj.metadata) === null || _a === void 0 ? void 0 : _a.response) || '' }); };
+      return (h(Host, { class: this.obj.style, lang: this.obj.language },
+        !this.editableHeader && needsHeader && h("ldf-heading", { doc: new Heading({ type: 'heading', metadata: { level: 3 }, value: [this.obj.label], citation: this.obj.citation, source: this.obj.source }) }),
+        this.editable && needsHeader && this.editableHeader(),
+        h("p", { class: 'responsive' }, this.obj.value.map((line, index) => [
+          this.editable ?
+            h("div", null, this.editableNode(line, index, 'text', template, templateMaker)) :
+            h("div", null, this.stringNode(line, index, 'text')),
+          this.editable ?
+            h("div", { class: 'response' }, this.editableNode(line, index, 'response', template, templateMaker)) :
+            h("div", { class: 'response' }, this.stringNode(line, index, 'response'))
+        ]))));
+    }
+  }
+  static get is() { return "ldf-responsive-prayer"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["responsive-prayer.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["responsive-prayer.css"]
+  }; }
+  static get properties() { return {
+    "doc": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsivePrayer | string",
+        "resolved": "ResponsivePrayer | string",
+        "references": {
+          "ResponsivePrayer": {
+            "location": "import",
+            "path": "@venite/ldf"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "An LDF ResponsivePrayer object."
+      },
+      "attribute": "doc",
+      "reflect": false
+    },
+    "path": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "A JSON Pointer that points to the ResponsivePrayer being edited"
+      },
+      "attribute": "path",
+      "reflect": true
+    },
+    "editable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the object is editable"
+      },
+      "attribute": "editable",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "obj": {},
+    "localeStrings": {}
+  }; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "doc",
+      "methodName": "docChanged"
+    }]; }
+}

package/dist/collection/components/rubric/rubric.css

@@ -0,0 +1,9 @@
+:host {
+  font-family: var(--ldf-font-face);
+  color: var(--ldf-rubric-color);
+  font-style: var(--ldf-rubric-font-style);
+  font-weight: var(--ldf-rubric-font-weight);
+  font-size: var(--ldf-rubric-font-size);
+  text-align: var(--ldf-text-align);
+  text-justify: inter-character;
+}

package/dist/collection/components/rubric/rubric.js

@@ -0,0 +1,104 @@
+import { Component, Prop, Watch, State, Host, h } from '@stencil/core';
+import { Rubric } from '@venite/ldf';
+export class RubricComponent {
+  docChanged(newDoc) {
+    try {
+      if (typeof newDoc == 'string') {
+        this.obj = new Rubric(JSON.parse(newDoc));
+      }
+      else {
+        this.obj = new Rubric(newDoc);
+      }
+    }
+    catch (e) {
+      console.warn(e);
+      this.obj = new Rubric();
+    }
+  }
+  // Lifecycle events
+  componentWillLoad() {
+    this.docChanged(this.doc);
+  }
+  // Render
+  render() {
+    return (h(Host, { lang: this.obj.language },
+      this.editable && h("ldf-label-bar", null,
+        h("slot", { slot: 'end', name: 'controls' })),
+      this.obj.value.map((para, ii) => this.editable ?
+        h("ldf-editable-text", { id: `${this.obj.uid || this.obj.slug}-${ii}`, text: para, path: `${this.path}/value/${ii}` }) :
+        h("p", { id: `${this.obj.uid || this.obj.slug}-${ii}`, class: 'rubric' }, para))));
+  }
+  static get is() { return "ldf-rubric"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["rubric.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["rubric.css"]
+  }; }
+  static get properties() { return {
+    "doc": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Rubric | string",
+        "resolved": "Rubric | string",
+        "references": {
+          "Rubric": {
+            "location": "import",
+            "path": "@venite/ldf"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "An LDF Rubric object."
+      },
+      "attribute": "doc",
+      "reflect": false
+    },
+    "path": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "A JSON Pointer that points to the Collect being edited"
+      },
+      "attribute": "path",
+      "reflect": true
+    },
+    "editable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the object is editable"
+      },
+      "attribute": "editable",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "obj": {}
+  }; }
+  static get watchers() { return [{
+      "propName": "doc",
+      "methodName": "docChanged"
+    }]; }
+}

package/dist/collection/components/string/dist/string.js

@@ -0,0 +1,194 @@
+"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;
+};
+exports.__esModule = true;
+exports.StringComponent = void 0;
+var core_1 = require("@stencil/core");
+var StringComponent = /** @class */ (function () {
+    function StringComponent() {
+        /**
+         * Enable, disable, or force dropcap on the first letter of the text.
+         */
+        this.dropcap = 'enabled';
+        /**
+         * Minimum length (in characters) a string must be to have a dropcap.
+         */
+        this.dropcapMinLength = 200;
+        /**
+         * Enable or disable replacement of tetragrammaton.
+         */
+        this.replaceTetragrammaton = true;
+    }
+    StringComponent.prototype.textChanged = function () {
+        this.processString();
+    };
+    // Private methods
+    StringComponent.prototype.processString = function () {
+        var _this = this;
+        var withoutEntities = this.processEntities(this.text);
+        var processed = this.processMarkup(withoutEntities);
+        if (this.replaceTetragrammaton) {
+            processed = processed.map(function (node) { return typeof node === 'string' ? _this.processTetragrammaton(node) : node; }).flat();
+        }
+        if (this.dropcap == 'force' || (this.dropcap == 'enabled' && (this.index == 0 || !this.index) && this.text && this.text.length > this.dropcapMinLength)) {
+            processed = this.processDropcap(processed);
+        }
+        this.processedString = processed;
+    };
+    StringComponent.prototype.processEntities = function (str) {
+        try {
+            var e = document.createElement('textarea');
+            e.innerHTML = str;
+            // handle case of empty input
+            return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
+        }
+        catch (e) {
+            console.warn("(processEntities) error while processing \"" + str + "\": ", e);
+        }
+    };
+    StringComponent.prototype.processMarkup = function (s) {
+        var _this = this;
+        var nodes = s
+            .replace(/^([A-Z]{2,})/, function (match) { return _this.maintainCasing(match) ? match : match[0] + match.slice(1).toLowerCase(); })
+            .replace(/([A-Z]{2,})/g, '^$1^') // all caps => ^...^; don't match if first word, as these should become dropcaps
+            .replace(/\[\*/g, '__BRACKET_ASTERISK')
+            .split(/([\*\^\%][^\*\^\%]*[\*\^\%])/g) // markdown ** => italics
+            .map(function (node) {
+            if (node == '-') {
+                return '';
+            }
+            else if ((node.startsWith('*') && node.endsWith('*')) || node.startsWith('%') && node.endsWith('%')) {
+                return React.createElement("em", null, node.slice(1, node.length - 1));
+            }
+            else if (node.startsWith('^') && node.endsWith('^')) {
+                if (_this.maintainCasing(node)) {
+                    return node.replace(/\^/g, '');
+                }
+                else {
+                    return React.createElement("span", { "class": "sc" },
+                        node[1],
+                        node.slice(2, node.length - 1).toLowerCase());
+                }
+            }
+            else {
+                return node.replace(/__BRACKET_ASTERISK/g, '[*');
+            }
+        });
+        return nodes;
+    };
+    StringComponent.prototype.processTetragrammaton = function (s) {
+        if (s) {
+            var replacements_1 = {
+                '\n': function () { return React.createElement("br", null); },
+                '’S': function () { return '’s'; },
+                '\'S': function () { return '’s'; },
+                'LORD’S': function () { return 'LORD’s'; },
+                "LORD'S": function () { return 'LORD’s'; },
+                'LORD': function () { return React.createElement("span", { "class": "sc" }, "Lord"); },
+                'Lord GOD': function () { return React.createElement("span", null,
+                    "Lord ",
+                    React.createElement("span", { "class": "sc" }, "God")); },
+                'GOD': function () { return React.createElement("span", { "class": "sc" }, "God"); },
+                'YHWH': function () { return React.createElement("span", { "class": "sc" }, "Yhwh"); },
+                'Yhwh': function () { return React.createElement("span", { "class": "sc" }, "Yhwh"); },
+                'YAHWEH': function () { return React.createElement("span", { "class": "sc" }, "Yhwh"); },
+                'Yahweh': function () { return React.createElement("span", { "class": "sc" }, "Yhwh"); },
+                '\t': function () { return React.createElement("span", { "class": 'tab' }, "\u00A0"); },
+                '  ': function () { return React.createElement("span", { "class": 'half-tab' }, "\u00A0"); }
+            };
+            var split = s.split(/((  )|\n|LORD[\'’]S|[\'’]S|LORD|Lord GOD|GOD|YHWH|YAHWEH|Yhwh|Yahweh|\t)/g);
+            return split.map(function (phrase) { return replacements_1.hasOwnProperty(phrase) ? replacements_1[phrase]() : phrase; });
+        }
+        else {
+            return new Array();
+        }
+    };
+    StringComponent.prototype.maintainCasing = function (st) {
+        if (!st) {
+            return true;
+        }
+        else {
+            var s = st.replace(/\^/g, '');
+            // don't lower-case if only the first letter is capitalized but others aren't (e.g., God, Lord)
+            return !(s.split("").map(function (char) { return char >= 'A' && char <= 'Z'; }).reduce(function (a, b) { return a && b; }, true))
+                // or if it's a Roman numeral
+                || Boolean(((s === null || s === void 0 ? void 0 : s.match(/^I+$/)) || [])[0]) || ['IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X'].includes(s)
+                // or if it's the word "I"
+                || (s === null || s === void 0 ? void 0 : s.toLowerCase()) == 'i ';
+        }
+    };
+    StringComponent.prototype.processDropcap = function (processed) {
+        var _a;
+        var first = processed[0], firstChunk = typeof first === 'string' ? first : '';
+        var final = processed;
+        if (firstChunk) {
+            var splitTest = (firstChunk || '').split(/[\s.!?\\]/);
+            var firstWord = splitTest ? splitTest[0] : '', re = firstWord.length > 2
+                ? /^ ?([\"\'“”‘’\!\?\[\]\(\)\,\w\u0590-\u05ff\u0370-\u03ff])([\w\u0590-\u05ff\u0370-\u03ff\,]*)/
+                : /^ ?([\"\'“”‘’\!\?\[\]\(\)\,\w\u0590-\u05ff\u0370-\u03ff])([\w\u0590-\u05ff\u0370-\u03ff\,]*[\s.!?]*[\w\u0590-\u05ff\u0370-\u03ff]*)/, reIncludingPunctuation = ((_a = firstWord[0]) === null || _a === void 0 ? void 0 : _a.match(/[\"\'“”‘’\!\?\[\]\(\)]/)) ? /^ ?([\"\'“”‘’\!\?\[\]\(\)\,\w\u0590-\u05ff\u0370-\u03ff]{2})\s*([\w\u0590-\u05ff\u0370-\u03ff]*)/
+                : re, buffer = firstWord.length == 1, split = firstChunk.split(reIncludingPunctuation).filter(function (s) { return s !== ''; }), match1 = split[0], match2 = split[1], nextWord = split[2];
+            final = new Array(React.createElement("span", { "class": 'firstword' },
+                React.createElement("span", { "class": buffer ? "drop buffered-drop drop-" + match1 : "drop drop-" + match1 }, match1),
+                this.maintainCasing(match2) ? match2 : match2 === null || match2 === void 0 ? void 0 : match2.toLowerCase()))
+                .concat(nextWord)
+                .concat(processed.slice(1));
+        }
+        return final;
+    };
+    // Lifecycle events
+    StringComponent.prototype.componentWillLoad = function () {
+        this.processString();
+    };
+    // Render
+    StringComponent.prototype.render = function () {
+        var _this = this;
+        return this.text && React.createElement("span", { onClick: function () { return _this.ldfStringClicked.emit({ target: _this.element, text: _this.text, citation: _this.citation, fragment: _this.fragment }); } }, this.processedString);
+    };
+    __decorate([
+        core_1.Element()
+    ], StringComponent.prototype, "element");
+    __decorate([
+        core_1.State()
+    ], StringComponent.prototype, "processedString");
+    __decorate([
+        core_1.Prop()
+    ], StringComponent.prototype, "text");
+    __decorate([
+        core_1.Watch('text')
+    ], StringComponent.prototype, "textChanged");
+    __decorate([
+        core_1.Prop({ reflect: true })
+    ], StringComponent.prototype, "citation");
+    __decorate([
+        core_1.Prop()
+    ], StringComponent.prototype, "dropcap");
+    __decorate([
+        core_1.Prop()
+    ], StringComponent.prototype, "dropcapMinLength");
+    __decorate([
+        core_1.Prop()
+    ], StringComponent.prototype, "replaceTetragrammaton");
+    __decorate([
+        core_1.Prop()
+    ], StringComponent.prototype, "index");
+    __decorate([
+        core_1.Prop()
+    ], StringComponent.prototype, "fragment");
+    __decorate([
+        core_1.Event({ bubbles: true })
+    ], StringComponent.prototype, "ldfStringClicked");
+    StringComponent = __decorate([
+        core_1.Component({
+            tag: 'ldf-string',
+            styleUrl: 'string.scss',
+            shadow: false,
+            scoped: true
+        })
+    ], StringComponent);
+    return StringComponent;
+}());
+exports.StringComponent = StringComponent;

package/dist/collection/components/string/string.css

@@ -0,0 +1,60 @@
+span {
+  font-family: var(--ldf-font-face);
+  font-weight: inherit;
+  font-style: inherit;
+  /*white-space: pre-wrap;*/
+}
+
+.tab {
+  display: inline;
+  margin-left: var(--ldf-tab-width);
+}
+
+.half-tab {
+  display: inline;
+  margin-left: var(--ldf-half-tab-width);
+}
+
+.sc {
+  font-variant: small-caps;
+}
+
+.drop {
+  font-size: 200%;
+}
+
+.firstword {
+  font-variant: var(--ldf-drop-firstword-font-variant);
+}
+
+.drop {
+  float: var(--ldf-drop-float);
+  font-family: var(--ldf-drop-font-family);
+  font-size: var(--ldf-drop-font-size);
+  margin-right: var(--ldf-drop-margin-right);
+  margin-top: var(--ldf-drop-margin-top);
+  line-height: var(--ldf-drop-line-height);
+  color: var(--ldf-drop-color);
+}
+
+.buffered-drop {
+  margin-right: var(--ldf-buffered-drop-margin-right);
+}
+
+:host[dir=rtl] .drop {
+  float: right;
+  font-family: "Times New Roman";
+}
+
+.drop-J {
+  margin-top: 0;
+  line-height: clamp(0.5em, calc(var(--ldf-drop-line-height) + 0.3em), 1em);
+}
+
+.selected {
+  background-color: var(--ldf-selected-background);
+}
+
+.liked {
+  background-color: var(--ldf-liked-background);
+}