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

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

@@ -0,0 +1,54 @@
+import { html } from "lit";
+import "./index.stories.css";
+export default {
+    title: "Grid",
+    tags: ["!autodocs"],
+};
+export const Grid = {
+    render: () => html `
+    <div class="grid-story body-1">
+      <p><strong>z-grid</strong> column responsive CSS classes.</p>
+      <p>Each "col" class can be used with a viewport prefix:
+        <ul>
+          <li>mobile-col-#</li>
+          <li>tablet-col-#</li>
+          <li>desktop-col-#</li>
+          <li>wide-col-#</li>
+        </ul>
+      </p>
+      <p>The prefix let the class apply its style only on that viewport.</p>
+      <div class="container">
+        <h3>Responsive columns</h3>
+        <div class="z-grid">
+          <div class="wide-col-6 desktop-col-4 tablet-col-3 mobile-col-2">
+            wide-col-6 desktop-col-4 tablet-col-3 mobile-col-2
+          </div>
+          <div class="wide-col-6 desktop-col-4 tablet-col-3 mobile-col-2">
+            wide-col-6 desktop-col-4 tablet-col-3 mobile-col-2
+          </div>
+          <div class="wide-col-4 desktop-col-4 tablet-col-3 mobile-col-2">
+            wide-col-4 desktop-col-4 tablet-col-3 mobile-col-2
+          </div>
+          <div class="wide-col-4 desktop-col-4 tablet-col-3 mobile-col-2">
+            wide-col-4 desktop-col-4 tablet-col-3 mobile-col-2
+          </div>
+          <div class="ghost-grid z-grid">
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+};
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../docs/grid/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,qBAAqB,CAAC;AAE7B,eAAe;IACb,KAAK,EAAE,MAAM;IACb,IAAI,EAAE,CAAC,WAAW,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CjB;CACF,CAAC","sourcesContent":["import {html} from \"lit\";\nimport \"./index.stories.css\";\n\nexport default {\n  title: \"Grid\",\n  tags: [\"!autodocs\"],\n};\n\nexport const Grid = {\n  render: () => html`\n    <div class=\"grid-story body-1\">\n      <p><strong>z-grid</strong> column responsive CSS classes.</p>\n      <p>Each \"col\" class can be used with a viewport prefix:\n        <ul>\n          <li>mobile-col-#</li>\n          <li>tablet-col-#</li>\n          <li>desktop-col-#</li>\n          <li>wide-col-#</li>\n        </ul>\n      </p>\n      <p>The prefix let the class apply its style only on that viewport.</p>\n      <div class=\"container\">\n        <h3>Responsive columns</h3>\n        <div class=\"z-grid\">\n          <div class=\"wide-col-6 desktop-col-4 tablet-col-3 mobile-col-2\">\n            wide-col-6 desktop-col-4 tablet-col-3 mobile-col-2\n          </div>\n          <div class=\"wide-col-6 desktop-col-4 tablet-col-3 mobile-col-2\">\n            wide-col-6 desktop-col-4 tablet-col-3 mobile-col-2\n          </div>\n          <div class=\"wide-col-4 desktop-col-4 tablet-col-3 mobile-col-2\">\n            wide-col-4 desktop-col-4 tablet-col-3 mobile-col-2\n          </div>\n          <div class=\"wide-col-4 desktop-col-4 tablet-col-3 mobile-col-2\">\n            wide-col-4 desktop-col-4 tablet-col-3 mobile-col-2\n          </div>\n          <div class=\"ghost-grid z-grid\">\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n          </div>\n        </div>\n      </div>\n    </div>\n  `,\n};\n"]}

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

@@ -0,0 +1,32 @@
+import { html } from "lit";
+import "../../src/components/z-accordion/index";
+import "../../src/components/z-icon/index";
+import { BUTTON_ICONS, FILLED_ICONS, LEGACY_ICONS, STROKE_ICONS } from "../../src/constants/iconset";
+import "./index.stories.css";
+export default {
+    title: "Iconset",
+    tags: ["!autodocs"],
+};
+export const Iconset = {
+    render: () => html `<div class="icons-list">
+      ${[STROKE_ICONS, FILLED_ICONS, BUTTON_ICONS, LEGACY_ICONS].map((iconsGroup, index) => html ` <z-accordion
+            open
+            shadow
+            highlight=${true}
+            variant="background"
+            label="${["Stroke icons", "Filled icons", "Button icons", "Legacy icon names"][index]} - (${Object.keys(iconsGroup).length})"
+          >
+            <ol class="icons-container">
+              ${Object.keys(iconsGroup)
+        .sort()
+        .map((iconName) => html `
+                    <li class="icon-box">
+                      <z-icon name=${iconName}></z-icon>
+                      <div class="icon-name">${iconName}</div>
+                    </li>
+                  `)}
+            </ol>
+          </z-accordion>`)}
+    </div>`,
+};
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../docs/iconset/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,wCAAwC,CAAC;AAChD,OAAO,mCAAmC,CAAC;AAC3C,OAAO,EAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAC,MAAM,6BAA6B,CAAC;AACnG,OAAO,qBAAqB,CAAC;AAE7B,eAAe;IACb,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,CAAC,WAAW,CAAC;CACL,CAAC;AAEjB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;QACA,CAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC,GAAG,CAC5D,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CACpB,IAAI,CAAA;;;wBAGU,IAAI;;qBAEP,CAAC,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,mBAAmB,CAAC,CAAC,KAAK,CAAC,OAAO,MAAM,CAAC,IAAI,CACrG,UAAU,CACX,CAAC,MAAM;;;gBAGJ,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;SACtB,IAAI,EAAE;SACN,GAAG,CACF,CAAC,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAA;;qCAEC,QAAQ;+CACE,QAAQ;;mBAEpC,CACF;;yBAEQ,CAClB;WACI;CACS,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport \"../../src/components/z-accordion/index\";\nimport \"../../src/components/z-icon/index\";\nimport {BUTTON_ICONS, FILLED_ICONS, LEGACY_ICONS, STROKE_ICONS} from \"../../src/constants/iconset\";\nimport \"./index.stories.css\";\n\nexport default {\n  title: \"Iconset\",\n  tags: [\"!autodocs\"],\n} satisfies Meta;\n\nexport const Iconset = {\n  render: () =>\n    html`<div class=\"icons-list\">\n      ${[STROKE_ICONS, FILLED_ICONS, BUTTON_ICONS, LEGACY_ICONS].map(\n        (iconsGroup, index) =>\n          html` <z-accordion\n            open\n            shadow\n            highlight=${true}\n            variant=\"background\"\n            label=\"${[\"Stroke icons\", \"Filled icons\", \"Button icons\", \"Legacy icon names\"][index]} - (${Object.keys(\n              iconsGroup\n            ).length})\"\n          >\n            <ol class=\"icons-container\">\n              ${Object.keys(iconsGroup)\n                .sort()\n                .map(\n                  (iconName) => html`\n                    <li class=\"icon-box\">\n                      <z-icon name=${iconName}></z-icon>\n                      <div class=\"icon-name\">${iconName}</div>\n                    </li>\n                  `\n                )}\n            </ol>\n          </z-accordion>`\n      )}\n    </div>`,\n} satisfies StoryObj;\n"]}

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

@@ -0,0 +1,108 @@
+import { html } from "lit";
+import "../../src/components/deprecated/z-section-title/index";
+import { getPalettes, getThemeColorTokens } from "../../src/utils/storybook-utils";
+import "./index.stories.css";
+export default {
+    title: "Colors",
+    parameters: {
+        layout: "fullscreen",
+    },
+    tags: ["!autodocs"],
+};
+export const Themes = {
+    render: (_, context) => {
+        const [currentTheme, currentThemeVariant] = context.parameters.themes[context.globals.theme || "Default"].split(" ");
+        const themeColorTokens = getThemeColorTokens(currentTheme, currentThemeVariant);
+        const defaultTheme = getThemeColorTokens("theme-default");
+        return html `
+      <div class="colors-story themes">
+        <p>
+          Currently available color themes: <strong>default</strong>, <strong>black</strong>,
+          <strong>black-red</strong>, <strong>black-yellow</strong>, <strong>dark</strong>, and <strong>red</strong>.
+        </p>
+        <p>
+          Each theme has a CSS class that can be used to theme any html element and each class name is the "theme-"
+          prefix + the theme's name ("theme-default", "theme-red", ...). Themes variants like "black-red" or
+          "black-yellow" can be applied to the related main theme by using both classes (variant class names have te
+          same form of main themes plus a double dash and the variant name, like "theme-black--red"):
+        </p>
+        <code>${'<div class="theme-black theme-black--red">'}</code>
+        <p>
+          On this page you can see the value of the color tokens for each theme. Switch the theme from the list in the
+          toolbar.
+        </p>
+        <p class="interactive-1">
+          Note: the tokens marked with "<span class="reference">*</span>" are inherited from the default theme.
+        </p>
+        <div class="tokens-container">
+          <div class="title section-title-4">Color tokens</div>
+          <ul>
+            ${Object.keys(themeColorTokens).map((token) => html `
+                <li>
+                  <span class="token-name">${token}</span>
+                  <div class="color">
+                    <div
+                      class="color-box"
+                      style="background-color: var(${token})"
+                    ></div>
+                    <div>
+                      <span class="interactive-2">${themeColorTokens[token]}</span>
+                      <span class="interactive-3"
+                        >(${getComputedStyle(document.documentElement).getPropertyValue(token)})</span
+                      >
+                    </div>
+                  </div>
+                </li>
+              `)}
+            ${Object.keys(defaultTheme).map((token) => !themeColorTokens[token]
+            ? html `
+                    <li>
+                      <span class="token-name inherited">${token}<span class="reference">*</span></span>
+                      <div class="color">
+                        <div
+                          class="color-box"
+                          style="background-color: var(${token})"
+                        ></div>
+                        <div>
+                          <span class="interactive-2">${defaultTheme[token]}</span>
+                          <span class="interactive-3"
+                            >(${getComputedStyle(document.documentElement).getPropertyValue(token)})</span
+                          >
+                        </div>
+                      </div>
+                    </li>
+                  `
+            : "")}
+          </ul>
+        </div>
+      </div>
+    `;
+    },
+};
+const palettes = getPalettes();
+export const Palettes = {
+    render: () => html `
+    <div class="colors-story palettes">
+      ${Object.keys(palettes).map((paletteName) => html `<div class="tokens-container">
+            <div class="title section-title-4">${paletteName}</div>
+            <ul>
+              ${palettes[paletteName].map((token) => html `
+                  <li>
+                    <span class="token-name">${token}</span>
+                    <div class="color">
+                      <div
+                        class="color-box"
+                        style="background-color: var(${token})"
+                      ></div>
+                      <div class="interactive-2">
+                        ${getComputedStyle(document.documentElement).getPropertyValue(token)}
+                      </div>
+                    </div>
+                  </li>
+                `)}
+            </ul>
+          </div>`)}
+    </div>
+  `,
+};
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../docs/themes/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,uDAAuD,CAAC;AAC/D,OAAO,EAAC,WAAW,EAAE,mBAAmB,EAAC,MAAM,iCAAiC,CAAC;AACjF,OAAO,qBAAqB,CAAC;AAE7B,eAAe;IACb,KAAK,EAAE,QAAQ;IACf,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;IACD,IAAI,EAAE,CAAC,WAAW,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,MAAM,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE;QACrB,MAAM,CAAC,YAAY,EAAE,mBAAmB,CAAC,GACvC,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,IAAI,SAAS,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC3E,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,YAAY,EAAE,mBAAmB,CAAC,CAAC;QAChF,MAAM,YAAY,GAAG,mBAAmB,CAAC,eAAe,CAAC,CAAC;QAE1D,OAAO,IAAI,CAAA;;;;;;;;;;;;gBAYC,4CAA4C;;;;;;;;;;;cAW9C,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,GAAG,CACjC,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;6CAEgB,KAAK;;;;qDAIG,KAAK;;;oDAGN,gBAAgB,CAAC,KAAK,CAAC;;4BAE/C,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;;;;;eAK/E,CACF;cACC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CACxC,CAAC,gBAAgB,CAAC,KAAK,CAAC;YACtB,CAAC,CAAC,IAAI,CAAA;;2DAEqC,KAAK;;;;yDAIP,KAAK;;;wDAGN,YAAY,CAAC,KAAK,CAAC;;gCAE3C,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;;;;;mBAK/E;YACH,CAAC,CAAC,EAAE,CACP;;;;KAIR,CAAC;IACJ,CAAC;CACiB,CAAC;AAErB,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;AAE/B,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;QAEZ,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,CACzB,CAAC,WAAW,EAAE,EAAE,CACd,IAAI,CAAA;iDACmC,WAAW;;gBAE5C,QAAQ,CAAC,WAAW,CAAC,CAAC,GAAG,CACzB,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;+CAEgB,KAAK;;;;uDAIG,KAAK;;;0BAGlC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;;;;iBAI3E,CACF;;iBAEE,CACV;;GAEJ;CACiB,CAAC","sourcesContent":["import {StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport \"../../src/components/deprecated/z-section-title/index\";\nimport {getPalettes, getThemeColorTokens} from \"../../src/utils/storybook-utils\";\nimport \"./index.stories.css\";\n\nexport default {\n  title: \"Colors\",\n  parameters: {\n    layout: \"fullscreen\",\n  },\n  tags: [\"!autodocs\"],\n};\n\nexport const Themes = {\n  render: (_, context) => {\n    const [currentTheme, currentThemeVariant] =\n      context.parameters.themes[context.globals.theme || \"Default\"].split(\" \");\n    const themeColorTokens = getThemeColorTokens(currentTheme, currentThemeVariant);\n    const defaultTheme = getThemeColorTokens(\"theme-default\");\n\n    return html`\n      <div class=\"colors-story themes\">\n        <p>\n          Currently available color themes: <strong>default</strong>, <strong>black</strong>,\n          <strong>black-red</strong>, <strong>black-yellow</strong>, <strong>dark</strong>, and <strong>red</strong>.\n        </p>\n        <p>\n          Each theme has a CSS class that can be used to theme any html element and each class name is the \"theme-\"\n          prefix + the theme's name (\"theme-default\", \"theme-red\", ...). Themes variants like \"black-red\" or\n          \"black-yellow\" can be applied to the related main theme by using both classes (variant class names have te\n          same form of main themes plus a double dash and the variant name, like \"theme-black--red\"):\n        </p>\n        <code>${'<div class=\"theme-black theme-black--red\">'}</code>\n        <p>\n          On this page you can see the value of the color tokens for each theme. Switch the theme from the list in the\n          toolbar.\n        </p>\n        <p class=\"interactive-1\">\n          Note: the tokens marked with \"<span class=\"reference\">*</span>\" are inherited from the default theme.\n        </p>\n        <div class=\"tokens-container\">\n          <div class=\"title section-title-4\">Color tokens</div>\n          <ul>\n            ${Object.keys(themeColorTokens).map(\n              (token) => html`\n                <li>\n                  <span class=\"token-name\">${token}</span>\n                  <div class=\"color\">\n                    <div\n                      class=\"color-box\"\n                      style=\"background-color: var(${token})\"\n                    ></div>\n                    <div>\n                      <span class=\"interactive-2\">${themeColorTokens[token]}</span>\n                      <span class=\"interactive-3\"\n                        >(${getComputedStyle(document.documentElement).getPropertyValue(token)})</span\n                      >\n                    </div>\n                  </div>\n                </li>\n              `\n            )}\n            ${Object.keys(defaultTheme).map((token) =>\n              !themeColorTokens[token]\n                ? html`\n                    <li>\n                      <span class=\"token-name inherited\">${token}<span class=\"reference\">*</span></span>\n                      <div class=\"color\">\n                        <div\n                          class=\"color-box\"\n                          style=\"background-color: var(${token})\"\n                        ></div>\n                        <div>\n                          <span class=\"interactive-2\">${defaultTheme[token]}</span>\n                          <span class=\"interactive-3\"\n                            >(${getComputedStyle(document.documentElement).getPropertyValue(token)})</span\n                          >\n                        </div>\n                      </div>\n                    </li>\n                  `\n                : \"\"\n            )}\n          </ul>\n        </div>\n      </div>\n    `;\n  },\n} satisfies StoryObj;\n\nconst palettes = getPalettes();\n\nexport const Palettes = {\n  render: () => html`\n    <div class=\"colors-story palettes\">\n      ${Object.keys(palettes).map(\n        (paletteName) =>\n          html`<div class=\"tokens-container\">\n            <div class=\"title section-title-4\">${paletteName}</div>\n            <ul>\n              ${palettes[paletteName].map(\n                (token) => html`\n                  <li>\n                    <span class=\"token-name\">${token}</span>\n                    <div class=\"color\">\n                      <div\n                        class=\"color-box\"\n                        style=\"background-color: var(${token})\"\n                      ></div>\n                      <div class=\"interactive-2\">\n                        ${getComputedStyle(document.documentElement).getPropertyValue(token)}\n                      </div>\n                    </div>\n                  </li>\n                `\n              )}\n            </ul>\n          </div>`\n      )}\n    </div>\n  `,\n} satisfies StoryObj;\n"]}

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

@@ -0,0 +1,186 @@
+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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../docs/typography/index.stories.ts"],"names":[],"mappings":"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","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

@@ -0,0 +1,5 @@
+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

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

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

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

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

@@ -0,0 +1 @@
+{"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-Q-tWjk7P.js → breakpoints-d148bfde.js}

@@ -7,3 +7,5 @@ var Breakpoints;
 })(Breakpoints || (Breakpoints = {}));
 
 export { Breakpoints as B };
+
+//# sourceMappingURL=breakpoints-d148bfde.js.map

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

@@ -0,0 +1 @@
+{"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}

package/dist/esm/{iconset-BanpkIXZ.js → iconset-d7823b13.js}

@@ -993,10 +993,9 @@ const LEGACY_ICONS = {
     "white-diamond-filled": FILLED_ICONS["diamond-white-filled"],
     "workplace-zanichelli-filled": FILLED_ICONS["workspace-zanichelli-filled"],
 };
-const ICONS = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, STROKE_ICONS), FILLED_ICONS), BUTTON_ICONS), LEGACY_ICONS), {
+const ICONS = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, STROKE_ICONS), FILLED_ICONS), BUTTON_ICONS), LEGACY_ICONS), { 
     // Temporary override of the burger menu icon with text with the one without text
-    "burger-menu": STROKE_ICONS["burger-menu-mobile"], "burger-menu-filled": FILLED_ICONS["burger-menu-mobile-filled"]
-});
+    "burger-menu": STROKE_ICONS["burger-menu-mobile"], "burger-menu-filled": FILLED_ICONS["burger-menu-mobile-filled"] });
 /** List of icons that have a color indicator. */
 const COLOR_INDICATOR_ICONS = [
     "bg-color",
@@ -1010,3 +1009,5 @@ const COLOR_INDICATOR_ICONS = [
 ];
 
 export { COLOR_INDICATOR_ICONS as C, ICONS as I };
+
+//# sourceMappingURL=iconset-d7823b13.js.map