@eaera-com/eaera-widgets-v2 0.1.80 → 0.1.82

package/dist/design-system/themes/netr/typography/_typography-utils.scss

@@ -0,0 +1,375 @@
+// ============================================================================
+// TYPOGRAPHY UTILITIES
+// ============================================================================
+// Helper mixins and classes for applying typography tokens
+// Usage:
+//   @use '../typography/typography-utils' as typo;
+//   .my-element { @include typo.display-lg; }
+// Or use CSS classes directly: <h1 class="typo-dis-lg">
+//
+// IMPORTANT: Uses Figma naming convention:
+// - font (NOT family)
+// - sz (NOT size)
+// - line-hg (NOT line-height)
+// - wg (NOT weight)
+// - tracking (NOT letter-spacing)
+// ============================================================================
+
+// ─────────────────────────────────────────────────────────────────────────
+// MIXINS - Use in SCSS
+// ─────────────────────────────────────────────────────────────────────────
+
+// Display styles
+@mixin display-lg {
+  font-family: var(--er-typo-dis-lg-font);
+  font-size: var(--er-typo-dis-lg-sz);
+  line-height: var(--er-typo-dis-lg-line-hg);
+  font-weight: var(--er-typo-dis-lg-wg);
+  letter-spacing: var(--er-typo-dis-lg-tracking);
+}
+
+@mixin display-lg-em {
+  font-family: var(--er-typo-dis-lg-font);
+  font-size: var(--er-typo-dis-lg-sz);
+  line-height: var(--er-typo-dis-lg-line-hg);
+  font-weight: var(--er-typo-dis-lg-wg-em);
+  letter-spacing: var(--er-typo-dis-lg-tracking);
+}
+
+@mixin display-md {
+  font-family: var(--er-typo-dis-md-font);
+  font-size: var(--er-typo-dis-md-sz);
+  line-height: var(--er-typo-dis-md-line-hg);
+  font-weight: var(--er-typo-dis-md-wg);
+  letter-spacing: var(--er-typo-dis-md-tracking);
+}
+
+@mixin display-md-em {
+  font-family: var(--er-typo-dis-md-font);
+  font-size: var(--er-typo-dis-md-sz);
+  line-height: var(--er-typo-dis-md-line-hg);
+  font-weight: var(--er-typo-dis-md-wg-em);
+  letter-spacing: var(--er-typo-dis-md-tracking);
+}
+
+@mixin display-sm {
+  font-family: var(--er-typo-dis-sm-font);
+  font-size: var(--er-typo-dis-sm-sz);
+  line-height: var(--er-typo-dis-sm-line-hg);
+  font-weight: var(--er-typo-dis-sm-wg);
+  letter-spacing: var(--er-typo-dis-sm-tracking);
+}
+
+@mixin display-sm-em {
+  font-family: var(--er-typo-dis-sm-font);
+  font-size: var(--er-typo-dis-sm-sz);
+  line-height: var(--er-typo-dis-sm-line-hg);
+  font-weight: var(--er-typo-dis-sm-wg-em);
+  letter-spacing: var(--er-typo-dis-sm-tracking);
+}
+
+// Headline styles
+@mixin headline-lg {
+  font-family: var(--er-typo-head-lg-font);
+  font-size: var(--er-typo-head-lg-sz);
+  line-height: var(--er-typo-head-lg-line-hg);
+  font-weight: var(--er-typo-head-lg-wg);
+  letter-spacing: var(--er-typo-head-lg-tracking);
+}
+
+@mixin headline-lg-em {
+  font-family: var(--er-typo-head-lg-font);
+  font-size: var(--er-typo-head-lg-sz);
+  line-height: var(--er-typo-head-lg-line-hg);
+  font-weight: var(--er-typo-head-lg-wg-em);
+  letter-spacing: var(--er-typo-head-lg-tracking);
+}
+
+@mixin headline-md {
+  font-family: var(--er-typo-head-md-font);
+  font-size: var(--er-typo-head-md-sz);
+  line-height: var(--er-typo-head-md-line-hg);
+  font-weight: var(--er-typo-head-md-wg);
+  letter-spacing: var(--er-typo-head-md-tracking);
+}
+
+@mixin headline-md-em {
+  font-family: var(--er-typo-head-md-font);
+  font-size: var(--er-typo-head-md-sz);
+  line-height: var(--er-typo-head-md-line-hg);
+  font-weight: var(--er-typo-head-md-wg-em);
+  letter-spacing: var(--er-typo-head-md-tracking);
+}
+
+@mixin headline-sm {
+  font-family: var(--er-typo-head-sm-font);
+  font-size: var(--er-typo-head-sm-sz);
+  line-height: var(--er-typo-head-sm-line-hg);
+  font-weight: var(--er-typo-head-sm-wg);
+  letter-spacing: var(--er-typo-head-sm-tracking);
+}
+
+@mixin headline-sm-em {
+  font-family: var(--er-typo-head-sm-font);
+  font-size: var(--er-typo-head-sm-sz);
+  line-height: var(--er-typo-head-sm-line-hg);
+  font-weight: var(--er-typo-head-sm-wg-em);
+  letter-spacing: var(--er-typo-head-sm-tracking);
+}
+
+// Title styles
+@mixin title-lg {
+  font-family: var(--er-typo-title-lg-font);
+  font-size: var(--er-typo-title-lg-sz);
+  line-height: var(--er-typo-title-lg-line-hg);
+  font-weight: var(--er-typo-title-lg-wg);
+  letter-spacing: var(--er-typo-title-lg-tracking);
+}
+
+@mixin title-lg-em {
+  font-family: var(--er-typo-title-lg-font);
+  font-size: var(--er-typo-title-lg-sz);
+  font-weight: var(--er-typo-title-lg-wg-em);
+  line-height: var(--er-typo-title-lg-line-hg);
+  letter-spacing: var(--er-typo-title-lg-tracking);
+}
+
+@mixin title-md {
+  font-family: var(--er-typo-title-md-font);
+  font-size: var(--er-typo-title-md-sz);
+  line-height: var(--er-typo-title-md-line-hg);
+  font-weight: var(--er-typo-title-md-wg);
+  letter-spacing: var(--er-typo-title-md-tracking);
+}
+
+@mixin title-md-em {
+  font-family: var(--er-typo-title-md-font);
+  font-size: var(--er-typo-title-md-sz);
+  line-height: var(--er-typo-title-md-line-hg);
+  font-weight: var(--er-typo-title-md-wg-em);
+  letter-spacing: var(--er-typo-title-md-tracking);
+}
+
+@mixin title-sm {
+  font-family: var(--er-typo-title-sm-font);
+  font-size: var(--er-typo-title-sm-sz);
+  line-height: var(--er-typo-title-sm-line-hg);
+  font-weight: var(--er-typo-title-sm-wg);
+  letter-spacing: var(--er-typo-title-sm-tracking);
+}
+
+@mixin title-sm-em {
+  font-family: var(--er-typo-title-sm-font);
+  font-size: var(--er-typo-title-sm-sz);
+  line-height: var(--er-typo-title-sm-line-hg);
+  font-weight: var(--er-typo-title-sm-wg-em);
+  letter-spacing: var(--er-typo-title-sm-tracking);
+}
+
+// Label styles
+@mixin label-lg {
+  font-family: var(--er-typo-label-lg-font);
+  font-size: var(--er-typo-label-lg-sz);
+  line-height: var(--er-typo-label-lg-line-hg);
+  font-weight: var(--er-typo-label-lg-wg);
+  letter-spacing: var(--er-typo-label-lg-tracking);
+}
+
+@mixin label-lg-em {
+  font-family: var(--er-typo-label-lg-font);
+  font-size: var(--er-typo-label-lg-sz);
+  line-height: var(--er-typo-label-lg-line-hg);
+  font-weight: var(--er-typo-label-lg-wg-em);
+  letter-spacing: var(--er-typo-label-lg-tracking);
+}
+
+@mixin label-md {
+  font-family: var(--er-typo-label-md-font);
+  font-size: var(--er-typo-label-md-sz);
+  line-height: var(--er-typo-label-md-line-hg);
+  font-weight: var(--er-typo-label-md-wg);
+  letter-spacing: var(--er-typo-label-md-tracking);
+}
+
+@mixin label-md-em {
+  font-family: var(--er-typo-label-md-font);
+  font-size: var(--er-typo-label-md-sz);
+  line-height: var(--er-typo-label-md-line-hg);
+  font-weight: var(--er-typo-label-md-wg-em);
+  letter-spacing: var(--er-typo-label-md-tracking);
+}
+
+@mixin label-sm {
+  font-family: var(--er-typo-label-sm-font);
+  font-size: var(--er-typo-label-sm-sz);
+  line-height: var(--er-typo-label-sm-line-hg);
+  font-weight: var(--er-typo-label-sm-wg);
+  letter-spacing: var(--er-typo-label-sm-tracking);
+}
+
+@mixin label-sm-em {
+  font-family: var(--er-typo-label-sm-font);
+  font-size: var(--er-typo-label-sm-sz);
+  line-height: var(--er-typo-label-sm-line-hg);
+  font-weight: var(--er-typo-label-sm-wg-em);
+  letter-spacing: var(--er-typo-label-sm-tracking);
+}
+
+// Body styles
+@mixin body-lg {
+  font-family: var(--er-typo-body-lg-font);
+  font-size: var(--er-typo-body-lg-sz);
+  line-height: var(--er-typo-body-lg-line-hg);
+  font-weight: var(--er-typo-body-lg-wg);
+  letter-spacing: var(--er-typo-body-lg-tracking);
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+@mixin body-lg-em {
+  font-family: var(--er-typo-body-lg-font);
+  font-size: var(--er-typo-body-lg-sz);
+  line-height: var(--er-typo-body-lg-line-hg);
+  font-weight: var(--er-typo-body-lg-wg-em);
+  letter-spacing: var(--er-typo-body-lg-tracking);
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+@mixin body-md {
+  font-family: var(--er-typo-body-md-font);
+  font-size: var(--er-typo-body-md-sz);
+  line-height: var(--er-typo-body-md-line-hg);
+  font-weight: var(--er-typo-body-md-wg);
+  letter-spacing: var(--er-typo-body-md-tracking);
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+@mixin body-md-em {
+  font-family: var(--er-typo-body-md-font);
+  font-size: var(--er-typo-body-md-sz);
+  line-height: var(--er-typo-body-md-line-hg);
+  font-weight: var(--er-typo-body-md-wg-em);
+  letter-spacing: var(--er-typo-body-md-tracking);
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+@mixin body-sm {
+  font-family: var(--er-typo-body-sm-font);
+  font-size: var(--er-typo-body-sm-sz);
+  line-height: var(--er-typo-body-sm-line-hg);
+  font-weight: var(--er-typo-body-sm-wg);
+  letter-spacing: var(--er-typo-body-sm-tracking);
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+@mixin body-sm-em {
+  font-family: var(--er-typo-body-sm-font);
+  font-size: var(--er-typo-body-sm-sz);
+  line-height: var(--er-typo-body-sm-line-hg);
+  font-weight: var(--er-typo-body-sm-wg-em);
+  letter-spacing: var(--er-typo-body-sm-tracking);
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// UTILITY CLASSES - Use in HTML
+// ─────────────────────────────────────────────────────────────────────────
+
+// Display classes
+.typo-dis-lg {
+  @include display-lg;
+}
+.typo-dis-lg-em {
+  @include display-lg-em;
+}
+.typo-dis-md {
+  @include display-md;
+}
+.typo-dis-md-em {
+  @include display-md-em;
+}
+.typo-dis-sm {
+  @include display-sm;
+}
+.typo-dis-sm-em {
+  @include display-sm-em;
+}
+
+// Headline classes
+.typo-head-lg {
+  @include headline-lg;
+}
+.typo-head-lg-em {
+  @include headline-lg-em;
+}
+.typo-head-md {
+  @include headline-md;
+}
+.typo-head-md-em {
+  @include headline-md-em;
+}
+.typo-head-sm {
+  @include headline-sm;
+}
+.typo-head-sm-em {
+  @include headline-sm-em;
+}
+
+// Title classes
+.typo-title-lg {
+  @include title-lg;
+}
+.typo-title-lg-em {
+  @include title-lg-em;
+}
+.typo-title-md {
+  @include title-md;
+}
+.typo-title-md-em {
+  @include title-md-em;
+}
+.typo-title-sm {
+  @include title-sm;
+}
+.typo-title-sm-em {
+  @include title-sm-em;
+}
+
+// Label classes
+.typo-label-lg {
+  @include label-lg;
+}
+.typo-label-lg-em {
+  @include label-lg-em;
+}
+.typo-label-md {
+  @include label-md;
+}
+.typo-label-md-em {
+  @include label-md-em;
+}
+.typo-label-sm {
+  @include label-sm;
+}
+.typo-label-sm-em {
+  @include label-sm-em;
+}
+
+// Body classes
+.typo-body-lg {
+  @include body-lg;
+}
+.typo-body-lg-em {
+  @include body-lg-em;
+}
+.typo-body-md {
+  @include body-md;
+}
+.typo-body-md-em {
+  @include body-md-em;
+}
+.typo-body-sm {
+  @include body-sm;
+}
+.typo-body-sm-em {
+  @include body-sm-em;
+}

package/dist/eaera-widgets-v2.es.js

@@ -73818,69 +73818,74 @@ overview`,
     insetContent: { type: Boolean },
     sectionSeparated: { type: Boolean },
     keyName: { default: "id" },
-    size: {},
+    size: { default: "lg" },
+    noIcon: { type: Boolean, default: !1 },
     collapseSuffix: { default: () => s2(s0) }
   }, {
     modelValue: { default: "1" },
     modelModifiers: {}
   }),
-  emits: ["update:modelValue"],
-  setup(t, { expose: e }) {
-    const s = t, a = K1(t, "modelValue"), n = P(null), i = y(() => [
-      s.className,
-      s.size,
-      s.insetContent && "inset-content",
-      s.sectionSeparated && "separated"
-    ]);
+  emits: /* @__PURE__ */ B1(["change"], ["update:modelValue"]),
+  setup(t, { expose: e, emit: s }) {
+    const a = t, n = s, i = K1(t, "modelValue"), c = P(null), d = y(() => [
+      a.className,
+      a.size !== "custom" ? a.size : "title-custom",
+      a.noIcon && "no-icon",
+      a.insetContent && "inset-content",
+      a.sectionSeparated && "separated"
+    ]), h = (f) => {
+      n("change", f);
+    };
     return e({
-      collapseRef: n,
-      activeNames: y(() => n.value?.activeNames),
-      setActiveNames: (c) => n.value?.setActiveNames(c)
-    }), (c, d) => (l(), U(m(Os), {
+      collapseRef: c,
+      activeNames: y(() => c.value?.activeNames),
+      setActiveNames: (f) => c.value?.setActiveNames(f)
+    }), (f, v) => (l(), U(m(Os), {
       ref_key: "collapseRef",
-      ref: n,
-      modelValue: a.value,
-      "onUpdate:modelValue": d[0] || (d[0] = (h) => a.value = h),
-      class: Q(["custom-collapse", i.value]),
-      accordion: t.accordion
+      ref: c,
+      modelValue: i.value,
+      "onUpdate:modelValue": v[0] || (v[0] = (u) => i.value = u),
+      class: Q(["custom-collapse", d.value]),
+      accordion: t.accordion,
+      onChange: h
     }, {
       default: z(() => [
-        (l(!0), r(h1, null, y1(t.data, (h, f) => (l(), U(m(Ns), {
-          name: h[t.keyName],
-          title: h.title,
-          class: Q(["custom-collapse-item", h.className]),
-          key: h[t.keyName],
-          disabled: h.disabled || t.disabledAll,
-          icon: t.collapseSuffix
+        (l(!0), r(h1, null, y1(t.data, (u, g) => (l(), U(m(Ns), {
+          name: u[t.keyName],
+          title: u.title,
+          class: Q(["custom-collapse-item", u.className]),
+          key: u[t.keyName],
+          disabled: u.disabled || t.disabledAll,
+          icon: t.noIcon ? void 0 : t.collapseSuffix
         }, X1({
           default: z(() => [
-            H(c.$slots, "content", {
-              item: h,
-              index: f
+            H(f.$slots, "content", {
+              item: u,
+              index: g
             }),
-            H(c.$slots, `content_${h[t.keyName]}`, {
-              item: h,
-              index: f
+            H(f.$slots, `content_${u[t.keyName]}`, {
+              item: u,
+              index: g
             })
           ]),
           _: 2
         }, [
-          c.$slots.icon ? {
+          f.$slots.icon ? {
             name: "icon",
-            fn: z((v) => [
-              H(c.$slots, "icon", E1({
-                item: h,
-                index: f
-              }, { ref_for: !0 }, v))
+            fn: z((_) => [
+              H(f.$slots, "icon", E1({
+                item: u,
+                index: g
+              }, { ref_for: !0 }, _))
             ]),
             key: "0"
           } : void 0,
-          c.$slots.title ? {
+          f.$slots.title ? {
             name: "title",
             fn: z(() => [
-              H(c.$slots, "title", {
-                item: h,
-                index: f
+              H(f.$slots, "title", {
+                item: u,
+                index: g
               })
             ]),
             key: "1"