@raylang/elements 0.7.0 → 0.9.0

package/components/doc-tabs/doc-tabs.js

@@ -0,0 +1,255 @@
+// <ray-doc-tabs> + <ray-doc-tab>: the tabs of open documents (an editor's,
+// a browser's), each closable and with an unsaved mark, all over one shared
+// panel (WAI-ARIA tabs: `panel` is that element's id).
+//
+// Closing is the app's: the × (for the pointer only: a tab holds no
+// focusable control), a middle click, or Delete/Backspace on the focused tab
+// fire `ray-request-close` ({ value, tab, source }); the app asks if it must
+// and removes the tab. When the selected tab goes, the one that takes its
+// place is selected (`change`), and focused if the closed tab had the focus.
+//
+// Too many tabs for the width: the bar scrolls sideways like ray-tabs.
+
+import { RayElement, css, define, uid } from "../../core/core.js";
+import { inlineKey } from "../../core/direction.js";
+import { SideScroller, sideScrollerStyles } from "../../core/scroll.js";
+
+const barStyles = css`
+  :host { display: flex; align-items: center; gap: var(--ray-space-1); min-width: 0; }
+  .list { display: flex; flex: 0 1 auto; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
+  .list::-webkit-scrollbar { display: none; }
+  .list ::slotted(ray-doc-tab) { flex: none; }
+  .end { display: inline-flex; flex: none; align-items: center; }
+  .end:not([data-filled]) { display: none; }
+`;
+
+export class RayDocTabs extends RayElement {
+  static properties = {
+    value: { type: String },
+    panel: { type: String },
+    label: { type: String },
+    closeLabel: { type: String, default: "Close" },
+    dirtyLabel: { type: String, default: "Unsaved changes" },
+  };
+  static styles = [sideScrollerStyles, barStyles];
+  static template = `<div class="list" part="list" role="tablist"><slot></slot></div><span class="end" part="end"><slot name="end"></slot></span>`;
+
+  constructor() {
+    super();
+    this._order = [];
+    this._focused = null;
+    this.addEventListener("click", (e) => {
+      const tab = this._tabOf(e);
+      if (!tab) return;
+      if (e.composedPath().some((n) => n.part?.contains?.("close"))) this._requestClose(tab, "button");
+      else this._select(tab, true);
+    });
+    // The middle button closes, without the browser's autoscroll.
+    this.addEventListener("mousedown", (e) => {
+      if (e.button === 1 && this._tabOf(e)) e.preventDefault();
+    });
+    this.addEventListener("auxclick", (e) => {
+      const tab = this._tabOf(e);
+      if (tab && e.button === 1) this._requestClose(tab, "middle");
+    });
+    this.addEventListener("keydown", (e) => this._key(e));
+    // Which tab has the focus, kept while it is removed (no focusout then).
+    this.addEventListener("focusin", (e) => {
+      this._focused = e.target.closest?.("ray-doc-tab") ?? null;
+    });
+    this.addEventListener("focusout", (e) => {
+      if (e.relatedTarget) this._focused = null;
+    });
+    const end = this.$('slot[name="end"]');
+    end.addEventListener("slotchange", () => end.parentElement.toggleAttribute("data-filled", end.assignedNodes().length > 0));
+    this.$(".list slot").addEventListener("slotchange", () => this.requestUpdate());
+    this._scroller = new SideScroller(this, this.$(".list"), { onResize: () => this.requestUpdate() });
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._scroller.connect();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._scroller.disconnect();
+  }
+
+  get tabs() {
+    return [...this.querySelectorAll("ray-doc-tab")].filter((t) => t.closest("ray-doc-tabs") === this);
+  }
+
+  /** The shared panel (`panel` is its id), or null. */
+  get panelElement() {
+    return this.panel ? this.getRootNode().getElementById?.(this.panel) ?? null : null;
+  }
+
+  update() {
+    const tabs = this.tabs;
+    if (!tabs.some((t) => t.value === this.value)) this._replaceSelected(tabs);
+    const list = this.$(".list");
+    if (this.label) list.setAttribute("aria-label", this.label);
+    else list.removeAttribute("aria-label");
+    const panel = this.panelElement;
+    for (const tab of tabs) {
+      const active = tab.value === this.value;
+      tab.id ||= uid("doc-tab");
+      tab.setAttribute("role", "tab");
+      tab.setAttribute("aria-selected", String(active));
+      tab.tabIndex = active ? 0 : -1;
+      tab.toggleAttribute("data-active", active);
+      if (panel) tab.setAttribute("aria-controls", panel.id);
+      else tab.removeAttribute("aria-controls");
+      tab.requestUpdate();
+    }
+    if (panel) {
+      panel.setAttribute("role", "tabpanel");
+      const active = tabs.find((t) => t.value === this.value);
+      if (active) panel.setAttribute("aria-labelledby", active.id);
+      else panel.removeAttribute("aria-labelledby");
+    }
+    this._order = tabs;
+    if (this.value !== this._revealed && this._scroller.reveal(tabs.find((t) => t.value === this.value))) {
+      this._revealed = this.value;
+    }
+    this._scroller.update();
+  }
+
+  // The selected tab is gone (or none was chosen yet): the one at its place
+  // takes over, else the one before it; the first when nothing was selected.
+  _replaceSelected(tabs) {
+    const before = this._order.findIndex((t) => t.value === this.value);
+    const next = before < 0 ? tabs[0] : tabs[Math.min(before, tabs.length - 1)];
+    const closed = before >= 0 ? this._order[before] : null;
+    if (!next) {
+      if (this.value !== undefined && before >= 0) {
+        this.commitProperty("value", undefined);
+        this.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+      return;
+    }
+    if (this.value === undefined || before < 0) {
+      this.commitProperty("value", next.value);
+      return;
+    }
+    this.commitProperty("value", next.value);
+    this.dispatchEvent(new Event("change", { bubbles: true }));
+    if (closed && closed === this._focused) {
+      this._focused = next;
+      queueMicrotask(() => next.focus());
+    }
+  }
+
+  _tabOf(e) {
+    const tab = e.target.closest?.("ray-doc-tab");
+    return tab && tab.closest("ray-doc-tabs") === this ? tab : null;
+  }
+
+  _select(tab, user) {
+    const changed = tab.value !== this.value;
+    this.value = tab.value;
+    if (user && changed) this.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+
+  _requestClose(tab, source) {
+    if (tab.hideClose) return;
+    this.emit("ray-request-close", { value: tab.value, tab, source });
+  }
+
+  _key(e) {
+    const tab = this._tabOf(e);
+    if (!tab || e.target !== tab) return;
+    const tabs = this.tabs;
+    const i = tabs.indexOf(tab);
+    // Right to left, ArrowLeft is the next tab.
+    const key = inlineKey(e.key, this);
+    let target = null;
+    if (key === "ArrowRight") target = tabs[(i + 1) % tabs.length];
+    else if (key === "ArrowLeft") target = tabs[(i - 1 + tabs.length) % tabs.length];
+    else if (e.key === "Home") target = tabs[0];
+    else if (e.key === "End") target = tabs[tabs.length - 1];
+    else if (e.key === "Delete" || e.key === "Backspace") {
+      e.preventDefault();
+      this._requestClose(tab, "key");
+      return;
+    }
+    if (!target) return;
+    e.preventDefault();
+    target.focus();
+    this._select(target, true);
+  }
+}
+
+const tabStyles = css`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ray-space-1);
+    box-sizing: border-box;
+    max-width: 14rem;
+    height: var(--ray-control-height-xs);
+    padding-inline: var(--ray-space-2) var(--ray-space-1);
+    font-size: var(--ray-font-size-sm);
+    color: var(--ray-muted-foreground);
+    white-space: nowrap;
+    border: 1px solid transparent;
+    border-radius: var(--ray-radius-sm);
+    cursor: default;
+    user-select: none;
+    outline: none;
+    transition: color var(--ray-duration-fast) var(--ray-easing-standard), background-color var(--ray-duration-fast) var(--ray-easing-standard);
+  }
+  :host(:hover) { color: var(--ray-foreground); background: var(--ray-muted); }
+  :host([data-active]) { color: var(--ray-foreground); background: var(--ray-card); border-color: var(--ray-border); }
+  :host(:focus-visible) { outline: var(--ray-focus-ring-width) solid var(--ray-ring); outline-offset: -2px; }
+  .section { display: inline-flex; flex: none; align-items: center; }
+  .section:not([data-filled]) { display: none; }
+  ::slotted(svg) { width: 1rem; height: 1rem; }
+  .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+
+  /* The end of the tab: the × (on hover and on the selected tab), or the
+     unsaved dot, which turns into the × under the pointer. */
+  .mark { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; }
+  .close { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--ray-muted-foreground); border-radius: var(--ray-radius-xs); visibility: hidden; }
+  .close svg { width: 0.75rem; height: 0.75rem; }
+  .close:hover { color: var(--ray-foreground); background: var(--ray-accent); }
+  :host(:hover) .close, :host([data-active]) .close { visibility: visible; }
+  .dot { position: absolute; display: none; width: 0.4375rem; height: 0.4375rem; background: var(--ray-primary); border-radius: 50%; }
+  :host([dirty]) .dot { display: block; }
+  :host([dirty]) .close { visibility: hidden; }
+  :host([dirty]) .mark:hover .close { visibility: visible; }
+  :host([dirty]) .mark:hover .dot { display: none; }
+  :host([hide-close]) .close { display: none; }
+  :host([hide-close]:not([dirty])) .mark { display: none; }
+  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+`;
+
+export class RayDocTab extends RayElement {
+  static properties = {
+    value: { type: String, reflect: true },
+    dirty: { type: Boolean, reflect: true },
+    hideClose: { type: Boolean, reflect: true },
+  };
+  static styles = [tabStyles];
+  static template = `<span class="section" part="left-section"><slot name="left"></slot></span><span class="label" part="label"><slot></slot></span><span class="mark" aria-hidden="true"><span class="dot" part="dot"></span><span class="close" part="close" data-ray-icon="ui.close"></span></span><span class="sr"></span>`;
+
+  constructor() {
+    super();
+    const slot = this.$('slot[name="left"]');
+    slot.addEventListener("slotchange", () => slot.parentElement.toggleAttribute("data-filled", slot.assignedNodes().length > 0));
+  }
+
+  update(changed) {
+    const bar = this.closest("ray-doc-tabs");
+    this.$(".close").title = bar?.closeLabel ?? "Close";
+    // The unsaved mark is part of the tab's name for assistive technology.
+    this.$(".sr").textContent = this.dirty ? `, ${bar?.dirtyLabel ?? "Unsaved changes"}` : "";
+    if (this.hideClose) this.removeAttribute("aria-keyshortcuts");
+    else this.setAttribute("aria-keyshortcuts", "Delete");
+    if (changed.has("value")) bar?.requestUpdate();
+  }
+}
+
+define("ray-doc-tabs", RayDocTabs);
+define("ray-doc-tab", RayDocTab);

package/components/drawer/drawer.js

@@ -32,24 +32,41 @@ const styles = css`
   dialog[open] { display: flex; flex-direction: column; }
   dialog::backdrop { animation: ray-fade-in var(--ray-duration-base) var(--ray-easing-out); }
 
-  :host(:not([position])) dialog, :host([position="right"]) dialog {
-    inset: var(--_inset) var(--_inset) var(--_inset) auto;
+  /* position: start/end follow the writing direction, left/right are sides
+     of the screen. */
+  dialog {
+    inset-block: var(--_inset);
+    inset-inline: auto var(--_inset);
     width: min(var(--_size), calc(100vw - 2 * var(--_inset)));
     height: calc(100dvh - 2 * var(--_inset));
-    border-left-width: 1px;
+    border-inline-start-width: 1px;
+    --_from: translateX(100%);
+  }
+  dialog:dir(rtl) { --_from: translateX(-100%); }
+  :host([position="start"]) dialog {
+    inset-inline: var(--_inset) auto;
+    border-inline-start-width: 0;
+    border-inline-end-width: 1px;
+    --_from: translateX(-100%);
+  }
+  :host([position="start"]) dialog:dir(rtl) { --_from: translateX(100%); }
+  :host([position="right"]) dialog {
+    inset: var(--_inset) var(--_inset) var(--_inset) auto; /* physical */
+    border-width: 0;
+    border-left-width: 1px; /* physical */
     --_from: translateX(100%);
   }
   :host([position="left"]) dialog {
-    inset: var(--_inset) auto var(--_inset) var(--_inset);
-    width: min(var(--_size), calc(100vw - 2 * var(--_inset)));
-    height: calc(100dvh - 2 * var(--_inset));
-    border-right-width: 1px;
+    inset: var(--_inset) auto var(--_inset) var(--_inset); /* physical */
+    border-width: 0;
+    border-right-width: 1px; /* physical */
     --_from: translateX(-100%);
   }
   :host([position="top"]) dialog {
     inset: var(--_inset) var(--_inset) auto var(--_inset);
     width: calc(100vw - 2 * var(--_inset));
     height: min(var(--_size), calc(100dvh - 2 * var(--_inset)));
+    border-width: 0;
     border-bottom-width: 1px;
     --_from: translateY(-100%);
   }
@@ -57,6 +74,7 @@ const styles = css`
     inset: auto var(--_inset) var(--_inset) var(--_inset);
     width: calc(100vw - 2 * var(--_inset));
     height: min(var(--_size), calc(100dvh - 2 * var(--_inset)));
+    border-width: 0;
     border-top-width: 1px;
     --_from: translateY(100%);
   }
@@ -83,7 +101,7 @@ const styles = css`
     justify-content: center;
     width: var(--ray-control-height-xs);
     height: var(--ray-control-height-xs);
-    margin-left: auto;
+    margin-inline-start: auto;
     padding: 0;
     color: var(--ray-muted-foreground);
     background: transparent;
@@ -101,7 +119,7 @@ const styles = css`
 export class RayDrawer extends RayDialog {
   static properties = {
     ...RayDialog.properties,
-    position: { type: String, reflect: true, default: "right" },
+    position: { type: String, reflect: true, default: "end" },
     size: { type: String, reflect: true, default: "md" },
     modeless: { type: Boolean, reflect: true },
     floating: { type: Boolean, reflect: true },

package/components/icon/icon.js

@@ -1,7 +1,8 @@
 // <ray-icon name="…">: an icon of the registry (setIcons), so the app's own
 // markup uses the same set as the components. Decorative unless `label`.
 // `filled` draws the icon's filled version (a state: active, selected,
-// favorite), or the outline one when it has none.
+// favorite), or the outline one when it has none. `mirror` mirrors it right
+// to left (a back arrow), as the roles that point along the text (ui.next…) are.
 
 import { RayElement, css, define } from "../../core/core.js";
 
@@ -13,6 +14,7 @@ const styles = css`
      size) must not reach the icon. size= overrides it inline. */
   :host { --_size: 1em; display: inline-flex; vertical-align: -0.125em; line-height: 1; }
   .icon svg { width: var(--_size); height: var(--_size); }
+  :host([mirror]) .icon:dir(rtl) > svg { transform: scaleX(-1); }
 `;
 
 export class RayIcon extends RayElement {
@@ -23,6 +25,7 @@ export class RayIcon extends RayElement {
     color: { type: String, reflect: true },
     stroke: { type: Number },
     filled: { type: Boolean, reflect: true },
+    mirror: { type: Boolean, reflect: true },
   };
   static styles = [styles];
   static template = `<span class="icon" part="icon" data-ray-icon=""></span>`;

package/components/icon-button/icon-button.js

@@ -5,6 +5,10 @@ import { css, define } from "../../core/core.js";
 import { RayButton } from "../button/button.js";
 
 const styles = css`
+  /* The square on the host too: the inner button's flex: 1 (a 0 basis) gives
+     it no width of its own to an auto grid track or a shrink-to-fit box. A
+     width set on the element from outside still wins. */
+  :host { width: var(--_h); }
   .button { width: var(--_h); padding: 0; }
   .label { font-size: calc(var(--_fs) * 1.15); }
   ::slotted(svg) { width: 1.15em; height: 1.15em; }

package/components/indicator/indicator.js

@@ -21,7 +21,7 @@ const styles = css`
     position: absolute;
     z-index: 1;
     top: var(--_top);
-    left: var(--_left);
+    inset-inline-start: var(--_left);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -34,6 +34,7 @@ const styles = css`
     transform: translate(-50%, -50%);
     pointer-events: none;
   }
+  .indicator:dir(rtl) { transform: translate(50%, -50%); }
   .indicator[data-label] {
     height: auto;
     min-height: var(--_size);

package/components/input/input.js

@@ -4,6 +4,8 @@
 import { css, define } from "../../core/core.js";
 import { sizeStyles, radiusStyles } from "../../core/styles.js";
 import { FieldControl, fieldStyles, boxStyles, fieldTemplate } from "../../core/form.js";
+import { syncHighlight, textLayerStyles } from "../../core/textlayer.js";
+import { syncComplete, completeStyles } from "../../core/complete.js";
 
 const styles = css`
   .control[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
@@ -23,8 +25,11 @@ export class RayInput extends FieldControl {
     placeholder: { type: String },
     readonly: { type: Boolean, reflect: true },
     autofocus: { type: Boolean },
+    highlight: { attribute: false },
+    complete: { attribute: false },
+    suggestionsLabel: { type: String, default: "Suggestions" },
   };
-  static styles = [sizeStyles, radiusStyles, fieldStyles, boxStyles, styles];
+  static styles = [sizeStyles, radiusStyles, fieldStyles, boxStyles, textLayerStyles, completeStyles, styles];
   static template = fieldTemplate(`<input id="control" class="control" part="input">`);
 
   static get observedAttributes() {
@@ -64,6 +69,13 @@ export class RayInput extends FieldControl {
     c.readOnly = Boolean(this.readonly);
     this.syncField();
     this._commit();
+    syncHighlight(this);
+    syncComplete(this);
+  }
+
+  /** Runs `highlight` again (what it marks changed, not the text). */
+  refreshHighlight() {
+    syncHighlight(this);
   }
 
   _commit() {

package/components/menu/menu.js

@@ -3,7 +3,11 @@
 // context menu opened at the pointer over the trigger area.
 //
 // Choosing an item fires `ray-select` ({ value, item }) on the menu and
-// closes it (unless keep-open).
+// closes it (unless keep-open). An item of type="checkbox" toggles its
+// `checked` first; one of type="radio" checks itself and unchecks the radio
+// items of the menu with the same `name`. Before its trigger opens it, the
+// menu fires a cancelable `ray-request-open` ({ event }): the place to fill
+// items that depend on what was clicked, read only after it.
 //
 // With `native` and a native host that offers "popup_menu" (core/host.js; a
 // std/ui window with core/raylang.js), it opens as the system's context menu
@@ -64,6 +68,7 @@ export class RayMenu extends Floating {
     if (this.context) {
       t.addEventListener("contextmenu", (e) => {
         e.preventDefault();
+        if (!this._requestOpen(e)) return;
         if (this._native()) {
           this.popupNative();
           return;
@@ -84,12 +89,12 @@ export class RayMenu extends Floating {
       });
       return;
     }
-    t.addEventListener("click", () => {
+    t.addEventListener("click", (e) => {
       if (this._native()) {
-        this.popupNative();
+        if (this._requestOpen(e)) this.popupNative();
         return;
       }
-      if (!this.open && this.justClosed()) return;
+      if (!this.open && (this.justClosed() || !this._requestOpen(e))) return;
       this._focusOnOpen = "first";
       this.toggle();
     });
@@ -98,11 +103,20 @@ export class RayMenu extends Floating {
         e.preventDefault();
         this._focusOnOpen = e.key === "ArrowDown" ? "first" : "last";
         if (this.open) this._focus(this._focusOnOpen);
-        else this.open = true;
+        else if (this._requestOpen(e)) this.open = true;
       }
     });
   }
 
+  /**
+   * Fires ray-request-open before the trigger opens the menu; false when a
+   * listener cancelled it. It comes before the items are read: an app's own
+   * listener on the trigger may run after the menu's.
+   */
+  _requestOpen(event) {
+    return this.emit("ray-request-open", { event }, { cancelable: true });
+  }
+
   _native() {
     return Boolean(this.native) && hostCan("popup_menu");
   }
@@ -116,7 +130,7 @@ export class RayMenu extends Floating {
     const entries = [...this.querySelectorAll("ray-menu-item, ray-menu-divider")].filter((el) => el.closest("ray-menu") === this);
     const items = entries.map((el) => (el.localName === "ray-menu-divider"
       ? { separator: true }
-      : { title: itemLabel(el), enabled: !el.disabled }));
+      : { title: itemLabel(el), enabled: !el.disabled, ...(el.checkable ? { checked: Boolean(el.checked) } : {}) }));
     const index = await getHost().popupMenu(items);
     const item = index === null || index === undefined ? null : entries[index];
     if (!item || item.localName !== "ray-menu-item") return null;
@@ -193,6 +207,13 @@ export class RayMenu extends Floating {
 
   _choose(item) {
     if (item.disabled) return;
+    if (item.type === "checkbox") item.checked = !item.checked;
+    else if (item.type === "radio") {
+      for (const other of this.items) {
+        if (other !== item && other.type === "radio" && (other.name ?? "") === (item.name ?? "")) other.checked = false;
+      }
+      item.checked = true;
+    }
     this.emit("ray-select", { value: item.value ?? item.textContent.trim(), item });
     if (!this.keepOpen) this.open = false;
   }
@@ -227,10 +248,14 @@ const itemStyles = css`
   :host([color]:hover), :host([color]:focus) { background: var(--_light); color: var(--_light-color); }
   :host([disabled]) { color: var(--ray-muted-foreground); background: transparent; cursor: not-allowed; opacity: 0.6; }
   .label { flex: 1; white-space: nowrap; }
+  /* A checkbox or radio item keeps a column for its mark, checked or not. */
+  .mark { display: none; flex: none; width: 1rem; height: 1rem; visibility: hidden; }
+  :host([type="checkbox"]) .mark, :host([type="radio"]) .mark { display: inline-flex; }
+  :host([checked]) .mark { visibility: visible; }
   .section { display: inline-flex; align-items: center; color: var(--ray-muted-foreground); }
   :host([color]) .section { color: inherit; }
   .section:not([data-filled]) { display: none; }
-  .right { margin-left: var(--ray-space-6); font-size: var(--ray-font-size-xs); }
+  .right { margin-inline-start: var(--ray-space-6); font-size: var(--ray-font-size-xs); }
   ::slotted(svg) { width: 1rem; height: 1rem; }
 `;
 
@@ -239,9 +264,12 @@ export class RayMenuItem extends RayElement {
     value: { type: String, reflect: true },
     disabled: { type: Boolean, reflect: true },
     color: { type: String, reflect: true },
+    type: { type: String, reflect: true, default: "item" },
+    checked: { type: Boolean, reflect: true },
+    name: { type: String, reflect: true },
   };
   static styles = [itemStyles];
-  static template = `<span class="section left" part="left-section"><slot name="left"></slot></span><span class="label" part="label"><slot></slot></span><span class="section right" part="right-section"><slot name="right"></slot></span>`;
+  static template = `<span class="mark" part="mark" aria-hidden="true" data-ray-icon="ui.checked"></span><span class="section left" part="left-section"><slot name="left"></slot></span><span class="label" part="label"><slot></slot></span><span class="section right" part="right-section"><slot name="right"></slot></span>`;
 
   constructor() {
     super();
@@ -252,8 +280,15 @@ export class RayMenuItem extends RayElement {
     }
   }
 
+  /** Whether it is a checkbox or radio item. */
+  get checkable() {
+    return this.type === "checkbox" || this.type === "radio";
+  }
+
   update() {
     this.tabIndex = -1;
+    this.internals.role = this.type === "checkbox" ? "menuitemcheckbox" : this.type === "radio" ? "menuitemradio" : "menuitem";
+    this.internals.ariaChecked = this.checkable ? String(Boolean(this.checked)) : null;
     this.internals.ariaDisabled = this.disabled ? "true" : "false";
     if (this.color) applyColor(this, this.color);
   }