@editora/ui-core 0.1.8 → 0.1.10

package/dist/section.cjs.js

@@ -0,0 +1,167 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("./ElementBase-1b301e7f.js"),c=`
+  :host {
+    display: block;
+    width: 100%;
+    color-scheme: light dark;
+
+    --ui-section-pad-y: 14px;
+    --ui-section-pad-x: 0px;
+    --ui-section-radius: 14px;
+    --ui-section-bg: transparent;
+    --ui-section-text: inherit;
+    --ui-section-border: transparent;
+    --ui-section-shadow: none;
+    --ui-section-accent: var(--ui-color-primary, #2563eb);
+  }
+
+  .section {
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--ui-section-pad-y) var(--ui-section-pad-x);
+    border-radius: var(--ui-section-radius);
+    background: var(--ui-section-bg);
+    color: var(--ui-section-text);
+    border: 1px solid var(--ui-section-border);
+    box-shadow: var(--ui-section-shadow);
+    transition:
+      background-color 180ms ease,
+      border-color 180ms ease,
+      box-shadow 180ms ease;
+  }
+
+  :host([size="small"]) {
+    --ui-section-pad-y: 8px;
+  }
+
+  :host([size="medium"]) {
+    --ui-section-pad-y: 14px;
+  }
+
+  :host([size="large"]) {
+    --ui-section-pad-y: 22px;
+  }
+
+  :host([density="compact"]) {
+    --ui-section-pad-x: 2px;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-section-pad-x: 8px;
+  }
+
+  :host([radius="none"]) {
+    --ui-section-radius: 0px;
+  }
+
+  :host([radius="sm"]) {
+    --ui-section-radius: 8px;
+  }
+
+  :host([radius="md"]) {
+    --ui-section-radius: 12px;
+  }
+
+  :host([radius="lg"]) {
+    --ui-section-radius: 16px;
+  }
+
+  :host([radius="xl"]) {
+    --ui-section-radius: 24px;
+  }
+
+  :host([variant="surface"]) {
+    --ui-section-bg: var(--ui-color-surface, #ffffff);
+    --ui-section-text: var(--ui-color-text, #0f172a);
+    --ui-section-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
+    --ui-section-shadow: 0 1px 2px rgba(2, 6, 23, 0.05);
+  }
+
+  :host([variant="muted"]) {
+    --ui-section-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 88%, #f8fafc 12%);
+    --ui-section-text: var(--ui-color-text, #0f172a);
+    --ui-section-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 62%, transparent);
+  }
+
+  :host([variant="outline"]) {
+    --ui-section-bg: transparent;
+    --ui-section-border: color-mix(in srgb, var(--ui-section-accent) 36%, var(--ui-color-border, #cbd5e1));
+  }
+
+  :host([variant="elevated"]) {
+    --ui-section-bg: var(--ui-color-surface, #ffffff);
+    --ui-section-text: var(--ui-color-text, #0f172a);
+    --ui-section-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 58%, transparent);
+    --ui-section-shadow:
+      0 1px 3px rgba(2, 6, 23, 0.08),
+      0 18px 40px rgba(2, 6, 23, 0.12);
+  }
+
+  :host([variant="gradient"]) {
+    --ui-section-bg:
+      linear-gradient(
+        140deg,
+        color-mix(in srgb, var(--ui-section-accent) 12%, var(--ui-color-surface, #ffffff)),
+        color-mix(in srgb, var(--ui-section-accent) 4%, var(--ui-color-surface, #ffffff))
+      );
+    --ui-section-text: var(--ui-color-text, #0f172a);
+    --ui-section-border: color-mix(in srgb, var(--ui-section-accent) 26%, transparent);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-section-bg: #0f172a;
+    --ui-section-text: #e2e8f0;
+    --ui-section-border: #334155;
+    --ui-section-shadow: none;
+  }
+
+  :host([tone="brand"]) { --ui-section-accent: #2563eb; }
+  :host([tone="success"]) { --ui-section-accent: #16a34a; }
+  :host([tone="warning"]) { --ui-section-accent: #d97706; }
+  :host([tone="danger"]) { --ui-section-accent: #dc2626; }
+  :host([tone="info"]) { --ui-section-accent: #0ea5e9; }
+  :host([tone="neutral"]) { --ui-section-accent: #64748b; }
+
+  :host([inset]) .section {
+    margin-inline: 8px;
+  }
+
+  :host([headless]) .section {
+    display: none !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .section {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .section {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .section {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+      box-shadow: none;
+    }
+  }
+`;function u(e){return e==="small"||e==="large"?e:"medium"}function d(e){return e==="surface"||e==="muted"||e==="outline"||e==="elevated"||e==="contrast"||e==="gradient"?e:"default"}function l(e){return e==="brand"||e==="success"||e==="warning"||e==="danger"||e==="info"?e:"neutral"}function f(e){return e==="none"||e==="sm"||e==="lg"||e==="xl"?e:"md"}function b(e){return e==="compact"?"compact":"comfortable"}class n extends a.ElementBase{static get observedAttributes(){return["size","variant","tone","radius","density","inset","headless"]}constructor(){super()}render(){const t=u(this.getAttribute("size")),i=d(this.getAttribute("variant")),o=l(this.getAttribute("tone")),s=f(this.getAttribute("radius")),r=b(this.getAttribute("density"));this.setContent(`
+      <style>${c}</style>
+      <section
+        class="section"
+        part="section"
+        data-size="${t}"
+        data-variant="${i}"
+        data-tone="${o}"
+        data-radius="${s}"
+        data-density="${r}"
+      >
+        <slot></slot>
+      </section>
+    `)}shouldRenderOnAttributeChange(t,i,o){return!0}}typeof customElements<"u"&&!customElements.get("ui-section")&&customElements.define("ui-section",n);exports.UISection=n;

package/dist/section.esm.js

@@ -0,0 +1,202 @@
+import { E as r } from "./ElementBase-909688f3.mjs";
+const a = `
+  :host {
+    display: block;
+    width: 100%;
+    color-scheme: light dark;
+
+    --ui-section-pad-y: 14px;
+    --ui-section-pad-x: 0px;
+    --ui-section-radius: 14px;
+    --ui-section-bg: transparent;
+    --ui-section-text: inherit;
+    --ui-section-border: transparent;
+    --ui-section-shadow: none;
+    --ui-section-accent: var(--ui-color-primary, #2563eb);
+  }
+
+  .section {
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--ui-section-pad-y) var(--ui-section-pad-x);
+    border-radius: var(--ui-section-radius);
+    background: var(--ui-section-bg);
+    color: var(--ui-section-text);
+    border: 1px solid var(--ui-section-border);
+    box-shadow: var(--ui-section-shadow);
+    transition:
+      background-color 180ms ease,
+      border-color 180ms ease,
+      box-shadow 180ms ease;
+  }
+
+  :host([size="small"]) {
+    --ui-section-pad-y: 8px;
+  }
+
+  :host([size="medium"]) {
+    --ui-section-pad-y: 14px;
+  }
+
+  :host([size="large"]) {
+    --ui-section-pad-y: 22px;
+  }
+
+  :host([density="compact"]) {
+    --ui-section-pad-x: 2px;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-section-pad-x: 8px;
+  }
+
+  :host([radius="none"]) {
+    --ui-section-radius: 0px;
+  }
+
+  :host([radius="sm"]) {
+    --ui-section-radius: 8px;
+  }
+
+  :host([radius="md"]) {
+    --ui-section-radius: 12px;
+  }
+
+  :host([radius="lg"]) {
+    --ui-section-radius: 16px;
+  }
+
+  :host([radius="xl"]) {
+    --ui-section-radius: 24px;
+  }
+
+  :host([variant="surface"]) {
+    --ui-section-bg: var(--ui-color-surface, #ffffff);
+    --ui-section-text: var(--ui-color-text, #0f172a);
+    --ui-section-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
+    --ui-section-shadow: 0 1px 2px rgba(2, 6, 23, 0.05);
+  }
+
+  :host([variant="muted"]) {
+    --ui-section-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 88%, #f8fafc 12%);
+    --ui-section-text: var(--ui-color-text, #0f172a);
+    --ui-section-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 62%, transparent);
+  }
+
+  :host([variant="outline"]) {
+    --ui-section-bg: transparent;
+    --ui-section-border: color-mix(in srgb, var(--ui-section-accent) 36%, var(--ui-color-border, #cbd5e1));
+  }
+
+  :host([variant="elevated"]) {
+    --ui-section-bg: var(--ui-color-surface, #ffffff);
+    --ui-section-text: var(--ui-color-text, #0f172a);
+    --ui-section-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 58%, transparent);
+    --ui-section-shadow:
+      0 1px 3px rgba(2, 6, 23, 0.08),
+      0 18px 40px rgba(2, 6, 23, 0.12);
+  }
+
+  :host([variant="gradient"]) {
+    --ui-section-bg:
+      linear-gradient(
+        140deg,
+        color-mix(in srgb, var(--ui-section-accent) 12%, var(--ui-color-surface, #ffffff)),
+        color-mix(in srgb, var(--ui-section-accent) 4%, var(--ui-color-surface, #ffffff))
+      );
+    --ui-section-text: var(--ui-color-text, #0f172a);
+    --ui-section-border: color-mix(in srgb, var(--ui-section-accent) 26%, transparent);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-section-bg: #0f172a;
+    --ui-section-text: #e2e8f0;
+    --ui-section-border: #334155;
+    --ui-section-shadow: none;
+  }
+
+  :host([tone="brand"]) { --ui-section-accent: #2563eb; }
+  :host([tone="success"]) { --ui-section-accent: #16a34a; }
+  :host([tone="warning"]) { --ui-section-accent: #d97706; }
+  :host([tone="danger"]) { --ui-section-accent: #dc2626; }
+  :host([tone="info"]) { --ui-section-accent: #0ea5e9; }
+  :host([tone="neutral"]) { --ui-section-accent: #64748b; }
+
+  :host([inset]) .section {
+    margin-inline: 8px;
+  }
+
+  :host([headless]) .section {
+    display: none !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .section {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .section {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .section {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+      box-shadow: none;
+    }
+  }
+`;
+function c(t) {
+  return t === "small" || t === "large" ? t : "medium";
+}
+function u(t) {
+  return t === "surface" || t === "muted" || t === "outline" || t === "elevated" || t === "contrast" || t === "gradient" ? t : "default";
+}
+function d(t) {
+  return t === "brand" || t === "success" || t === "warning" || t === "danger" || t === "info" ? t : "neutral";
+}
+function l(t) {
+  return t === "none" || t === "sm" || t === "lg" || t === "xl" ? t : "md";
+}
+function f(t) {
+  return t === "compact" ? "compact" : "comfortable";
+}
+class b extends r {
+  static get observedAttributes() {
+    return ["size", "variant", "tone", "radius", "density", "inset", "headless"];
+  }
+  constructor() {
+    super();
+  }
+  render() {
+    const e = c(this.getAttribute("size")), i = u(this.getAttribute("variant")), o = d(this.getAttribute("tone")), n = l(this.getAttribute("radius")), s = f(this.getAttribute("density"));
+    this.setContent(`
+      <style>${a}</style>
+      <section
+        class="section"
+        part="section"
+        data-size="${e}"
+        data-variant="${i}"
+        data-tone="${o}"
+        data-radius="${n}"
+        data-density="${s}"
+      >
+        <slot></slot>
+      </section>
+    `);
+  }
+  shouldRenderOnAttributeChange(e, i, o) {
+    return !0;
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-section") && customElements.define("ui-section", b);
+export {
+  b as UISection
+};