@tmorrow/cre8-wc 1.2.2 → 1.2.3

package/lib/cre8-form-element-7TQ7UIBX.js

@@ -0,0 +1,247 @@
+import { property as h } from "lit/decorators.js";
+import { Cre8Element as f } from "./components/cre8-element.js";
+let b = class extends Event {
+  constructor(t, s, i, e) {
+    super("context-request", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = s, this.callback = i, this.subscribe = e ?? !1;
+  }
+};
+class v {
+  get value() {
+    return this.o;
+  }
+  set value(t) {
+    this.setValue(t);
+  }
+  setValue(t, s = !1) {
+    const i = s || !Object.is(t, this.o);
+    this.o = t, i && this.updateObservers();
+  }
+  constructor(t) {
+    this.subscriptions = /* @__PURE__ */ new Map(), this.updateObservers = () => {
+      for (const [s, { disposer: i }] of this.subscriptions) s(this.o, i);
+    }, t !== void 0 && (this.value = t);
+  }
+  addCallback(t, s, i) {
+    if (!i) return void t(this.value);
+    this.subscriptions.has(t) || this.subscriptions.set(t, { disposer: () => {
+      this.subscriptions.delete(t);
+    }, consumerHost: s });
+    const { disposer: e } = this.subscriptions.get(t);
+    t(this.value, e);
+  }
+  clearCallbacks() {
+    this.subscriptions.clear();
+  }
+}
+let x = class extends Event {
+  constructor(t, s) {
+    super("context-provider", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = s;
+  }
+};
+class d extends v {
+  constructor(t, s, i) {
+    super(s.context !== void 0 ? s.initialValue : i), this.onContextRequest = (e) => {
+      if (e.context !== this.context) return;
+      const a = e.contextTarget ?? e.composedPath()[0];
+      a !== this.host && (e.stopPropagation(), this.addCallback(e.callback, a, e.subscribe));
+    }, this.onProviderRequest = (e) => {
+      if (e.context !== this.context || (e.contextTarget ?? e.composedPath()[0]) === this.host) return;
+      const a = /* @__PURE__ */ new Set();
+      for (const [r, { consumerHost: l }] of this.subscriptions) a.has(r) || (a.add(r), l.dispatchEvent(new b(this.context, l, r, !0)));
+      e.stopPropagation();
+    }, this.host = t, s.context !== void 0 ? this.context = s.context : this.context = s, this.attachListeners(), this.host.addController?.(this);
+  }
+  attachListeners() {
+    this.host.addEventListener("context-request", this.onContextRequest), this.host.addEventListener("context-provider", this.onProviderRequest);
+  }
+  hostConnected() {
+    this.host.dispatchEvent(new x(this.context, this.host));
+  }
+}
+function p({ context: n }) {
+  return (t, s) => {
+    const i = /* @__PURE__ */ new WeakMap();
+    if (typeof s == "object") return { get() {
+      return t.get.call(this);
+    }, set(e) {
+      return i.get(this).setValue(e), t.set.call(this, e);
+    }, init(e) {
+      return i.set(this, new d(this, { context: n, initialValue: e })), e;
+    } };
+    {
+      t.constructor.addInitializer(((r) => {
+        i.set(r, new d(r, { context: n }));
+      }));
+      const e = Object.getOwnPropertyDescriptor(t, s);
+      let a;
+      if (e === void 0) {
+        const r = /* @__PURE__ */ new WeakMap();
+        a = { get() {
+          return r.get(this);
+        }, set(l) {
+          i.get(this).setValue(l), r.set(this, l);
+        }, configurable: !0, enumerable: !0 };
+      } else {
+        const r = e.set;
+        a = { ...e, set(l) {
+          i.get(this).setValue(l), r?.call(this, l);
+        } };
+      }
+      return void Object.defineProperty(t, s, a);
+    }
+  };
+}
+const m = Symbol("cre8-form-internals"), y = Symbol("cre8-form-state");
+var V = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, u = (n, t, s, i) => {
+  for (var e = i > 1 ? void 0 : i ? _(t, s) : t, a = n.length - 1, r; a >= 0; a--)
+    (r = n[a]) && (e = (i ? r(t, s, e) : r(e)) || e);
+  return i && e && V(t, s, e), e;
+};
+const c = class c extends f {
+  constructor() {
+    super(), this.internalValue = "", this.defaultValue = "", this._formState = {
+      value: "",
+      disabled: !1,
+      required: !1,
+      isError: !1,
+      isSuccess: !1
+    }, this._internals = this.attachInternals();
+  }
+  get value() {
+    return this.internalValue;
+  }
+  /**
+   * Sets the value of the form field.
+   * 1. Stores the new value so it can be retrieved by the getter.
+   * 2. Sets the current value of the control via ElementInternals.
+   * 3. Updates the actual field element.
+   * 4. Updates the form state context.
+   * 5. Triggers a re-render.
+   */
+  set value(t) {
+    const s = this.value;
+    this.internalValue = t, this.type !== "checkbox" && this.type !== "radio" && this._internals?.setFormValue(t), this.updateField(), this.updateFormState(), this.requestUpdate("value", s);
+  }
+  /**
+   * Updates the form state context for descendant consumption
+   */
+  updateFormState() {
+    this._formState = {
+      value: this.internalValue,
+      disabled: this.disabled ?? !1,
+      required: this.required ?? !1,
+      isError: this.isError ?? !1,
+      isSuccess: this.isSuccess ?? !1,
+      name: this.name
+    };
+  }
+  /**
+   * Updates the actual field element's value
+   */
+  updateField() {
+    this.field && this.internalValue !== void 0 && (this.field.value = this.internalValue ?? "");
+  }
+  /**
+   * Lifecycle hook called after first render
+   */
+  firstUpdated() {
+    this.type !== "checkbox" && this.type !== "radio" && (this.defaultValue = this.value || this.getAttribute("value") || ""), this.updateField(), this.updateFormState();
+  }
+  /**
+   * Called when properties change
+   */
+  updated(t) {
+    super.updated(t), (t.has("disabled") || t.has("required") || t.has("isError") || t.has("isSuccess") || t.has("name")) && this.updateFormState();
+  }
+  /**
+   * Form lifecycle callback - called when the form is reset
+   */
+  formResetCallback() {
+    this.value = this.defaultValue, this.updateField();
+  }
+  /**
+   * Form lifecycle callback - called when the element is disabled via fieldset
+   */
+  formDisabledCallback(t) {
+    this.disabled = t;
+  }
+  /**
+   * Form lifecycle callback - called when form state is restored
+   */
+  formStateRestoreCallback(t, s) {
+    typeof t == "string" && (this.value = t);
+  }
+  /**
+   * Gets the form associated with this element
+   */
+  get form() {
+    return this._internals?.form ?? null;
+  }
+  /**
+   * Gets the validation message
+   */
+  get validationMessage() {
+    return this._internals?.validationMessage ?? "";
+  }
+  /**
+   * Gets the validity state
+   */
+  get validity() {
+    return this._internals?.validity;
+  }
+  /**
+   * Gets whether the element will be validated
+   */
+  get willValidate() {
+    return this._internals?.willValidate ?? !1;
+  }
+  /**
+   * Checks validity and reports to the user
+   */
+  reportValidity() {
+    return this._internals?.reportValidity() ?? !0;
+  }
+  /**
+   * Checks validity without reporting
+   */
+  checkValidity() {
+    return this._internals?.checkValidity() ?? !0;
+  }
+  /**
+   * Sets a custom validity message
+   */
+  setCustomValidity(t) {
+    this._internals && this.field && (t ? this._internals.setValidity({ customError: !0 }, t, this.field) : this._internals.setValidity({}));
+  }
+};
+c.formAssociated = !0;
+let o = c;
+u([
+  p({ context: m })
+], o.prototype, "_internals", 2);
+u([
+  p({ context: y })
+], o.prototype, "_formState", 2);
+u([
+  h()
+], o.prototype, "name", 2);
+u([
+  h({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+u([
+  h({ type: Boolean, reflect: !0 })
+], o.prototype, "required", 2);
+u([
+  h({ type: Boolean, reflect: !0 })
+], o.prototype, "isError", 2);
+u([
+  h({ type: Boolean, reflect: !0 })
+], o.prototype, "isSuccess", 2);
+u([
+  h()
+], o.prototype, "value", 1);
+export {
+  o as C,
+  m as f,
+  b as s
+};

package/lib/design-tokens/brands/notion/tokens_notion.module.d.ts

@@ -0,0 +1,3 @@
+declare const notion: import("lit").CSSResult;
+export default notion;
+//# sourceMappingURL=tokens_notion.module.d.ts.map

package/lib/design-tokens/brands/notion/tokens_notion.module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens_notion.module.d.ts","sourceRoot":"","sources":["../../../../design-tokens/brands/notion/tokens_notion.module.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,MAAM,yBAuFX,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/design-tokens/brands/notion/tokens_notion.module.js

@@ -0,0 +1,91 @@
+import { css } from "lit";
+const notion = css `
+/**
+ * Cre8 Theme: Notion
+ * Generated by Cre8 Brand Themer
+ * 
+ * Usage: Include this CSS file after the Cre8 component styles.
+ * All Cre8 components will automatically pick up these overrides.
+ */
+
+:root {
+  /* ──────────── Brand Colors ──────────── */
+  --cre8-color-bg-brand-subtle:    #f5f5f5;
+  --cre8-color-bg-brand-strong:    #000000;
+  --cre8-color-bg-brand-xstrong:   #37352f;
+  --cre8-color-content-brand:      #000000;
+  --cre8-color-border-brand:       #000000;
+
+  /* ──────────── Backgrounds ──────────── */
+  --cre8-color-bg-default:         #ffffff;
+  --cre8-color-bg-subtle:          #fafafa;
+  --cre8-color-bg-muted:           #f2f2f2;
+  --cre8-color-bg-inverse:         #37352f;
+
+  /* ──────────── Content / Text ──────────── */
+  --cre8-color-content-default:    #292823;
+  --cre8-color-content-subtle:     #7c776a;
+  --cre8-color-content-muted:      #ada99f;
+  --cre8-color-content-inverse:    #ffffff;
+
+  /* ──────────── Borders ──────────── */
+  --cre8-color-border-default:     #e8e7e4;
+  --cre8-color-border-subtle:      #ffffff;
+  --cre8-color-border-strong:      #c5c2bb;
+  --cre8-color-border-inverse:     #605d52;
+
+  /* ──────────── Buttons ──────────── */
+  --cre8-color-button-primary-background:       #000000;
+  --cre8-color-button-primary-background-hover: #000000;
+  --cre8-color-button-primary-border:           #000000;
+  --cre8-color-button-primary-content:          #ffffff;
+  --cre8-color-button-secondary-background:     transparent;
+  --cre8-color-button-secondary-border:         #000000;
+  --cre8-color-button-tertiary-background:      transparent;
+
+  /* ──────────── Links ──────────── */
+  --cre8-color-link-default:       #000000;
+  --cre8-color-link-hover:         #000000;
+  --cre8-color-link-visited:       #000000;
+  --cre8-color-link-inverse:       #2eaadc;
+
+  /* ──────────── Header ──────────── */
+  --cre8-header-background:                #37352f;
+  --cre8-header-top-background:            #292823;
+  --cre8-header-bottom-background:         #45423b;
+  --cre8-header-middle-border-bottom-color:#525047;
+  --cre8-color-header-bg-default:          #37352f;
+
+  /* ──────────── Status Colors ──────────── */
+  --cre8-color-bg-error:           #fef2f2;
+  --cre8-color-border-error:       #ef4444;
+  --cre8-color-content-error:      #dc2626;
+  --cre8-color-bg-warning:         #fffbeb;
+  --cre8-color-border-warning:     #f59e0b;
+  --cre8-color-content-warning:    #d97706;
+  --cre8-color-bg-success:         #f0fdf4;
+  --cre8-color-border-success:     #22c55e;
+  --cre8-color-content-success:    #16a34a;
+  --cre8-color-bg-info:            #f5f5f5;
+  --cre8-color-border-info:        #000000;
+  --cre8-color-content-info:       #000000;
+
+  /* ──────────── Border Radius ──────────── */
+  --cre8-border-radius-default:    6px;
+  --cre8-border-radius-lg:         9px;
+  --cre8-border-radius-button:     6px;
+  --cre8-border-radius-card:       9px;
+  --cre8-border-radius-input:      6px;
+
+  /* ──────────── Shadows ──────────── */
+  --cre8-shadow-default:           0 1px 3px rgba(0,0,0,0.08);
+  --cre8-shadow-elevated:          0 4px 12px rgba(0,0,0,0.12);
+  --cre8-shadow-card:              0 2px 8px rgba(0,0,0,0.06);
+
+  /* ──────────── Typography ──────────── */
+  --cre8-font-family-default:      'Assisstant', system-ui, sans-serif;
+
+}
+`;
+export default notion;
+//# sourceMappingURL=tokens_notion.module.js.map

package/lib/design-tokens/brands/notion/tokens_notion.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens_notion.module.js","sourceRoot":"","sources":["../../../../design-tokens/brands/notion/tokens_notion.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFjB,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { css } from \"lit\";\n\nconst notion = css`\n/**\n * Cre8 Theme: Notion\n * Generated by Cre8 Brand Themer\n * \n * Usage: Include this CSS file after the Cre8 component styles.\n * All Cre8 components will automatically pick up these overrides.\n */\n\n:root {\n  /* ──────────── Brand Colors ──────────── */\n  --cre8-color-bg-brand-subtle:    #f5f5f5;\n  --cre8-color-bg-brand-strong:    #000000;\n  --cre8-color-bg-brand-xstrong:   #37352f;\n  --cre8-color-content-brand:      #000000;\n  --cre8-color-border-brand:       #000000;\n\n  /* ──────────── Backgrounds ──────────── */\n  --cre8-color-bg-default:         #ffffff;\n  --cre8-color-bg-subtle:          #fafafa;\n  --cre8-color-bg-muted:           #f2f2f2;\n  --cre8-color-bg-inverse:         #37352f;\n\n  /* ──────────── Content / Text ──────────── */\n  --cre8-color-content-default:    #292823;\n  --cre8-color-content-subtle:     #7c776a;\n  --cre8-color-content-muted:      #ada99f;\n  --cre8-color-content-inverse:    #ffffff;\n\n  /* ──────────── Borders ──────────── */\n  --cre8-color-border-default:     #e8e7e4;\n  --cre8-color-border-subtle:      #ffffff;\n  --cre8-color-border-strong:      #c5c2bb;\n  --cre8-color-border-inverse:     #605d52;\n\n  /* ──────────── Buttons ──────────── */\n  --cre8-color-button-primary-background:       #000000;\n  --cre8-color-button-primary-background-hover: #000000;\n  --cre8-color-button-primary-border:           #000000;\n  --cre8-color-button-primary-content:          #ffffff;\n  --cre8-color-button-secondary-background:     transparent;\n  --cre8-color-button-secondary-border:         #000000;\n  --cre8-color-button-tertiary-background:      transparent;\n\n  /* ──────────── Links ──────────── */\n  --cre8-color-link-default:       #000000;\n  --cre8-color-link-hover:         #000000;\n  --cre8-color-link-visited:       #000000;\n  --cre8-color-link-inverse:       #2eaadc;\n\n  /* ──────────── Header ──────────── */\n  --cre8-header-background:                #37352f;\n  --cre8-header-top-background:            #292823;\n  --cre8-header-bottom-background:         #45423b;\n  --cre8-header-middle-border-bottom-color:#525047;\n  --cre8-color-header-bg-default:          #37352f;\n\n  /* ──────────── Status Colors ──────────── */\n  --cre8-color-bg-error:           #fef2f2;\n  --cre8-color-border-error:       #ef4444;\n  --cre8-color-content-error:      #dc2626;\n  --cre8-color-bg-warning:         #fffbeb;\n  --cre8-color-border-warning:     #f59e0b;\n  --cre8-color-content-warning:    #d97706;\n  --cre8-color-bg-success:         #f0fdf4;\n  --cre8-color-border-success:     #22c55e;\n  --cre8-color-content-success:    #16a34a;\n  --cre8-color-bg-info:            #f5f5f5;\n  --cre8-color-border-info:        #000000;\n  --cre8-color-content-info:       #000000;\n\n  /* ──────────── Border Radius ──────────── */\n  --cre8-border-radius-default:    6px;\n  --cre8-border-radius-lg:         9px;\n  --cre8-border-radius-button:     6px;\n  --cre8-border-radius-card:       9px;\n  --cre8-border-radius-input:      6px;\n\n  /* ──────────── Shadows ──────────── */\n  --cre8-shadow-default:           0 1px 3px rgba(0,0,0,0.08);\n  --cre8-shadow-elevated:          0 4px 12px rgba(0,0,0,0.12);\n  --cre8-shadow-card:              0 2px 8px rgba(0,0,0,0.06);\n\n  /* ──────────── Typography ──────────── */\n  --cre8-font-family-default:      'Assisstant', system-ui, sans-serif;\n\n}\n`;\n\nexport default notion;"]}

package/mcp-manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.1",
+  "version": "1.2.2",
   "library": "@tmorrow/cre8-wc",
   "tagPrefix": "cre8",
   "description": "cre8 Web Components is a library of presentational UI web components to be consumed by # web applications.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tmorrow/cre8-wc",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "cre8 Web Components is a library of presentational UI web components to be consumed by # web applications.",
   "license": "BSD-3-Clause",
   "scripts": {
@@ -160,4 +160,4 @@
     "*.ts": "eslint --cache --fix"
   },
   "customElements": ".storybook/custom-elements.json"
-}
+}