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

package/dist/node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-menu-section/styles.css

@@ -0,0 +1,138 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 0;
+  font-family: var(--font-family-sans);
+}
+
+:host,
+::slotted(*),
+* {
+  box-sizing: border-box;
+}
+
+::slotted(a) {
+  text-decoration: none;
+}
+
+::slotted(*) {
+  color: var(--color-default-text);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+.label {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  padding: var(--space-unit) 0;
+  border: 0;
+  border-bottom: var(--border-size-small) solid var(--color-surface03);
+  margin: 0;
+  background: transparent;
+  border-radius: 0;
+  cursor: pointer;
+  text-align: left;
+}
+
+:host(:last-child:not([open])) .label {
+  border-bottom: none;
+}
+
+:host(:is([active], [open])) .label,
+.label:focus:focus-visible,
+.label:hover {
+  border-color: var(--color-primary01);
+}
+
+.label:focus:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
+
+:host(:is([active], [open])) .label ::slotted(*),
+.label:focus:focus-visible ::slotted(*),
+.label:hover ::slotted(*) {
+  font-weight: var(--font-bd);
+}
+
+::slotted([data-text]) {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+/* Trick to prevent layout shifts on font-weight changes.
+The trick is to put an hidden copy of the text already set to bold,
+so the needed space is correctly calculated before any hover/active state changes the
+font-weight of the real text.
+The hidden text has an height of 0px so it can expand the width without changing the height
+when placed below the real text using `flex-direction: column`. */
+::slotted([data-text])::after {
+  overflow: hidden;
+  height: 0;
+  content: attr(data-text);
+  content: attr(data-text) / "";
+  font-weight: var(--font-bd);
+  pointer-events: none;
+  user-select: none;
+  visibility: hidden;
+}
+
+@media speech {
+  ::slotted([data-text])::after {
+    display: none;
+  }
+}
+
+.label ::slotted(*) {
+  width: 100%;
+  margin: 0;
+  font-size: var(--font-size-3);
+  line-height: 1.5;
+}
+
+.label z-icon {
+  margin-left: calc(var(--space-unit) * 4);
+  fill: var(--color-default-icon);
+}
+
+.items {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  padding: calc(var(--space-unit) / 2);
+  padding-bottom: calc(var(--space-unit) * 1.5);
+}
+
+.items[hidden] {
+  display: none;
+}
+
+::slotted([slot="section"]) {
+  display: inline-flex;
+  padding: calc(var(--space-unit) / 2);
+  margin: 0;
+  font-size: var(--font-size-1);
+  line-height: 1.333;
+  outline: none;
+}
+
+::slotted([slot="section"]:last-of-type) {
+  border: none;
+}
+
+::slotted([slot="section"]:focus:focus-visible) {
+  box-shadow: var(--shadow-focus-primary);
+  color: var(--color-primary01);
+}
+
+::slotted([slot="section"]:hover),
+::slotted([slot="section"]:focus:focus-visible),
+::slotted([slot="section"]:active),
+::slotted([slot="section"][active]),
+::slotted([slot="section"][data-active]) {
+  color: var(--color-primary01);
+  font-weight: var(--font-bd);
+}

package/dist/node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-modal/styles.css

@@ -0,0 +1,266 @@
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+
+  --z-modal-content-padding: ;
+}
+
+:host > dialog {
+  padding: 0;
+  border: none;
+  margin: 0;
+  background-color: transparent;
+}
+
+/* stylelint-disable selector-pseudo-class-no-unknown */
+:host > dialog:modal {
+  width: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+:host > dialog::backdrop {
+  display: none;
+}
+
+/* polyfill style */
+:host > dialog + .backdrop {
+  display: none;
+}
+
+:host > dialog:not([open]) {
+  display: none;
+}
+
+:host > dialog[open] {
+  display: block;
+}
+
+::slotted([slot="modalContent"]) {
+  padding: var(--z-modal-content-padding, calc(var(--space-unit) * 2));
+}
+
+.modal-container {
+  z-index: 1010;
+  display: flex;
+  overflow: -moz-scrollbars-none;
+  width: 100%;
+  height: 100vh;
+  flex-direction: column;
+}
+
+.modal-container > .modal-content-scroll-outside {
+  overflow: auto;
+  background: var(--color-surface01);
+}
+
+.modal-container > header {
+  padding: calc(var(--space-unit) * 1.75) calc(var(--space-unit) * 2);
+  background: var(--color-background);
+}
+
+.modal-container > header button {
+  padding: 0;
+  border: none;
+  margin: 0;
+  margin-left: auto;
+  background: transparent;
+  cursor: pointer;
+}
+
+.modal-container > header button:focus-visible {
+  border-radius: 50%;
+  box-shadow: var(--shadow-focus-primary);
+  outline: none !important;
+}
+
+.modal-container > header button::after {
+  position: absolute;
+  top: 6px;
+  right: 4px;
+  display: block;
+  width: 40px;
+  height: 40px;
+  background-color: transparent;
+  content: "";
+}
+
+.modal-container > header z-icon {
+  --z-icon-width: calc(var(--space-unit) * 2.25);
+  --z-icon-height: calc(var(--space-unit) * 2.25);
+
+  display: flex;
+  fill: var(--color-primary01-icon);
+}
+
+.modal-container > header > div {
+  display: flex;
+  width: 100%;
+  align-items: baseline;
+  margin-right: calc(var(--space-unit) * 2);
+}
+
+.modal-container > header h1,
+.modal-container > header .subtitle {
+  padding: 0;
+  margin: 0;
+  color: var(--color-default-text);
+  font-weight: var(--font-sb);
+}
+
+.modal-container > header h1 {
+  font-size: var(--font-size-5);
+  letter-spacing: 0;
+  line-height: 1.4;
+}
+
+.modal-container > header .subtitle {
+  font-size: var(--font-size-3);
+  font-weight: var(--font-rg);
+  letter-spacing: 0;
+  line-height: 1.5;
+}
+
+.modal-container > header > div > h1 *:empty {
+  display: none;
+}
+
+.modal-container > header h1 + .subtitle {
+  margin-top: calc(var(--space-unit) * 0.5);
+}
+
+.modal-container-scroll-inside > .modal-content-scroll-inside {
+  overflow: hidden auto;
+  flex: 1 auto;
+  background: var(--color-surface01);
+}
+
+.modal-container-scroll-inside > .modal-content-scroll-inside::-webkit-scrollbar,
+.modal-container-scroll-outside > .modal-content-scroll-outside::-webkit-scrollbar {
+  width: 6px;
+  background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);
+}
+
+.modal-container-scroll-inside > .modal-content-scroll-inside::-webkit-scrollbar-thumb,
+.modal-container-scroll-outside > .modal-content-scroll-outside::-webkit-scrollbar-thumb {
+  background-color: var(--color-primary01);
+}
+
+.modal-container-scroll-inside > .modal-content-scroll-inside::-webkit-scrollbar-thumb:hover,
+.modal-container-scroll-outside > .modal-content-scroll-outside::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-hover-primary);
+}
+
+/* Firefox */
+@supports not selector(::-webkit-scrollbar-track) {
+  .modal-container-scroll-inside .modal-content-scroll-inside,
+  .modal-container-scroll-outside .modal-content-scroll-outside {
+    scrollbar-color: var(--color-primary01) transparent;
+  }
+}
+
+/* Tablet / Desktop */
+@media only screen and (min-width: 768px) {
+  .modal-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--gray900);
+    opacity: 0.7;
+  }
+
+  .modal-background.modal-background-scroll-outside {
+    position: sticky;
+  }
+
+  .modal-container-scroll-inside {
+    position: fixed;
+    top: calc(var(--space-unit) * 6);
+    left: 50%;
+    overflow: hidden;
+    width: auto;
+    min-width: calc(var(--space-unit) * 40);
+    height: auto;
+    min-height: calc(var(--space-unit) * 40);
+    max-height: calc(100vh - calc(var(--space-unit) * 6 * 2));
+    border-radius: var(--border-radius);
+    transform: translateX(-50%);
+  }
+
+  .modal-container-scroll-outside {
+    position: absolute;
+    top: calc(var(--space-unit) * 6);
+    left: 50%;
+    display: block;
+    overflow: initial;
+    width: auto;
+    min-width: calc(var(--space-unit) * 40);
+    height: auto;
+    min-height: calc(var(--space-unit) * 40);
+    max-height: calc(100vh - calc(var(--space-unit) * 6 * 2));
+    transform: translateX(-50%);
+  }
+
+  .modal-container > .modal-content-scroll-outside {
+    overflow: initial;
+  }
+
+  .modal-container-scroll-outside > header,
+  .modal-container-scroll-inside > header {
+    border-top-left-radius: var(--border-radius);
+    border-top-right-radius: var(--border-radius);
+  }
+
+  .modal-container-scroll-outside::after {
+    display: block;
+    height: calc(var(--space-unit) * 6);
+    content: " ";
+  }
+
+  .modal-dialog {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: auto;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .modal-content-scroll-outside {
+    border-bottom-left-radius: var(--border-radius);
+    border-bottom-right-radius: var(--border-radius);
+  }
+
+  .modal-dialog::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* Desktop */
+@media (min-width: 1152px) {
+  .modal-container > header {
+    padding-top: calc(var(--space-unit) * 1.5);
+    padding-bottom: calc(var(--space-unit) * 1.5);
+  }
+
+  .modal-container > header h1 {
+    font-size: var(--font-size-6);
+    font-weight: var(--font-sb);
+    letter-spacing: 0;
+    line-height: 1.333;
+  }
+
+  .modal-container > header .subtitle {
+    font-size: var(--font-size-4);
+    font-weight: var(--font-rg);
+    letter-spacing: 0;
+    line-height: 1.5;
+  }
+
+  .modal-container > header h1 + .subtitle {
+    margin-top: 0;
+  }
+}

package/dist/node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-navigation-tabs/styles.css

@@ -0,0 +1,212 @@
+z-navigation-tabs {
+  --z-navigation-tabs-nav-buttons-bg: ;
+  --z-navigation-tabs-nav-buttons-fg: ;
+
+  position: relative;
+  z-index: 0;
+  display: flex;
+  overflow: hidden;
+  flex-direction: row;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+z-navigation-tabs,
+z-navigation-tabs * {
+  box-sizing: border-box;
+}
+
+z-navigation-tabs > nav::-webkit-scrollbar {
+  display: none;
+}
+
+z-navigation-tabs .navigation-button {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  margin: 0;
+  background-color: var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));
+  border-radius: var(--border-no-radius);
+  box-shadow: 0 0 4px 1px var(--shadow-color-base);
+  cursor: pointer;
+  fill: var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));
+  outline: none;
+}
+
+z-navigation-tabs .navigation-button:disabled {
+  display: none;
+}
+
+z-navigation-tabs > nav {
+  z-index: 0;
+  display: flex;
+  overflow: auto;
+  align-items: center;
+  justify-content: flex-start;
+  scroll-behavior: smooth;
+
+  /* hide scrollbar in Firefox */
+  scrollbar-width: none;
+}
+
+z-navigation-tabs[orientation="horizontal"] > nav {
+  width: 100%;
+}
+
+z-navigation-tabs[orientation="horizontal"] .navigation-button {
+  top: 0;
+  width: calc(var(--space-unit) * 4);
+  height: 100%;
+}
+
+z-navigation-tabs[orientation="horizontal"] .navigation-button:first-child {
+  left: 0;
+}
+
+z-navigation-tabs[orientation="horizontal"] .navigation-button:last-child {
+  right: 0;
+}
+
+/* Orientation vertical */
+z-navigation-tabs[orientation="vertical"] {
+  width: fit-content;
+  flex-direction: column;
+}
+
+z-navigation-tabs[orientation="vertical"] > nav {
+  height: 100%;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+z-navigation-tabs[orientation="vertical"] .navigation-button {
+  left: 0;
+  width: 100%;
+  height: calc(var(--space-unit) * 4);
+}
+
+z-navigation-tabs[orientation="vertical"] .navigation-button:first-child {
+  top: 0;
+}
+
+z-navigation-tabs[orientation="vertical"] .navigation-button:last-child {
+  bottom: 0;
+}
+
+z-navigation-tabs[size="small"][orientation="vertical"] .navigation-button {
+  height: calc(var(--space-unit) * 4);
+}
+
+/* Style for the tabs */
+
+z-navigation-tabs > nav > * {
+  position: relative;
+  z-index: 0;
+  display: inline-flex;
+  width: auto;
+  align-items: center;
+  justify-content: center;
+  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);
+  border: none;
+  margin: 0;
+  background-color: unset;
+  border-radius: var(--border-no-radius);
+  color: var(--color-primary01);
+  cursor: pointer;
+  fill: currentcolor;
+  font-family: var(--font-family-sans);
+  font-size: inherit;
+  gap: var(--space-unit);
+  letter-spacing: inherit;
+  line-height: inherit;
+  outline: none;
+  text-align: center;
+  white-space: nowrap;
+}
+
+z-navigation-tabs > nav > a {
+  text-decoration: none;
+}
+
+z-navigation-tabs > nav > *:focus:focus-visible {
+  z-index: 1;
+  box-shadow: inset 0 0 2px 2px var(--blue800);
+}
+
+z-navigation-tabs > nav > :not([disabled]):hover {
+  background-color: var(--color-background);
+}
+
+z-navigation-tabs > nav > button[disabled] {
+  color: var(--color-disabled03);
+  cursor: not-allowed;
+  fill: currentcolor;
+  pointer-events: all;
+}
+
+z-navigation-tabs > nav > :not([disabled]):hover,
+nav > [aria-selected="true"] {
+  color: var(--color-hover-primary);
+  fill: currentcolor;
+}
+
+z-navigation-tabs > nav > :not([disabled]):hover::after,
+nav > [aria-selected="true"]::after {
+  position: absolute;
+  background-color: var(--color-hover-primary);
+  content: "";
+}
+
+z-navigation-tabs[orientation="horizontal"] > nav > :not([disabled]):hover::after,
+z-navigation-tabs[orientation="horizontal"] > nav > [aria-selected="true"]::after {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: var(--border-size-large);
+}
+
+z-navigation-tabs > nav > * z-icon {
+  --z-icon-width: calc(var(--space-unit) * 2);
+  --z-icon-height: calc(var(--space-unit) * 2);
+
+  display: flex;
+  margin: 0;
+}
+
+/* `small` size (only available for horizontal orientation) */
+
+z-navigation-tabs[size="small"][orientation="horizontal"] > nav > * {
+  padding: var(--space-unit) calc(var(--space-unit) * 2);
+}
+
+z-navigation-tabs[size="small"][orientation="horizontal"] > nav > :not([disabled]):hover::after,
+z-navigation-tabs[size="small"][orientation="horizontal"] > nav > [aria-selected="true"]::after {
+  height: var(--border-size-medium);
+}
+
+z-navigation-tabs[size="small"]:not([orientation="vertical"]) > nav > * z-icon {
+  --z-icon-width: 14px;
+  --z-icon-height: 14px;
+}
+
+/* Orientation Vertical */
+
+z-navigation-tabs[orientation="vertical"] > nav > * {
+  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);
+}
+
+z-navigation-tabs[orientation="vertical"] > nav > * > :not(z-icon) {
+  display: none;
+}
+
+z-navigation-tabs[orientation="vertical"] > nav > :not([disabled]):hover::after,
+z-navigation-tabs[orientation="vertical"] > nav > [aria-selected="true"]::after {
+  top: 0;
+  right: 0;
+  width: var(--border-size-large);
+  height: 100%;
+}