@lmvz-ds/components 0.37.0 → 0.39.0

package/collection/components/lmvz-button/lmvz-button.css

@@ -75,14 +75,28 @@ legend {
 
 }
 :host {
-  /* * the (invalid nested) import will be handled by postcss */
-  /* stylelint-disable-next-line no-invalid-position-at-import-rule */
+  display: inline-block;
+
   button {
-  /* secondary styling is default, primary is explicit */
-  /* --lmvz-button-background, --lmvz-button-color, --lmvz-button-radius are declared on :host
+    /* * the (invalid nested) import will be handled by postcss */
+    /* stylelint-disable-next-line no-invalid-position-at-import-rule */
+    /* stylelint-disable nesting-selector-no-missing-scoping-root */
+
+/**
+ * This fragment is meant to be reusable in multiple component types.
+ * CAUTION: always wrap the import in a tag selector (ususally button)!
+ */
+& {
+  /* the (invalid nested) import will be handled by postcss */
+  /* stylelint-disable-next-line no-invalid-position-at-import-rule */
+  /* stylelint-disable nesting-selector-no-missing-scoping-root */
+& {
+  /* variables are declared on :host
      so that outer ::slotted(lmvz-button) overrides are inherited correctly via shadow inheritance.
-     They are also declared here so that non-shadow consumers (e.g. @lmvz-ds/styles buttons.css
-     bundle and lmvz-card) have the default values in scope. */
+     They are also declared here so that non-shadow consumers have the default values in scope. */
+
+  /* secondary styling is default, primary is explicit */
+
   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0));
   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000));
   --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px));
@@ -97,19 +111,20 @@ legend {
 
   display: inline-flex;
   align-items: center;
-  justify-content: var(--lmvz-button-content-justification-override, center);
-  gap: var(--lmvz-button-gap);
-  padding-block: var(--lmvz-button-padding-block);
-  padding-inline: var(--lmvz-button-padding-inline);
-  min-height: var(--lmvz-button-min-height);
-  min-width: var(--lmvz-button-min-height);
-  border-radius: var(--lmvz-button-radius);
-  border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);
+  justify-content: var(--lmvz-button-content-justification, center);
+  gap: var(--lmvz-button-gap, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)));
+
+  box-sizing: border-box; /* to inlclude paddings & border in min-height */
+  padding-block: var(--lmvz-button-padding-block, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)));
+  padding-inline: var(--lmvz-button-padding-inline, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)));
+  min-height: var(--lmvz-button-min-height, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)));
+  border: var(--lmvz-button-border-width, 0) solid var(--lmvz-button-border-color, transparent);
+  border-radius: var(--lmvz-button-radius, var(--lmvz-component-input-radius-default, 999px));
+
   background-color: var(--lmvz-button-background);
   color: var(--lmvz-button-color);
   cursor: pointer;
   font: var(--lmvz-button-font);
-  /* text-align: center; */
   text-decoration: none;
   white-space: nowrap;
   transition:
@@ -119,106 +134,94 @@ legend {
     box-shadow 0.15s ease;
 }
 
-button > * {
-  font: inherit;
-  color: inherit;
-}
-
-button:focus-visible {
-  outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
-  outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
-  position: relative;
-  z-index: 1;
-}
-
-button:is([disabled], .disabled) {
-  cursor: not-allowed;
-  pointer-events: none;
-  /* } */
-
-  /* button:is(:is([disabled], .disabled):not(.secondary):not(.tertiary), .primary:is([disabled], .disabled)) { */
-  /* button:is([disabled], .disabled) { */
-  /* --lmvz-button-background: var(--lmvz-global-color-neutral-500); */
-  /* --lmvz-button-color: var(--lmvz-global-color-neutral-white); */
-  opacity: var(--lmvz-component-input-disabled-opacity, 40%);
-}
-
-button:not([disabled]):hover {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0));
-}
-
-button:not([disabled]):active {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4));
-}
-
-button.primary {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff));
-  --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);
-  --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
-}
-
-button.primary:not([disabled], .disabled):hover {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e));
-}
-
-button.primary:not([disabled], .disabled):active {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454));
-}
 
-button.danger {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
-  --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
-}
-
-button.danger:not([disabled], .disabled):hover {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
-}
-
-button.danger:not([disabled], .disabled):active {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
-}
-
-button.tertiary {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000));
-}
+  & > * {
+    font: inherit;
+    color: inherit;
+  }
+  &:focus-visible {
+    outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
+    outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
+    position: relative;
+    z-index: 1;
+  }
+  &:is([disabled], .disabled) {
+    cursor: not-allowed;
+    pointer-events: none;
+    /* } */
+
+    /* button:is(:is([disabled], .disabled):not(.secondary):not(.tertiary), .primary:is([disabled], .disabled)) { */
+    /* button:is([disabled], .disabled) { */
+    /* --lmvz-button-background: var(--lmvz-global-color-neutral-500); */
+    /* --lmvz-button-color: var(--lmvz-global-color-neutral-white); */
+    opacity: var(--lmvz-component-input-disabled-opacity, 40%);
+  }
+  &:not([disabled]):hover {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0));
+  }
+  &:not([disabled]):active {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4));
+  }
 
-button.tertiary:not([disabled], .disabled):hover {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000));
-}
+  /* secondary styling is default, primary is explicit */
 
-button.tertiary:not([disabled], .disabled):active {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000));
-}
+  &.primary {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000));
+    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff));
+    --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);
+    --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
+  }
+  &.primary:not([disabled], .disabled):hover {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e));
+  }
+  &.primary:not([disabled], .disabled):active {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454));
+  }
+  &.danger {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
+    --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
+    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
+  }
+  &.danger:not([disabled], .disabled):hover {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0));
+    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
+  }
+  &.danger:not([disabled], .disabled):active {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b));
+    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
+  }
+  &.tertiary {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
+    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000));
+  }
+  &.tertiary:not([disabled], .disabled):hover {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0));
+    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000));
+  }
+  &.tertiary:not([disabled], .disabled):active {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0));
+    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000));
+  }
 
-button.small {
-  --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
-  --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
-  --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)));
-  --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)));
-  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5
+  &.small {
+    --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
+    --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
+    --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)));
+    --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)));
+    --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5
     Router));
-}
-
-button.large {
-  --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
-  --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
-  --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));
-  --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)));
-  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
+  }
+  &.large {
+    --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
+    --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
+    --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));
+    --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)));
+    --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
     Router));
+  }
 }
 
 
-  display: inline-block;
-
-  button {
     width: 100%;
   }
 }

package/collection/components/lmvz-card/lmvz-card.css

@@ -78,12 +78,23 @@ legend {
   /** component dependencies */
   /* * the (invalid nested) import will be handled by postcss */
   /* stylelint-disable no-invalid-position-at-import-rule */
-  button {
-  /* secondary styling is default, primary is explicit */
-  /* --lmvz-button-background, --lmvz-button-color, --lmvz-button-radius are declared on :host
+  /* stylelint-disable nesting-selector-no-missing-scoping-root */
+
+/**
+ * This fragment is meant to be reusable in multiple component types.
+ * CAUTION: always wrap the import in a tag selector (ususally button)!
+ */
+& {
+  /* the (invalid nested) import will be handled by postcss */
+  /* stylelint-disable-next-line no-invalid-position-at-import-rule */
+  /* stylelint-disable nesting-selector-no-missing-scoping-root */
+& {
+  /* variables are declared on :host
      so that outer ::slotted(lmvz-button) overrides are inherited correctly via shadow inheritance.
-     They are also declared here so that non-shadow consumers (e.g. @lmvz-ds/styles buttons.css
-     bundle and lmvz-card) have the default values in scope. */
+     They are also declared here so that non-shadow consumers have the default values in scope. */
+
+  /* secondary styling is default, primary is explicit */
+
   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0));
   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000));
   --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px));
@@ -98,19 +109,20 @@ legend {
 
   display: inline-flex;
   align-items: center;
-  justify-content: var(--lmvz-button-content-justification-override, center);
-  gap: var(--lmvz-button-gap);
-  padding-block: var(--lmvz-button-padding-block);
-  padding-inline: var(--lmvz-button-padding-inline);
-  min-height: var(--lmvz-button-min-height);
-  min-width: var(--lmvz-button-min-height);
-  border-radius: var(--lmvz-button-radius);
-  border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);
+  justify-content: var(--lmvz-button-content-justification, center);
+  gap: var(--lmvz-button-gap, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)));
+
+  box-sizing: border-box; /* to inlclude paddings & border in min-height */
+  padding-block: var(--lmvz-button-padding-block, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)));
+  padding-inline: var(--lmvz-button-padding-inline, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)));
+  min-height: var(--lmvz-button-min-height, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)));
+  border: var(--lmvz-button-border-width, 0) solid var(--lmvz-button-border-color, transparent);
+  border-radius: var(--lmvz-button-radius, var(--lmvz-component-input-radius-default, 999px));
+
   background-color: var(--lmvz-button-background);
   color: var(--lmvz-button-color);
   cursor: pointer;
   font: var(--lmvz-button-font);
-  /* text-align: center; */
   text-decoration: none;
   white-space: nowrap;
   transition:
@@ -120,100 +132,91 @@ legend {
     box-shadow 0.15s ease;
 }
 
-button > * {
-  font: inherit;
-  color: inherit;
-}
 
-button:focus-visible {
-  outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
-  outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
-  position: relative;
-  z-index: 1;
-}
+  & > * {
+    font: inherit;
+    color: inherit;
+  }
+  &:focus-visible {
+    outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
+    outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
+    position: relative;
+    z-index: 1;
+  }
+  &:is([disabled], .disabled) {
+    cursor: not-allowed;
+    pointer-events: none;
+    /* } */
+
+    /* button:is(:is([disabled], .disabled):not(.secondary):not(.tertiary), .primary:is([disabled], .disabled)) { */
+    /* button:is([disabled], .disabled) { */
+    /* --lmvz-button-background: var(--lmvz-global-color-neutral-500); */
+    /* --lmvz-button-color: var(--lmvz-global-color-neutral-white); */
+    opacity: var(--lmvz-component-input-disabled-opacity, 40%);
+  }
+  &:not([disabled]):hover {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0));
+  }
+  &:not([disabled]):active {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4));
+  }
 
-button:is([disabled], .disabled) {
-  cursor: not-allowed;
-  pointer-events: none;
-  /* } */
-
-  /* button:is(:is([disabled], .disabled):not(.secondary):not(.tertiary), .primary:is([disabled], .disabled)) { */
-  /* button:is([disabled], .disabled) { */
-  /* --lmvz-button-background: var(--lmvz-global-color-neutral-500); */
-  /* --lmvz-button-color: var(--lmvz-global-color-neutral-white); */
-  opacity: var(--lmvz-component-input-disabled-opacity, 40%);
-}
-
-button:not([disabled]):hover {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0));
-}
-
-button:not([disabled]):active {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4));
-}
-
-button.primary {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff));
-  --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);
-  --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
-}
-
-button.primary:not([disabled], .disabled):hover {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e));
-}
-
-button.primary:not([disabled], .disabled):active {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454));
-}
-
-button.danger {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
-  --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
-}
-
-button.danger:not([disabled], .disabled):hover {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
-}
-
-button.danger:not([disabled], .disabled):active {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
-}
-
-button.tertiary {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000));
-}
-
-button.tertiary:not([disabled], .disabled):hover {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000));
-}
-
-button.tertiary:not([disabled], .disabled):active {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000));
-}
+  /* secondary styling is default, primary is explicit */
 
-button.small {
-  --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
-  --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
-  --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)));
-  --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)));
-  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5
+  &.primary {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000));
+    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff));
+    --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);
+    --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
+  }
+  &.primary:not([disabled], .disabled):hover {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e));
+  }
+  &.primary:not([disabled], .disabled):active {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454));
+  }
+  &.danger {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
+    --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
+    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
+  }
+  &.danger:not([disabled], .disabled):hover {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0));
+    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
+  }
+  &.danger:not([disabled], .disabled):active {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b));
+    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
+  }
+  &.tertiary {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
+    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000));
+  }
+  &.tertiary:not([disabled], .disabled):hover {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0));
+    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000));
+  }
+  &.tertiary:not([disabled], .disabled):active {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0));
+    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000));
+  }
+
+  &.small {
+    --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
+    --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
+    --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)));
+    --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)));
+    --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5
     Router));
-}
-
-button.large {
-  --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
-  --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
-  --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));
-  --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)));
-  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
+  }
+  &.large {
+    --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
+    --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
+    --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));
+    --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)));
+    --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
     Router));
+  }
 }
 
 

package/collection/components/lmvz-chip/lmvz-chip.css

@@ -56,7 +56,7 @@
 }
 
 :host([type='active']) {
-  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-active-subtle, #c1e6fa);
+  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-active-subtle, #7fccf5);
   --lmvz-chip-background-color: var(--lmvz-semantic-color-status-active, #f6fbfe);
   --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
 }

package/collection/components/lmvz-chip/lmvz-chip.js

@@ -42,13 +42,13 @@ export class LmvzChip extends ReactiveControllerHost {
     checkContent = debounce(() => {
         if (!isAriaValidationEnabled())
             return;
-        const elements = [...(this.beforeSlot?.assignedElements() ?? []), ...(this.defaultSlot?.assignedElements() ?? []), ...(this.afterSlot?.assignedElements() ?? [])];
+        const elements = [...(this.beforeSlot?.assignedElements() ?? []), ...(this.defaultSlot?.assignedNodes() ?? []), ...(this.afterSlot?.assignedElements() ?? [])];
         if (!elements.length) {
             console.warn('LmvzChip has no assigned content. Please add content to the default slot or the before-text/after-text slots.');
         }
     }, 500);
     render() {
-        return (h(Host, { key: 'f326ca8e4dba40941db6b9a711ba46989c4cf1b3', type: this.type, size: this.size }, h("slot", { key: 'f9925e107c2e474ecbaca756451dc4249000b0db', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), h("span", { key: '0b6ea980e0b0500d2955a03088d08eb2ca67f64f', class: "content-overflow-wrapper" }, h("slot", { key: '2b7f5c02e9a09128e0a404c7fe35f6278ce1fa61', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), h("slot", { key: '929291cdaccf26d332823f9a100c6b6a84dc04f2', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
+        return (h(Host, { key: '63581b0c567d208b200464e9985ac32d97c1ad43', type: this.type, size: this.size }, h("slot", { key: '7aa740cc80b400893dcbe7021d5513d3f1ca476b', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), h("span", { key: 'da5b9e272becef812b4914bf25b451da16bb9012', class: "content-overflow-wrapper" }, h("slot", { key: 'a925dcd383c86dbea63790b5623d159472b6684c', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), h("slot", { key: 'e018eafb75b85068c992e9f91c4fac89a4c95153', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
     }
     static get is() { return "lmvz-chip"; }
     static get encapsulation() { return "shadow"; }

package/collection/components/lmvz-header/lmvz-header.js

@@ -11,7 +11,7 @@ export class LmvzHeader extends ReactiveControllerHost {
     primarySlot;
     secondarySlot;
     secondaryNav;
-    keyboardNavigationController = new DirectionalFocusController(this, { orientation: 'both' });
+    keyboardNavigationController = new DirectionalFocusController(this, { orientation: 'both', manageTabIndex: false, enableHomeAndEnd: false });
     get primaryMenuitems() {
         return this.primarySlot?.assignedElements({ flatten: false }) || [];
     }
@@ -87,7 +87,7 @@ export class LmvzHeader extends ReactiveControllerHost {
         }
     }
     render() {
-        return (h(Host, { key: '77744fd74160551232eb0347e9ebb01eb3b9bec0', onFocus: this.delegateFocus.bind(this) }, h("div", { key: 'dfd78b2a2ab06b010d9f29dd61f57aced82243fe', class: "brand" }, h("slot", { key: 'c6d29bbdbcbe581a8a170fbeb3d6ab1e31d27dcd', name: "brand" }, h("img", { key: '80cea3b254d153411864d52c2ba300e0eb3c57a7', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '71c53ae0300b61291d0763cdb23f1f645a83928a', "aria-label": "Hauptnavigation" }, h("div", { key: '09949b77a66c54a10c4c141de846fd5697b9d445', role: "menubar", class: "primary-menubar" }, h("slot", { key: 'acec0cf7e13325c49d1e0929b90b056ad1cbbe64', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: 'd35860c71ad5e28ee2e3aaafb157acbeff41d83e', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: 'a4c3a1ad1b1de5bd903b54ed6bd1616ce6517bbb', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: 'ff50045d9ab28bf66a619a48d9ea1f0ed2f5f952', class: "actions" }, h("slot", { key: '6ead0b7a54bf93bb06f0eab2aa8159bd6e96e8f5', name: "actions" }))));
+        return (h(Host, { key: 'a72c860d7f67c9631c462c0abcc798bb142dfc55', onFocus: this.delegateFocus.bind(this) }, h("div", { key: '4ed87264d201c513bce284536793692424ed864b', class: "brand" }, h("slot", { key: '9291d81d7f8a630007b8ad827a16ebea7222b9d2', name: "brand" }, h("img", { key: '77da99409f40d93e4a2d190cbb2a8857f1e81c36', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '3c40c04bb23524ae58e391a54b044e225a25ad07', "aria-label": "Hauptnavigation" }, h("div", { key: '207b8032d3d11b4bfacb6e7fcffb683ad5da8ccc', role: "menubar", class: "primary-menubar" }, h("slot", { key: '8ae67a57ac7b6bb6083c469a857542e31b0c2294', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: '86b9696c95e9ae0e3843fa1607f268dcae8cb279', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: '67966de33555dc26ac2dc51fc8a85d456a2e8e85', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: 'bfb2831144cee723c3182d96d64f44be1cc5a78b', class: "actions" }, h("slot", { key: '6956b81fa8ed6c446edc5f7d9708462b39bc8cbb', name: "actions" }))));
     }
     static get is() { return "lmvz-header"; }
     static get encapsulation() { return "shadow"; }

package/collection/components/lmvz-input/lmvz-input.js

@@ -187,9 +187,6 @@ export class LmvzInput extends ReactiveControllerHost {
             return;
         this.updateNativeError('input');
     };
-    handleChange = (event) => {
-    };
-    handleFocus = () => { };
     handleInvalid = () => this.updateNativeError('invalid');
     handleBlur = () => {
         this.inputValidityActive = true;
@@ -207,9 +204,9 @@ export class LmvzInput extends ReactiveControllerHost {
     render() {
         const hasValue = Boolean(this.value);
         const shouldFloatLabel = hasValue || Boolean(this.placeholder);
-        return (h("div", { key: '626697f00e9ba3ad46e6304d06b04df0f27bb2c2', class: classNames('input-container', {
+        return (h("div", { key: '85f498773efdad53d309e8b1eb5b85ea0601277e', class: classNames('input-container', {
                 'interaction-filled': hasValue,
-            }) }, h("div", { key: '25ec1f448b689ff80defded1323f321d95d6b197', class: "input-wrapper" }, h("slot", { key: '1d5f301e0327b4cd1714f403615f94658a754466', name: "before-input" }), h("div", { key: 'ef553e6e8f6b74a5bb7cddef003d3b51650c7c9d', class: "label-input-group" }, h("label", { key: '17d92ff7c65598739e8a379680580561936e21dc', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: 'cd40da3c85cc6cea49d7d8d270bba317534779f5', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), h("input", { key: '3ede0644d383c2a3f702230de2aac6fbcb2c7a06', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onInvalid: this.handleInvalid })), h("slot", { key: 'b282c5d9553b72af7fd05ed0f872af0d7b8a5689', name: "after-input" })), h("div", { key: 'da6008e798cb5ee29fa7d1ba3208057c1845a217', id: this.helperId, role: "status" }, this.helperText || null), h("div", { key: '5e7717a2d0dd32c53dd7ba6e170152239f3bfae9', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
+            }) }, h("div", { key: 'eb74bdd8170014c2a17c6046878b0f4d61fece25', class: "input-wrapper" }, h("slot", { key: 'ceb3acb5dcb641900caf9a22f43295d1c407ad2e', name: "before-input" }), h("div", { key: 'a7f626addd83cbf79b435989bec94f777818794e', class: "label-input-group" }, h("label", { key: '391e2d1f873f9aef9bd9e7f14b006d898a699abe', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: '691251a0efb1a60fd5e53447a6204c13008545a1', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), h("input", { key: 'f37d3d7d5076636638b2da59cca91c1cedc7504a', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onBlur: this.handleBlur, onInvalid: this.handleInvalid })), h("slot", { key: '22b2be3072fc274bbeff4d92f25dccc5ea50c4d0', name: "after-input" })), h("div", { key: '95f28aad61a5d7ea45fb4479801097036652b08f', id: this.helperId, role: "status" }, this.helperText || null), h("div", { key: '9ea8420b336b33a0fd3b7e53cc4efa44983cbdc3', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
     }
     static get is() { return "lmvz-input"; }
     static get encapsulation() { return "scoped"; }

package/collection/components/lmvz-message/lmvz-message.css

@@ -19,7 +19,7 @@
 
 :host([type='neutral']) {
   background-color: var(--lmvz-semantic-color-status-active, #f6fbfe);
-  border-color: var(--lmvz-semantic-color-status-on-active-subtle, #c1e6fa);
+  border-color: var(--lmvz-semantic-color-status-on-active-subtle, #7fccf5);
   color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
 }
 

package/collection/components/lmvz-popover/lmvz-popover.css

@@ -41,6 +41,6 @@
     box-sizing: border-box;
   }
 }
-:host(:not([open])) .container {
+:host(:not([open])) {
   display: none;
 }