@zanichelli/albe-web-components 19.2.2 → 19.2.3-RC1

package/dist/docs/typography/index.stories.js

@@ -1,186 +0,0 @@
-import { html } from "lit";
-import "./index.stories.css";
-/**
- * The typographic styles are based on the `IBM Plex` font family.
- * Some CSS classes and props are provided to apply the typographic styles:
- * - a set of CSS custom props for font sizes and font weights
- * - a set of classes for headings, body text, and interactive text
- * - a set of classes and CSS custom props for section titles
- */
-export default {
-    title: "Typography",
-    argTypes: {
-        fontFamily: {
-            options: ["--font-family-sans", "--font-family-serif"],
-            control: { type: "inline-radio" },
-        },
-    },
-    args: {
-        fontFamily: "--font-family-sans",
-    },
-};
-const sampleText = "The quick brown fox jumps over the lazy dog";
-const scaleProps = [
-    "--font-size-1",
-    "--font-size-2",
-    "--font-size-3",
-    "--font-size-4",
-    "--font-size-5",
-    "--font-size-6",
-    "--font-size-7",
-    "--font-size-8",
-    "--font-size-9",
-    "--font-size-10",
-    "--font-size-11",
-    "--font-size-12",
-    "--font-size-13",
-    "--font-size-14",
-    "--font-size-15",
-    "--font-size-16",
-    "--font-size-17",
-];
-export const TypeScale = {
-    parameters: {
-        docs: {
-            story: {
-                inline: false,
-                height: "300px",
-            },
-        },
-    },
-    argTypes: {
-        fontWeight: {
-            options: ["--font-lt", "--font-rg", "--font-sb", "--font-bd"],
-            control: { type: "inline-radio" },
-        },
-    },
-    args: {
-        fontWeight: "--font-rg",
-    },
-    render: (args) => html `<div class="type-scale">
-      ${scaleProps.map((prop) => html `
-          <span class="body-5-sb">${prop}</span>
-          <span class="body-5"
-            >${parseFloat(getComputedStyle(document.documentElement).getPropertyValue(prop)) *
-        parseFloat(getComputedStyle(document.documentElement).getPropertyValue("font-size"))}px</span
-          >
-          <span
-            class="sample-text"
-            style="font-size: var(${prop}); font-family: var(${args.fontFamily}); font-weight: var(${args.fontWeight})"
-            >${sampleText}</span
-          >
-        `)}
-    </div>`,
-};
-const headingLevels = 4;
-const bodyLevels = 5;
-const interactiveLevels = 3;
-const sectionTitleLevels = 6;
-const getWeightSuffix = (weight) => (weight ? `-${weight}` : "");
-/**
- * `.heading-1` and `.heading-2` classes automatically scale in size starting from desktop viewport.
- * Typography classes (except for `helper`) can also be used with a viewport prefix (`mobile`, `tablet`, `desktop`, `wide`)
- * to apply the styles only on specific viewport sizes.
- * For example:
- *
- * ```
- * <p class="mobile-body-3 tablet-body-2 body-1">Lorem ipsum...</p>
- * ```
- *
- * will apply the `body-3` style on mobile, `body-2` on tablet, and `body-1` on desktop and wide viewports.
- *
- * Section titles are also available as CSS custom properties:
- * those properties are meant to be used with the "font" shorthand property. For example:
- *
- * ```
- * h4 {
- *  font: var(--section-title-4);
- * }
- * ```
- */
-export const TypographyClasses = {
-    argTypes: {
-        headingWeight: {
-            options: ["lt", null, "sb"],
-            control: {
-                type: "inline-radio",
-                labels: {
-                    lt: "Light",
-                    null: "Regular",
-                    sb: "Semibold",
-                },
-            },
-        },
-        fontWeight: {
-            options: [null, "sb"],
-            control: {
-                type: "inline-radio",
-                labels: {
-                    null: "Regular",
-                    sb: "Semibold",
-                },
-            },
-        },
-    },
-    args: {
-        headingWeight: null,
-        fontWeight: null,
-    },
-    render: (args) => html `<div class="typography-classes">
-      <div class="section-title-classes">
-        ${Array.from({ length: sectionTitleLevels }, (_, i) => i + 1).map((level) => html `<div class="typography-group">
-              <div class="section-title-${level}">Section title ${level}</div>
-              <div class="body-5-sb">.section-title-${level} / --section-title-${level}</div>
-            </div>`)}
-      </div>
-      <div class="heading-classes">
-        ${Array.from({ length: headingLevels }, (_, i) => i + 1).map((level) => html `
-            <div class="typography-group">
-              <div
-                class="heading-${level}${getWeightSuffix(args.headingWeight)}"
-                style="font-family: var(${args.fontFamily})"
-              >
-                Heading ${level}
-              </div>
-              <div class="body-5-sb">.heading-${level}${getWeightSuffix(args.headingWeight)}</div>
-            </div>
-          `)}
-      </div>
-      <div class="body-classes">
-        ${Array.from({ length: bodyLevels }, (_, i) => i + 1).map((level) => html `
-            <div class="typography-group">
-              <div
-                class="body-${level}${getWeightSuffix(args.fontWeight)}"
-                style="font-family: var(${args.fontFamily})"
-              >
-                Body ${level}
-              </div>
-              <div class="body-5-sb">.body-${level}${getWeightSuffix(args.fontWeight)}</div>
-            </div>
-          `)}
-      </div>
-      <div class="interactive-classes">
-        ${Array.from({ length: interactiveLevels }, (_, i) => i + 1).map((level) => html `<div class="typography-group">
-              <div
-                class="interactive-${level}${getWeightSuffix(args.fontWeight)}"
-                style="font-family: var(${args.fontFamily})"
-              >
-                Interactive ${level}
-              </div>
-              <div class="body-5-sb">.interactive-${level}${getWeightSuffix(args.fontWeight)}</div>
-            </div>`)}
-      </div>
-      <div class="helper-classes">
-        <div class="typography-group">
-          <div
-            class="helper${getWeightSuffix(args.fontWeight)}"
-            style="font-family: var(${args.fontFamily})"
-          >
-            Helper
-          </div>
-          <div class="body-5-sb">.helper${getWeightSuffix(args.fontWeight)}</div>
-        </div>
-      </div>
-    </div> `,
-};
-//# sourceMappingURL=index.stories.js.map

package/dist/docs/typography/index.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../docs/typography/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,qBAAqB,CAAC;AAE7B;;;;;;GAMG;AACH,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,QAAQ,EAAE;QACR,UAAU,EAAE;YACV,OAAO,EAAE,CAAC,oBAAoB,EAAE,qBAAqB,CAAC;YACtD,OAAO,EAAE,EAAC,IAAI,EAAE,cAAc,EAAC;SAChC;KACF;IACD,IAAI,EAAE;QACJ,UAAU,EAAE,oBAAoB;KACjC;CACa,CAAC;AAEjB,MAAM,UAAU,GAAG,6CAA6C,CAAC;AACjE,MAAM,UAAU,GAAG;IACjB,eAAe;IACf,eAAe;IACf,eAAe;IACf,eAAe;IACf,eAAe;IACf,eAAe;IACf,eAAe;IACf,eAAe;IACf,eAAe;IACf,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,MAAM,EAAE,KAAK;gBACb,MAAM,EAAE,OAAO;aAChB;SACF;KACF;IACD,QAAQ,EAAE;QACR,UAAU,EAAE;YACV,OAAO,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,CAAC;YAC7D,OAAO,EAAE,EAAC,IAAI,EAAE,cAAc,EAAC;SAChC;KACF;IACD,IAAI,EAAE;QACJ,UAAU,EAAE,WAAW;KACxB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;QACA,UAAU,CAAC,GAAG,CACd,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;oCACc,IAAI;;eAEzB,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAChF,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;;;;oCAI5D,IAAI,uBAAuB,IAAI,CAAC,UAAU,uBAAuB,IAAI,CAAC,UAAU;eACrG,UAAU;;SAEhB,CACF;WACI;CACS,CAAC;AAErB,MAAM,aAAa,GAAG,CAAC,CAAC;AACxB,MAAM,UAAU,GAAG,CAAC,CAAC;AACrB,MAAM,iBAAiB,GAAG,CAAC,CAAC;AAC5B,MAAM,kBAAkB,GAAG,CAAC,CAAC;AAC7B,MAAM,eAAe,GAAG,CAAC,MAAqB,EAAU,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AAExF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,QAAQ,EAAE;QACR,aAAa,EAAE;YACb,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YAC3B,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;gBACpB,MAAM,EAAE;oBACN,EAAE,EAAE,OAAO;oBACX,IAAI,EAAE,SAAS;oBACf,EAAE,EAAE,UAAU;iBACf;aACF;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC;YACrB,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;gBACpB,MAAM,EAAE;oBACN,IAAI,EAAE,SAAS;oBACf,EAAE,EAAE,UAAU;iBACf;aACF;SACF;KACF;IACD,IAAI,EAAE;QACJ,aAAa,EAAE,IAAI;QACnB,UAAU,EAAE,IAAI;KACjB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;UAEE,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,kBAAkB,EAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAC7D,CAAC,KAAK,EAAE,EAAE,CACR,IAAI,CAAA;0CAC0B,KAAK,mBAAmB,KAAK;sDACjB,KAAK,sBAAsB,KAAK;mBACnE,CACV;;;UAGC,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,aAAa,EAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CACxD,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;;iCAGQ,KAAK,GAAG,eAAe,CAAC,IAAI,CAAC,aAAa,CAAC;0CAClC,IAAI,CAAC,UAAU;;0BAE/B,KAAK;;gDAEiB,KAAK,GAAG,eAAe,CAAC,IAAI,CAAC,aAAa,CAAC;;WAEhF,CACF;;;UAGC,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,UAAU,EAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CACrD,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;;8BAGK,KAAK,GAAG,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC;0CAC5B,IAAI,CAAC,UAAU;;uBAElC,KAAK;;6CAEiB,KAAK,GAAG,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC;;WAE1E,CACF;;;UAGC,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,iBAAiB,EAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAC5D,CAAC,KAAK,EAAE,EAAE,CACR,IAAI,CAAA;;qCAEqB,KAAK,GAAG,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC;0CACnC,IAAI,CAAC,UAAU;;8BAE3B,KAAK;;oDAEiB,KAAK,GAAG,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC;mBACzE,CACV;;;;;2BAKkB,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC;sCACrB,IAAI,CAAC,UAAU;;;;0CAIX,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC;;;YAG9D;CACQ,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport \"./index.stories.css\";\n\n/**\n * The typographic styles are based on the `IBM Plex` font family.\n * Some CSS classes and props are provided to apply the typographic styles:\n * - a set of CSS custom props for font sizes and font weights\n * - a set of classes for headings, body text, and interactive text\n * - a set of classes and CSS custom props for section titles\n */\nexport default {\n  title: \"Typography\",\n  argTypes: {\n    fontFamily: {\n      options: [\"--font-family-sans\", \"--font-family-serif\"],\n      control: {type: \"inline-radio\"},\n    },\n  },\n  args: {\n    fontFamily: \"--font-family-sans\",\n  },\n} satisfies Meta;\n\nconst sampleText = \"The quick brown fox jumps over the lazy dog\";\nconst scaleProps = [\n  \"--font-size-1\",\n  \"--font-size-2\",\n  \"--font-size-3\",\n  \"--font-size-4\",\n  \"--font-size-5\",\n  \"--font-size-6\",\n  \"--font-size-7\",\n  \"--font-size-8\",\n  \"--font-size-9\",\n  \"--font-size-10\",\n  \"--font-size-11\",\n  \"--font-size-12\",\n  \"--font-size-13\",\n  \"--font-size-14\",\n  \"--font-size-15\",\n  \"--font-size-16\",\n  \"--font-size-17\",\n];\n\nexport const TypeScale = {\n  parameters: {\n    docs: {\n      story: {\n        inline: false,\n        height: \"300px\",\n      },\n    },\n  },\n  argTypes: {\n    fontWeight: {\n      options: [\"--font-lt\", \"--font-rg\", \"--font-sb\", \"--font-bd\"],\n      control: {type: \"inline-radio\"},\n    },\n  },\n  args: {\n    fontWeight: \"--font-rg\",\n  },\n  render: (args) =>\n    html`<div class=\"type-scale\">\n      ${scaleProps.map(\n        (prop) => html`\n          <span class=\"body-5-sb\">${prop}</span>\n          <span class=\"body-5\"\n            >${parseFloat(getComputedStyle(document.documentElement).getPropertyValue(prop)) *\n            parseFloat(getComputedStyle(document.documentElement).getPropertyValue(\"font-size\"))}px</span\n          >\n          <span\n            class=\"sample-text\"\n            style=\"font-size: var(${prop}); font-family: var(${args.fontFamily}); font-weight: var(${args.fontWeight})\"\n            >${sampleText}</span\n          >\n        `\n      )}\n    </div>`,\n} satisfies StoryObj;\n\nconst headingLevels = 4;\nconst bodyLevels = 5;\nconst interactiveLevels = 3;\nconst sectionTitleLevels = 6;\nconst getWeightSuffix = (weight: string | null): string => (weight ? `-${weight}` : \"\");\n\n/**\n * `.heading-1` and `.heading-2` classes automatically scale in size starting from desktop viewport.\n * Typography classes (except for `helper`) can also be used with a viewport prefix (`mobile`, `tablet`, `desktop`, `wide`)\n * to apply the styles only on specific viewport sizes.\n * For example:\n *\n * ```\n * <p class=\"mobile-body-3 tablet-body-2 body-1\">Lorem ipsum...</p>\n * ```\n *\n * will apply the `body-3` style on mobile, `body-2` on tablet, and `body-1` on desktop and wide viewports.\n *\n * Section titles are also available as CSS custom properties:\n * those properties are meant to be used with the \"font\" shorthand property. For example:\n *\n * ```\n * h4 {\n *  font: var(--section-title-4);\n * }\n * ```\n */\nexport const TypographyClasses = {\n  argTypes: {\n    headingWeight: {\n      options: [\"lt\", null, \"sb\"],\n      control: {\n        type: \"inline-radio\",\n        labels: {\n          lt: \"Light\",\n          null: \"Regular\",\n          sb: \"Semibold\",\n        },\n      },\n    },\n    fontWeight: {\n      options: [null, \"sb\"],\n      control: {\n        type: \"inline-radio\",\n        labels: {\n          null: \"Regular\",\n          sb: \"Semibold\",\n        },\n      },\n    },\n  },\n  args: {\n    headingWeight: null,\n    fontWeight: null,\n  },\n  render: (args) =>\n    html`<div class=\"typography-classes\">\n      <div class=\"section-title-classes\">\n        ${Array.from({length: sectionTitleLevels}, (_, i) => i + 1).map(\n          (level) =>\n            html`<div class=\"typography-group\">\n              <div class=\"section-title-${level}\">Section title ${level}</div>\n              <div class=\"body-5-sb\">.section-title-${level} / --section-title-${level}</div>\n            </div>`\n        )}\n      </div>\n      <div class=\"heading-classes\">\n        ${Array.from({length: headingLevels}, (_, i) => i + 1).map(\n          (level) => html`\n            <div class=\"typography-group\">\n              <div\n                class=\"heading-${level}${getWeightSuffix(args.headingWeight)}\"\n                style=\"font-family: var(${args.fontFamily})\"\n              >\n                Heading ${level}\n              </div>\n              <div class=\"body-5-sb\">.heading-${level}${getWeightSuffix(args.headingWeight)}</div>\n            </div>\n          `\n        )}\n      </div>\n      <div class=\"body-classes\">\n        ${Array.from({length: bodyLevels}, (_, i) => i + 1).map(\n          (level) => html`\n            <div class=\"typography-group\">\n              <div\n                class=\"body-${level}${getWeightSuffix(args.fontWeight)}\"\n                style=\"font-family: var(${args.fontFamily})\"\n              >\n                Body ${level}\n              </div>\n              <div class=\"body-5-sb\">.body-${level}${getWeightSuffix(args.fontWeight)}</div>\n            </div>\n          `\n        )}\n      </div>\n      <div class=\"interactive-classes\">\n        ${Array.from({length: interactiveLevels}, (_, i) => i + 1).map(\n          (level) =>\n            html`<div class=\"typography-group\">\n              <div\n                class=\"interactive-${level}${getWeightSuffix(args.fontWeight)}\"\n                style=\"font-family: var(${args.fontFamily})\"\n              >\n                Interactive ${level}\n              </div>\n              <div class=\"body-5-sb\">.interactive-${level}${getWeightSuffix(args.fontWeight)}</div>\n            </div>`\n        )}\n      </div>\n      <div class=\"helper-classes\">\n        <div class=\"typography-group\">\n          <div\n            class=\"helper${getWeightSuffix(args.fontWeight)}\"\n            style=\"font-family: var(${args.fontFamily})\"\n          >\n            Helper\n          </div>\n          <div class=\"body-5-sb\">.helper${getWeightSuffix(args.fontWeight)}</div>\n        </div>\n      </div>\n    </div> `,\n} satisfies StoryObj;\n"]}

package/dist/esm/_commonjsHelpers-1c8beb5f.js

@@ -1,5 +0,0 @@
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-export { commonjsGlobal as c };
-
-//# sourceMappingURL=_commonjsHelpers-1c8beb5f.js.map

package/dist/esm/_commonjsHelpers-1c8beb5f.js.map

@@ -1 +0,0 @@
-{"file":"_commonjsHelpers-1c8beb5f.js","mappings":";;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/esm/app-globals-0f993ce5.js

@@ -1,5 +0,0 @@
-const globalScripts = () => {};
-
-export { globalScripts as g };
-
-//# sourceMappingURL=app-globals-0f993ce5.js.map

package/dist/esm/app-globals-0f993ce5.js.map

@@ -1 +0,0 @@
-{"file":"app-globals-0f993ce5.js","mappings":"AAAY,MAAC,aAAa,GAAG,MAAM;;;;","names":[],"sources":["@stencil/core/internal/app-globals"],"sourcesContent":["export const globalScripts = () => {};\n"],"version":3}

package/dist/esm/breakpoints-d148bfde.js.map

@@ -1 +0,0 @@
-{"file":"breakpoints-d148bfde.js","mappings":"AAAA;IACY;AAAZ,WAAY,WAAW;IACrB,mDAAY,CAAA;IACZ,oDAAa,CAAA;IACb,sDAAc,CAAA;AAChB,CAAC,EAJW,WAAW,KAAX,WAAW;;;;","names":[],"sources":["src/constants/breakpoints.ts"],"sourcesContent":["/** Breakpoints for responsive design. The values are the max width of the screen for each breakpoint. */\nexport enum Breakpoints {\n  MOBILE = 767,\n  TABLET = 1151,\n  DESKTOP = 1365,\n}\n"],"version":3}