@zanichelli/zanichelli-it-frontend-kit 0.0.1-rc.0

package/dist/collection/collection-manifest.json

@@ -0,0 +1,100 @@
+{
+  "entries": [
+    "components/menubar/menubar.js",
+    "components/menubar/mobile-menubar/mobile-menubar.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.31.0",
+    "typescriptVersion": "5.5.4"
+  },
+  "collections": [
+    {
+      "name": "@zanichelli/albe-web-components",
+      "tags": [
+        "z-accordion",
+        "z-alert",
+        "z-anchor-navigation",
+        "z-app-header",
+        "z-app-header-deprecated",
+        "z-aria-alert",
+        "z-avatar",
+        "z-book-card",
+        "z-book-card-app",
+        "z-book-card-deprecated",
+        "z-breadcrumb",
+        "z-button",
+        "z-button-sort",
+        "z-card",
+        "z-carousel",
+        "z-chip",
+        "z-combobox",
+        "z-cover-hero",
+        "z-date-picker",
+        "z-divider",
+        "z-dragdrop-area",
+        "z-file",
+        "z-file-upload",
+        "z-ghost-loading",
+        "z-icon",
+        "z-info-box",
+        "z-info-reveal",
+        "z-input",
+        "z-input-message",
+        "z-list",
+        "z-list-element",
+        "z-list-group",
+        "z-logo",
+        "z-menu",
+        "z-menu-deprecated",
+        "z-menu-section",
+        "z-menu-section-deprecated",
+        "z-modal",
+        "z-myz-card",
+        "z-myz-card-alert",
+        "z-myz-card-body",
+        "z-myz-card-cover",
+        "z-myz-card-dictionary",
+        "z-myz-card-footer",
+        "z-myz-card-footer-sections",
+        "z-myz-card-header",
+        "z-myz-card-icon",
+        "z-myz-card-info",
+        "z-myz-card-list",
+        "z-myz-list",
+        "z-myz-list-item",
+        "z-navigation-tabs",
+        "z-notification",
+        "z-offcanvas",
+        "z-otp",
+        "z-pagination",
+        "z-panel-elem",
+        "z-popover",
+        "z-range-picker",
+        "z-searchbar",
+        "z-section-title",
+        "z-select",
+        "z-skip-to-content",
+        "z-slideshow",
+        "z-stepper",
+        "z-stepper-item",
+        "z-table",
+        "z-tag",
+        "z-tbody",
+        "z-td",
+        "z-tfoot",
+        "z-th",
+        "z-thead",
+        "z-toast-notification",
+        "z-toast-notification-list",
+        "z-toggle-button",
+        "z-toggle-switch",
+        "z-tooltip",
+        "z-tr",
+        "z-tree-list",
+        "z-visually-hidden"
+      ]
+    }
+  ],
+  "bundles": []
+}

package/dist/collection/components/menubar/menu/menu.css

@@ -0,0 +1,87 @@
+.menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  display: grid;
+  width: 100%;
+  padding: 16px var(--grid-margin);
+  background-color: #fff;
+  box-shadow: var(--shadow-1);
+  column-gap: 24px;
+  grid-auto-columns: minmax(0, max-content);
+  grid-auto-flow: column;
+  grid-template-rows: minmax(0, max-content) max-content;
+}
+
+.menu .group {
+  display: grid;
+  color: var(--red500);
+  grid-row: 1 / -1;
+  grid-template-columns: 1fr;
+  grid-template-rows: subgrid;
+}
+
+@supports not (grid-template-rows: subgrid) {
+  .menu .group {
+    grid-template-rows: repeat(auto-fit, minmax(0, max-content));
+  }
+}
+
+.menu .group .group-name {
+  margin-bottom: 16px;
+  color: var(--red500);
+  font-size: 1rem;
+  font-weight: var(--font-md);
+  line-height: 1.5;
+}
+
+.menu .menu-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.menu .menu-list > li > .menu-item {
+  border-bottom: 2px solid transparent;
+  font-size: 1rem;
+}
+
+.menu .menu-list > li > .menu-item.active,
+.menu .menu-list > li > .menu-item:hover {
+  border-bottom-color: var(--red500);
+}
+
+.menu .group .menu-list .menu-item.highlight {
+  font-size: 1.5rem;
+}
+
+@media (width < 768px) {
+  .menu {
+    position: relative;
+    display: flex !important;
+    flex-direction: column;
+    padding: 0;
+    box-shadow: none;
+    row-gap: 32px;
+  }
+
+  .menu .group {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .menu .group .group-name {
+    border-bottom: 1px solid currentcolor;
+    margin-bottom: 4px;
+    font-size: 0.875rem;
+  }
+
+  .menu .group .menu-list .menu-item {
+    font-size: 0.875rem;
+    font-weight: var(--font-md);
+  }
+
+  .menu .group .menu-list .menu-item.highlight {
+    font-size: 1rem;
+  }
+}

package/dist/collection/components/menubar/menu/menu.js

@@ -0,0 +1,34 @@
+import { h } from "@stencil/core";
+const DEFAULT_GROUP_KEY = 'default';
+const DEFAULT_GROUP = {
+    id: DEFAULT_GROUP_KEY,
+    label: DEFAULT_GROUP_KEY,
+};
+/** Get the items grouped by their group. */
+const getGroupedItems = (items) => {
+    const groups = items.reduce((grouped, item) => {
+        const itemGroup = grouped.find(({ group }) => group.id === (item.group?.id || DEFAULT_GROUP.id));
+        if (!itemGroup) {
+            grouped.push({ group: item.group ?? DEFAULT_GROUP, items: [item] });
+        }
+        else {
+            itemGroup.items.push(item);
+        }
+        return grouped;
+    }, []);
+    // Sort to keep default group at the end
+    return groups.sort((a, b) => (a.group.id === DEFAULT_GROUP_KEY ? 1 : b.group.id === DEFAULT_GROUP_KEY ? -1 : 0));
+};
+/**
+ * Floating menu component. It shows a list of items that can be grouped.
+ */
+export const Menu = ({ controlledBy, items, current, onItemKeyDown }) => {
+    if (!items?.length) {
+        return null;
+    }
+    const groups = getGroupedItems(items);
+    return (h("div", { class: "menu", "aria-labelledby": controlledBy ?? undefined, role: "menu" }, groups.map(({ group, items }) => (h("div", { class: "group", role: "none" }, group.id !== DEFAULT_GROUP_KEY ? (h("div", { class: "group-name", id: group.id }, group.label)) : groups.length > 1 ? (
+    // empty div to keep the same height as the other groups
+    h("div", { class: "group-name" })) : null, h("ul", { class: "menu-list", role: "group", "aria-labelledby": group.id !== DEFAULT_GROUP_KEY ? group.id : undefined }, items.map((item) => (h("li", { role: "none" }, item.href && (h("a", { class: { 'menu-item': true, 'active': current === item.id, 'highlight': item.highlight }, href: item.href, role: "menuitem", tabIndex: -1, "aria-current": current === item.id ? 'page' : 'false', onKeyDown: (event) => onItemKeyDown(event) }, item.label)))))))))));
+};
+//# sourceMappingURL=menu.js.map

package/dist/collection/components/menubar/menu/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../../src/components/menubar/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { MenuItem } from '../menubar';\n\n/**\n * Menu of items that can be grouped.\n * @member {string} controlledBy - The HTML id of the element that controls the menu.\n * @member {MenuItem[]} items - The items to show in the menu.\n * @member {string} current - The id of the current active item.\n * @member {function} onItemKeyDown - The function to call when a key is pressed from a menuitem.\n */\nexport interface MenuProps {\n  controlledBy?: string;\n  items?: MenuItem[];\n  current?: string;\n  onItemKeyDown?: (event: KeyboardEvent) => void;\n}\n\nconst DEFAULT_GROUP_KEY = 'default';\nconst DEFAULT_GROUP = {\n  id: DEFAULT_GROUP_KEY,\n  label: DEFAULT_GROUP_KEY,\n};\n\n/** Get the items grouped by their group. */\nconst getGroupedItems = (items: MenuItem[]) => {\n  const groups = items.reduce<{ group: MenuProps['items'][number]['group']; items: MenuItem[] }[]>((grouped, item) => {\n    const itemGroup = grouped.find(({ group }) => group.id === (item.group?.id || DEFAULT_GROUP.id));\n    if (!itemGroup) {\n      grouped.push({ group: item.group ?? DEFAULT_GROUP, items: [item] });\n    } else {\n      itemGroup.items.push(item);\n    }\n\n    return grouped;\n  }, []);\n\n  // Sort to keep default group at the end\n  return groups.sort((a, b) => (a.group.id === DEFAULT_GROUP_KEY ? 1 : b.group.id === DEFAULT_GROUP_KEY ? -1 : 0));\n};\n\n/**\n * Floating menu component. It shows a list of items that can be grouped.\n */\nexport const Menu: FunctionalComponent<MenuProps> = ({ controlledBy, items, current, onItemKeyDown }) => {\n  if (!items?.length) {\n    return null;\n  }\n\n  const groups = getGroupedItems(items);\n\n  return (\n    <div\n      class=\"menu\"\n      aria-labelledby={controlledBy ?? undefined}\n      role=\"menu\"\n    >\n      {groups.map(({ group, items }) => (\n        <div\n          class=\"group\"\n          role=\"none\"\n        >\n          {group.id !== DEFAULT_GROUP_KEY ? (\n            <div\n              class=\"group-name\"\n              id={group.id}\n            >\n              {group.label}\n            </div>\n          ) : groups.length > 1 ? (\n            // empty div to keep the same height as the other groups\n            <div class=\"group-name\" />\n          ) : null}\n          <ul\n            class=\"menu-list\"\n            role=\"group\"\n            aria-labelledby={group.id !== DEFAULT_GROUP_KEY ? group.id : undefined}\n          >\n            {items.map((item) => (\n              <li role=\"none\">\n                {item.href && (\n                  <a\n                    class={{ 'menu-item': true, 'active': current === item.id, 'highlight': item.highlight }}\n                    href={item.href}\n                    role=\"menuitem\"\n                    tabIndex={-1}\n                    aria-current={current === item.id ? 'page' : 'false'}\n                    onKeyDown={(event) => onItemKeyDown(event)}\n                  >\n                    {item.label}\n                  </a>\n                )}\n              </li>\n            ))}\n          </ul>\n        </div>\n      ))}\n    </div>\n  );\n};\n"]}

package/dist/collection/components/menubar/menubar.css

@@ -0,0 +1,187 @@
+:host {
+  --zanit-menubar-max-width: ;
+
+  position: relative;
+  z-index: 2;
+  display: block;
+  width: 100%;
+  max-width: var(--zanit-menubar-max-width, 1366px);
+  background-color: #fff;
+  color: var(--gray900);
+  font-family: var(--font-family-sans);
+  overflow-x: clip;
+}
+
+:host,
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+*:focus:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
+
+ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+a {
+  color: var(--gray900);
+  cursor: pointer;
+  text-decoration: none;
+}
+
+button {
+  all: unset;
+  cursor: pointer;
+}
+
+:host > nav {
+  position: relative;
+}
+
+nav > ul {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  padding: 0 var(--grid-margin);
+  gap: 20px;
+}
+
+.menubar {
+  z-index: 2;
+  padding-right: 0;
+}
+
+nav > ul::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  box-shadow: var(--shadow-1);
+  content: '';
+  pointer-events: none;
+}
+
+/* separator bar */
+.menubar > li[role='separator'] {
+  width: 1px;
+  height: 1.25rem;
+  background-color: #000;
+}
+
+.menubar-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 14px 0;
+  font-size: 1rem;
+  gap: 8px;
+  line-height: 1.25rem;
+}
+
+.menubar .menubar-item {
+  text-transform: uppercase;
+}
+
+.menubar-item [data-text] {
+  display: flex;
+  flex-direction: column;
+}
+
+.menubar-item.active > [data-text],
+.menubar-item:hover > [data-text],
+.menubar-item:focus:focus-visible > [data-text] {
+  font-weight: var(--font-bd);
+}
+
+/* To avoid size changes in the element, when it is hovered and becomes bold,
+we put the same text already bold with height 0, so as to always occupy the maximum necessary width. */
+.menubar-item > [data-text]::after {
+  height: 0;
+  content: attr(data-text) / '';
+  font-weight: var(--font-bd);
+  letter-spacing: normal;
+  pointer-events: none;
+  user-select: none;
+  visibility: hidden;
+}
+
+.sub-menubar {
+  z-index: 1;
+}
+
+.sub-menubar:not(.visible) {
+  display: none;
+}
+
+.sub-menubar > ul {
+  gap: 28px;
+}
+
+.sub-menubar .menubar-item.active::after {
+  position: absolute;
+  z-index: -1;
+  bottom: 0;
+  left: -4px;
+  width: calc(100% + 8px); /* the border is 4px per side larger than its container */
+  height: 4px;
+  background-color: var(--red500);
+  content: '';
+}
+
+.searchbar-container {
+  margin-left: auto;
+}
+
+.searchbar {
+  display: flex;
+  font-size: 1.5rem;
+}
+
+.searchbar.searchbar-open {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  inset: 0;
+}
+
+.searchbar input {
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  padding: 8px var(--grid-margin);
+  border: none;
+  background-color: #fff;
+  font-family: var(--font-family-sans);
+  font-size: inherit;
+}
+
+.searchbar input::placeholder {
+  color: var(--gray500);
+}
+
+.searchbar .searchbar-button {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  border-left: 1px solid #000;
+  background: var(--zanit-accent-color);
+  font-family: inherit;
+  font-size: inherit;
+  gap: 64px;
+  line-height: 1;
+}
+
+.searchbar input:focus:focus-visible,
+.searchbar .searchbar-button:focus:focus-visible {
+  z-index: 1;
+}