@zanichelli/zanichelli-it-frontend-kit 0.1.1 → 0.1.3

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

@@ -1,114 +0,0 @@
-:host {
-  position: relative;
-  z-index: 2;
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  background-color: #fff;
-  color: var(--gray900);
-  fill: var(--gray900);
-  font-family: var(--font-family-sans);
-}
-
-: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;
-}
-
-nav {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  padding: 8px var(--grid-margin);
-}
-
-nav::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  background: transparent;
-  box-shadow: var(--shadow-1);
-  content: '';
-  pointer-events: none;
-}
-
-.burger-button {
-  margin-left: auto;
-}
-
-.mobile-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  padding: 16px var(--grid-margin) 32px;
-  background-color: #fff;
-  box-shadow: var(--shadow-2);
-  gap: 8px;
-}
-
-.mobile-menu li {
-  width: 100%;
-}
-
-.mobile-menu .items-container {
-  display: flex;
-  min-height: 256px;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.mobile-menu .items-container z-ghost-loading {
-  width: 40%;
-  height: 1.2rem;
-}
-
-.mobile-menu .items-container .menubar-item {
-  display: block;
-  width: 100%;
-  padding: 8px 0;
-  font-size: 1rem;
-  text-align: left;
-}
-
-.mobile-menu .items-container li:not(:last-child) .menubar-item {
-  border-bottom: 1px solid #000;
-}
-
-[role='menuitem'].parent {
-  display: flex;
-  width: fit-content;
-  align-items: center;
-  padding: 0;
-  border: none;
-  font-size: 0.875rem;
-  gap: 8px;
-}

package/dist/collection/components/menubar/mobile-menubar/mobile-menubar.js

@@ -1,280 +0,0 @@
-import { h } from "@stencil/core";
-import { containsTarget, moveFocus } from "../../../utils/utils";
-import { Menu } from "../menu/menu";
-/** Mobile menubar component. */
-export class ZanitMobileMenubar {
-    host;
-    /** ID of the current active item. */
-    current = undefined;
-    /** Menubar items. */
-    items = [];
-    /** Initial search query. */
-    searchQuery = undefined;
-    /** Whether the menubar is loading the data. */
-    loading = false;
-    parentItem = undefined;
-    menuItems = undefined;
-    /** Whether the items to render come from a menubar or a menu. */
-    menuType = undefined;
-    open;
-    onItemsChange() {
-        this.setupData(this.items);
-    }
-    /**
-     * Find the current item and take its parent, `menuItems` or the `navbarItems`.
-     * @returns True if an item matches the `current` prop, false otherwise.
-     */
-    setupData(items, parent) {
-        for (const item of items) {
-            if (item.id === this.current) {
-                const type = item.menuItems?.length ? 'menu' : 'menubar';
-                this.parentItem = parent;
-                this.menuType = type;
-                this.menuItems = item.menuItems || item.navbarItems;
-                return true;
-            }
-            if (item.menuItems?.some(({ id }) => id === this.current)) {
-                this.parentItem = parent;
-                this.menuType = 'menu';
-                this.menuItems = item.menuItems;
-                return true;
-            }
-            if (item.navbarItems?.length) {
-                return this.setupData(item.navbarItems, item);
-            }
-        }
-        return false;
-    }
-    get menuItemsElement() {
-        return Array.from(this.host.shadowRoot.querySelectorAll('[role="menuitem"]'));
-    }
-    /** Initialize tabindex on menuitems, setting -1 to all but the first one. */
-    initTabindex() {
-        this.menuItemsElement.forEach((item, index) => item.setAttribute('tabindex', index === 0 ? '0' : '-1'));
-    }
-    toggleMenu() {
-        if (this.open) {
-            this.open = false;
-        }
-        else {
-            this.open = true;
-            setTimeout(() => {
-                this.initTabindex();
-                this.menuItemsElement[0]?.focus();
-            }, 200);
-        }
-    }
-    /** Handles keyboard navigation on mobile menu. */
-    handleItemKeydown(event) {
-        switch (event.key) {
-            case 'ArrowUp': {
-                event.preventDefault();
-                event.stopPropagation();
-                const items = this.menuItemsElement;
-                const currentIndex = items.indexOf(event.target);
-                const prevItem = items[(currentIndex - 1 + items.length) % items.length];
-                moveFocus(items[currentIndex], prevItem);
-                break;
-            }
-            case 'ArrowDown': {
-                event.preventDefault();
-                event.stopPropagation();
-                const items = this.menuItemsElement;
-                const currentIndex = items.indexOf(event.target);
-                const nextItem = items[(currentIndex + 1) % items.length];
-                moveFocus(items[currentIndex], nextItem);
-                break;
-            }
-            case 'Home': {
-                event.preventDefault();
-                event.stopPropagation();
-                moveFocus(event.target, this.menuItemsElement[0]);
-                break;
-            }
-            case 'End': {
-                event.preventDefault();
-                event.stopPropagation();
-                moveFocus(event.target, this.menuItemsElement.pop());
-                break;
-            }
-        }
-    }
-    connectedCallback() {
-        this.setupData(this.items);
-    }
-    /** Close the menu when clicking outside. */
-    handleOutsideClick(event) {
-        if (containsTarget(this.host, event)) {
-            return;
-        }
-        this.open = false;
-    }
-    /** Close the menu when pressing Escape or Tab. */
-    handleKeydown(event) {
-        switch (event.key) {
-            case 'Escape':
-                this.open = false;
-                break;
-            case 'Tab':
-                if (containsTarget(this.host, event)) {
-                    break;
-                }
-                this.open = false;
-                break;
-        }
-    }
-    /** Close the menu when the focus goes out. */
-    handleFocusout(event) {
-        if (containsTarget(this.host, event)) {
-            return;
-        }
-        this.open = false;
-    }
-    render() {
-        return (h("nav", { key: 'df6d04c4bb8343ec62fe69df3f01f6f47b4367cf', "aria-label": "Zanichelli.it" }, h("z-logo", { key: 'e837d49cfe0076e98cc137d8b124a15145c7efe8', link: "/", height: 32, width: 126 }), h("button", { key: 'e3a1bf4100114d201e0bf10c2c0b59f93cce6f94', class: "burger-button", type: "button", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "mobile-menu", "aria-label": this.open ? 'Chiudi menù' : 'Apri menù', onClick: () => this.toggleMenu() }, h("z-icon", { key: '3eb050cd5e264df005a0f62cad45c16a190a2e9a', name: this.open ? 'multiply' : 'burger-menu', width: "1.5rem", height: "1.5rem" })), this.open && (h("ul", { key: 'ba97f02094674ccfff3b984dde341a63991590b8', class: "mobile-menu", role: "menubar" }, h("li", { key: '55dc248f23ea242f9cc8d3682c6aaa44484c8cfa', role: "none" }, h("zanit-search-form", { key: '065da5fec5e9eb34958c7d0824d2a8430ab4c01b', searchQuery: this.searchQuery, onResetSearch: () => (this.searchQuery = undefined) })), !this.loading && this.current && (h("li", { key: '4246e8673055fb86743d4b182456936d1de5fd84', role: "none" }, h("a", { key: '8681ac3870380b16f475ea201f57f970679f6e92', class: "parent", href: this.parentItem?.href ?? '/', id: this.parentItem?.id ?? undefined, role: "menuitem", tabIndex: -1, onKeyDown: (event) => this.handleItemKeydown(event) }, h("z-icon", { key: '87bed51b9ad80269fedc81f64c7412df1191e55e', name: "arrow-left", width: "0.5rem", height: "0.5rem" }), h("span", { key: 'e7f19c9b707c1e3f14a4a583b86093213807ba2a' }, this.parentItem?.label ?? 'Home')))), this.loading && (h("div", { key: '2e1e53699630bde2fc6a87ec2b2fcad3cbdfb87a', class: "items-container", role: "none" }, [...new Array(4)].map(() => (h("li", { role: "none" }, h("div", { class: "menubar-item", role: "none" }, h("z-ghost-loading", null))))))), this.menuType === 'menu' ? (h(Menu, { items: this.menuItems, current: this.current, onItemKeyDown: (event) => this.handleItemKeydown(event) })) : (this.menuItems?.length && (h("div", { class: "items-container", role: "none" }, this.menuItems.map((item) => (h("li", { role: "none" }, h("a", { class: {
-                'menu-item': this.menuType === 'menu',
-                'menubar-item': this.menuType === 'menubar',
-            }, href: item.href, id: item.id, role: "menuitem", "aria-current": this.current === item.id ? 'page' : 'false', tabIndex: -1, onKeyDown: (event) => this.handleItemKeydown(event) }, h("span", { "data-text": item.label }, item.label))))))))))));
-    }
-    static get is() { return "zanit-mobile-menubar"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["mobile-menubar.css", "../menu/menu.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["mobile-menubar.css", "../menu/menu.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "current": {
-                "type": "string",
-                "attribute": "current",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | undefined",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "ID of the current active item."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "undefined"
-            },
-            "items": {
-                "type": "unknown",
-                "attribute": "items",
-                "mutable": false,
-                "complexType": {
-                    "original": "MenubarItem[]",
-                    "resolved": "MenubarItem[]",
-                    "references": {
-                        "MenubarItem": {
-                            "location": "import",
-                            "path": "../../../utils/types",
-                            "id": "src/utils/types.ts::MenubarItem"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Menubar items."
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            },
-            "searchQuery": {
-                "type": "string",
-                "attribute": "search-query",
-                "mutable": true,
-                "complexType": {
-                    "original": "string | undefined",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Initial search query."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "undefined"
-            },
-            "loading": {
-                "type": "boolean",
-                "attribute": "loading",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the menubar is loading the data."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "parentItem": {},
-            "menuItems": {},
-            "menuType": {},
-            "open": {}
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "items",
-                "methodName": "onItemsChange"
-            }, {
-                "propName": "current",
-                "methodName": "onItemsChange"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "click",
-                "method": "handleOutsideClick",
-                "target": "document",
-                "capture": false,
-                "passive": true
-            }, {
-                "name": "keydown",
-                "method": "handleKeydown",
-                "target": undefined,
-                "capture": false,
-                "passive": true
-            }, {
-                "name": "focusin",
-                "method": "handleFocusout",
-                "target": "document",
-                "capture": false,
-                "passive": true
-            }];
-    }
-}
-//# sourceMappingURL=mobile-menubar.js.map

package/dist/collection/components/menubar/mobile-menubar/mobile-menubar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"mobile-menubar.js","sourceRoot":"","sources":["../../../../src/components/menubar/mobile-menubar/mobile-menubar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { MenubarItem, MenuItem } from '../../../utils/types';\nimport { containsTarget, moveFocus } from '../../../utils/utils';\nimport { Menu } from '../menu/menu';\n\n/** Mobile menubar component. */\n@Component({\n  tag: 'zanit-mobile-menubar',\n  styleUrls: ['mobile-menubar.css', '../menu/menu.css'],\n  shadow: true,\n})\nexport class ZanitMobileMenubar {\n  @Element() host: HTMLZanitMobileMenubarElement;\n\n  /** ID of the current active item. */\n  @Prop() current: string | undefined = undefined;\n\n  /** Menubar items. */\n  @Prop() items: MenubarItem[] = [];\n\n  /** Initial search query. */\n  @Prop({ mutable: true }) searchQuery: string | undefined = undefined;\n\n  /** Whether the menubar is loading the data. */\n  @Prop() loading: boolean = false;\n\n  @State() parentItem: MenubarItem | undefined = undefined;\n  @State() menuItems: MenubarItem[] | MenuItem[] | undefined = undefined;\n  /** Whether the items to render come from a menubar or a menu. */\n  @State() menuType: 'menubar' | 'menu' | undefined = undefined;\n  @State() open: boolean;\n\n  @Watch('items')\n  @Watch('current')\n  onItemsChange() {\n    this.setupData(this.items);\n  }\n\n  /**\n   * Find the current item and take its parent, `menuItems` or the `navbarItems`.\n   * @returns True if an item matches the `current` prop, false otherwise.\n   */\n  private setupData(items: MenubarItem[], parent?: MenubarItem): boolean {\n    for (const item of items) {\n      if (item.id === this.current) {\n        const type = item.menuItems?.length ? 'menu' : 'menubar';\n        this.parentItem = parent;\n        this.menuType = type;\n        this.menuItems = item.menuItems || item.navbarItems;\n        return true;\n      }\n\n      if (item.menuItems?.some(({ id }) => id === this.current)) {\n        this.parentItem = parent;\n        this.menuType = 'menu';\n        this.menuItems = item.menuItems;\n        return true;\n      }\n\n      if (item.navbarItems?.length) {\n        return this.setupData(item.navbarItems, item);\n      }\n    }\n\n    return false;\n  }\n\n  private get menuItemsElement() {\n    return Array.from(this.host.shadowRoot.querySelectorAll('[role=\"menuitem\"]')) as HTMLElement[];\n  }\n\n  /** Initialize tabindex on menuitems, setting -1 to all but the first one. */\n  private initTabindex() {\n    this.menuItemsElement.forEach((item, index) => item.setAttribute('tabindex', index === 0 ? '0' : '-1'));\n  }\n\n  private toggleMenu() {\n    if (this.open) {\n      this.open = false;\n    } else {\n      this.open = true;\n      setTimeout(() => {\n        this.initTabindex();\n        this.menuItemsElement[0]?.focus();\n      }, 200);\n    }\n  }\n\n  /** Handles keyboard navigation on mobile menu. */\n  private handleItemKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowUp': {\n        event.preventDefault();\n        event.stopPropagation();\n        const items = this.menuItemsElement;\n        const currentIndex = items.indexOf(event.target as HTMLElement);\n        const prevItem = items[(currentIndex - 1 + items.length) % items.length];\n        moveFocus(items[currentIndex], prevItem);\n        break;\n      }\n      case 'ArrowDown': {\n        event.preventDefault();\n        event.stopPropagation();\n        const items = this.menuItemsElement;\n        const currentIndex = items.indexOf(event.target as HTMLElement);\n        const nextItem = items[(currentIndex + 1) % items.length];\n        moveFocus(items[currentIndex], nextItem);\n        break;\n      }\n      case 'Home': {\n        event.preventDefault();\n        event.stopPropagation();\n        moveFocus(event.target as HTMLElement, this.menuItemsElement[0]);\n        break;\n      }\n      case 'End': {\n        event.preventDefault();\n        event.stopPropagation();\n        moveFocus(event.target as HTMLElement, this.menuItemsElement.pop());\n        break;\n      }\n    }\n  }\n\n  connectedCallback() {\n    this.setupData(this.items);\n  }\n\n  /** Close the menu when clicking outside. */\n  @Listen('click', { target: 'document', passive: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (containsTarget(this.host, event)) {\n      return;\n    }\n\n    this.open = false;\n  }\n\n  /** Close the menu when pressing Escape or Tab. */\n  @Listen('keydown', { passive: true })\n  handleKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'Escape':\n        this.open = false;\n        break;\n      case 'Tab':\n        if (containsTarget(this.host, event)) {\n          break;\n        }\n\n        this.open = false;\n        break;\n    }\n  }\n\n  /** Close the menu when the focus goes out. */\n  @Listen('focusin', { target: 'document', passive: true })\n  handleFocusout(event: FocusEvent) {\n    if (containsTarget(this.host, event)) {\n      return;\n    }\n\n    this.open = false;\n  }\n\n  render() {\n    return (\n      <nav aria-label=\"Zanichelli.it\">\n        <z-logo\n          link=\"/\"\n          height={32}\n          width={126}\n        ></z-logo>\n        <button\n          class=\"burger-button\"\n          type=\"button\"\n          aria-expanded={this.open ? 'true' : 'false'}\n          aria-controls=\"mobile-menu\"\n          aria-label={this.open ? 'Chiudi menù' : 'Apri menù'}\n          onClick={() => this.toggleMenu()}\n        >\n          <z-icon\n            name={this.open ? 'multiply' : 'burger-menu'}\n            width=\"1.5rem\"\n            height=\"1.5rem\"\n          ></z-icon>\n        </button>\n        {this.open && (\n          <ul\n            class=\"mobile-menu\"\n            role=\"menubar\"\n          >\n            <li role=\"none\">\n              <zanit-search-form\n                searchQuery={this.searchQuery}\n                onResetSearch={() => (this.searchQuery = undefined)}\n              />\n            </li>\n\n            {!this.loading && this.current && (\n              <li role=\"none\">\n                <a\n                  class=\"parent\"\n                  href={this.parentItem?.href ?? '/'}\n                  id={this.parentItem?.id ?? undefined}\n                  role=\"menuitem\"\n                  tabIndex={-1}\n                  onKeyDown={(event) => this.handleItemKeydown(event)}\n                >\n                  <z-icon\n                    name=\"arrow-left\"\n                    width=\"0.5rem\"\n                    height=\"0.5rem\"\n                  ></z-icon>\n                  <span>\n                    {/* Show the 'Home' label if the current item is a root child. */}\n                    {this.parentItem?.label ?? 'Home'}\n                  </span>\n                </a>\n              </li>\n            )}\n\n            {this.loading && (\n              <div\n                class=\"items-container\"\n                role=\"none\"\n              >\n                {[...new Array(4)].map(() => (\n                  <li role=\"none\">\n                    <div\n                      class=\"menubar-item\"\n                      role=\"none\"\n                    >\n                      <z-ghost-loading></z-ghost-loading>\n                    </div>\n                  </li>\n                ))}\n              </div>\n            )}\n\n            {this.menuType === 'menu' ? (\n              <Menu\n                items={this.menuItems}\n                current={this.current}\n                onItemKeyDown={(event) => this.handleItemKeydown(event)}\n              />\n            ) : (\n              this.menuItems?.length && (\n                <div\n                  class=\"items-container\"\n                  role=\"none\"\n                >\n                  {this.menuItems.map((item) => (\n                    <li role=\"none\">\n                      <a\n                        class={{\n                          'menu-item': this.menuType === 'menu',\n                          'menubar-item': this.menuType === 'menubar',\n                        }}\n                        href={item.href}\n                        id={item.id}\n                        role=\"menuitem\"\n                        aria-current={this.current === item.id ? 'page' : 'false'}\n                        tabIndex={-1}\n                        onKeyDown={(event) => this.handleItemKeydown(event)}\n                      >\n                        <span data-text={item.label}>{item.label}</span>\n                      </a>\n                    </li>\n                  ))}\n                </div>\n              )\n            )}\n          </ul>\n        )}\n      </nav>\n    );\n  }\n}\n"]}

package/dist/collection/components/menubar/search-form/search-form.css

@@ -1,143 +0,0 @@
-:host,
-*,
-::before,
-::after {
-  box-sizing: border-box;
-}
-
-*:focus:focus-visible {
-  box-shadow: var(--shadow-focus-primary);
-  outline: none;
-}
-
-button {
-  all: unset;
-  cursor: pointer;
-}
-
-@media (width < 768px) {
-  .searchbar {
-    display: flex;
-    align-items: center;
-    border: 1px solid #000;
-    border-radius: 4px;
-  }
-
-  .searchbar > *:first-child {
-    /* To have a seamless appearance of the border radius of an internal child element nested within a parent element with rounded borders, we need to subtract the parent's border thickness from the child's border radius. Inner Radius = Outer Radius - Border Thickness */
-    border-bottom-left-radius: 3px;
-    border-top-left-radius: 3px;
-  }
-
-  .searchbar button[type='reset'] {
-    display: flex;
-    padding: 0 0 0 8px;
-    cursor: pointer;
-  }
-
-  .searchbar input {
-    width: 100%;
-    height: 100%;
-    padding: 4px 8px;
-    border: none;
-    background-color: #fff;
-    font-family: var(--font-family-sans);
-    font-size: 1rem;
-  }
-
-  .searchbar input[type='search']::-webkit-search-cancel-button,
-  .searchbar input[type='search']::-webkit-search-decoration {
-    appearance: none;
-  }
-
-  .searchbar input::placeholder {
-    color: var(--gray500);
-  }
-
-  .searchbar .searchbar-button {
-    padding: 4px 8px;
-    border-left: 1px solid #000;
-    background: var(--zanit-accent-color);
-    border-bottom-right-radius: 3px;
-    border-top-right-radius: 3px;
-  }
-
-  .searchbar input:focus:focus-visible,
-  .searchbar .searchbar-button:focus:focus-visible {
-    z-index: 1;
-  }
-}
-
-@media (width >= 768px) {
-  .searchbar {
-    display: flex;
-    font-size: 1.5rem;
-  }
-
-  .searchbar.searchbar-open {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    inset: 0;
-  }
-
-  .searchbar .input-wrapper {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    padding: 0 0 0 var(--grid-margin);
-    background-color: #fff;
-    gap: 14px;
-  }
-
-  .searchbar button[type='reset'] {
-    display: flex;
-    align-items: center;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-
-  .searchbar input {
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    padding: 8px 14px 8px 0;
-    border: none;
-    background-color: #fff;
-    font-family: var(--font-family-sans);
-    font-size: inherit;
-  }
-
-  .searchbar input[type='search']::-webkit-search-cancel-button,
-  .searchbar input[type='search']::-webkit-search-decoration {
-    appearance: none;
-  }
-
-  .searchbar input::placeholder {
-    color: var(--gray500);
-  }
-
-  .searchbar .searchbar-button {
-    display: flex;
-    align-items: center;
-    padding: 8px 16px;
-    border-right: 1px solid #000;
-    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;
-  }
-}
-
-@media (width >= 768px) and (width < 1152px) {
-  .searchbar .searchbar-button > .searchbar-button-label {
-    display: none;
-  }
-}