@panphora/bevel 0.1.0

package/examples/components/reference/baseline/bevel.js

@@ -0,0 +1,496 @@
+/*
+ * bevel.js — the delegated runtime for the bevel UI kit, 0.1.0.
+ * https://github.com/panphora/bevel
+ *
+ * One listener per interaction on `document`. No init(), no MutationObserver:
+ * every current AND future element is handled, so injected, re-rendered, and
+ * saved-and-reopened markup just works. Idempotent; safe to include twice.
+ *
+ * The markup carries the initial state (chips are real DOM, the slider fill is
+ * an inline --bevel-value, native inputs hold their own value), so the page is
+ * correct before this script runs. The script does two things on top:
+ *   1. Drives the transitions (steppers, chips, tabs, drag order, previews,
+ *      the grid's sort, select-all, expand, search and pages).
+ *   2. Mirrors live control state back into attributes (checked, selected,
+ *      value, the textarea's text), so document.documentElement.outerHTML
+ *      round-trips every visible state of every bevel control.
+ */
+(function () {
+  if (window.__bevel) return;
+  window.__bevel = true;
+
+  const X_SVG = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 4 12 12M12 4 4 12" stroke="currentColor" stroke-width="2" stroke-linecap="square" fill="none"/></svg>';
+
+  const on = (type, selector, handler, options) => {
+    document.addEventListener(type, (e) => {
+      const target = e.target instanceof Element ? e.target.closest(selector) : null;
+      if (target) handler(e, target);
+    }, options);
+  };
+  const emit = (el, name, detail) => el.dispatchEvent(new CustomEvent(name, { bubbles: true, detail }));
+  const nativeChange = (input) => {
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    input.dispatchEvent(new Event("change", { bubbles: true }));
+  };
+  const clearInput = (input) => { input.value = ""; input.removeAttribute("value"); };
+
+  /* ---------- state mirroring: the outerHTML contract ---------- */
+  const MIRROR_VALUE = ".bevel-input, .bevel-number__input, .bevel-slider__input, .bevel-date__field, .bevel-sortable__field, .bevel-tags__input";
+  on("input", MIRROR_VALUE, (e, input) => input.setAttribute("value", input.value));
+  on("input", ".bevel-textarea", (e, area) => { area.textContent = area.value; });
+  on("change", ".bevel-checkbox input, .bevel-toggle input, .bevel-table__pick input", (e, input) => {
+    input.toggleAttribute("checked", input.checked);
+  });
+  on("change", ".bevel-radio input", (e, input) => {
+    for (const r of document.querySelectorAll('input[type="radio"]')) {
+      if (r.name === input.name && r.form === input.form) r.toggleAttribute("checked", r.checked);
+    }
+  });
+  on("change", ".bevel-select__field", (e, select) => {
+    for (const o of select.options) o.toggleAttribute("selected", o.selected);
+  });
+
+  /* ---------- number ---------- */
+  on("click", ".bevel-number__step", (e, step) => {
+    const input = step.closest(".bevel-number")?.querySelector(".bevel-number__input");
+    if (!input || input.disabled) return;
+    try { step.dataset.step === "down" ? input.stepDown() : input.stepUp(); } catch { return; }
+    nativeChange(input);
+  });
+
+  /* ---------- slider ---------- */
+  const percent = (input) => {
+    const min = input.min === "" ? 0 : Number(input.min);
+    const max = input.max === "" ? 100 : Number(input.max);
+    if (!(max > min)) return "0%";
+    const pct = ((Number(input.value) - min) / (max - min)) * 100;
+    return `${+Math.min(100, Math.max(0, pct)).toFixed(2)}%`;
+  };
+  const syncSlider = (input) => {
+    const wrap = input.closest(".bevel-slider");
+    if (!wrap) return;
+    wrap.style.setProperty("--bevel-value", percent(input));
+    const out = wrap.closest(".bevel-sliderrow")?.querySelector("output, .bevel-sliderrow__value");
+    if (out) { if (out.tagName === "OUTPUT") out.value = input.value; else out.textContent = input.value; }
+  };
+  on("input", ".bevel-slider__input", (e, input) => syncSlider(input));
+
+  /* ---------- file ---------- */
+  const fileName = (wrap) => wrap.querySelector(".bevel-file__name");
+  const clearFile = (wrap, name) => {
+    name.textContent = name.dataset.empty || "No file chosen";
+    name.removeAttribute("data-filled");
+    if (name.tagName === "A") name.removeAttribute("href");
+    wrap.querySelector(".bevel-file__remove")?.remove();
+  };
+  on("change", ".bevel-file__input", (e, input) => {
+    const wrap = input.closest(".bevel-file");
+    const name = wrap && fileName(wrap);
+    if (!name) return;
+    if (!name.dataset.empty && !name.hasAttribute("data-filled")) name.dataset.empty = name.textContent;
+    const files = input.files;
+    if (files && files.length) {
+      name.textContent = files.length === 1 ? files[0].name : `${files.length} files`;
+      name.setAttribute("data-filled", "");
+      if (!wrap.querySelector(".bevel-file__remove")) {
+        const remove = document.createElement("button");
+        remove.type = "button";
+        remove.className = "bevel-file__remove";
+        remove.setAttribute("aria-label", "Remove file");
+        remove.innerHTML = X_SVG;
+        name.after(remove);
+      }
+    } else clearFile(wrap, name);
+  });
+  on("click", ".bevel-file__remove", (e, button) => {
+    const wrap = button.closest(".bevel-file");
+    if (!wrap) return;
+    const input = wrap.querySelector(".bevel-file__input");
+    const name = fileName(wrap);
+    if (input) { input.value = ""; nativeChange(input); }
+    if (name && name.hasAttribute("data-filled")) clearFile(wrap, name);
+    emit(wrap, "bevel:remove");
+  });
+
+  /* ---------- image ---------- */
+  const showPreview = (wrap, src) => {
+    const img = wrap.querySelector(".bevel-image__preview");
+    const placeholder = wrap.querySelector(".bevel-image__placeholder");
+    if (!img) return null;
+    if (img.dataset.blob) { URL.revokeObjectURL(img.dataset.blob); delete img.dataset.blob; }
+    if (src) { img.src = src; img.hidden = false; if (placeholder) placeholder.hidden = true; }
+    else { img.removeAttribute("src"); img.hidden = true; if (placeholder) placeholder.hidden = false; }
+    return img;
+  };
+  on("change", ".bevel-image__input", (e, input) => {
+    const wrap = input.closest(".bevel-image");
+    const file = input.files && input.files[0];
+    if (!wrap) return;
+    if (!file) { showPreview(wrap, null); return; }
+    const url = URL.createObjectURL(file);
+    const img = showPreview(wrap, url);
+    if (img) img.dataset.blob = url; else URL.revokeObjectURL(url);
+  });
+  on("click", ".bevel-image__remove", (e, button) => {
+    const wrap = button.closest(".bevel-image");
+    const input = wrap?.querySelector(".bevel-image__input");
+    if (!wrap) return;
+    if (input) input.value = "";
+    showPreview(wrap, null);
+    emit(wrap, "bevel:remove");
+  });
+
+  /* ---------- tags ---------- */
+  const addTag = (wrap, raw) => {
+    const text = raw.trim();
+    if (!text) return false;
+    const taken = [...wrap.querySelectorAll(".bevel-tags__chip input")].some((i) => i.value.toLowerCase() === text.toLowerCase());
+    if (taken) return false;
+    const chip = document.createElement("span");
+    chip.className = "bevel-tags__chip";
+    chip.append(text);
+    const hidden = document.createElement("input");
+    hidden.type = "hidden";
+    hidden.name = wrap.dataset.name || "tags[]";
+    hidden.value = text;
+    const remove = document.createElement("button");
+    remove.type = "button";
+    remove.className = "bevel-tags__remove";
+    remove.setAttribute("aria-label", `Remove ${text}`);
+    remove.textContent = "×";
+    chip.append(hidden, remove);
+    wrap.querySelector(".bevel-tags__input").before(chip);
+    emit(wrap, "bevel:tags");
+    return true;
+  };
+  on("keydown", ".bevel-tags__input", (e, input) => {
+    const wrap = input.closest(".bevel-tags");
+    if (!wrap) return;
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      if (addTag(wrap, input.value) || !input.value.trim()) clearInput(input);
+    } else if (e.key === "Backspace" && !input.value) {
+      const chips = wrap.querySelectorAll(".bevel-tags__chip");
+      const last = chips[chips.length - 1];
+      if (last) { last.remove(); emit(wrap, "bevel:tags"); }
+    }
+  });
+  on("focusout", ".bevel-tags__input", (e, input) => {
+    const wrap = input.closest(".bevel-tags");
+    if (wrap && input.value.trim() && addTag(wrap, input.value)) clearInput(input);
+  });
+  on("click", ".bevel-tags__remove", (e, button) => {
+    const wrap = button.closest(".bevel-tags");
+    button.closest(".bevel-tags__chip")?.remove();
+    if (wrap) emit(wrap, "bevel:tags");
+  });
+  on("click", ".bevel-tags", (e, wrap) => {
+    if (e.target === wrap) wrap.querySelector(".bevel-tags__input")?.focus();
+  });
+
+  /* ---------- sortable ---------- */
+  let drag = null;
+  const rows = (list) => [...list.querySelectorAll(":scope > .bevel-sortable__item")];
+  on("pointerdown", ".bevel-sortable__grip", (e, grip) => {
+    if (e.pointerType === "mouse" && e.button !== 0) return;
+    const item = grip.closest(".bevel-sortable__item");
+    const list = item?.parentElement;
+    if (!list) return;
+    drag = { item, list, id: e.pointerId, from: rows(list).indexOf(item) };
+    item.classList.add("is-dragging");
+    grip.setPointerCapture(e.pointerId);
+    e.preventDefault();
+  });
+  document.addEventListener("pointermove", (e) => {
+    if (!drag || e.pointerId !== drag.id) return;
+    const { item, list } = drag;
+    for (const sibling of rows(list)) {
+      if (sibling === item) continue;
+      const box = sibling.getBoundingClientRect();
+      const mid = box.top + box.height / 2;
+      const follows = item.compareDocumentPosition(sibling) & Node.DOCUMENT_POSITION_FOLLOWING;
+      if (follows && e.clientY > mid) sibling.after(item);
+      else if (!follows && e.clientY < mid) sibling.before(item);
+    }
+  });
+  const endDrag = (e) => {
+    if (!drag || e.pointerId !== drag.id) return;
+    const { item, list, from } = drag;
+    item.classList.remove("is-dragging");
+    drag = null;
+    const to = rows(list).indexOf(item);
+    if (to !== from) emit(list, "bevel:reorder", { from, to });
+  };
+  document.addEventListener("pointerup", endDrag);
+  document.addEventListener("pointercancel", endDrag);
+
+  /* ---------- chip ---------- */
+  on("click", "[data-bevel-chip]", (e, button) => {
+    const chip = button.closest(".bevel-chip");
+    if (!chip) return;
+    const action = button.dataset.bevelChip;
+    if (action === "open") chip.classList.add("bevel-chip--open");
+    else if (action === "collapse") chip.classList.remove("bevel-chip--open");
+    else if (action === "changes") chip.querySelector(".bevel-chip__panel")?.classList.toggle("is-changes");
+  });
+
+  /* ---------- tabs ---------- */
+  const selectTab = (tab) => {
+    const list = tab.closest(".bevel-tabs");
+    if (!list) return;
+    for (const t of list.querySelectorAll(".bevel-tabs__tab")) {
+      const selected = t === tab;
+      t.setAttribute("aria-selected", String(selected));
+      t.tabIndex = selected ? 0 : -1;
+      const id = t.getAttribute("aria-controls");
+      const panel = id && document.getElementById(id);
+      if (panel) panel.hidden = !selected;
+    }
+    emit(list, "bevel:tab", { tab });
+  };
+  on("click", ".bevel-tabs__tab", (e, tab) => selectTab(tab));
+  on("keydown", ".bevel-tabs__tab", (e, tab) => {
+    const list = tab.closest(".bevel-tabs");
+    if (!list) return;
+    const tabs = [...list.querySelectorAll(".bevel-tabs__tab")];
+    const i = tabs.indexOf(tab);
+    const next = e.key === "ArrowRight" ? tabs[(i + 1) % tabs.length]
+      : e.key === "ArrowLeft" ? tabs[(i - 1 + tabs.length) % tabs.length]
+      : e.key === "Home" ? tabs[0]
+      : e.key === "End" ? tabs[tabs.length - 1]
+      : null;
+    if (!next) return;
+    e.preventDefault();
+    next.focus();
+    selectTab(next);
+  });
+
+  /* ---------- segmented control ---------- */
+  on("click", ".bevel-seg > .bevel-button[aria-pressed]", (e, button) => {
+    const group = button.parentElement;
+    for (const b of group.querySelectorAll(":scope > .bevel-button[aria-pressed]")) b.setAttribute("aria-pressed", String(b === button));
+    emit(group, "bevel:seg", { value: button.dataset.value ?? button.textContent.trim(), button });
+  });
+
+  /* ---------- grid ---------- */
+  /* Sort, select-all, expand, search and pages. Rows never leave the DOM:
+     search and paging set hidden, sorting reorders, and every state is an
+     attribute (aria-sort, checked, aria-expanded, data-page, value). The
+     select-all's mixed flag and a detail row's hidden are derived from the
+     rows on every layout, so a saved page recovers them. */
+  const gridOf = (el) => el.closest(".bevel-grid");
+  const gridRows = (grid) => [...grid.querySelectorAll(".bevel-grid__table > tbody > .bevel-grid__row")];
+  const detailOf = (row) => {
+    const next = row.nextElementSibling;
+    return next && next.classList.contains("bevel-grid__detail") ? next : null;
+  };
+  const isOpen = (row) => row.querySelector(".bevel-grid__expand")?.getAttribute("aria-expanded") === "true";
+  const pageButton = (n, current) => {
+    const b = document.createElement("button");
+    b.type = "button";
+    b.className = "bevel-button bevel-button--small bevel-grid__page";
+    b.dataset.page = n;
+    b.innerHTML = '<span class="bevel-button__label"></span>';
+    b.firstChild.textContent = n;
+    if (n === current) b.setAttribute("aria-current", "page");
+    return b;
+  };
+  const renderPages = (pages, total, current) => {
+    const prev = pages.querySelector('[data-page="prev"]');
+    const next = pages.querySelector('[data-page="next"]');
+    for (const el of [...pages.children]) if (el !== prev && el !== next) el.remove();
+    const items = [];
+    if (total <= 7) for (let n = 1; n <= total; n++) items.push(n);
+    else {
+      items.push(1);
+      if (current > 3) items.push("…");
+      for (let n = Math.max(2, current - 1); n <= Math.min(total - 1, current + 1); n++) items.push(n);
+      if (current < total - 2) items.push("…");
+      items.push(total);
+    }
+    const frag = document.createDocumentFragment();
+    for (const n of items) {
+      if (n === "…") {
+        const gap = document.createElement("span");
+        gap.className = "bevel-grid__gap";
+        gap.textContent = n;
+        frag.append(gap);
+      } else frag.append(pageButton(n, current));
+    }
+    if (next) next.before(frag); else pages.append(frag);
+    if (prev) prev.disabled = current <= 1;
+    if (next) next.disabled = current >= total;
+  };
+  const syncPick = (grid) => {
+    const head = grid.querySelector(".bevel-grid__table > thead .bevel-grid__pick input");
+    const all = [...grid.querySelectorAll(".bevel-grid__table > tbody .bevel-grid__pick input")];
+    const shown = all.filter((i) => !i.disabled && !i.closest("tr").hidden);
+    const on = shown.filter((i) => i.checked).length;
+    if (head) {
+      head.checked = shown.length > 0 && on === shown.length;
+      head.indeterminate = on > 0 && on < shown.length;
+      head.toggleAttribute("checked", head.checked);
+    }
+    const out = grid.querySelector(".bevel-grid__selected");
+    if (out) out.textContent = String(all.filter((i) => i.checked).length);
+  };
+  const matchesView = (row, view) => {
+    const values = (view?.dataset.gridMatch || "").toLowerCase().split("|").filter(Boolean);
+    return !values.length || values.includes(cellKey(row, Number(view.dataset.gridColumn), "text"));
+  };
+  const syncStats = (grid, rows) => {
+    for (const output of grid.querySelectorAll("[data-grid-aggregate]")) {
+      const values = rows.map((row) => cellKey(row, Number(output.dataset.gridColumn), "number"));
+      const sum = values.reduce((total, value) => total + value, 0);
+      const kind = output.dataset.gridAggregate;
+      const value = kind === "count" ? rows.length : kind === "average" ? (values.length ? sum / values.length : 0) : sum;
+      const format = output.dataset.gridFormat;
+      output.textContent = format === "currency" ? new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 }).format(value)
+        : format === "percent" ? `${Math.round(value)}%` : new Intl.NumberFormat("en-US", { maximumFractionDigits: 1 }).format(value);
+    }
+  };
+  const layoutGrid = (grid) => {
+    const query = (grid.querySelector(".bevel-grid__search")?.value || "").trim().toLowerCase();
+    const size = Number(grid.dataset.pageSize) || 0;
+    const rows = gridRows(grid);
+    const searched = rows.filter((r) => !query || r.textContent.toLowerCase().includes(query));
+    const view = grid.querySelector('.bevel-grid__view[aria-pressed="true"]');
+    const matches = new Set(searched.filter((row) => matchesView(row, view)));
+    for (const tab of grid.querySelectorAll(".bevel-grid__view")) {
+      const count = tab.querySelector("span");
+      if (count) count.textContent = String(searched.filter((row) => matchesView(row, tab)).length);
+    }
+    syncStats(grid, [...matches]);
+    const total = size ? Math.max(1, Math.ceil(matches.size / size)) : 1;
+    const current = Math.min(total, Math.max(1, Number(grid.dataset.page) || 1));
+    if (size) grid.dataset.page = String(current);
+    const first = size ? (current - 1) * size : 0;
+    const last = size ? first + size : matches.size;
+    let i = 0;
+    for (const row of rows) {
+      const match = matches.has(row);
+      const show = match && i >= first && i < last;
+      if (match) i++;
+      row.hidden = !show;
+      const detail = detailOf(row);
+      if (detail) detail.hidden = !show || !isOpen(row);
+    }
+    for (const group of grid.querySelectorAll(".bevel-grid__table > tbody > .bevel-grid__group")) {
+      let any = false;
+      for (let tr = group.nextElementSibling; tr && !tr.classList.contains("bevel-grid__group"); tr = tr.nextElementSibling) {
+        if (tr.classList.contains("bevel-grid__row") && !tr.hidden) { any = true; break; }
+      }
+      group.hidden = !any;
+    }
+    const empty = grid.querySelector(".bevel-grid__table > tbody > .bevel-grid__empty");
+    if (empty && rows.length) empty.hidden = matches.size > 0;
+    const pages = grid.querySelector(".bevel-grid__pages");
+    if (pages && size) renderPages(pages, total, current);
+    const range = grid.querySelector(".bevel-grid__range");
+    if (range) range.textContent = matches.size ? `${first + 1} to ${Math.min(last, matches.size)} of ${matches.size}` : "0 of 0";
+    syncPick(grid);
+  };
+  const cellKey = (row, index, type) => {
+    const cell = row.children[index];
+    const raw = cell ? (cell.dataset.sort ?? cell.textContent.trim()) : "";
+    if (type === "number") return Number(raw.replace(/[^\d.-]/g, "")) || 0;
+    return raw.toLowerCase();
+  };
+  on("click", ".bevel-grid__sort", (e, button) => {
+    const th = button.closest("th");
+    const table = th?.closest(".bevel-grid__table");
+    const grid = table && gridOf(table);
+    if (!grid) return;
+    const dir = th.getAttribute("aria-sort") === "ascending" ? "descending" : "ascending";
+    for (const h of table.querySelectorAll("thead [aria-sort]")) h.setAttribute("aria-sort", h === th ? dir : "none");
+    const index = [...th.parentElement.children].indexOf(th);
+    const type = th.dataset.type || "text";
+    const sign = dir === "ascending" ? 1 : -1;
+    const tbody = table.tBodies[0];
+    const segments = [{ head: [], units: [] }];
+    for (const tr of [...tbody.children]) {
+      const seg = segments[segments.length - 1];
+      if (tr.classList.contains("bevel-grid__group")) segments.push({ head: [tr], units: [] });
+      else if (tr.classList.contains("bevel-grid__row")) seg.units.push([tr]);
+      else if (seg.units.length) seg.units[seg.units.length - 1].push(tr);
+      else seg.head.push(tr);
+    }
+    for (const seg of segments) {
+      seg.units.sort((a, b) => {
+        const x = cellKey(a[0], index, type), y = cellKey(b[0], index, type);
+        return x < y ? -sign : x > y ? sign : 0;
+      });
+      tbody.append(...seg.head, ...seg.units.flat());
+    }
+    layoutGrid(grid);
+    emit(grid, "bevel:sort", { index, dir, th });
+  });
+  on("change", ".bevel-grid__table > thead .bevel-grid__pick input", (e, input) => {
+    const grid = gridOf(input);
+    if (!grid) return;
+    for (const i of grid.querySelectorAll(".bevel-grid__table > tbody .bevel-grid__pick input")) {
+      if (i.disabled || i.closest("tr").hidden) continue;
+      i.checked = input.checked;
+      i.toggleAttribute("checked", i.checked);
+    }
+    syncPick(grid);
+    emit(grid, "bevel:select", { all: input.checked });
+  });
+  on("change", ".bevel-grid__table > tbody .bevel-grid__pick input", (e, input) => {
+    const grid = gridOf(input);
+    if (!grid) return;
+    syncPick(grid);
+    emit(grid, "bevel:select", { row: input.closest("tr"), checked: input.checked });
+  });
+  on("click", ".bevel-grid__expand", (e, button) => {
+    const row = button.closest("tr");
+    const open = button.getAttribute("aria-expanded") !== "true";
+    button.setAttribute("aria-expanded", String(open));
+    const detail = detailOf(row) || document.getElementById(button.getAttribute("aria-controls") || "");
+    if (detail) detail.hidden = !open;
+    const grid = gridOf(button);
+    if (grid) emit(grid, "bevel:expand", { row, open });
+  });
+  on("click", ".bevel-grid__page", (e, button) => {
+    const grid = gridOf(button);
+    if (!grid || button.disabled) return;
+    const current = Number(grid.dataset.page) || 1;
+    const want = button.dataset.page === "prev" ? current - 1 : button.dataset.page === "next" ? current + 1 : Number(button.dataset.page);
+    if (!want) return;
+    grid.dataset.page = String(want);
+    layoutGrid(grid);
+    emit(grid, "bevel:page", { page: Number(grid.dataset.page) });
+  });
+  on("click", ".bevel-grid__view", (e, button) => {
+    const grid = gridOf(button);
+    if (!grid) return;
+    for (const view of grid.querySelectorAll(".bevel-grid__view")) view.setAttribute("aria-pressed", String(view === button));
+    if (grid.dataset.pageSize) grid.dataset.page = "1";
+    layoutGrid(grid);
+    const scroll = grid.querySelector(".bevel-grid__scroll");
+    if (scroll) scroll.scrollTop = 0;
+    emit(grid, "bevel:view", { value: button.dataset.value, button });
+  });
+  on("input", ".bevel-grid__search", (e, input) => {
+    const grid = gridOf(input);
+    if (!grid) return;
+    if (grid.dataset.pageSize) grid.dataset.page = "1";
+    layoutGrid(grid);
+    emit(grid, "bevel:search", { query: input.value });
+  });
+
+  /* ---------- first paint: fill any slider whose markup forgot --bevel-value ---------- */
+  const boot = () => {
+    for (const grid of document.querySelectorAll(".bevel-grid")) layoutGrid(grid);
+    for (const input of document.querySelectorAll(".bevel-slider__input")) {
+      const wrap = input.closest(".bevel-slider");
+      if (wrap && !wrap.style.getPropertyValue("--bevel-value")) syncSlider(input);
+    }
+    for (const name of document.querySelectorAll(".bevel-file__name[data-filled][data-empty]")) {
+      const wrap = name.closest(".bevel-file");
+      const input = wrap?.querySelector(".bevel-file__input");
+      if (input && !input.files.length) clearFile(wrap, name);
+    }
+  };
+  document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", boot) : boot();
+})();

package/examples/components/reference/baseline/fonts/LICENSE-ibm-plex-mono.txt

@@ -0,0 +1,93 @@
+Copyright 2017 IBM Corp. All rights reserved. IBMPlexMono-ThinItalic.ttf: Copyright 2017 IBM Corp. All rights reserved. IBMPlexMono-ExtraLight.ttf: Copyright 2017 IBM Corp. All rights reserved. IBMPlexMono-ExtraLightItalic.ttf: Copyright 2017 IBM Corp. All rights reserved. IBMPlexMono-Light.ttf: Copyright 2017 IBM Corp. All rights reserved. IBMPlexMono-LightItalic.ttf: Copyright 2017 IBM Corp. All rights reserved. IBMPlexMono-Regular.ttf: Copyright 2017 IBM Corp. All rights reserved. IBMPlexMono-Italic.ttf: Copyright 2017 IBM Corp. All rights reserved. IBMPlexMono-Medium.ttf: Copyright 2017 IBM Corp. All rights reserved. IBMPlexMono-MediumItalic.ttf: Copyright 2017 IBM Corp. All rights reserved. IBMPlexMono-SemiBold.ttf: Copyright 2017 IBM Corp. All rights reserved. IBMPlexMono-SemiBoldItalic.ttf: Copyright 2017 IBM Corp. All rights reserved. IBMPlexMono-Bold.ttf: Copyright 2017 IBM Corp. All rights reserved. IBMPlexMono-BoldItalic.ttf: Copyright 2017 IBM Corp. All rights reserved.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.