@tui/design-system 1.9.0 → 1.11.0

package/dist/themes/tui/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/tui/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/tui/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tui/design-system",
-	"version": "1.9.0",
+	"version": "1.11.0",
 	"description": "TUI Design System",
 	"author": "TUI Group",
 	"//dependencies": {
@@ -20,6 +20,12 @@
 		"build:primitives": "node cli/process-primitives.mjs",
 		"build:js": "node cli/process-webcomponent-ts.mjs",
 		"build:changelog": "node cli/change-log.mjs",
+		"build:component-data": "node --experimental-strip-types cli/mcp/generate-component-data.ts",
+		"build:component-examples": "node --experimental-strip-types cli/mcp/render-examples.ts",
+		"build:docs": "node --experimental-strip-types cli/mcp/generate-docs.ts",
+		"build:asset-catalog": "node --experimental-strip-types cli/mcp/generate-asset-catalog.ts",
+		"build:templates": "node --experimental-strip-types cli/mcp/build-templates.ts",
+		"build:meta": "run-s static:build build:component-data build:templates build:component-examples build:docs build:asset-catalog",
 		"dev": "dotenv -e .env.local npm run storybook:dev",
 		"storybook:dev": "run-s static:build build:primitives build:changelog set-scss-env storybook:serve",
 		"storybook:build": "run-s static:build build:primitives build:js build:changelog set-scss-env _storybook:build_prod",

package/scss/lib/accordion/_mixins.scss

@@ -40,15 +40,31 @@ $uilib-accordion-group-included: false !default;
 		&::details-content {
 			block-size: 0;
 
+			visibility: hidden;
+
 			overflow: hidden;
 
+			content-visibility: visible;
+
 			@media (prefers-reduced-motion: no-preference) {
-				transition: block-size var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
+				transition:
+					block-size var(--uilib-motion-duration-medium) var(--uilib-motion-timing-in),
+					visibility 0s var(--uilib-motion-duration-medium);
 			}
 		}
 
 		&[open]::details-content {
 			block-size: auto;
+
+			visibility: visible;
+
+			content-visibility: visible;
+
+			@media (prefers-reduced-motion: no-preference) {
+				transition:
+					block-size var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out),
+					visibility 0s;
+			}
 		}
 
 		&[open] > .uilib-accordion-summary::after {

package/scss/lib/cards/product/_index.scss

@@ -0,0 +1,3 @@
+// Product card / index
+@use 'mixins' as *;
+@include uilib-card-product;

package/scss/lib/cards/product/_mixins.scss

@@ -0,0 +1,351 @@
+// Product card / _mixins
+@use 'variables' as *;
+@use '../../utility/mixins' as *;
+@use '../card/mixins' as *;
+@use '../../icon/mixins' as *;
+@use '../../icon-button/mixins' as *;
+@use '../../image/mixins' as *;
+@use '../../info-tag/mixins' as *;
+@use '../../media-button/mixins' as *;
+@use '../../promo-tag/mixins' as *;
+
+$uilib-card-product-included: false !default;
+
+// Builds product card
+@mixin uilib-card-product() {
+	@if not $uilib-card-product-included {
+		$uilib-card-product-included: true !global;
+
+		@include uilib-card;
+		@include uilib-icon;
+		@include uilib-icon-button;
+		@include uilib-image;
+		@include uilib-info-tag;
+		@include uilib-info-tag-list;
+		@include uilib-media-button;
+		@include uilib-promo-tag;
+		@include uilib-promo-tag-list;
+		@include uilib-card-product-master;
+	}
+}
+
+@mixin uilib-card-product-master() {
+	.uilib-card-product {
+		// container for query
+		container-name: uilib-card-product;
+		container-type: inline-size;
+
+		position: relative;
+
+		border-radius: var(--uilib-card-radius);
+
+		background: var(--uilib-color-canvas-default);
+
+		box-shadow: var(--uilib-card-default-elevation);
+
+		&__image-content {
+			grid-area: uilib-card-product-image;
+
+			position: relative;
+
+			display: grid;
+			grid-template:
+				'uilib-card-product-tags' auto
+				'uilib-card-product-media' min-content;
+			gap: var(--uilib-spacing-200);
+
+			width: 100%;
+			padding: var(--uilib-spacing-200) var(--uilib-spacing-200) calc(var(--uilib-spacing-200) + var(--uilib-card-product-radius-spacing));
+
+			aspect-ratio: var(--uilib-aspect-ratio-16x9-wide);
+
+			.uilib-card-product__product-label,
+			.uilib-card-product__brand {
+				grid-area: uilib-card-product-tags;
+
+				position: relative;
+				z-index: 1;
+
+				place-self: start start;
+			}
+
+			.uilib-card-product__brand {
+				width: 4rem; /* 64 / 16 */
+				height: calc(4rem + var(--uilib-spacing-100)); /* 64 / 16 */
+				margin-top: calc(var(--uilib-spacing-300) * -1);
+				margin-left: calc(var(--uilib-card-product-radius-spacing) - var(--uilib-spacing-200));
+				padding-top: var(--uilib-spacing-100);
+
+				border-radius: 0 0 var(--uilib-border-radius-100) var(--uilib-border-radius-100);
+
+				background: var(--uilib-card-product-flagship-color);
+
+				overflow: hidden;
+			}
+
+			.uilib-card-product__image {
+				position: absolute;
+				inset: 0 auto 0 50%;
+
+				min-width: 100%;
+
+				border-radius: var(--uilib-card-radius) var(--uilib-card-radius) 0 0;
+
+				transform: translateX(-50%);
+
+				overflow: hidden;
+			}
+		}
+
+		&__media-buttons {
+			grid-area: uilib-card-product-media;
+
+			display: flex;
+			flex-flow: row wrap;
+			gap: var(--uilib-spacing-200);
+			justify-content: flex-end;
+
+			li {
+				flex-grow: 1;
+			}
+		}
+
+		li.uilib-card-product__quick-view {
+			flex-grow: 0;
+		}
+
+		&__content-container {
+			grid-area: uilib-card-product-content;
+
+			position: relative;
+			z-index: 1;
+
+			margin-top: calc(var(--uilib-card-product-radius-spacing) * -1);
+
+			border-radius: var(--uilib-card-radius);
+
+			background: var(--uilib-card-default-bg-color);
+
+			box-shadow: var(--uilib-card-default-elevation);
+		}
+
+		&__main-content {
+			grid-area: uilib-card-product-content;
+
+			border-radius: var(--uilib-card-radius);
+
+			background: var(--uilib-card-default-bg-color);
+		}
+
+		&__supplementary-container {
+			grid-area: uilib-card-product-supplementary;
+
+			position: relative;
+			z-index: 1;
+
+			margin-top: calc(var(--uilib-spacing-200) * -1);
+			padding: var(--uilib-spacing-200);
+
+			border-radius: 0 0 var(--uilib-card-radius) var(--uilib-card-radius);
+
+			background: var(--uilib-card-contrast-bg-color);
+		}
+
+		/* stylelint-disable-next-line order/order */
+		@container uilib-card-product (min-width: 35rem) {
+			&__inner {
+				display: grid;
+				grid-template:
+					'uilib-card-product-image uilib-card-product-content' 1fr
+					'uilib-card-product-supplementary uilib-card-product-content' minmax(0, min-content) / 45% 55%;
+				align-content: start;
+				align-items: stretch;
+			}
+
+			&__image-content {
+				min-height: auto;
+				padding: var(--uilib-spacing-200) calc(var(--uilib-spacing-200) + var(--uilib-card-product-radius-spacing)) var(--uilib-spacing-200)
+					var(--uilib-spacing-200);
+
+				transform: none;
+
+				.uilib-card-product__image {
+					min-height: 100%;
+
+					border-radius: var(--uilib-card-radius) 0 0 var(--uilib-card-radius);
+				}
+
+				&:has(~ .uilib-card-product__content-container .uilib-card-product__supplementary-container) .uilib-card-product__image {
+					border-bottom-left-radius: 0;
+				}
+			}
+
+			&__content-container {
+				display: contents;
+			}
+
+			&__main-content {
+				position: relative;
+				z-index: 1;
+
+				display: flex;
+				flex-flow: column;
+
+				margin-top: 0;
+				margin-left: calc(var(--uilib-card-product-radius-spacing) * -1);
+
+				box-shadow: var(--uilib-card-default-elevation);
+			}
+
+			&__supplementary-container {
+				position: static;
+				z-index: 0;
+
+				align-self: start;
+
+				margin-top: 0;
+				padding-right: calc(var(--uilib-spacing-200) + var(--uilib-card-product-radius-spacing));
+
+				border-radius: 0;
+				border-bottom-left-radius: var(--uilib-card-radius);
+			}
+		}
+
+		&__visually-hidden {
+			@include uilib-visually-hidden;
+		}
+
+		&-flagship-wrapper {
+			container-name: uilib-card-product-wrapper;
+			container-type: inline-size;
+
+			margin: var(--uilib-spacing-400) 0;
+			padding-top: var(--uilib-spacing-300);
+
+			border-radius: var(--uilib-card-radius);
+
+			background: var(--uilib-card-product-flagship-color);
+
+			box-shadow: var(--uilib-card-default-elevation);
+
+			.uilib-card-product {
+				margin: 0;
+
+				box-shadow: none;
+			}
+		}
+
+		&-highlights {
+			position: relative;
+
+			display: block;
+
+			padding: var(--uilib-spacing-200) var(--uilib-spacing-400);
+
+			color: var(--uilib-card-product-flagship-text-color);
+
+			&:defined {
+				padding-right: calc(var(--uilib-spacing-600) + 2.75rem); /* 8+4+44 / 16 */
+			}
+
+			&__list {
+				display: flex;
+				flex-flow: column;
+				gap: var(--uilib-spacing-200) var(--uilib-spacing-600);
+			}
+
+			&-item {
+				display: grid;
+				grid-template:
+					'icon title' 1fr
+					'icon description' auto
+					/ var(--uilib-icon-size-large) 1fr;
+				gap: 0 var(--uilib-spacing-200);
+				align-items: baseline;
+
+				&__icon {
+					grid-area: icon;
+				}
+
+				&__title {
+					grid-area: title;
+
+					align-self: center;
+
+					font: var(--uilib-typography-component-heading-small-strong);
+				}
+
+				&__description {
+					grid-area: description;
+
+					block-size: auto;
+
+					font: var(--uilib-typography-body-medium);
+
+					visibility: visible;
+
+					overflow: hidden;
+
+					@media (prefers-reduced-motion: no-preference) {
+						transition:
+							block-size var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out),
+							visibility 0s;
+					}
+
+					&[aria-hidden='true'] {
+						block-size: 0;
+
+						visibility: hidden;
+
+						@media (prefers-reduced-motion: no-preference) {
+							transition:
+								block-size var(--uilib-motion-duration-medium) var(--uilib-motion-timing-in),
+								visibility 0s var(--uilib-motion-duration-medium);
+						}
+					}
+				}
+			}
+
+			&__button.uilib-icon-button {
+				position: absolute;
+				bottom: var(--uilib-spacing-200);
+				right: var(--uilib-spacing-200);
+
+				&:hover:not(:disabled, .uilib-icon-button--disabled) {
+					background: none;
+				}
+
+				&:focus-visible {
+					position: absolute;
+				}
+
+				&[aria-expanded='true'] .uilib-card-product-highlights__button-icon {
+					transform: rotate(180deg);
+				}
+			}
+
+			&__button-icon {
+				color: var(--uilib-card-product-flagship-text-color);
+				-webkit-mask-image: var(--uilib-card-product-highlights-icon);
+				mask-image: var(--uilib-card-product-highlights-icon);
+
+				@media (prefers-reduced-motion: no-preference) {
+					transition: transform var(--uilib-motion-duration-fast) var(--uilib-motion-timing-out);
+				}
+			}
+
+			/* stylelint-disable-next-line order/order */
+			@container uilib-card-product-wrapper (min-width: 35rem) {
+				&__list {
+					flex-flow: row nowrap;
+
+					padding-right: var(--uilib-spacing-400);
+				}
+
+				&__button.uilib-icon-button {
+					display: none;
+				}
+			}
+		}
+	}
+}

package/scss/lib/cards/product/_variables.scss

@@ -0,0 +1,9 @@
+@use '../../../variables/env-variables' as *;
+
+// Product card specific variables to allow theming
+$uilib-card-product-variables: (
+	radius-spacing: var(--uilib-card-radius),
+	flagship-color: var(--uilib-color-core-brand-strong),
+	flagship-text-color: var(--uilib-color-text-inverse),
+	highlights-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/chevron-down.svg'),
+) !default;

package/scss/lib/cards/search/_mixins.scss

@@ -354,6 +354,7 @@ $uilib-card-search-included: false !default;
 			container-name: uilib-card-search-wrapper;
 			container-type: inline-size;
 
+			margin: var(--uilib-spacing-400) 0;
 			padding-top: var(--uilib-spacing-300);
 
 			border-radius: var(--uilib-card-radius);
@@ -363,6 +364,8 @@ $uilib-card-search-included: false !default;
 			box-shadow: var(--uilib-card-default-elevation);
 
 			.uilib-card-search {
+				margin: 0;
+
 				box-shadow: none;
 			}
 		}
@@ -414,16 +417,26 @@ $uilib-card-search-included: false !default;
 
 					font: var(--uilib-typography-body-medium);
 
+					visibility: visible;
+
 					overflow: hidden;
 
 					@media (prefers-reduced-motion: no-preference) {
 						transition:
-							block-size var(--uilib-motion-duration-fast) var(--uilib-motion-timing-out),
-							content-visibility var(--uilib-motion-duration-fast) allow-discrete;
+							block-size var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out),
+							visibility 0s;
 					}
 
 					&[aria-hidden='true'] {
 						block-size: 0;
+
+						visibility: hidden;
+
+						@media (prefers-reduced-motion: no-preference) {
+							transition:
+								block-size var(--uilib-motion-duration-medium) var(--uilib-motion-timing-in),
+								visibility 0s var(--uilib-motion-duration-medium);
+						}
 					}
 				}
 			}

package/scss/lib/cards/selectable/_mixins.scss

@@ -145,6 +145,10 @@ $uilib-card-selectable-included: false !default;
 			.uilib-input-radio {
 				margin: 0 calc(var(--uilib-spacing-200) * -1) calc(var(--uilib-spacing-200) * -1);
 			}
+
+			.uilib-input-radio__label {
+				width: unset;
+			}
 		}
 
 		// ===================
@@ -255,30 +259,49 @@ $uilib-card-selectable-included: false !default;
 			position: relative;
 
 			display: grid;
-			grid-template:
-				'uilib-card-selectable-tags .' auto
-				'uilib-card-selectable-media uilib-card-selectable-media' min-content
-				/ 1fr var(--uilib-spacing-1000);
+			grid-template: 'uilib-card-selectable-tags .' 1fr / 1fr var(--uilib-spacing-1000);
 			gap: var(--uilib-spacing-200);
 
 			padding: var(--uilib-spacing-200);
 
 			aspect-ratio: var(--uilib-aspect-ratio-16x9-wide);
-		}
 
-		&__tag {
-			grid-area: uilib-card-selectable-tags;
+			.uilib-card-selectable__tag.uilib-info-tag {
+				grid-area: uilib-card-selectable-tags;
 
-			position: relative;
+				position: relative;
+				z-index: 1;
+
+				place-self: start start;
+
+				max-width: 100%;
+
+				transform: translate(0, calc((var(--uilib-spacing-200) + 50%) * -1));
+
+				pointer-events: none;
+			}
+		}
+
+		& > &__tag.uilib-info-tag {
 			z-index: 1;
 
-			place-self: start start;
+			align-self: flex-start;
 
-			transform: translate(0, calc((var(--uilib-spacing-200) + 50%) * -1));
+			max-width: calc(100% - var(--uilib-spacing-1000) - var(--uilib-spacing-200) * 2);
+			margin: calc((var(--uilib-spacing-050) + 0.5rem) * -1) var(--uilib-spacing-200) calc((var(--uilib-spacing-050) + 0.5rem) * -1);
+
+			pointer-events: none;
 		}
 
 		&__media-button {
-			grid-area: uilib-card-selectable-media;
+			position: absolute;
+			left: var(--uilib-spacing-200);
+			bottom: var(--uilib-spacing-200);
+			z-index: 1;
+
+			&.uilib-button:focus-visible {
+				position: absolute;
+			}
 		}
 
 		&__image.uilib-image {

package/scss/lib/forms/input-checkbox/_mixins.scss

@@ -30,10 +30,14 @@ $uilib-input-checkbox-included: false !default;
 			gap: var(--uilib-spacing-300);
 			align-items: flex-start;
 
+			width: max-content;
+			max-width: 100%;
 			padding: var(--uilib-spacing-300);
 
 			border-radius: var(--uilib-border-radius-100);
 
+			cursor: pointer;
+
 			&::before,
 			&::after {
 				content: '';
@@ -51,7 +55,7 @@ $uilib-input-checkbox-included: false !default;
 
 				background: var(--uilib-color-core-neutral);
 
-				cursor: pointer;
+				pointer-events: none;
 
 				@media (prefers-reduced-motion: no-preference) {
 					transition:
@@ -144,16 +148,12 @@ $uilib-input-checkbox-included: false !default;
 		}
 
 		&__input:disabled + .uilib-input-checkbox__label {
+			cursor: default;
+
 			&::before {
 				border-color: var(--uilib-color-other-disabled-soft);
 
 				background: var(--uilib-color-other-disabled-soft);
-
-				cursor: default;
-			}
-
-			&::after {
-				cursor: default;
 			}
 
 			.uilib-input-checkbox__label-content {

package/scss/lib/forms/input-radio/_mixins.scss

@@ -30,10 +30,14 @@ $uilib-input-radio-included: false !default;
 			gap: var(--uilib-spacing-300);
 			align-items: flex-start;
 
+			width: max-content;
+			max-width: 100%;
 			padding: var(--uilib-spacing-300);
 
 			border-radius: var(--uilib-border-radius-100);
 
+			cursor: pointer;
+
 			&::before,
 			&::after {
 				content: '';
@@ -51,7 +55,7 @@ $uilib-input-radio-included: false !default;
 
 				background: var(--uilib-color-core-neutral);
 
-				cursor: pointer;
+				pointer-events: none;
 
 				@media (prefers-reduced-motion: no-preference) {
 					transition:
@@ -119,16 +123,12 @@ $uilib-input-radio-included: false !default;
 		}
 
 		&__input:disabled + .uilib-input-radio__label {
+			cursor: default;
+
 			&::before {
 				border-color: var(--uilib-color-other-disabled-soft);
 
 				background: var(--uilib-color-other-disabled-soft);
-
-				cursor: default;
-			}
-
-			&::after {
-				cursor: default;
 			}
 
 			.uilib-input-radio__label-content {