@rogieking/figui3 6.4.6 → 6.4.7

package/fig-lab.css

@@ -18,7 +18,8 @@ fig-field-slider {
 
 
   &:focus-within {
-    outline: 1px solid var(--figma-color-border-selected);
+    outline: var(--figma-focus-outline);
+    outline-offset: var(--figma-focus-outline-offset);
   }
 
   label {
@@ -86,8 +87,8 @@ fig-field-slider {
       --slider-tick-opacity: 1;
 
       &:has(input[type="range"]:focus-within) {
-        --slider-thumb-outline: 1.5px solid var(--figma-color-border-selected) !important;
-        --slider-thumb-outline-offset: 2px !important;
+        --slider-thumb-outline: var(--figma-focus-outline) !important;
+        --slider-thumb-outline-offset: var(--figma-focus-outline-offset) !important;
       }
 
       .fig-slider-input-container {
@@ -170,7 +171,8 @@ fig-field-slider {
         box-shadow: none !important;
       }
       &:has(input:focus) {
-        box-shadow: inset 0 0 0 1px var(--figma-color-border-selected) !important;
+        outline: var(--figma-focus-outline) !important;
+        outline-offset: var(--figma-focus-outline-offset) !important;
       }
       input {
         field-sizing: content;
@@ -218,6 +220,29 @@ fig-canvas-control {
     z-index: 1;
   }
 
+  fig-handle{
+    &[type="color"]{
+      --width: 0.75rem;
+      --height: 0.75rem;
+      --fig-handle-padding: 1px;
+      --fig-handle-shadow: none;
+      &:hover,
+      &:focus-within,
+      &[selected]:not([selected="false"]){
+        --width: 1rem;
+        --height: 1rem;
+        --fig-handle-outline-color: transparent;
+      }
+      &.dragging,
+      &:active{
+        --fig-handle-padding: 2px !important;
+      }
+      &[selected]:not([selected="false"]){
+        --fig-handle-padding: 1px;
+      }
+    }
+  }
+
   fig-handle:hover,
   fig-handle:hover .fig-handle-hit-area {
     cursor: var(--fig-lab-cursor) !important;
@@ -340,7 +365,10 @@ fig-input-angle {
     background-color: var(--figma-color-bg-secondary);
     border-radius: 100%;
     box-shadow: inset 0 0 0 1px var(--figma-color-border);
-    &:focus,
+    &:focus {
+      outline: var(--figma-focus-outline);
+      outline-offset: var(--figma-focus-outline-offset);
+    }
     &.dragging {
       outline: 0;
       box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);

package/fig-layer.css

@@ -0,0 +1,111 @@
+/* Layer */
+fig-layer {
+  --indent: var(--spacer-3);
+  display: block;
+  color: var(--figma-color-text);
+  position: relative;
+  user-select: none;
+  width: 100%;
+  padding: 0 var(--spacer-3);
+  border-radius: var(--radius-medium);
+}
+
+fig-layer:has(fig-layer) > .fig-layer-row > .fig-layer-chevron {
+  visibility: visible;
+}
+
+fig-layer > .fig-layer-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacer-1);
+  padding: var(--spacer-1) var(--spacer-2);
+  height: var(--spacer-4);
+  border-radius: var(--radius-medium);
+  position: relative;
+}
+
+fig-layer > .fig-layer-row .fig-layer-chevron {
+  mask-image: var(--icon-16-chevron);
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  display: flex;
+  visibility: hidden;
+  background: var(--figma-color-text-tertiary);
+  width: var(--spacer-3);
+  height: var(--spacer-3);
+  flex-shrink: 0;
+  transition: transform 0.15s;
+  position: absolute;
+  left: calc(var(--spacer-3) * -1);
+  top: var(--spacer-1);
+  rotate: -90deg;
+}
+
+fig-layer > .fig-layer-row:hover {
+  background: var(--figma-color-bg-secondary);
+}
+
+fig-layer > .fig-layer-row:hover .fig-layer-actions {
+  opacity: 1;
+}
+
+fig-layer > .fig-layer-row .fig-layer-icon {
+  flex-shrink: 0;
+  width: var(--spacer-3);
+  height: var(--spacer-3);
+  color: var(--figma-color-icon-tertiary);
+  margin-left: calc(var(--spacer-1) * -1);
+}
+
+fig-layer > .fig-layer-row > label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--figma-color-text);
+}
+
+fig-layer .fig-layer-actions {
+  display: flex;
+  margin-right: calc(-1 * var(--spacer-1));
+  gap: 0;
+  opacity: 0;
+  transition: opacity 0.15s;
+  flex-shrink: 0;
+}
+
+fig-layer .fig-layer-actions > * {
+  flex-shrink: 0;
+}
+
+fig-layer > fig-layer {
+  padding: 0;
+  margin-top: 1px;
+}
+
+fig-layer > fig-layer .fig-layer-row {
+  padding-left: var(--indent);
+}
+
+fig-layer:not([open]) > fig-layer,
+fig-layer[open="false"] > fig-layer {
+  display: none;
+}
+
+fig-layer[open]:not([open="false"]) > .fig-layer-row > .fig-layer-chevron {
+  rotate: 0deg;
+}
+
+fig-layer[visible="false"] > .fig-layer-row > label {
+  color: var(--figma-color-text-tertiary);
+}
+
+fig-layer[selected]:not([selected="false"]) > .fig-layer-row {
+  background: var(--figma-color-bg-selected);
+}
+
+fig-layer[selected]:not([selected="false"]) > .fig-layer-row > .fig-layer-icon {
+  color: var(--figma-color-icon);
+}

package/fig-layer.js

@@ -0,0 +1,155 @@
+// FigLayer
+class FigLayer extends HTMLElement {
+  static get observedAttributes() {
+    return ["open", "visible", "disabled"];
+  }
+
+  #chevron = null;
+  #boundHandleChevronClick = null;
+
+  connectedCallback() {
+    this.#syncA11y();
+    requestAnimationFrame(() => {
+      this.#injectChevron();
+      this.#syncA11y();
+    });
+  }
+
+  disconnectedCallback() {
+    if (this.#chevron && this.#boundHandleChevronClick) {
+      this.#chevron.removeEventListener("click", this.#boundHandleChevronClick);
+      this.#chevron.removeEventListener("keydown", this.#handleChevronKeyDown);
+    }
+  }
+
+  #injectChevron() {
+    const row = this.querySelector(":scope > .fig-layer-row");
+    if (!row) return;
+
+    if (row.querySelector(".fig-layer-chevron")) return;
+
+    this.#chevron = document.createElement("span");
+    this.#chevron.className = "fig-layer-chevron";
+    row.prepend(this.#chevron);
+
+    this.#boundHandleChevronClick = this.#handleChevronClick.bind(this);
+    this.#chevron.addEventListener("click", this.#boundHandleChevronClick);
+    this.#chevron.addEventListener("keydown", this.#handleChevronKeyDown);
+    this.#syncA11y();
+  }
+
+  #handleChevronClick(e) {
+    if (this.disabled) return;
+    e.stopPropagation();
+    this.open = !this.open;
+  }
+
+  #handleChevronKeyDown = (e) => {
+    if (e.key !== "Enter" && e.key !== " ") return;
+    e.preventDefault();
+    this.#handleChevronClick(e);
+  };
+
+  #syncA11y() {
+    if (!this.hasAttribute("role")) this.setAttribute("role", "treeitem");
+    if (!this.hasAttribute("tabindex")) {
+      this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+    }
+    this.setAttribute("aria-expanded", this.open ? "true" : "false");
+    this.setAttribute("aria-hidden", this.visible ? "false" : "true");
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+
+    if (!this.#chevron) return;
+    this.#chevron.setAttribute("role", "button");
+    this.#chevron.setAttribute("tabindex", this.disabled ? "-1" : "0");
+    this.#chevron.setAttribute(
+      "aria-label",
+      this.open ? "Collapse layer" : "Expand layer",
+    );
+    this.#chevron.setAttribute("aria-expanded", this.open ? "true" : "false");
+    this.#chevron.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+
+  get open() {
+    const attr = this.getAttribute("open");
+    return attr !== null && attr !== "false";
+  }
+
+  set open(value) {
+    const oldValue = this.open;
+    if (value) {
+      this.setAttribute("open", "true");
+    } else {
+      this.setAttribute("open", "false");
+    }
+    if (oldValue !== value) {
+      this.dispatchEvent(
+        new CustomEvent("openchange", {
+          detail: { open: value },
+          bubbles: true,
+        }),
+      );
+    }
+  }
+
+  get visible() {
+    const attr = this.getAttribute("visible");
+    return attr !== "false";
+  }
+
+  set visible(value) {
+    const oldValue = this.visible;
+    if (value) {
+      this.setAttribute("visible", "true");
+    } else {
+      this.setAttribute("visible", "false");
+    }
+    if (oldValue !== value) {
+      this.dispatchEvent(
+        new CustomEvent("visibilitychange", {
+          detail: { visible: value },
+          bubbles: true,
+        }),
+      );
+    }
+  }
+
+  get disabled() {
+    const attr = this.getAttribute("disabled");
+    return attr !== null && attr !== "false";
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+
+    if (name === "open") {
+      this.#syncA11y();
+      const isOpen = newValue !== null && newValue !== "false";
+      this.dispatchEvent(
+        new CustomEvent("openchange", {
+          detail: { open: isOpen },
+          bubbles: true,
+        }),
+      );
+    }
+
+    if (name === "visible") {
+      this.#syncA11y();
+      const isVisible = newValue !== "false";
+      this.dispatchEvent(
+        new CustomEvent("visibilitychange", {
+          detail: { visible: isVisible },
+          bubbles: true,
+        }),
+      );
+    }
+
+    if (name === "disabled") {
+      this.#syncA11y();
+    }
+  }
+}
+
+if (!customElements.get("fig-layer")) {
+  customElements.define("fig-layer", FigLayer);
+}