@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-button/styles.css

@@ -0,0 +1,149 @@
+:host {
+  display: inline-block;
+
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+  --z-icon-right-margin: 0;
+}
+
+:host([disabled]:not([disabled="false"])) {
+  pointer-events: none;
+}
+
+:host .z-button--container {
+  display: inline-flex;
+  width: 100%;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border-width: var(--border-size-medium);
+  border-style: solid;
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  fill: currentcolor;
+  font-family: var(--font-family-sans);
+  font-size: 14px;
+  font-weight: var(--font-sb);
+  letter-spacing: 0.3px;
+  line-height: 1;
+  outline: none;
+  text-decoration: none;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+:host .z-button--container:focus:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+:host .z-button--container.z-button--has-text {
+  min-width: calc(var(--space-unit) * 8);
+  padding: 0 calc(var(--space-unit) * 2);
+}
+
+:host .z-button--container.z-button--has-text z-icon {
+  --z-icon-right-margin: var(--space-unit);
+}
+
+:host([size="big"]) .z-button--container {
+  min-width: 44px;
+  height: 44px;
+}
+
+:host([size="small"]) .z-button--container {
+  min-width: 36px;
+  height: 36px;
+}
+
+:host([size="x-small"]) .z-button--container {
+  min-width: 32px;
+  height: 32px;
+}
+
+:host([variant="primary"]) .z-button--container {
+  border-color: var(--color-primary01);
+  background-color: var(--color-primary01);
+  color: var(--color-text-inverse);
+}
+
+@media (hover: hover) {
+  :host([variant="primary"]) .z-button--container:hover {
+    border-color: var(--color-hover-primary);
+    background-color: var(--color-hover-primary);
+    color: var(--color-text-inverse);
+  }
+}
+
+:host([variant="primary"]) .z-button--container:active {
+  border-color: var(--color-pressed-primary);
+  background-color: var(--color-pressed-primary);
+  box-shadow: var(--shadow-2);
+  color: var(--color-text-inverse);
+}
+
+:host([variant="primary"][disabled]:not([disabled="false"])) .z-button--container {
+  border-color: var(--color-disabled01);
+  background-color: var(--color-disabled01);
+  color: var(--color-disabled03);
+}
+
+:host([variant="secondary"]) .z-button--container {
+  border-color: var(--color-primary01);
+  background-color: var(--color-button-secondary);
+  color: var(--color-primary01);
+}
+
+@media (hover: hover) {
+  :host([variant="secondary"]) .z-button--container:hover {
+    border-color: var(--color-hover-primary);
+    background-color: var(--color-button-secondary);
+    color: var(--color-hover-primary);
+  }
+}
+
+:host([variant="secondary"]) .z-button--container:active {
+  border-color: var(--color-pressed-primary);
+  background-color: var(--color-button-secondary);
+  box-shadow: var(--shadow-2);
+  color: var(--color-pressed-primary);
+}
+
+:host([variant="secondary"][disabled]:not([disabled="false"])) .z-button--container {
+  border-color: var(--color-disabled01);
+  background-color: var(--color-button-secondary);
+  color: var(--color-disabled03);
+}
+
+:host([variant="tertiary"]) .z-button--container {
+  border-color: var(--color-primary02);
+  background-color: var(--color-primary02);
+  color: var(--color-primary01);
+}
+
+@media (hover: hover) {
+  :host([variant="tertiary"]) .z-button--container:hover {
+    border-color: var(--color-primary03);
+    background-color: var(--color-primary03);
+    color: var(--color-hover-primary);
+  }
+}
+
+:host([variant="tertiary"]) .z-button--container:focus:focus-visible {
+  border-color: var(--color-primary02);
+  background-color: var(--color-primary02);
+  color: var(--color-primary01);
+}
+
+:host([variant="tertiary"]) .z-button--container:active {
+  border-color: var(--color-primary02);
+  background-color: var(--color-primary02);
+  box-shadow: var(--shadow-2);
+  color: var(--color-primary01);
+}
+
+:host([variant="tertiary"][disabled]:not([disabled="false"])) .z-button--container {
+  border-color: var(--color-disabled01);
+  background-color: var(--color-disabled01);
+  color: var(--color-disabled03);
+}

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

@@ -0,0 +1,84 @@
+button {
+  display: flex;
+  max-width: 100%;
+  height: 36px;
+  align-items: center;
+  padding: 0 var(--space-unit);
+  border: var(--border-size-medium) solid var(--color-primary01);
+  background-color: var(--color-surface01);
+  border-radius: var(--border-radius);
+  color: var(--color-primary01);
+  cursor: pointer;
+  fill: var(--color-primary01);
+  font-family: var(--font-family-sans);
+  font-size: 14px;
+  font-weight: var(--font-sb);
+  outline: none;
+}
+
+button::-moz-focus-inner {
+  border: 0;
+}
+
+button:hover {
+  border-color: var(--color-hover-primary);
+  color: var(--color-hover-primary);
+  fill: var(--color-hover-primary-icon);
+}
+
+button:focus {
+  border-color: var(--color-primary01);
+  box-shadow: var(--shadow-focus-primary);
+  color: var(--color-primary01);
+  fill: var(--color-primary01);
+}
+
+button:active {
+  border-color: var(--color-pressed-primary);
+  box-shadow: var(--shadow-2);
+  color: var(--color-pressed-primary);
+  fill: var(--color-active-primary-icon);
+}
+
+button.selected {
+  border-color: var(--color-hover-primary);
+  background-color: var(--color-hover-primary);
+  color: var(--color-text-inverse);
+  fill: var(--color-inverse-icon);
+}
+
+button > span.ellipsis {
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+button > span.counter {
+  margin-right: calc(var(--space-unit) * 2);
+  margin-left: calc(var(--space-unit) / 2);
+}
+
+button > span.sort {
+  margin-right: calc(var(--space-unit) / 2);
+  white-space: nowrap;
+}
+
+button > span {
+  margin-right: calc(var(--space-unit) / 2);
+}
+
+/* Tablet breakpoint */
+@media (min-width: 768px) {
+  button {
+    max-width: 325px;
+  }
+}
+
+/* Desktop breakpoint */
+@media (min-width: 1152px) {
+  button {
+    max-width: 490px;
+  }
+}

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

@@ -0,0 +1,230 @@
+/* The width of the card must be set by its container,
+respecting the grid indications of the design. */
+
+:host {
+  /* Override this var to change the cover's aspect ratio */
+  --aspect-ratio: 1.62;
+  --z-card--border-color: var(--gray200);
+  --z-card--color-cover-background: var(--color-surface01);
+  --z-card--text-background: var(--color-surface01);
+  --z-card--text-border-radius: none;
+  --z-card--text-border: none;
+  --z-card--text-padding: calc(var(--space-unit) * 2) var(--space-unit);
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+*,
+::slotted(*) {
+  box-sizing: border-box;
+}
+
+*:focus:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
+
+:host(:not([variant="overlay"])) .cover-container {
+  position: relative;
+  width: 100%;
+}
+
+/* Old good trick with percentage padding to keep the aspect ratio.
+Unfortunately the `aspect-ratio` property is still experimental */
+.cover-container {
+  padding-bottom: calc(100% / var(--aspect-ratio));
+}
+
+::slotted([slot="cover"]),
+.color-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+.cover-container > z-icon {
+  --z-icon-width: calc(var(--space-unit) * 11);
+  --z-icon-height: var(--z-icon-width);
+
+  position: absolute;
+  top: calc(50% - calc(var(--z-icon-height) / 2));
+  left: calc(50% - calc(var(--z-icon-width) / 2));
+  fill: var(--color-primary01);
+}
+
+.color-cover {
+  background-color: var(--z-card--color-cover-background);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--space-unit);
+}
+
+.color-cover .cover-content {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: var(--space-unit);
+}
+
+/* Truncates overflowing text */
+::slotted([slot="metadata"]),
+::slotted([slot="title"]),
+::slotted([slot="text"]) {
+  display: -webkit-inline-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+}
+
+::slotted([slot="title"]:not(:last-child)),
+::slotted([slot="text"]:not(:last-child)) {
+  margin-bottom: var(--space-unit);
+}
+
+::slotted([slot="title"])::before {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+}
+
+::slotted([slot="metadata"]:not(:last-child)) {
+  margin: 0 0 calc(var(--space-unit) * 0.25);
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  text-transform: uppercase;
+}
+
+::slotted([slot="title"]) {
+  margin: 0;
+  font-size: var(--font-size-3);
+  font-weight: var(--font-sb);
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  text-decoration: none;
+}
+
+::slotted([slot="title"]:focus:focus-visible) {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
+
+::slotted([slot="text"]) {
+  margin: 0;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+}
+
+.actions {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+::slotted([slot="action"]:not(:last-child)) {
+  margin-right: calc(var(--space-unit) * 2);
+}
+
+::slotted([slot="action"]:focus) {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none !important;
+}
+
+:host([clickable]) ::slotted([slot="title"]:focus:focus-visible)::before {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+:host([clickable]) ::slotted([slot="title"]:focus:focus-visible) {
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+:host([variant="text"]) {
+  border: var(--z-card--text-border);
+  background-color: var(--z-card--text-background);
+  border-radius: var(--z-card--text-border-radius);
+}
+
+:host([show-shadow]) > .content,
+:host([variant="border"]) > .content,
+:host([variant="shadow"]) > .content {
+  height: 100%;
+  padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);
+}
+
+:host([variant="text"]) > .content {
+  padding: var(--z-card--text-padding);
+}
+
+:host([variant="border"]) .actions,
+:host([variant="shadow"]) .actions {
+  margin-top: auto;
+}
+
+/* Border */
+:host([variant="border"]) {
+  border: var(--border-size-small) solid var(--z-card--border-color);
+}
+
+:host([variant="border"][clickable]:hover) > .content {
+  background: var(--color-background);
+}
+
+:host([variant="border"][clickable]:focus:focus-visible) {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+:host([variant="border"][clickable]:active) {
+  border-color: transparent;
+}
+
+/* Shadow */
+:host([variant="shadow"]),
+:host([show-shadow]) {
+  box-shadow: var(--shadow-2);
+}
+
+:host([variant="shadow"][clickable]:hover),
+:host([clickable][show-shadow]:hover) {
+  box-shadow: var(--shadow-4);
+}
+
+:host([variant="shadow"][clickable]:focus:focus-visible),
+:host([clickable][show-shadow]:focus:focus-visible) {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+:host([variant="shadow"][clickable]:active),
+:host([clickable][show-shadow]:active) {
+  box-shadow: none;
+}
+
+/* Overlay */
+:host([variant="overlay"]) .content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  justify-content: flex-end;
+  padding: var(--space-unit);
+  background-image: linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));
+  color: var(--color-text-inverse);
+  fill: var(--color-text-inverse);
+}

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

@@ -0,0 +1,148 @@
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+
+  --z-carousel-gutter: 0;
+  --z-carousel-items-shadow: ;
+}
+
+:host([single]) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+:host([single]) .z-carousel-container {
+  width: fit-content;
+  max-width: 100%;
+}
+
+.z-carousel-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.z-carousel-title {
+  margin-bottom: calc(var(--space-unit) * 2);
+}
+
+.z-carousel-wrapper {
+  position: relative;
+}
+
+.z-carousel-items-container {
+  display: flex;
+  max-width: 100%;
+  flex-direction: row;
+  margin: 0;
+  box-shadow: var(--z-carousel-items-shadow, none);
+  column-gap: var(--z-carousel-gutter);
+  list-style: none;
+  -ms-overflow-style: none; /* IE and Edge */
+  overflow-x: scroll;
+  padding-inline-start: 0;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  scrollbar-width: none; /* Firefox */
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.z-carousel-items-container::-webkit-scrollbar {
+  display: none;
+}
+
+.z-carousel-items-container ::slotted(*) {
+  scroll-snap-align: center;
+}
+
+.z-carousel-navigation-arrow[hidden] {
+  display: none;
+}
+
+.z-carousel-navigation-arrow[data-direction] {
+  position: absolute;
+  z-index: 1;
+  bottom: 50%;
+  transform: translateY(50%);
+}
+
+.z-carousel-navigation-arrow[data-direction="next"] {
+  right: 0;
+}
+
+:host(:not([fixed-arrows])) .z-carousel-wrapper .z-carousel-navigation-arrow {
+  display: none;
+}
+
+.z-carousel-footer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  column-gap: calc(var(--space-unit) * 3);
+}
+
+:host([arrows-position="bottom"]) .z-carousel-footer {
+  margin-top: calc(var(--space-unit) * 0.75);
+}
+
+.z-carousel-footer .numbers-progress,
+.z-carousel-footer .dots-progress {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.z-carousel-footer .dots-progress {
+  column-gap: calc(var(--space-unit) * 3);
+}
+
+:host(:not([arrows-position="bottom"])) .z-carousel-footer .dots-progress {
+  margin-top: calc(var(--space-unit) * 2);
+}
+
+.z-carousel-footer .dots-progress button {
+  display: flex;
+  width: calc(var(--space-unit) * 3);
+  height: calc(var(--space-unit) * 3);
+  align-items: center;
+  padding: 0;
+  border: none;
+  margin: 0;
+  background-color: var(--color-surface03);
+  border-radius: calc(var(--space-unit) * 3);
+}
+
+.z-carousel-footer .dots-progress button.current {
+  background-color: var(--color-primary01);
+}
+
+.z-carousel-footer .dots-progress button:focus:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
+
+.z-carousel-footer .dots-progress button:not(.current) {
+  cursor: pointer;
+}
+
+.z-carousel-footer .numbers-progress {
+  column-gap: calc(var(--space-unit) / 2);
+}
+
+:host(:not([arrows-position="bottom"])) .z-carousel-footer .numbers-progress {
+  margin-top: var(--space-unit);
+}
+
+.z-carousel-footer .numbers-progress .current {
+  font-weight: var(--font-sb);
+}
+
+@media (min-width: 768px) {
+  :host(:not([fixed-arrows])) .z-carousel-wrapper:hover .z-carousel-navigation-arrow:not([hidden]) {
+    display: flex;
+  }
+}