@muraldevkit/ui-toolkit 4.45.2-dev-jOrv.1 → 4.46.0-dev-YZUx.1

package/dist/styles/button/variables.scss

@@ -0,0 +1,164 @@
+
+@use '~@muraldevkit/ds-foundation/src/styles/skeletons/button' as *;
+.mrlIconButton,
+.mrlButton {
+	--mrl-button-background-color: var(--mrl-color-background);
+	--mrl-button-background-color-active: rgba(var(--mrl-gray-20), 1);
+	--mrl-button-background-color-disabled: var(--mrl-color-background);
+	--mrl-button-background-color-hover: rgba(var(--mrl-gray-10), 1);
+	--mrl-button-border-color: rgba(var(--mrl-gray-30), 1);
+	--mrl-button-border-color-active: rgba(var(--mrl-gray-50), 1);
+	--mrl-button-border-color-disabled: rgba(var(--mrl-gray-20), 1);
+	--mrl-button-border-color-hover: rgba(var(--mrl-gray-40), 1);
+	--mrl-button-border-width: var(--mrl-line-width-border);
+	--mrl-button-icon-size: var(--mrl-spacing-07);
+	--mrl-button-text-color: rgba(var(--mrl-gray-80), 1);
+	--mrl-button-text-color-active: rgba(var(--mrl-black), 1);
+	--mrl-button-text-color-disabled: var(--mrl-color-text-disabled);
+	--mrl-button-text-color-hover: rgba(var(--mrl-gray-90), 1);
+	--mrl-button-inset-vertical: 0;
+	--mrl-button-inset-horizontal: var(--mrl-space-inset-control-large);
+	--mrl-button-icon-margin-right: var(--mrl-space-inline-related);
+	&--small {
+		@include mrl-button-size('small');
+		--mrl-button-icon-size: var(--mrl-spacing-06);
+		--mrl-button-inset-horizontal: var(--mrl-spacing-04);
+	}
+	&--xsmall {
+		--mrl-button-icon-size: var(--mrl-spacing-06);
+	}
+	&.mrlIconButton--small {
+		@include mrl-button-size('small', true);
+		+ .mrl-tooltip-content {
+			--mrl-tooltip-arrow-spacing: calc(
+				(#{$mrl-button-height--small} - var(--mrl-tooltip-arrow-size)) / 2
+			);
+		}
+	}
+	&--large {
+		@include mrl-button-size('large');
+		--mrl-button-inset-horizontal: var(--mrl-spacing-05);
+	}
+	&.mrlIconButton--large {
+		@include mrl-button-size('large', true);
+	}
+	&.mrlButton--primary,
+	&.mrlButton--ghost,
+	&.mrlButton--ghost-inverse,
+	&.mrlIconButton--primary,
+	&.mrlIconButton--ghost,
+	&.mrlIconButton--ghost-inverse {
+		--mrl-button-border-color: transparent;
+		--mrl-button-border-color-active: transparent;
+		--mrl-button-border-color-hover: transparent;
+		--mrl-button-border-color-disabled: transparent;
+	}
+	&--secondary-native {
+		--mrl-button-border-color: transparent;
+		--mrl-button-border-color-active: transparent;
+		--mrl-button-border-color-hover: transparent;
+		--mrl-button-border-color-disabled: transparent;
+	}
+	&--primary {
+		--mrl-button-background-color: var(--mrl-color-brand);
+		--mrl-button-background-color-active: var(--mrl-color-brand-active);
+		--mrl-button-background-color-disabled: var(--mrl-color-background-disabled);
+		--mrl-button-background-color-hover: var(--mrl-color-brand-hover);
+		--mrl-button-text-color: var(--mrl-color-text-inverse);
+		--mrl-button-text-color-active: var(--mrl-color-text-inverse);
+		--mrl-button-text-color-disabled: var(--mrl-color-text-inverse);
+		--mrl-button-text-color-hover: var(--mrl-color-text-inverse);
+	}
+	&--primary-native {
+		--mrl-button-background-color: transparent;
+		--mrl-button-background-color-active: var(--mrl-black-opacity-01);
+		--mrl-button-background-color-disabled: transparent;
+		--mrl-button-background-color-hover: var(--mrl-black-opacity-00);
+		--mrl-button-border-color: transparent;
+		--mrl-button-border-color-active: transparent;
+		--mrl-button-border-color-hover: transparent;
+		--mrl-button-border-color-disabled: transparent;
+		--mrl-button-text-color: rgba(var(--mrl-blue-70), 1);
+		--mrl-button-text-color-active: rgba(var(--mrl-blue-70), 1);
+		--mrl-button-text-color-disabled: var(--mrl-black-opacity-03);
+		--mrl-button-text-color-hover: rgba(var(--mrl-blue-70), 1);
+	}
+	&--ghost {
+		--mrl-button-background-color: transparent;
+		--mrl-button-background-color-active: var(--mrl-black-opacity-01);
+		--mrl-button-background-color-hover: var(--mrl-black-opacity-00);
+		--mrl-button-background-color-disabled: transparent;
+		--mrl-button-text-color: rgba(var(--mrl-gray-100), 1);
+		--mrl-button-text-color-active: rgba(var(--mrl-gray-100), 1);
+		--mrl-button-text-color-disabled: var(--mrl-black-opacity-03);
+		--mrl-button-text-color-hover: rgba(var(--mrl-gray-100), 1);
+		--mrl-button-inset-horizontal: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+		--mrl-button-icon-margin-right: var(--mrl-spacing-02);
+		&[aria-pressed='true'],
+		&[aria-checked='true'],
+		&[aria-expanded='true'],
+		&[aria-selected='true'] {
+			--mrl-button-background-color: var(--mrl-color-background-inverse);
+			--mrl-button-text-color: var(--mrl-color-text-inverse);
+		}
+	}
+	&--ghost-inverse {
+		--mrl-button-background-color: transparent;
+		--mrl-button-background-color-active: var(--mrl-white-opacity-04);
+		--mrl-button-background-color-hover: var(--mrl-white-opacity-02);
+		--mrl-button-background-color-disabled: transparent;
+		--mrl-button-text-color: var(--mrl-color-text-inverse);
+		--mrl-button-text-color-active: var(--mrl-color-text-inverse);
+		--mrl-button-text-color-hover: var(--mrl-color-text-inverse);
+		--mrl-button-text-color-disabled: var(--mrl-white-opacity-04);
+		--mrl-button-inset-horizontal: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+		--mrl-button-icon-margin-right: var(--mrl-spacing-02);
+		&.mrlButton--skeleton {
+			--mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse);
+		}
+		&.toggleStyle--default[aria-pressed='true'],
+		&.toggleStyle--default[aria-checked='true'],
+		&.toggleStyle--default[aria-expanded='true'],
+		&.toggleStyle--default[aria-selected='true'] {
+			--mrl-button-background-color: var(--mrl-color-background);
+			--mrl-button-text-color: var(--mrl-color-text);
+		}
+		&.toggleStyle--secondary[aria-pressed='true'],
+		&.toggleStyle--secondary[aria-checked='true'],
+		&.toggleStyle--secondary[aria-expanded='true'],
+		&.toggleStyle--secondary[aria-selected='true'] {
+			--mrl-button-background-color: var(--mrl-color-accent);
+			--mrl-button-text-color: var(--mrl-color-text-inverse);
+		}
+		&[aria-disabled='true'][aria-pressed='true'],
+		&[aria-disabled='true'][aria-checked='true'],
+		&[aria-disabled='true'][aria-expanded='true'],
+		&[aria-disabled='true'][aria-selected='true'] {
+			--mrl-button-background-color-disabled: var(--mrl-white-opacity-03);
+			--mrl-button-text-color-disabled: var(--mrl-white-opacity-04);
+		}
+	}
+	&--inverse {
+		--mrl-button-background-color: var(--mrl-color-background);
+		--mrl-button-background-color-active: var(--mrl-white-opacity-06);
+		--mrl-button-background-color-hover: var(--mrl-white-opacity-08);
+		--mrl-button-background-color-disabled: var(--mrl-white-opacity-03);
+		--mrl-button-border-color: transparent;
+		--mrl-button-border-color-active: transparent;
+		--mrl-button-border-color-hover: transparent;
+		--mrl-button-border-color-disabled: transparent;
+		--mrl-button-text-color: rgba(var(--mrl-gray-100), 1);
+		--mrl-button-text-color-active: rgba(var(--mrl-gray-100), 1);
+		--mrl-button-text-color-disabled: var(--mrl-black-opacity-03);
+		&.mrlButton--skeleton {
+			--mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse);
+		}
+	}
+	&[aria-disabled='true'][aria-pressed='true'],
+	&[aria-disabled='true'][aria-checked='true'],
+	&[aria-disabled='true'][aria-expanded='true'],
+	&[aria-disabled='true'][aria-selected='true'] {
+		--mrl-button-background-color-disabled: var(--mrl-black-opacity-03);
+		--mrl-button-text-color-disabled: var(--mrl-color-text-inverse);
+	}
+}

package/dist/styles/components/module.scss

@@ -0,0 +1,6 @@
+.MrlSelectMultiValue {
+	&.MrlSelectMultiValue--is-focused :global(.MrlSvgContainer) {
+		border-radius: var(--mrl-radii-02);
+		outline: var(--mrl-line-width-focus) solid var(--mrl-color-focus);
+	}
+}

package/dist/styles/container/variables.scss

@@ -0,0 +1,10 @@
+
+:root,
+.MrlContainer {
+	--mrl-container-background: rgba(var(--mrl-white), 1);
+	--mrl-container-background--helper: rgba(var(--mrl-gray-10), 1);
+	--mrl-container-border-color: rgba(var(--mrl-gray-20), 1);
+	--mrl-container-border-radius: var(--mrl-radii-04);
+	--mrl-container-border-width: var(--mrl-stroke-01);
+	--mrl-container-padding: var(--mrl-spacing-07);
+}

package/dist/styles/date-picker/module.scss

@@ -0,0 +1,38 @@
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+@use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
+@use '../forms.global.scss' as *;
+@use '../forms.variables.scss' as *;
+.MrlDatePicker--container {
+	width: fit-content;
+}
+.MrlDatePicker {
+	@include mrl-text-inputs;
+	@include mrl-text-inputs-read-only;
+	@include mrl-focus($style: 'outline');
+	height: var(--mrl-spacing-09);
+	width: 17.5rem;
+	&[type='date']::-webkit-calendar-picker-indicator {
+		opacity: 0;
+	}
+}
+.MrlDatePicker--active {
+	border-color: var(--mrl-text-input-border-color-hover);
+}
+.MrlDatePicker--borderless {
+	border-color: transparent;
+	padding-left: 0;
+	&.MrlDatePicker--active {
+		border-color: transparent;
+	}
+}
+.MrlDatePicker--icon {
+	color: var(--mrl-text-input-border-color);
+	display: flex;
+	pointer-events: none;
+	position: absolute;
+	right: var(--mrl-spacing-03);
+	top: var(--mrl-spacing-03);
+}
+.MrlDatePicker--icon-active {
+	color: var(--mrl-text-input-border-color-hover);
+}

package/dist/styles/demo/module.scss

@@ -0,0 +1,11 @@
+.trigger {
+	&-left {
+		text-align: left;
+	}
+	&-right {
+		text-align: right;
+	}
+	&-center {
+		text-align: center;
+	}
+}

package/dist/styles/divider/mixins.scss

@@ -0,0 +1,32 @@
+
+@mixin mrl-divider($orientation: 'horizontal', $max-width: '') {
+	position: relative;
+	@if $orientation == 'horizontal' {
+		&::before {
+			content: '';
+			display: block;
+			height: 0;
+			margin-top: calc(var(--mrl-divider-spacing) * 2);
+			width: 100%;
+		}
+		&::after {
+			background-color: var(--mrl-divider-color);
+			content: '';
+			display: block;
+			height: var(--mrl-divider-size);
+			position: absolute;
+			top: calc(var(--mrl-divider-spacing) * -1);
+			width: 100%;
+			@if $max-width != '' {
+				@include mrl-divider-center;
+				max-width: $max-width;
+			}
+		}
+	} @else {
+		@warn 'Vertical dividers are not supported as pseudo elements';
+	}
+}
+@mixin mrl-divider-center() {
+	left: 50%;
+	transform: translateX(-50%);
+}

package/dist/styles/divider/variables.scss

@@ -0,0 +1,22 @@
+
+:root,
+.MrlDivider {
+	--mrl-divider-size: var(--mrl-spacing-01);
+	--mrl-divider-spacing: var(--mrl-space-stack-section-divider);
+	--mrl-divider-color: var(--mrl-color-line-divider);
+}
+.MrlDivider--small {
+	--mrl-divider-spacing: var(--mrl-space-stack-section-divider-small);
+}
+.MrlDivider--large {
+	--mrl-divider-spacing: var(--mrl-space-stack-section-divider-large);
+}
+.MrlDivider--xlarge {
+	--mrl-divider-spacing: var(--mrl-space-stack-section-divider-xlarge);
+}
+.MrlDivider--inverse {
+	--mrl-divider-color: var(--mrl-color-line-divider-inverse);
+}
+.MrlDivider--vertical {
+	--mrl-divider-spacing: var(--mrl-spacing-02);
+}

package/dist/styles/empty/module.scss

@@ -0,0 +1,18 @@
+.mrl-empty {
+	text-align: center;
+}
+.mrl-empty-default {
+	max-width: 200px;
+}
+.mrl-empty-large {
+	max-width: 360px;
+}
+.mrl-empty-text {
+	margin: var(--mrl-spacing-05) 0;
+}
+.mrl-empty-text-large {
+	margin: var(--mrl-spacing-06) 0;
+}
+.mrl-empty-color-text-secondary {
+	color: var(--mrl-color-text-secondary);
+}

package/dist/styles/form/global.scss

@@ -0,0 +1,89 @@
+
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+@use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
+@mixin mrl-text-inputs {
+	@include mrl-text-static('small');
+	background: var(--mrl-text-input-background);
+	border-color: var(--mrl-text-input-border-color);
+	border-radius: var(--mrl-text-input-border-radius);
+	border-style: solid;
+	border-width: var(--mrl-text-input-border-width);
+	color: var(--mrl-text-input-color);
+	margin: 0;
+	min-height: var(--mrl-text-input-height);
+	padding: var(--mrl-text-input-inset-vertical) var(--mrl-text-input-inset-horizontal);
+	transition: background-color var(--mrl-duration-03) var(--mrl-timing-m2),
+		border-color var(--mrl-duration-03) var(--mrl-timing-m2),
+		color var(--mrl-duration-03) var(--mrl-timing-m2);
+	width: 100%;
+	&::placeholder {
+		color: var(--mrl-text-input-placeholder-color);
+	}
+	&:hover {
+		--mrl-text-input-border-color: var(--mrl-text-input-border-color-hover);
+		--mrl-text-input-background: var(--mrl-text-input-background-color-hover);
+	}
+	&:focus {
+		--mrl-text-input-border-color: var(--mrl-text-input-border-color-focus);
+		color: var(--mrl-text-input-color-focus);
+	}
+	&:focus-visible {
+		outline: none;
+	}
+	&:disabled {
+		--mrl-text-input-border-color: var(--mrl-text-input-border-color-disabled);
+		color: var(--mrl-text-input-color-disabled);
+		pointer-events: none;
+	}
+	&:disabled::placeholder {
+		color: var(--mrl-text-input-color-disabled);
+	}
+	&[aria-invalid='true'] {
+		border-color: var(--mrl-color-background-error);
+	}
+}
+@mixin mrl-text-inputs-read-only {
+	&:not(:disabled):read-only {
+		--mrl-text-input-background: var(--mrl-text-input-background-color-read-only);
+		--mrl-text-input-border-color: var(--mrl-text-input-border-color-read-only);
+		color: var(--mrl-text-input-color-read-only);
+	}
+}
+@mixin mrl-selectItem-icon {
+	flex-basis: fit-content;
+	margin-right: var(--mrl-select-item-icon-spacing);
+	max-width: var(--mrl-select-item-icon-size);
+}
+@mixin mrl-inline-input-vars {
+	--mrl-text-input-border-color: transparent;
+	--mrl-text-input-border-color-focus: transparent;
+	--mrl-text-input-inset-vertical: var(--mrl-spacing-02);
+	--mrl-text-input-inset-horizontal: var(--mrl-spacing-03);
+	--mrl-text-input-height: var(--mrl-spacing-08);
+	&:hover {
+		--mrl-text-input-background-color-hover: var(--mrl-black-opacity-00);
+		--mrl-text-input-border-color: transparent;
+	}
+}
+@mixin mrl-checkbox-wrapper {
+	height: var(--mrl-checkbox-input-affordance);
+	padding: var(--mrl-checkbox-input-inset) var(--mrl-checkbox-input-inset)
+		var(--mrl-checkbox-input-inset) var(--mrl-spacing-01);
+	width: var(--mrl-checkbox-input-affordance);
+}
+@mixin mrl-checkbox-input {
+	cursor: pointer;
+	height: var(--mrl-checkbox-input-size);
+	margin: 0;
+	opacity: 0;
+	width: var(--mrl-checkbox-input-size);
+	z-index: $mrl-zIndex-focus + 1;
+}
+.MrlForm-counter {
+	@include mrl-text-static('xxsmall');
+	color: rgba(var(--mrl-gray-80), 1);
+	display: block;
+	margin-top: var(--mrl-spacing-02);
+	text-align: right;
+	width: 100%;
+}

package/dist/styles/form/variables.scss

@@ -0,0 +1,58 @@
+
+:root,
+:host {
+	--mrl-text-input-background: var(--mrl-color-background);
+	--mrl-text-input-background-color-hover: var(--mrl-color-background);
+	--mrl-text-input-background-color-read-only: var(--mrl-black-opacity-00);
+	--mrl-text-input-border-color: rgba(var(--mrl-gray-60), 1);
+	--mrl-text-input-border-width: var(--mrl-line-width-border);
+	--mrl-text-input-border-color-hover: var(--mrl-color-line-hover);
+	--mrl-text-input-border-color-disabled: var(--mrl-color-line-disabled);
+	--mrl-text-input-border-color-read-only: rgba(0, 0, 0, 0%);
+	--mrl-text-input-border-color-focus: var(--mrl-color-line-active);
+	--mrl-text-input-border-radius: var(--mrl-border-radius-functional);
+	--mrl-text-input-color: rgba(var(--mrl-gray-90), 1);
+	--mrl-text-input-color-focus: rgba(var(--mrl-gray-100), 1);
+	--mrl-text-input-color-disabled: var(--mrl-color-text-disabled);
+	--mrl-text-input-color-read-only: var(--mrl-gray-90);
+	--mrl-text-input-height: var(--mrl-spacing-09);
+	--mrl-text-input-placeholder-color: var(--mrl-color-text-secondary);
+	--mrl-text-input-inset-vertical: var(--mrl-space-inset);
+	--mrl-text-input-inset-horizontal: var(--mrl-space-inset-control-small);
+	--mrl-text-input-padding: var(--mrl-text-input-inset-vertical)
+		var(--mrl-text-input-inset-horizontal);
+	--mrl-input-icon-offset: var(--mrl-spacing-03);
+	--mrl-checkbox-height: var(--mrl-spacing-09);
+	--mrl-checkbox-input-affordance: var(--mrl-spacing-08);
+	--mrl-checkbox-input-inset: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+	--mrl-checkbox-input-size: var(--mrl-spacing-06);
+	--mrl-checkbox-input-background: var(--mrl-color-background);
+	--mrl-checkbox-input-border-color: rgba(var(--mrl-gray-60), 1);
+	--mrl-checkbox-input-color: var(--mrl-color-text-inverse);
+	--mrl-checkbox-input-border-width: var(--mrl-line-width-control);
+	--mrl-checkbox-input-border-radius: var(--mrl-border-radius-content);
+	--mrl-radio-button-height: var(--mrl-spacing-06);
+	--mrl-radio-button-width: var(--mrl-spacing-06);
+	--mrl-radio-button-fill-size: var(--mrl-spacing-04);
+	--mrl-radio-button-border-color: rgba(var(--mrl-gray-60), 1);
+	--mrl-radio-button-border-width: var(--mrl-line-width-border);
+	--mrl-radio-button-border-radius: var(--mrl-border-radius-rounded);
+	--mrl-radio-button-background: var(--mrl-color-background);
+	--mrl-radio-button-background-selected: var(--mrl-color-background-highlight-selected);
+	--mrl-select-background-color-read-only: var(--mrl-black-opacity-00);
+	--mrl-select-border-color-read-only: rgba(0, 0, 0, 0%);
+}
+.mrl-checkbox-input:checked ~ .mrl-checkbox-inputDisplay,
+.MrlCheckboxStandalone-input:checked ~ .MrlCheckboxStandalone-inputDisplay,
+.mrl-checkbox-input:indeterminate ~ .mrl-checkbox-inputDisplay,
+.MrlCheckboxStandalone-input:indeterminate ~ .MrlCheckboxStandalone-inputDisplay {
+	--mrl-checkbox-input-background: rgba(var(--mrl-gray-100), 1);
+	--mrl-checkbox-input-border-color: rgba(var(--mrl-gray-100), 1);
+}
+:host {
+	--mrl-select-item-padding-vertical: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+	--mrl-select-item-spacing-stack: var(--mrl-spacing-02);
+	--mrl-select-item-text-affordance: calc(
+		var(--mrl-type-line-height-text-small) * var(--mrl-type-size-text-small)
+	);
+}

package/dist/styles/grid/global.scss

@@ -0,0 +1,6 @@
+@import '../../vendor/bootstrap/bootstrap-grid';
+@import 'grid.variables';
+.container {
+	max-width: 100%;
+	padding: 0;
+}

package/dist/styles/grid/variables.scss

@@ -0,0 +1,26 @@
+
+@use '@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
+$grid-breakpoints: (
+	xs: 0,
+	sm: $mrl-breakpoint-01,
+	md: $mrl-breakpoint-02,
+	lg: $mrl-breakpoint-03,
+	xl: $mrl-breakpoint-04,
+	xxl: $mrl-breakpoint-05
+);
+$grid-gutter-width: 1rem;
+$spacer: 1rem;
+$spacers: (
+	0: 0,
+	1: $spacer * 1,
+	2: $spacer * 2,
+	3: $spacer * 3,
+	4: $spacer * 0.25,
+	5: $spacer * 0.5
+);
+$gutters: (
+	0: 0,
+	1: $spacer,
+	2: $spacer * 2,
+	none: 0
+);

package/dist/styles/layout/variables.scss

@@ -0,0 +1,3 @@
+
+$topbar-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-08));
+$sidebar-width: calc(var(--mrl-spacing-14) + var(--mrl-spacing-08));

package/dist/styles/modal/variables.scss

@@ -0,0 +1,32 @@
+
+@use '~@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
+@use '~@muraldevkit/ds-foundation/src/styles/skeletons/button' as *;
+@use '../button/button.variables.scss' as *;
+$mrl-modal-close-size: $mrl-button-height--default;
+.mrl-modal {
+	--mrl-modal-header-text-color: rgba(var(--mrl-gray-100), 1);
+	--mrl-modal-padding-vertical: var(--mrl-spacing-07);
+	--mrl-modal-padding-vertical-bottom: var(--mrl-spacing-06);
+	--mrl-modal-padding-vertical-top: var(--mrl-spacing-07);
+	--mrl-modal-padding-vertical-footer: var(--mrl-spacing-07);
+	--mrl-modal-padding-vertical-content: var(--mrl-spacing-02);
+	--mrl-modal-padding-horizontal: var(--mrl-spacing-07);
+	--mrl-modal-close-inline-margin: var(--mrl-space-inline-related);
+	--mrl-modal-close-offset: var(--mrl-spacing-06);
+}
+@media screen and (min-width: $mrl-breakpoint-01) {
+	.mrl-modal,
+	.mrl-modal .footer.slotted .mrl-modal-footer,
+	.mrl-modal .header.slotted .mrl-modal-header {
+		--mrl-modal-padding-horizontal: var(--mrl-spacing-08);
+	}
+	.mrl-modal--large,
+	.mrl-modal--large .footer.slotted .mrl-modal-footer,
+	.mrl-modal--large .header.slotted .mrl-modal-header {
+		--mrl-modal-padding-horizontal: var(--mrl-spacing-09);
+	}
+}
+.mrl-native-modal,
+.mrl-display-modal {
+	--mrl-modal-padding-horizontal: var(--mrl-spacing-05);
+}

package/dist/styles/skeleton/mixins.scss

@@ -0,0 +1,44 @@
+
+@use './skeleton.variables.scss' as *;
+@mixin mrl-skeleton-base {
+	background-color: $skeleton-color;
+	border-radius: var(--mrl-border-radius-functional);
+	overflow: hidden;
+	position: relative;
+}
+@mixin mrl-skeleton-shimmer-effect {
+	&::after {
+		animation-direction: normal;
+		animation-duration: 2.5s;
+		animation-iteration-count: infinite;
+		animation-name: shimmer;
+		animation-timing-function: ease-in-out;
+		background: linear-gradient(
+			-45deg,
+			rgba(255, 255, 255, 0%) 48%,
+			var(--mrl-white-opacity-06) 56%,
+			rgba(255, 255, 255, 0%) 64%
+		);
+		background-repeat: no-repeat;
+		background-size: 400% 200%;
+		content: '';
+		height: 100%;
+		left: 0;
+		opacity: 0.6;
+		position: absolute;
+		top: 0;
+		width: 200%;
+		@media (prefers-reduced-motion) {
+			animation-name: none;
+			background: $skeleton-color;
+		}
+	}
+}
+@keyframes shimmer {
+	0% {
+		background-position: right;
+	}
+	100% {
+		background-position: left;
+	}
+}

package/dist/styles/skeleton/variables.scss

@@ -0,0 +1,2 @@
+
+$skeleton-color: var(--mrl-black-opacity-00);

package/dist/styles/svg/variables.scss

@@ -0,0 +1,17 @@
+
+.MrlSvgContainer,
+.MrlSvg {
+	--mrl-svg-size: var(--mrl-spacing-07);
+}
+.MrlSvgContainer--small,
+.MrlSvg--small {
+	--mrl-svg-size: var(--mrl-spacing-06);
+}
+.MrlSvgContainer--large,
+.MrlSvg--large {
+	--mrl-svg-size: var(--mrl-spacing-10);
+}
+.MrlSvgContainer--auto,
+.MrlSvg--auto {
+	--mrl-svg-size: 100%;
+}

package/dist/styles/table/global.scss

@@ -0,0 +1,78 @@
+
+@use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
+@mixin mrl-cell-layout {
+	height: var(--mrl-table-column-height);
+	padding: var(--mrl-table-default-padding-inline);
+	text-align: left;
+	vertical-align: middle;
+	&:global(.selection) {
+		height: var(--mrl-spacing-10);
+		min-width: 2.75rem;
+		padding: var(--mrl-spacing-02) var(--mrl-spacing-03);
+		width: 2.75rem;
+		&:has(+ .MrlTableColumn:hover) {
+			background-color: var(--mrl-table-row-background-hover);
+		}
+		:global(.MrlCheckboxStandalone) {
+			align-items: center;
+			display: flex;
+			height: auto;
+			justify-content: center;
+			min-height: auto;
+			padding: 0;
+			width: auto;
+		}
+	}
+}
+@mixin mrl-table-sticky-column {
+	&.sticky {
+		background-color: var(--mrl-table-row-background);
+		position: sticky;
+		z-index: $mrl-zIndex-toolbars;
+		&::before,
+		&::after {
+			content: '';
+			height: 100%;
+			position: absolute;
+			top: 0;
+			width: var(--mrl-spacing-02);
+		}
+		&.left {
+			left: var(--mrl-table-selection-width);
+			&-shadow::after {
+				border-image-outset: 0 var(--mrl-spacing-02) 0 0;
+				border-image-slice: 0 100% 0 0;
+				border-image-source: linear-gradient(
+					90deg,
+					rgba(var(--mrl-black), 10%) 0%,
+					rgba(var(--mrl-black), 0%) 100%
+				);
+				border-image-width: 0 var(--mrl-spacing-02) 0 0;
+				right: 0;
+			}
+			&:global(.selection) {
+				left: 0;
+				&::after {
+					background-image: none;
+				}
+			}
+		}
+		&.right {
+			right: 0;
+			&-shadow::before {
+				border-image-outset: 0 0 0 var(--mrl-spacing-02);
+				border-image-slice: 0 0 0 100%;
+				border-image-source: linear-gradient(
+					90deg,
+					rgba(var(--mrl-black), 0%) 0%,
+					rgba(var(--mrl-black), 10%) 100%
+				);
+				border-image-width: 0 0 0 var(--mrl-spacing-02);
+				left: 0;
+			}
+		}
+		&.clickable:hover {
+			background-color: var(--mrl-table-column-background-hover);
+		}
+	}
+}