@db-ux/core-components 1.0.0-test-13b991d

package/build/components/select/select.scss

@@ -0,0 +1,83 @@
+@use "sass:map";
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/icons";
+@use "@db-ux/core-foundations/build/styles/fonts";
+@use "../../styles/internal/form-components";
+@use "../../styles/internal/component";
+
+%select-icon {
+	@extend %dropdown-icon;
+
+	&[data-icon] {
+		--db-form-has-before: 1;
+	}
+}
+
+$has-before-padding: calc(
+	var(--db-form-has-before) *
+		(#{form-components.$icon-size-sm} + #{variables.$db-spacing-fixed-sm})
+);
+
+.db-select {
+	--db-form-component-padding-inline-end: calc(
+		#{form-components.$font-size-height} + #{variables.$db-spacing-fixed-sm}
+	);
+	// shared from form-components
+	@extend %select-icon;
+
+	@include form-components.set-default-form-component(select);
+
+	min-inline-size: calc(
+		4 * #{variables.$db-sizing-md} + var(--db-form-has-before) *
+			#{variables.$db-sizing-md}
+	);
+
+	select {
+		text-indent: $has-before-padding;
+	}
+
+	// Most likely this wouldn't work on MacOS, but we're still progressively enhancing Windows by this
+	option {
+		background-color: colors.$db-adaptive-bg-basic-level-1-default;
+		color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
+	}
+
+	&[data-hide-label="true"] {
+		--db-label-visible-height: 0;
+		--db-label-visible-spacing: 1;
+	}
+
+	[id$="-placeholder"] {
+		@extend %db-overwrite-font-size-md;
+
+		position: absolute;
+		pointer-events: none;
+		// we use the top of the element, the size of the label+label-margin-bottom and the font-size of the select/2
+		// for functional we have some rounding issues for rem, so we need 1px less
+		inset-block-start: calc(
+			0% +
+				(
+					#{form-components.$label-size-height-xs} +
+						#{variables.$db-spacing-fixed-xs}
+				) *
+				var(--db-label-visible-height, 1) + var(--db-base-font-size) /
+				2 - var(--db-density-functional, 0) * 1px
+		);
+		inset-inline: $has-before-padding;
+		margin-inline-start: variables.$db-spacing-fixed-sm;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		inline-size: calc(
+			100% - var(--db-form-component-padding-inline-end) -
+				#{$has-before-padding} - #{variables.$db-spacing-fixed-sm}
+		);
+	}
+
+	&:has(> select option:checked:not([hidden])) {
+		[id$="-placeholder"] {
+			display: none;
+		}
+	}
+}

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

@@ -0,0 +1,93 @@
+/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
+/* Use fixed spacings for all kind of distances (margin, padding, ...) */
+/* The primary use-case for responsive spacings are
+paddings/gaps in an application e.g. the <main> should have a responsive padding. */
+/* Elevation */
+/* Border */
+/* Transitions */
+/* Variants for adaptive components like input, select, notification, ... */
+.db-stack {
+  display: flex;
+  gap: var(--db-spacing-fixed-sm);
+  justify-content: flex-start;
+  block-size: 100%;
+  inline-size: 100%;
+  overflow: auto;
+}
+.db-stack:is([data-direction=column], :not([data-direction])) {
+  flex-direction: column;
+}
+.db-stack > .db-divider,
+.db-stack > db-divider > .db-divider {
+  margin: 0;
+}
+[data-direction=row].db-stack {
+  flex-direction: row;
+}
+[data-wrap=true].db-stack {
+  flex-wrap: wrap;
+}
+[data-alignment=stretch].db-stack {
+  align-items: stretch;
+}
+[data-alignment=start].db-stack {
+  align-items: flex-start;
+}
+[data-alignment=end].db-stack {
+  align-items: flex-end;
+}
+[data-alignment=center].db-stack {
+  align-items: center;
+}
+[data-justify-content=start].db-stack {
+  justify-content: flex-start;
+}
+[data-justify-content=end].db-stack {
+  justify-content: flex-end;
+}
+[data-justify-content=center].db-stack {
+  justify-content: center;
+}
+[data-justify-content=space-between].db-stack {
+  justify-content: space-between;
+}
+[data-gap="3x-small"].db-stack {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  gap: var(--db-spacing-fixed-3xs);
+}
+[data-gap="2x-small"].db-stack {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  gap: var(--db-spacing-fixed-2xs);
+}
+[data-gap=x-small].db-stack {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  gap: var(--db-spacing-fixed-xs);
+}
+[data-gap=small].db-stack {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  gap: var(--db-spacing-fixed-sm);
+}
+[data-gap=medium].db-stack {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  gap: var(--db-spacing-fixed-md);
+}
+[data-gap=large].db-stack {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  gap: var(--db-spacing-fixed-lg);
+}
+[data-gap=x-large].db-stack {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  gap: var(--db-spacing-fixed-xl);
+}
+[data-gap="2x-large"].db-stack {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  gap: var(--db-spacing-fixed-2xl);
+}
+[data-gap="3x-large"].db-stack {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  gap: var(--db-spacing-fixed-3xl);
+}
+[data-gap=none].db-stack {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  gap: 0;
+}

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

@@ -0,0 +1 @@
+@forward "stack";

package/build/components/stack/stack.css

@@ -0,0 +1,93 @@
+/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
+/* Use fixed spacings for all kind of distances (margin, padding, ...) */
+/* The primary use-case for responsive spacings are
+paddings/gaps in an application e.g. the <main> should have a responsive padding. */
+/* Elevation */
+/* Border */
+/* Transitions */
+/* Variants for adaptive components like input, select, notification, ... */
+.db-stack {
+  display: flex;
+  gap: var(--db-spacing-fixed-sm);
+  justify-content: flex-start;
+  block-size: 100%;
+  inline-size: 100%;
+  overflow: auto;
+}
+.db-stack:is([data-direction=column], :not([data-direction])) {
+  flex-direction: column;
+}
+.db-stack > .db-divider,
+.db-stack > db-divider > .db-divider {
+  margin: 0;
+}
+[data-direction=row].db-stack {
+  flex-direction: row;
+}
+[data-wrap=true].db-stack {
+  flex-wrap: wrap;
+}
+[data-alignment=stretch].db-stack {
+  align-items: stretch;
+}
+[data-alignment=start].db-stack {
+  align-items: flex-start;
+}
+[data-alignment=end].db-stack {
+  align-items: flex-end;
+}
+[data-alignment=center].db-stack {
+  align-items: center;
+}
+[data-justify-content=start].db-stack {
+  justify-content: flex-start;
+}
+[data-justify-content=end].db-stack {
+  justify-content: flex-end;
+}
+[data-justify-content=center].db-stack {
+  justify-content: center;
+}
+[data-justify-content=space-between].db-stack {
+  justify-content: space-between;
+}
+[data-gap="3x-small"].db-stack {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  gap: var(--db-spacing-fixed-3xs);
+}
+[data-gap="2x-small"].db-stack {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  gap: var(--db-spacing-fixed-2xs);
+}
+[data-gap=x-small].db-stack {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  gap: var(--db-spacing-fixed-xs);
+}
+[data-gap=small].db-stack {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  gap: var(--db-spacing-fixed-sm);
+}
+[data-gap=medium].db-stack {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  gap: var(--db-spacing-fixed-md);
+}
+[data-gap=large].db-stack {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  gap: var(--db-spacing-fixed-lg);
+}
+[data-gap=x-large].db-stack {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  gap: var(--db-spacing-fixed-xl);
+}
+[data-gap="2x-large"].db-stack {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  gap: var(--db-spacing-fixed-2xl);
+}
+[data-gap="3x-large"].db-stack {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  gap: var(--db-spacing-fixed-3xl);
+}
+[data-gap=none].db-stack {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  gap: 0;
+}

package/build/components/stack/stack.scss

@@ -0,0 +1,5 @@
+@use "../../styles/internal/stack-components";
+
+.db-stack {
+	@extend %default-stack;
+}