@db-ux/core-components 4.10.2 → 4.11.0

package/build/styles/index.scss

@@ -35,4 +35,12 @@
 @forward "../components/custom-select-dropdown/custom-select-dropdown";
 @forward "../components/custom-select-list/custom-select-list";
 @forward "../components/custom-select-list-item/custom-select-list-item";
+@forward "../components/table/table";
+@forward "../components/table-caption/table-caption";
+@forward "../components/table-head/table-head";
+@forward "../components/table-body/table-body";
+@forward "../components/table-footer/table-footer";
+@forward "../components/table-row/table-row";
+@forward "../components/table-header-cell/table-header-cell";
+@forward "../components/table-data-cell/table-data-cell";
 @forward "../components/custom-button/custom-button";

package/build/styles/internal/_custom-elements.scss

@@ -1,6 +1,8 @@
 $custom-elements: //hygen-insert
 
-	db-custom-button, db-custom-select-list-item, db-custom-select-list,
+	db-table-data-cell, db-table-header-cell, db-table-row, db-table-footer,
+	db-table-body, db-table-head, db-table-caption, db-table, db-custom-button,
+	db-custom-select-list-item, db-custom-select-list,
 	db-custom-select-dropdown, db-custom-select-form-field, db-custom-select,
 	db-stack, db-switch, db-tab-panel, db-tabs, db-tab-list, db-tab-item,
 	db-tab-bar, db-tooltip, db-popover, db-textarea, db-navigation,

package/build/styles/internal/_form-components.scss

@@ -626,7 +626,6 @@ $input-valid-types:
 		@include helpers.display(flex);
 
 		align-items: flex-start;
-		position: relative;
 		color: var(
 			--db-check-element-label-color,
 			#{colors.$db-adaptive-on-bg-basic-emphasis-100-default}
@@ -660,6 +659,7 @@ $input-valid-types:
 
 	&[data-hide-label="true"] {
 		font-size: 0;
+		inline-size: fit-content;
 
 		input {
 			margin-inline-end: 0;

package/build/styles/internal/_table-components.scss

@@ -0,0 +1,64 @@
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/variables";
+
+%table-section-grid {
+	display: var(--db-table-section-display, grid);
+	grid-template-columns: subgrid;
+	grid-column: 1 / -1;
+}
+
+%table-cell {
+	display: flex;
+
+	@for $span from 2 through 20 {
+		&[colspan="#{$span}"] {
+			grid-column: span var(--db-table-cell-span, #{$span});
+		}
+
+		// NOTE: rowspan with CSS Grid/subgrid has limited support since each <tr>
+		// is an independent grid container. This rule provides visual row height
+		// expansion within a single row only. For full native rowspan behavior,
+		// consumers should use the slotted (children) approach with native table elements.
+		&[rowspan="#{$span}"] {
+			grid-row: span var(--db-table-cell-span, #{$span});
+		}
+	}
+
+	&:not([data-horizontal-alignment]),
+	&[data-horizontal-alignment="start"] {
+		text-align: start;
+		justify-content: flex-start;
+	}
+
+	&[data-horizontal-alignment="center"] {
+		text-align: center;
+		justify-content: center;
+	}
+
+	&[data-horizontal-alignment="end"] {
+		text-align: end;
+		justify-content: flex-end;
+	}
+
+	&[data-vertical-alignment="start"] {
+		vertical-align: top;
+		align-items: flex-start;
+	}
+
+	&:not([data-vertical-alignment]),
+	&[data-vertical-alignment="center"] {
+		vertical-align: middle;
+		align-items: center;
+	}
+
+	&[data-vertical-alignment="end"] {
+		vertical-align: bottom;
+		align-items: flex-end;
+	}
+}
+
+%sub-header-strong {
+	background-color: colors.$db-adaptive-bg-vibrant-default;
+	color: colors.$db-adaptive-on-bg-vibrant-default;
+	border-color: colors.$db-adaptive-on-bg-basic-emphasis-70-default;
+}