@editora/ui-core 0.1.9 → 0.1.10

package/dist/control-group.cjs.js

@@ -0,0 +1,80 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("./ElementBase-1b301e7f.js"),l=`
+  :host {
+    --ui-control-group-gap: 10px;
+    --ui-control-group-row-gap: 10px;
+    --ui-control-group-padding: 0;
+    --ui-control-group-radius: 0;
+    --ui-control-group-bg: transparent;
+    --ui-control-group-border: 0;
+    color-scheme: light dark;
+    display: block;
+    min-width: 0;
+  }
+
+  .group {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-control-group-gap);
+    box-sizing: border-box;
+    padding: var(--ui-control-group-padding);
+    border: var(--ui-control-group-border);
+    border-radius: var(--ui-control-group-radius);
+    background: var(--ui-control-group-bg);
+  }
+
+  :host([orientation="horizontal"]) .group {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: var(--ui-control-group-gap);
+    row-gap: var(--ui-control-group-row-gap);
+  }
+
+  :host([variant="soft"]) {
+    --ui-control-group-padding: 10px;
+    --ui-control-group-radius: 14px;
+    --ui-control-group-bg: color-mix(in srgb, var(--ui-color-primary, #2563eb) 6%, transparent);
+    --ui-control-group-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 52%, transparent);
+  }
+
+  :host([variant="surface"]) {
+    --ui-control-group-padding: 10px;
+    --ui-control-group-radius: 14px;
+    --ui-control-group-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 97%, transparent);
+    --ui-control-group-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 58%, transparent);
+  }
+
+  :host([density="compact"]) {
+    --ui-control-group-gap: 8px;
+    --ui-control-group-row-gap: 8px;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-control-group-gap: 12px;
+    --ui-control-group-row-gap: 12px;
+  }
+
+  :host([hidden]),
+  .group[hidden] {
+    display: none !important;
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-control-group-bg: Canvas;
+      --ui-control-group-border: 1px solid CanvasText;
+    }
+
+    .group {
+      forced-color-adjust: none;
+      background: var(--ui-control-group-bg);
+      border-color: CanvasText;
+    }
+  }
+`;class i extends a.ElementBase{static get observedAttributes(){return["label","aria-label","aria-labelledby","aria-describedby","orientation","variant","density","hidden"]}connectedCallback(){super.connectedCallback(),this._syncA11y()}attributeChangedCallback(r,o,t){o!==t&&(r==="label"||r.startsWith("aria-"))&&this._syncA11y()}render(){this.setContent(`
+      <style>${l}</style>
+      <div class="group" part="group" role="group">
+        <slot></slot>
+      </div>
+    `),this._syncA11y()}_syncA11y(){const r=this.root.querySelector(".group");if(!r)return;const o=this.getAttribute("label")||this.getAttribute("aria-label");o?r.setAttribute("aria-label",o):r.removeAttribute("aria-label");const t=this.getAttribute("aria-labelledby");t?r.setAttribute("aria-labelledby",t):r.removeAttribute("aria-labelledby");const e=this.getAttribute("aria-describedby");e?r.setAttribute("aria-describedby",e):r.removeAttribute("aria-describedby")}}typeof customElements<"u"&&!customElements.get("ui-control-group")&&customElements.define("ui-control-group",i);exports.UIControlGroup=i;

package/dist/control-group.esm.js

@@ -0,0 +1,110 @@
+import { E as i } from "./ElementBase-909688f3.mjs";
+const a = `
+  :host {
+    --ui-control-group-gap: 10px;
+    --ui-control-group-row-gap: 10px;
+    --ui-control-group-padding: 0;
+    --ui-control-group-radius: 0;
+    --ui-control-group-bg: transparent;
+    --ui-control-group-border: 0;
+    color-scheme: light dark;
+    display: block;
+    min-width: 0;
+  }
+
+  .group {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-control-group-gap);
+    box-sizing: border-box;
+    padding: var(--ui-control-group-padding);
+    border: var(--ui-control-group-border);
+    border-radius: var(--ui-control-group-radius);
+    background: var(--ui-control-group-bg);
+  }
+
+  :host([orientation="horizontal"]) .group {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: var(--ui-control-group-gap);
+    row-gap: var(--ui-control-group-row-gap);
+  }
+
+  :host([variant="soft"]) {
+    --ui-control-group-padding: 10px;
+    --ui-control-group-radius: 14px;
+    --ui-control-group-bg: color-mix(in srgb, var(--ui-color-primary, #2563eb) 6%, transparent);
+    --ui-control-group-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 52%, transparent);
+  }
+
+  :host([variant="surface"]) {
+    --ui-control-group-padding: 10px;
+    --ui-control-group-radius: 14px;
+    --ui-control-group-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 97%, transparent);
+    --ui-control-group-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 58%, transparent);
+  }
+
+  :host([density="compact"]) {
+    --ui-control-group-gap: 8px;
+    --ui-control-group-row-gap: 8px;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-control-group-gap: 12px;
+    --ui-control-group-row-gap: 12px;
+  }
+
+  :host([hidden]),
+  .group[hidden] {
+    display: none !important;
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-control-group-bg: Canvas;
+      --ui-control-group-border: 1px solid CanvasText;
+    }
+
+    .group {
+      forced-color-adjust: none;
+      background: var(--ui-control-group-bg);
+      border-color: CanvasText;
+    }
+  }
+`;
+class l extends i {
+  static get observedAttributes() {
+    return ["label", "aria-label", "aria-labelledby", "aria-describedby", "orientation", "variant", "density", "hidden"];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._syncA11y();
+  }
+  attributeChangedCallback(r, o, t) {
+    o !== t && (r === "label" || r.startsWith("aria-")) && this._syncA11y();
+  }
+  render() {
+    this.setContent(`
+      <style>${a}</style>
+      <div class="group" part="group" role="group">
+        <slot></slot>
+      </div>
+    `), this._syncA11y();
+  }
+  _syncA11y() {
+    const r = this.root.querySelector(".group");
+    if (!r)
+      return;
+    const o = this.getAttribute("label") || this.getAttribute("aria-label");
+    o ? r.setAttribute("aria-label", o) : r.removeAttribute("aria-label");
+    const t = this.getAttribute("aria-labelledby");
+    t ? r.setAttribute("aria-labelledby", t) : r.removeAttribute("aria-labelledby");
+    const e = this.getAttribute("aria-describedby");
+    e ? r.setAttribute("aria-describedby", e) : r.removeAttribute("aria-describedby");
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-control-group") && customElements.define("ui-control-group", l);
+export {
+  l as UIControlGroup
+};