@zanichelli/albe-web-components 7.0.0 → 7.1.1

package/dist/collection/components/modal/z-modal/styles.css

@@ -1,185 +1,185 @@
-:host {
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
-}
-
-:host > dialog {
-  padding: 0;
-  border: none;
-  margin: 0;
-}
-
-/* stylelint-disable selector-pseudo-class-no-unknown */
-:host > dialog:modal {
-  width: 100%;
-  max-width: 100%;
-  max-height: 100%;
-}
-
-:host > dialog::backdrop {
-  display: none;
-}
-
-.modal-container {
-  z-index: 1010;
-  display: flex;
-  overflow: -moz-scrollbars-none;
-  overflow: hidden;
-  width: 100%;
-  height: 100vh;
-  flex-direction: column;
-}
-
-.modal-container > header {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: flex-start;
-  justify-content: flex-start;
-  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);
-  background: var(--color-surface02);
-}
-
-.modal-container > header button {
-  padding: 0;
-  border: none;
-  margin: 0;
-  margin-left: auto;
-  background: transparent;
-  cursor: pointer;
-}
-
-.modal-container > header z-icon {
-  --z-icon-width: calc(var(--space-unit) * 2.5);
-  --z-icon-height: calc(var(--space-unit) * 2.5);
-
-  display: flex;
-  fill: var(--color-icon01);
-}
-
-.modal-container > header > div {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  margin-right: calc(var(--space-unit) * 2);
-}
-
-.modal-container > header h1,
-.modal-container > header h2 {
-  padding: 0;
-  margin: 0;
-  color: var(--color-text01);
-  font-weight: var(--font-rg);
-}
-
-.modal-container > header h1 {
-  font-size: var(--font-size-5);
-  letter-spacing: 0;
-  line-height: 1.4;
-}
-
-.modal-container > header h2 {
-  font-size: var(--font-size-3);
-  letter-spacing: 0;
-  line-height: 1.5;
-}
-
-.modal-container > header > div *:empty {
-  display: none;
-}
-
-.modal-container > header h1 + h2 {
-  margin-top: calc(var(--space-unit) * 0.5);
-}
-
-.modal-container > .modal-content {
-  overflow: auto;
-  flex: 1 auto;
-  background: var(--color-surface01);
-  overflow-x: hidden;
-}
-
-.modal-container .modal-content::-webkit-scrollbar {
-  width: 10px;
-  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
-  border-radius: var(--border-radius);
-}
-
-.modal-container .modal-content::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-.modal-container .modal-content::-webkit-scrollbar-thumb {
-  width: 10px;
-  background-color: var(--color-primary01);
-  border-radius: var(--border-radius);
-}
-
-.modal-container .modal-content::-webkit-scrollbar-thumb:hover {
-  background-color: var(--color-hover-primary);
-}
-
-/* Firefox */
-.modal-container .modal-content {
-  scrollbar-color: var(--color-primary01) transparent;
-}
-
-/* Tablet / Desktop */
-@media only screen and (min-width: 768px) {
-  .modal-background {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--gray900);
-    opacity: 0.7;
-  }
-
-  .modal-container {
-    position: fixed;
-    top: calc(var(--space-unit) * 6);
-    left: 50%;
-    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 > header z-icon {
-    --z-icon-width: calc(var(--space-unit) * 3);
-    --z-icon-height: calc(var(--space-unit) * 3);
-  }
-}
-
-/* Tablet */
-@media only screen and (min-width: 768px) and (max-width: 1151px) {
-  .modal-container > header {
-    padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 3);
-  }
-}
-
-/* Desktop */
-@media only screen and (min-width: 1152px) {
-  .modal-container > header {
-    padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 4);
-  }
-
-  .modal-container > header h1 {
-    font-size: var(--font-size-6);
-    letter-spacing: 0;
-    line-height: 1.33;
-  }
-
-  .modal-container > header h2 {
-    font-size: var(--font-size-4);
-    letter-spacing: 0;
-    line-height: 1.5;
-  }
-
-  .modal-container > header h1 + h2 {
-    margin-top: 0;
-  }
-}
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+:host > dialog {
+  padding: 0;
+  border: none;
+  margin: 0;
+}
+
+/* stylelint-disable selector-pseudo-class-no-unknown */
+:host > dialog:modal {
+  width: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+:host > dialog::backdrop {
+  display: none;
+}
+
+.modal-container {
+  z-index: 1010;
+  display: flex;
+  overflow: -moz-scrollbars-none;
+  overflow: hidden;
+  width: 100%;
+  height: 100vh;
+  flex-direction: column;
+}
+
+.modal-container > header {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);
+  background: var(--color-surface02);
+}
+
+.modal-container > header button {
+  padding: 0;
+  border: none;
+  margin: 0;
+  margin-left: auto;
+  background: transparent;
+  cursor: pointer;
+}
+
+.modal-container > header z-icon {
+  --z-icon-width: calc(var(--space-unit) * 2.5);
+  --z-icon-height: calc(var(--space-unit) * 2.5);
+
+  display: flex;
+  fill: var(--color-icon01);
+}
+
+.modal-container > header > div {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  margin-right: calc(var(--space-unit) * 2);
+}
+
+.modal-container > header h1,
+.modal-container > header h2 {
+  padding: 0;
+  margin: 0;
+  color: var(--color-text01);
+  font-weight: var(--font-rg);
+}
+
+.modal-container > header h1 {
+  font-size: var(--font-size-5);
+  letter-spacing: 0;
+  line-height: 1.4;
+}
+
+.modal-container > header h2 {
+  font-size: var(--font-size-3);
+  letter-spacing: 0;
+  line-height: 1.5;
+}
+
+.modal-container > header > div *:empty {
+  display: none;
+}
+
+.modal-container > header h1 + h2 {
+  margin-top: calc(var(--space-unit) * 0.5);
+}
+
+.modal-container > .modal-content {
+  overflow: auto;
+  flex: 1 auto;
+  background: var(--color-surface01);
+  overflow-x: hidden;
+}
+
+.modal-container .modal-content::-webkit-scrollbar {
+  width: 10px;
+  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
+  border-radius: var(--border-radius);
+}
+
+.modal-container .modal-content::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+.modal-container .modal-content::-webkit-scrollbar-thumb {
+  width: 10px;
+  background-color: var(--color-primary01);
+  border-radius: var(--border-radius);
+}
+
+.modal-container .modal-content::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-hover-primary);
+}
+
+/* Firefox */
+.modal-container .modal-content {
+  scrollbar-color: var(--color-primary01) transparent;
+}
+
+/* Tablet / Desktop */
+@media only screen and (min-width: 768px) {
+  .modal-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--gray900);
+    opacity: 0.7;
+  }
+
+  .modal-container {
+    position: fixed;
+    top: calc(var(--space-unit) * 6);
+    left: 50%;
+    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 > header z-icon {
+    --z-icon-width: calc(var(--space-unit) * 3);
+    --z-icon-height: calc(var(--space-unit) * 3);
+  }
+}
+
+/* Tablet */
+@media only screen and (min-width: 768px) and (max-width: 1151px) {
+  .modal-container > header {
+    padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 3);
+  }
+}
+
+/* Desktop */
+@media only screen and (min-width: 1152px) {
+  .modal-container > header {
+    padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 4);
+  }
+
+  .modal-container > header h1 {
+    font-size: var(--font-size-6);
+    letter-spacing: 0;
+    line-height: 1.33;
+  }
+
+  .modal-container > header h2 {
+    font-size: var(--font-size-4);
+    letter-spacing: 0;
+    line-height: 1.5;
+  }
+
+  .modal-container > header h1 + h2 {
+    margin-top: 0;
+  }
+}

package/dist/collection/components/navigation/tabs/navigation-tab.css

@@ -1,136 +1,136 @@
-z-navigation-tab > button,
-z-navigation-tab-link > a {
-  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;
-  letter-spacing: inherit;
-  line-height: inherit;
-  outline: none;
-  text-align: center;
-  white-space: nowrap;
-}
-
-z-navigation-tab-link > a {
-  text-decoration: none;
-}
-
-z-navigation-tab *,
-z-navigation-tab-link *,
-z-navigation-tab *::before,
-z-navigation-tab *::after,
-z-navigation-tab-link *::before,
-z-navigation-tab-link *::after {
-  box-sizing: border-box;
-}
-
-z-navigation-tab > *:focus:focus-visible,
-z-navigation-tab-link > *:focus:focus-visible {
-  box-shadow: inset var(--shadow-focus-primary);
-}
-
-z-navigation-tab:not([disabled]):hover > *,
-z-navigation-tab[selected] > *,
-z-navigation-tab-link:not([disabled]):hover > *,
-z-navigation-tab-link[selected] > * {
-  color: var(--color-hover-secondary);
-  fill: currentcolor;
-}
-
-z-navigation-tab:not([disabled]):hover > *::after,
-z-navigation-tab[selected] > *::after,
-z-navigation-tab-link:not([disabled]):hover > *::after,
-z-navigation-tab-link[selected] > *::after {
-  position: absolute;
-  background-color: var(--color-hover-secondary);
-  content: "";
-}
-
-z-navigation-tab[orientation="horizontal"]:not([disabled]):hover > *::after,
-z-navigation-tab[orientation="horizontal"][selected] > *::after,
-z-navigation-tab-link[orientation="horizontal"]:not([disabled]):hover > *::after,
-z-navigation-tab-link[orientation="horizontal"][selected] > *::after {
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: var(--border-size-large);
-}
-
-z-navigation-tab z-icon,
-z-navigation-tab-link z-icon {
-  --z-icon-width: calc(var(--space-unit) * 2);
-  --z-icon-height: calc(var(--space-unit) * 2);
-
-  display: flex;
-  margin: 0;
-}
-
-z-navigation-tab[orientation="horizontal"] z-icon,
-z-navigation-tab-link[orientation="horizontal"] z-icon {
-  margin-right: var(--space-unit);
-}
-
-z-navigation-tab:not([disabled]):hover > * {
-  background-color: var(--color-background);
-}
-
-z-navigation-tab[disabled] > * {
-  color: var(--gray500);
-  cursor: not-allowed;
-  fill: currentcolor;
-  pointer-events: all;
-}
-
-/* Size small (only available for horizontal) */
-z-navigation-tab[size="small"] > *,
-z-navigation-tab-link[size="small"] > * {
-  font-size: var(--font-size-2);
-  letter-spacing: 0.16px;
-  line-height: 1.4;
-}
-
-z-navigation-tab[size="small"][orientation="horizontal"] > *,
-z-navigation-tab-link[size="small"][orientation="horizontal"] > * {
-  padding: var(--space-unit) calc(var(--space-unit) * 2);
-}
-
-z-navigation-tab[size="small"][orientation="horizontal"]:not([disabled]):hover > *::after,
-z-navigation-tab[size="small"][orientation="horizontal"][selected] > *::after,
-z-navigation-tab-link[size="small"][orientation="horizontal"]:hover > *::after,
-z-navigation-tab-link[size="small"][orientation="horizontal"][selected] > *::after {
-  height: var(--border-size-medium);
-}
-
-z-navigation-tab[size="small"]:not([orientation="vertical"]) z-icon,
-z-navigation-tab-link[size="small"]:not([orientation="vertical"]) z-icon {
-  --z-icon-width: 14px;
-  --z-icon-height: 14px;
-}
-
-/* Orientation Vertical */
-z-navigation-tab[orientation="vertical"] > *,
-z-navigation-tab-link[orientation="vertical"] > * {
-  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);
-}
-
-z-navigation-tab[orientation="vertical"]:hover:not([disabled]) > *::after,
-z-navigation-tab[orientation="vertical"][selected] > *::after,
-z-navigation-tab-link[orientation="vertical"]:hover > *::after,
-z-navigation-tab-link[orientation="vertical"][selected] > *::after {
-  top: 0;
-  right: 0;
-  width: var(--border-size-large);
-  height: 100%;
-}
+z-navigation-tab > button,
+z-navigation-tab-link > a {
+  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;
+  letter-spacing: inherit;
+  line-height: inherit;
+  outline: none;
+  text-align: center;
+  white-space: nowrap;
+}
+
+z-navigation-tab-link > a {
+  text-decoration: none;
+}
+
+z-navigation-tab *,
+z-navigation-tab-link *,
+z-navigation-tab *::before,
+z-navigation-tab *::after,
+z-navigation-tab-link *::before,
+z-navigation-tab-link *::after {
+  box-sizing: border-box;
+}
+
+z-navigation-tab > *:focus:focus-visible,
+z-navigation-tab-link > *:focus:focus-visible {
+  box-shadow: inset var(--shadow-focus-primary);
+}
+
+z-navigation-tab:not([disabled]):hover > *,
+z-navigation-tab[selected] > *,
+z-navigation-tab-link:not([disabled]):hover > *,
+z-navigation-tab-link[selected] > * {
+  color: var(--color-hover-secondary);
+  fill: currentcolor;
+}
+
+z-navigation-tab:not([disabled]):hover > *::after,
+z-navigation-tab[selected] > *::after,
+z-navigation-tab-link:not([disabled]):hover > *::after,
+z-navigation-tab-link[selected] > *::after {
+  position: absolute;
+  background-color: var(--color-hover-secondary);
+  content: "";
+}
+
+z-navigation-tab[orientation="horizontal"]:not([disabled]):hover > *::after,
+z-navigation-tab[orientation="horizontal"][selected] > *::after,
+z-navigation-tab-link[orientation="horizontal"]:not([disabled]):hover > *::after,
+z-navigation-tab-link[orientation="horizontal"][selected] > *::after {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: var(--border-size-large);
+}
+
+z-navigation-tab z-icon,
+z-navigation-tab-link z-icon {
+  --z-icon-width: calc(var(--space-unit) * 2);
+  --z-icon-height: calc(var(--space-unit) * 2);
+
+  display: flex;
+  margin: 0;
+}
+
+z-navigation-tab[orientation="horizontal"] z-icon,
+z-navigation-tab-link[orientation="horizontal"] z-icon {
+  margin-right: var(--space-unit);
+}
+
+z-navigation-tab:not([disabled]):hover > * {
+  background-color: var(--color-background);
+}
+
+z-navigation-tab[disabled] > * {
+  color: var(--gray500);
+  cursor: not-allowed;
+  fill: currentcolor;
+  pointer-events: all;
+}
+
+/* Size small (only available for horizontal) */
+z-navigation-tab[size="small"] > *,
+z-navigation-tab-link[size="small"] > * {
+  font-size: var(--font-size-2);
+  letter-spacing: 0.16px;
+  line-height: 1.4;
+}
+
+z-navigation-tab[size="small"][orientation="horizontal"] > *,
+z-navigation-tab-link[size="small"][orientation="horizontal"] > * {
+  padding: var(--space-unit) calc(var(--space-unit) * 2);
+}
+
+z-navigation-tab[size="small"][orientation="horizontal"]:not([disabled]):hover > *::after,
+z-navigation-tab[size="small"][orientation="horizontal"][selected] > *::after,
+z-navigation-tab-link[size="small"][orientation="horizontal"]:hover > *::after,
+z-navigation-tab-link[size="small"][orientation="horizontal"][selected] > *::after {
+  height: var(--border-size-medium);
+}
+
+z-navigation-tab[size="small"]:not([orientation="vertical"]) z-icon,
+z-navigation-tab-link[size="small"]:not([orientation="vertical"]) z-icon {
+  --z-icon-width: 14px;
+  --z-icon-height: 14px;
+}
+
+/* Orientation Vertical */
+z-navigation-tab[orientation="vertical"] > *,
+z-navigation-tab-link[orientation="vertical"] > * {
+  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);
+}
+
+z-navigation-tab[orientation="vertical"]:hover:not([disabled]) > *::after,
+z-navigation-tab[orientation="vertical"][selected] > *::after,
+z-navigation-tab-link[orientation="vertical"]:hover > *::after,
+z-navigation-tab-link[orientation="vertical"][selected] > *::after {
+  top: 0;
+  right: 0;
+  width: var(--border-size-large);
+  height: 100%;
+}