npm - @oiz/stzh-components - Versions diffs - 2.5.0-alpha-carousel → 2.5.0-alpha - Mend

@oiz/stzh-components 2.5.0-alpha-carousel → 2.5.0-alpha

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (847) hide show

package/dist/collection/components/stzh-ghettobox/stzh-ghettobox.css CHANGED Viewed

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 :host {
@@ -107,29 +109,62 @@
   --stzh-link-hover-color: var(--stzh-base-invert-color);
   --background-color: var(--stzh-color-error);
   --color: var(--stzh-base-invert-color);
-  --close-color: var(--stzh-base-invert-color);
   --richtext-color: var(--color);
+  --close-color: var(--stzh-base-invert-color);
   --button-color: var(--color);
-  --button-hover-color: var(--background-color);
+  --hover-button-color: var(--background-color);
+  --hover-close-color: var(--background-color);
 }
 :host ::slotted(stzh-richtext) {
   --stzh-base-color: var(--richtext-color);
 }
 :host ::slotted(stzh-button[slot=button]) {
-  --stzh-base-invert-color: var(--button-color);
+  /* Active */
+  /* Disabled */
 }
-:host ::slotted(stzh-button[slot=button])[variant=default]:not([disabled]) {
-  --color: var(--button-hover-color);
+:host ::slotted(stzh-button[slot=button])[variant=default] {
+  --color: var(--hover-button-color);
   --background-color: var(--stzh-base-invert-color);
   --border-color: var(--stzh-base-invert-color);
+  --hover-color: var(--hover-button-color);
+  --hover-background-color: var(--stzh-color-white72);
+  --hover-border-color: transparent;
 }
-:host ::slotted(stzh-button[slot=button])[variant=secondary]:not([disabled]) {
+:host ::slotted(stzh-button[slot=button])[variant=secondary] {
   --color: var(--stzh-base-invert-color);
   --background-color: transparent;
   --border-color: var(--stzh-base-invert-color);
-  --hover-color: var(--button-hover-color);
-  --hover-background-color: var(--stzh-base-invert-color);
-  --hover-border-color: var(--stzh-base-invert-color);
+  --hover-color: var(--hover-button-color);
+  --hover-background-color: var(--stzh-color-white72);
+  --hover-border-color: transparent;
+}
+:host ::slotted(stzh-button[slot=button])[variant=tertiary] {
+  --color: var(--stzh-base-invert-color);
+  --background-color: transparent;
+  --hover-color: var(--stzh-base-invert-color);
+  --hover-background-color: var(--stzh-color-white16);
+}
+:host ::slotted(stzh-button[slot=button])[active]:not([active=false]) {
+  --color: var(--hover-button-color);
+  --background-color: var(--stzh-color-white72);
+  --border-color: transparent;
+  --hover-color: var(--hover-button-color);
+  --hover-background-color: var(--stzh-color-white72);
+  --hover-border-color: transparent;
+}
+:host ::slotted(stzh-button[slot=button])[disabled]:not([disabled=false]) {
+  --border-color: transparent;
+  --background-color: var(--stzh-color-white32);
+  --hover-border-color: transparent;
+  --hover-background-color: var(--stzh-color-white32);
+}
+:host ::slotted(stzh-button[slot=button])[disabled]:not([disabled=false])[variant=secondary], :host ::slotted(stzh-button[slot=button])[disabled]:not([disabled=false])[variant=input], :host ::slotted(stzh-button[slot=button])[disabled]:not([disabled=false])[variant=tertiary] {
+  --color: var(--stzh-color-white32);
+  --border-color: var(--stzh-color-white32);
+  --background-color: transparent;
+  --hover-color: var(--stzh-color-white32);
+  --hover-border-color: var(--stzh-color-white32);
+  --hover-background-color: transparent;
 }
 .stzh-ghettobox {
@@ -142,6 +177,7 @@
   background-color: var(--background-color);
   color: var(--color);
   box-shadow: var(--stzh-box-shadow-message);
+  border-radius: var(--stzh-button-border-radius);
   /* Has close button */
 }
 @media screen and (min-width: 1024px) {
@@ -278,52 +314,56 @@
     margin-left: var(--stzh-space-small);
   }
 }
-.stzh-ghettobox__close-button {
-  top: var(--stzh-space-medium);
-  right: var(--stzh-space-medium);
+.stzh-ghettobox__close {
+  /* Active */
+  /* Disabled */
   position: absolute;
-  display: flex;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  font-family: inherit;
-  border: none;
-  background: none;
-  padding: var(--stzh-space-xsmall);
-  margin: calc(var(--stzh-space-xsmall) * -1);
-  border-radius: var(--stzh-button-border-radius);
-  cursor: pointer;
-}
-@media screen and (min-width: 1024px) {
-  .stzh-ghettobox__close-button {
-    top: var(--stzh-space-large);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-ghettobox__close-button {
-    top: var(--stzh-space-xlarge);
-  }
+  top: 0;
+  right: 0;
 }
-@media screen and (min-width: 1024px) {
-  .stzh-ghettobox__close-button {
-    right: var(--stzh-space-large);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-ghettobox__close-button {
-    right: var(--stzh-space-xlarge);
-  }
+.stzh-ghettobox__close[variant=default] {
+  --color: var(--hover-close-color);
+  --background-color: var(--stzh-base-invert-color);
+  --border-color: var(--stzh-base-invert-color);
+  --hover-color: var(--hover-close-color);
+  --hover-background-color: var(--stzh-color-white72);
+  --hover-border-color: transparent;
 }
-@media screen and (min-width: 600px) {
-  .stzh-ghettobox__close-button {
-    position: initial;
-    top: initial;
-    right: initial;
-  }
+.stzh-ghettobox__close[variant=secondary] {
+  --color: var(--stzh-base-invert-color);
+  --background-color: transparent;
+  --border-color: var(--stzh-base-invert-color);
+  --hover-color: var(--hover-close-color);
+  --hover-background-color: var(--stzh-color-white72);
+  --hover-border-color: transparent;
 }
-.stzh-ghettobox__close-icon {
-  --size: var(--stzh-icon-size-medium);
-  color: var(--close-color);
+.stzh-ghettobox__close[variant=tertiary] {
+  --color: var(--stzh-base-invert-color);
+  --background-color: transparent;
+  --hover-color: var(--stzh-base-invert-color);
+  --hover-background-color: var(--stzh-color-white16);
+}
+.stzh-ghettobox__close[active]:not([active=false]) {
+  --color: var(--hover-close-color);
+  --background-color: var(--stzh-color-white72);
+  --border-color: transparent;
+  --hover-color: var(--hover-close-color);
+  --hover-background-color: var(--stzh-color-white72);
+  --hover-border-color: transparent;
+}
+.stzh-ghettobox__close[disabled]:not([disabled=false]) {
+  --border-color: transparent;
+  --background-color: var(--stzh-color-white32);
+  --hover-border-color: transparent;
+  --hover-background-color: var(--stzh-color-white32);
+}
+.stzh-ghettobox__close[disabled]:not([disabled=false])[variant=secondary], .stzh-ghettobox__close[disabled]:not([disabled=false])[variant=input], .stzh-ghettobox__close[disabled]:not([disabled=false])[variant=tertiary] {
+  --color: var(--stzh-color-white32);
+  --border-color: var(--stzh-color-white32);
+  --background-color: transparent;
+  --hover-color: var(--stzh-color-white32);
+  --hover-border-color: var(--stzh-color-white32);
+  --hover-background-color: transparent;
 }
 .stzh-ghettobox--has-close-button {
   padding-right: var(--stzh-space-xxxlarge);

package/dist/collection/components/stzh-ghettobox/stzh-ghettobox.js CHANGED Viewed

@@ -87,7 +87,7 @@ export class StzhGhettobox {
       "stzh-ghettobox--has-close-button": !this.hideClose
     };
     return (h(Host, { hidden: !this.open }, h("div", { class: classes }, h("h1", { class: "stzh-ghettobox__hidden-title" }, this.hiddenTitle || this.localization.hiddenTitle), h("div", { class: "stzh-ghettobox__message" }, h("h2", { class: "stzh-ghettobox__main-title" }, this.mainTitle), h("div", { class: "stzh-ghettobox__description" }, this.description ? this.description : h("slot", null)), h("div", { class: "stzh-ghettobox__button" }, h("slot", { name: "button" }))), !this.hideClose &&
-      h("div", { class: "stzh-ghettobox__close" }, h("button", { class: "stzh-ghettobox__close-button", onClick: this.onCloseButtonClick, "aria-label": this.localization.close, type: "button" }, h("stzh-icon", { class: "stzh-ghettobox__close-icon", name: "close" }))))));
+      h("stzh-button", { class: "stzh-ghettobox__close", onClick: this.onCloseButtonClick, a11yLabel: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close" }))));
   }
   static get is() { return "stzh-ghettobox"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-header/stzh-header.css CHANGED Viewed

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 @-webkit-keyframes stzh-header-open {

package/dist/collection/components/stzh-heading/stzh-heading.css CHANGED Viewed

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 :host {

package/dist/collection/components/stzh-hr/stzh-hr.css CHANGED Viewed

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 :host {

package/dist/collection/components/stzh-hspace/stzh-hspace.css CHANGED Viewed

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 :host {

package/dist/collection/components/stzh-icon/stzh-icon.css CHANGED Viewed

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 :host {

package/dist/collection/components/stzh-icon-sprite/assets/svgsprites/symbol/sprite.symbol.html CHANGED Viewed

@@ -235,7 +235,7 @@ for further details on how to create this embeddable sprite variant.
 		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-list-expanded" xmlns="http://www.w3.org/2000/svg"><path d="M2 4a1 1 0 011-1h18a1 1 0 011 1v2a1 1 0 01-1 1H3a1 1 0 01-1-1V4zm0 7a1 1 0 011-1h18a1 1 0 011 1v2a1 1 0 01-1 1H3a1 1 0 01-1-1v-2zM2 18a1 1 0 011-1h18a1 1 0 011 1v2a1 1 0 01-1 1H3a1 1 0 01-1-1v-2z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></symbol>
 		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-list-shrinked" xmlns="http://www.w3.org/2000/svg"><path d="M2 4h20M2 8h20M2 12h20M2 16h20M2 20h20" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></symbol>
 		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-lock" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#cdclip0_7292_54411)"><path d="M7.125 11.25V5.625a4.875 4.875 0 119.75 0v5.625M12 15.375v3.75M3.75 11.25h16.5v12H3.75v-12z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="cdclip0_7292_54411"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></symbol>
-		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-mail" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#ceclip0_1638_23276)"><path d="M.75 4.5V4a.5.5 0 00-.5.5h.5zM12 14.775l-.337.37a.5.5 0 00.674 0l-.337-.37zM23.25 4.5h.5a.5.5 0 00-.5-.5v.5zm0 15v.5a.5.5 0 00.5-.5h-.5zm-22.5 0h-.5a.5.5 0 00.5.5v-.5zM.413 4.87l11.25 10.274.674-.738L1.087 4.13l-.674.738zm11.924 10.274L23.587 4.87l-.674-.738-11.25 10.275.674.738zM.75 5h22.5V4H.75v1zm22-.5v15h1v-15h-1zm.5 14.5H.75v1h22.5v-1zm-22 .5v-15h-1v15h1z" fill="currentColor"/></g><defs><clipPath id="ceclip0_1638_23276"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></symbol>
+		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-mail" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#ceclip0_1638_23276)"><path d="M.75 4.5L12 15.375 23.25 4.5m-22.5 0h22.5m-22.5 0v15m22.5-15v15m-7.5-7.65l7.5 7.65m0 0H.75m0 0l7.5-7.65" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="ceclip0_1638_23276"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></symbol>
 		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-mail-filled" xmlns="http://www.w3.org/2000/svg"><path d="M.75 5.195v13.59l6.84-6.977L.75 5.195zM1.45 19.5h21.1l-6.86-6.997-3.342 3.232a.5.5 0 01-.696 0L8.31 12.503 1.45 19.5zM23.25 18.786V5.196l-6.84 6.612 6.84 6.978z" fill="currentColor"/><path d="M22.53 4.5H1.47L12 14.68 22.53 4.5z" fill="currentColor"/></symbol>
 		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-map" xmlns="http://www.w3.org/2000/svg"><path d="M8.667 6v15m0-15L2 3v15l6.667 3m0-15l6.666-3M8.667 21l6.666-3m0-15v15m0-15L22 6v15l-6.667-3" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></symbol>
 		<symbol fill="none" viewBox="0 0 24 24" id="stzh-icon-mental-illness" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#chclip0_128_76104)" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"><path d="M11.25 12.375a4.5 4.5 0 100-9 4.5 4.5 0 000 9z"/><path d="M13.5 7.125H12v-1.5h-1.5v1.5H9v1.5h1.5v1.5H12v-1.5h1.5v-1.5z"/><path d="M12.28 23.186a.094.094 0 00.14-.04c.275-.642 1.746-4.02 2.205-4.02.75 0 2.227.75 3.375.75 1.148 0 .933-2.657 1.292-3.74.359-1.085.583-1.72.583-2.26 1.436-.145 1.175-.594.996-1.027-.18-.434-1.746-2.399-1.746-2.724 0-.375.375-1.528.375-2.25C19.5 4.59 17.625.75 11.253.75 5.01.75 3 5.347 3 7.875c0 2.528.71 4.42 1.5 5.25.79.83 1.5 1.592 1.5 3a3.577 3.577 0 01-.75 2.25l7.03 4.81z"/></g><defs><clipPath id="chclip0_128_76104"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></symbol>