@db-ux/core-components 2.1.0 → 2.1.2

package/build/components/select/select.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-select[data-hide-label=true] > label, .db-visually-hidden,
@@ -618,7 +619,7 @@ input[type=radio]:checked) > label {
   --db-label-visible-above: 0;
 }
 .db-select[data-variant=floating] > label {
-  opacity: 0.75;
+  opacity: var(--db-opacity-xl);
   position: absolute;
   z-index: 2;
   inset-block-start: calc((var(--db-sizing-md) - var(--db-icon-font-size)) / 2);
@@ -657,7 +658,7 @@ select:is(input, textarea):not(:placeholder-shown),
 > select option:checked:not([hidden]),
 input[type=checkbox]:checked,
 input[type=radio]:checked) [id$=-placeholder] {
-  opacity: 0.75;
+  opacity: var(--db-opacity-xl);
   font-family: var(--db-font-family-sans);
   font-style: italic;
   /* stylelint-disable-next-line db-ux/use-spacings */
@@ -799,7 +800,7 @@ input[type=radio]:checked) [id$=-placeholder] {
 }
 .db-select select::placeholder,
 .db-select [id$=-placeholder] {
-  opacity: 0.75;
+  opacity: var(--db-opacity-xl);
   font-family: var(--db-font-family-sans);
   font-style: italic;
 }
@@ -845,7 +846,7 @@ input[type=radio]:checked) [id$=-placeholder] {
 .db-select:has(select:disabled,
 select[data-disabled=true],
 select[aria-disabled=true]) {
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
   pointer-events: none;
 }
 .db-select::after, .db-select::before {

package/build/components/stack/stack-web-component.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}

package/build/components/stack/stack.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}

package/build/components/switch/switch.css

@@ -5,6 +5,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-visually-hidden,
@@ -513,7 +514,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   }
 }
 .db-switch:has(input:disabled) {
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
 }
 .db-switch:is(label),
 .db-switch > label {

package/build/components/tab-item/tab-item.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-visually-hidden,
@@ -64,14 +65,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   outline-offset: var(--db-border-width-xs);
   box-shadow: 0 0 0 var(--db-border-width-xs) var(--db-focus-box-shadow-bg-color, transparent);
 }
-.db-tab-item input:not([data-disable-focus=true]):not([type=radio], [role=switch]):focus-visible::before {
-  border-radius: var(--db-border-radius-xs);
-}
 @media screen and (prefers-reduced-motion: no-preference) {
   .db-tab-item input:not([data-disable-focus=true]):focus-visible::before {
     transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast);
   }
 }
+.db-tab-item input:not([data-disable-focus=true]):not([type=radio], [role=switch]):focus-visible::before {
+  border-radius: var(--db-border-radius-xs);
+}
 
 /**
  * @mixin screen-min-max
@@ -144,7 +145,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   border-radius: var(--db-border-radius-sm);
 }
 .db-tab-item:has(input:disabled) {
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
 }
 .db-tab-item label {
   background-color: var(--db-adaptive-bg-basic-transparent-full-default);

package/build/components/tab-item/tab-item.scss

@@ -18,7 +18,7 @@ $with-icon-padding-calc: calc(
 	border-radius: variables.$db-border-radius-sm;
 
 	&:has(input:disabled) {
-		opacity: component.$default-disabled;
+		opacity: variables.$db-opacity-md;
 	}
 
 	label {

package/build/components/tab-list/tab-list.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-visually-hidden,

package/build/components/tab-panel/tab-panel.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 .db-tab-panel {
   display: none;

package/build/components/tabs/tabs.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-visually-hidden,

package/build/components/tag/tag.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 .db-tag label, .db-tag a {
   transition: outline var(--db-transition-duration-extra-fast), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
@@ -1512,7 +1513,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   block-size: inherit;
 }
 .db-tag:has(:disabled), .db-tag[data-disabled=true] {
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
   pointer-events: none;
 }
 .db-tag[data-overflow=true] {

package/build/components/tag/tag.scss

@@ -209,7 +209,7 @@
 
 	&:has(:disabled),
 	&[data-disabled="true"] {
-		opacity: component.$default-disabled;
+		opacity: variables.$db-opacity-md;
 		pointer-events: none;
 	}
 

package/build/components/textarea/textarea.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 .db-textarea[data-hide-label=true] > label, .db-visually-hidden,
 [data-visually-hidden=true] {
@@ -372,7 +373,7 @@ input[type=radio]:checked) > label {
   --db-label-visible-above: 0;
 }
 .db-textarea[data-variant=floating] > label {
-  opacity: 0.75;
+  opacity: var(--db-opacity-xl);
   position: absolute;
   z-index: 2;
   inset-block-start: calc((var(--db-sizing-md) - var(--db-icon-font-size)) / 2);
@@ -411,7 +412,7 @@ textarea:is(input, textarea):not(:placeholder-shown),
 > select option:checked:not([hidden]),
 input[type=checkbox]:checked,
 input[type=radio]:checked) [id$=-placeholder] {
-  opacity: 0.75;
+  opacity: var(--db-opacity-xl);
   font-family: var(--db-font-family-sans);
   font-style: italic;
 }
@@ -623,7 +624,7 @@ input[type=radio]:checked) [id$=-placeholder] {
 }
 .db-textarea textarea::placeholder,
 .db-textarea [id$=-placeholder] {
-  opacity: 0.75;
+  opacity: var(--db-opacity-xl);
   font-family: var(--db-font-family-sans);
   font-style: italic;
 }
@@ -669,7 +670,7 @@ input[type=radio]:checked) [id$=-placeholder] {
 .db-textarea:has(textarea:disabled,
 textarea[data-disabled=true],
 textarea[aria-disabled=true]) {
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
   pointer-events: none;
 }
 .db-textarea::after, .db-textarea::before {

package/build/components/tooltip/tooltip.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}