@skra/tokens 0.2.0

package/skra/_density.comfortable.scss

@@ -0,0 +1,166 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-skra-density="comfortable"] {
+  --skra-sys-size-interactive-sm: 2.5rem;
+  --skra-sys-size-interactive-md: 3rem;
+  --skra-sys-size-interactive-lg: 3.5rem;
+  --skra-sys-spacing-1: var(--skra-ref-spacing-2);
+  --skra-sys-spacing-2: var(--skra-ref-spacing-3);
+  --skra-sys-spacing-3: var(--skra-ref-spacing-4);
+  --skra-sys-spacing-4: var(--skra-ref-spacing-6);
+  --skra-sys-spacing-6: var(--skra-ref-spacing-8);
+  --skra-sys-spacing-8: var(--skra-ref-spacing-8);
+  --skra-sys-size-icon-sm: var(--skra-ref-spacing-6);
+  --skra-sys-size-icon-md: var(--skra-ref-spacing-8);
+  --skra-sys-size-icon-lg: var(--skra-ref-spacing-8);
+  --skra-sys-size-grid-track-sm: var(--skra-ref-size-sm);
+  --skra-sys-size-grid-track-md: var(--skra-ref-size-md);
+  --skra-sys-size-grid-track-lg: var(--skra-ref-size-lg);
+  --skra-sys-font-size-hint: var(--skra-ref-font-size-sm);
+  --skra-sys-font-size-body: var(--skra-ref-font-size-lg);
+  --skra-sys-font-size-label: var(--skra-ref-font-size-md);
+}
+
+[data-skra-density="comfortable"] {
+  --skra-comp-accordion-padding-block: var(--skra-sys-spacing-3);
+  --skra-comp-accordion-padding-inline: var(--skra-sys-spacing-4);
+  --skra-comp-accordion-min-block-size: var(--skra-sys-size-interactive-md);
+  --skra-comp-accordion-header-gap: var(--skra-sys-spacing-3);
+  --skra-comp-accordion-panel-padding-block: var(--skra-sys-spacing-3);
+  --skra-comp-accordion-panel-padding-inline: var(--skra-sys-spacing-4);
+  --skra-comp-alert-padding-block: var(--skra-sys-spacing-3);
+  --skra-comp-alert-padding-inline: var(--skra-sys-spacing-4);
+  --skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
+  --skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
+  --skra-comp-alert-dismiss-size: var(--skra-sys-size-interactive-sm);
+  --skra-comp-avatar-size-sm: var(--skra-sys-size-avatar-sm);
+  --skra-comp-avatar-size-md: var(--skra-sys-size-avatar-md);
+  --skra-comp-avatar-size-lg: var(--skra-sys-size-avatar-lg);
+  --skra-comp-badge-padding-block: var(--skra-sys-spacing-1);
+  --skra-comp-badge-padding-inline: var(--skra-sys-spacing-2);
+  --skra-comp-badge-icon-gap: var(--skra-sys-spacing-1);
+  --skra-comp-box-padding-sm: var(--skra-sys-spacing-1);
+  --skra-comp-box-padding-md: var(--skra-sys-spacing-2);
+  --skra-comp-box-padding-lg: var(--skra-sys-spacing-4);
+  --skra-comp-button-padding-block: var(--skra-sys-spacing-2);
+  --skra-comp-button-padding-inline: var(--skra-sys-spacing-4);
+  --skra-comp-button-min-block-size: var(--skra-sys-size-interactive-md);
+  --skra-comp-button-size-sm-padding-block: var(--skra-sys-spacing-1);
+  --skra-comp-button-size-sm-padding-inline: var(--skra-sys-spacing-3);
+  --skra-comp-button-size-sm-min-block-size: var(--skra-sys-size-interactive-sm);
+  --skra-comp-button-size-md-padding-block: var(--skra-sys-spacing-2);
+  --skra-comp-button-size-md-padding-inline: var(--skra-sys-spacing-4);
+  --skra-comp-button-size-md-min-block-size: var(--skra-sys-size-interactive-md);
+  --skra-comp-button-size-lg-padding-block: var(--skra-sys-spacing-3);
+  --skra-comp-button-size-lg-padding-inline: var(--skra-sys-spacing-5);
+  --skra-comp-button-size-lg-min-block-size: var(--skra-sys-size-interactive-lg);
+  --skra-comp-button-icon-gap: var(--skra-sys-spacing-2);
+  --skra-comp-chip-padding-block: var(--skra-sys-spacing-1);
+  --skra-comp-chip-padding-inline: var(--skra-sys-spacing-2);
+  --skra-comp-chip-icon-gap: var(--skra-sys-spacing-1);
+  --skra-comp-chip-remove-gap: var(--skra-sys-spacing-1);
+  --skra-comp-combobox-padding-block: var(--skra-sys-spacing-2);
+  --skra-comp-combobox-padding-inline: var(--skra-sys-spacing-3);
+  --skra-comp-combobox-min-block-size: var(--skra-sys-size-interactive-md);
+  --skra-comp-combobox-gap: var(--skra-sys-spacing-2);
+  --skra-comp-combobox-panel-max-block-size: var(--skra-sys-size-container-sm);
+  --skra-comp-combobox-panel-padding-block: var(--skra-sys-spacing-1);
+  --skra-comp-combobox-panel-padding-inline: var(--skra-sys-spacing-1);
+  --skra-comp-combobox-panel-offset: var(--skra-sys-spacing-1);
+  --skra-comp-combobox-panel-viewport-padding: var(--skra-sys-spacing-2);
+  --skra-comp-combobox-status-padding-block: var(--skra-sys-spacing-2);
+  --skra-comp-combobox-status-padding-inline: var(--skra-sys-spacing-3);
+  --skra-comp-datepicker-padding-block: var(--skra-sys-spacing-2);
+  --skra-comp-datepicker-padding-inline: var(--skra-sys-spacing-3);
+  --skra-comp-datepicker-min-block-size: var(--skra-sys-size-interactive-md);
+  --skra-comp-datepicker-gap: var(--skra-sys-spacing-2);
+  --skra-comp-datepicker-panel-padding: var(--skra-sys-spacing-3);
+  --skra-comp-datepicker-panel-offset: var(--skra-sys-spacing-1);
+  --skra-comp-datepicker-panel-viewport-padding: var(--skra-sys-spacing-2);
+  --skra-comp-datepicker-day-size: var(--skra-sys-size-interactive-md);
+  --skra-comp-dialog-padding-block: var(--skra-sys-spacing-5);
+  --skra-comp-dialog-padding-inline: var(--skra-sys-spacing-5);
+  --skra-comp-dialog-size-sm-max-inline-size: var(--skra-sys-size-container-sm);
+  --skra-comp-dialog-size-md-max-inline-size: var(--skra-sys-size-container-md);
+  --skra-comp-dialog-size-lg-max-inline-size: var(--skra-sys-size-container-lg);
+  --skra-comp-field-padding-block: var(--skra-sys-spacing-2);
+  --skra-comp-field-padding-inline: var(--skra-sys-spacing-4);
+  --skra-comp-field-gap: var(--skra-sys-spacing-2);
+  --skra-comp-field-checkbox-size: var(--skra-sys-spacing-4);
+  --skra-comp-field-checkbox-gap: var(--skra-sys-spacing-2);
+  --skra-comp-field-checkbox-touch-target: var(--skra-sys-spacing-6);
+  --skra-comp-field-radio-size: var(--skra-sys-spacing-4);
+  --skra-comp-field-radio-dot-size: var(--skra-sys-spacing-2);
+  --skra-comp-field-radio-gap: var(--skra-sys-spacing-2);
+  --skra-comp-field-radio-touch-target: var(--skra-sys-spacing-6);
+  --skra-comp-field-switch-gap: var(--skra-sys-spacing-2);
+  --skra-comp-field-switch-touch-target: var(--skra-sys-spacing-6);
+  --skra-comp-field-group-gap: var(--skra-sys-spacing-3);
+  --skra-comp-field-group-legend-spacing-block-end: var(--skra-sys-spacing-2);
+  --skra-comp-field-select-arrow-padding-inline-end: var(--skra-sys-spacing-6);
+  --skra-comp-grid-gap-sm: var(--skra-sys-spacing-1);
+  --skra-comp-grid-gap-md: var(--skra-sys-spacing-2);
+  --skra-comp-grid-gap-lg: var(--skra-sys-spacing-4);
+  --skra-comp-grid-min-sm: var(--skra-sys-size-grid-track-sm);
+  --skra-comp-grid-min-md: var(--skra-sys-size-grid-track-md);
+  --skra-comp-grid-min-lg: var(--skra-sys-size-grid-track-lg);
+  --skra-comp-icon-size-default: var(--skra-sys-size-icon-md);
+  --skra-comp-icon-size-sm: var(--skra-sys-size-icon-sm);
+  --skra-comp-icon-size-md: var(--skra-sys-size-icon-md);
+  --skra-comp-icon-size-lg: var(--skra-sys-size-icon-lg);
+  --skra-comp-kbd-padding-block: var(--skra-sys-spacing-1);
+  --skra-comp-kbd-padding-inline: var(--skra-sys-spacing-2);
+  --skra-comp-menu-padding-block: var(--skra-sys-spacing-1);
+  --skra-comp-menu-padding-inline: var(--skra-sys-spacing-1);
+  --skra-comp-menu-max-inline-size: var(--skra-sys-size-container-sm);
+  --skra-comp-menu-offset: var(--skra-sys-spacing-2);
+  --skra-comp-menu-viewport-padding: var(--skra-sys-spacing-2);
+  --skra-comp-menu-item-padding-block: var(--skra-sys-spacing-2);
+  --skra-comp-menu-item-padding-inline: var(--skra-sys-spacing-3);
+  --skra-comp-menu-item-gap: var(--skra-sys-spacing-2);
+  --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
+  --skra-comp-popover-padding-block: var(--skra-sys-spacing-3);
+  --skra-comp-popover-padding-inline: var(--skra-sys-spacing-3);
+  --skra-comp-popover-max-inline-size: var(--skra-sys-size-container-sm);
+  --skra-comp-popover-offset: var(--skra-sys-spacing-2);
+  --skra-comp-popover-viewport-padding: var(--skra-sys-spacing-2);
+  --skra-comp-select-padding-block: var(--skra-sys-spacing-2);
+  --skra-comp-select-padding-inline: var(--skra-sys-spacing-3);
+  --skra-comp-select-min-block-size: var(--skra-sys-size-interactive-md);
+  --skra-comp-select-gap: var(--skra-sys-spacing-2);
+  --skra-comp-select-panel-max-block-size: var(--skra-sys-size-container-sm);
+  --skra-comp-select-panel-padding-block: var(--skra-sys-spacing-1);
+  --skra-comp-select-panel-padding-inline: var(--skra-sys-spacing-1);
+  --skra-comp-select-panel-offset: var(--skra-sys-spacing-1);
+  --skra-comp-select-panel-viewport-padding: var(--skra-sys-spacing-2);
+  --skra-comp-select-option-padding-block: var(--skra-sys-spacing-2);
+  --skra-comp-select-option-padding-inline: var(--skra-sys-spacing-3);
+  --skra-comp-select-option-gap: var(--skra-sys-spacing-2);
+  --skra-comp-select-option-min-block-size: var(--skra-sys-size-interactive-md);
+  --skra-comp-stack-gap-sm: var(--skra-sys-spacing-1);
+  --skra-comp-stack-gap-md: var(--skra-sys-spacing-2);
+  --skra-comp-stack-gap-lg: var(--skra-sys-spacing-4);
+  --skra-comp-status-dot-size-sm: var(--skra-sys-size-status-dot-sm);
+  --skra-comp-status-dot-size-md: var(--skra-sys-size-status-dot-md);
+  --skra-comp-status-dot-size-lg: var(--skra-sys-size-status-dot-lg);
+  --skra-comp-tabs-padding-block: var(--skra-sys-spacing-2);
+  --skra-comp-tabs-padding-inline: var(--skra-sys-spacing-4);
+  --skra-comp-tabs-gap: var(--skra-sys-spacing-1);
+  --skra-comp-tabs-panel-padding-block: var(--skra-sys-spacing-4);
+  --skra-comp-tabs-panel-padding-inline: var(--skra-sys-spacing-1);
+  --skra-comp-toast-padding-block: var(--skra-sys-spacing-3);
+  --skra-comp-toast-padding-inline: var(--skra-sys-spacing-4);
+  --skra-comp-toast-icon-gap: var(--skra-sys-spacing-3);
+  --skra-comp-toast-dismiss-size: var(--skra-sys-size-interactive-sm);
+  --skra-comp-toast-region-inset-block: var(--skra-sys-spacing-5);
+  --skra-comp-toast-region-inset-inline: var(--skra-sys-spacing-5);
+  --skra-comp-toast-region-gap: var(--skra-sys-spacing-3);
+  --skra-comp-toast-region-max-inline-size: var(--skra-sys-size-container-sm);
+  --skra-comp-tooltip-padding-block: var(--skra-sys-spacing-1);
+  --skra-comp-tooltip-padding-inline: var(--skra-sys-spacing-2);
+  --skra-comp-tooltip-max-inline-size: var(--skra-sys-size-tooltip-max);
+  --skra-comp-tooltip-offset: var(--skra-sys-spacing-2);
+  --skra-comp-tooltip-viewport-padding: var(--skra-sys-spacing-2);
+}

package/skra/_density.compact.scss

@@ -0,0 +1,166 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-skra-density="compact"] {
+  --skra-sys-size-interactive-sm: 1.5rem;
+  --skra-sys-size-interactive-md: 2rem;
+  --skra-sys-size-interactive-lg: 2.5rem;
+  --skra-sys-spacing-1: var(--skra-ref-spacing-1);
+  --skra-sys-spacing-2: var(--skra-ref-spacing-1);
+  --skra-sys-spacing-3: var(--skra-ref-spacing-2);
+  --skra-sys-spacing-4: var(--skra-ref-spacing-3);
+  --skra-sys-spacing-6: var(--skra-ref-spacing-4);
+  --skra-sys-spacing-8: var(--skra-ref-spacing-6);
+  --skra-sys-size-icon-sm: var(--skra-ref-spacing-3);
+  --skra-sys-size-icon-md: var(--skra-ref-spacing-4);
+  --skra-sys-size-icon-lg: var(--skra-ref-spacing-6);
+  --skra-sys-size-grid-track-sm: var(--skra-ref-size-sm);
+  --skra-sys-size-grid-track-md: var(--skra-ref-size-md);
+  --skra-sys-size-grid-track-lg: var(--skra-ref-size-lg);
+  --skra-sys-font-size-hint: var(--skra-ref-font-size-xs);
+  --skra-sys-font-size-body: var(--skra-ref-font-size-sm);
+  --skra-sys-font-size-label: var(--skra-ref-font-size-xs);
+}
+
+[data-skra-density="compact"] {
+  --skra-comp-accordion-padding-block: var(--skra-sys-spacing-3);
+  --skra-comp-accordion-padding-inline: var(--skra-sys-spacing-4);
+  --skra-comp-accordion-min-block-size: var(--skra-sys-size-interactive-md);
+  --skra-comp-accordion-header-gap: var(--skra-sys-spacing-3);
+  --skra-comp-accordion-panel-padding-block: var(--skra-sys-spacing-3);
+  --skra-comp-accordion-panel-padding-inline: var(--skra-sys-spacing-4);
+  --skra-comp-alert-padding-block: var(--skra-sys-spacing-3);
+  --skra-comp-alert-padding-inline: var(--skra-sys-spacing-4);
+  --skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
+  --skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
+  --skra-comp-alert-dismiss-size: var(--skra-sys-size-interactive-sm);
+  --skra-comp-avatar-size-sm: var(--skra-sys-size-avatar-sm);
+  --skra-comp-avatar-size-md: var(--skra-sys-size-avatar-md);
+  --skra-comp-avatar-size-lg: var(--skra-sys-size-avatar-lg);
+  --skra-comp-badge-padding-block: var(--skra-sys-spacing-1);
+  --skra-comp-badge-padding-inline: var(--skra-sys-spacing-2);
+  --skra-comp-badge-icon-gap: var(--skra-sys-spacing-1);
+  --skra-comp-box-padding-sm: var(--skra-sys-spacing-1);
+  --skra-comp-box-padding-md: var(--skra-sys-spacing-2);
+  --skra-comp-box-padding-lg: var(--skra-sys-spacing-4);
+  --skra-comp-button-padding-block: var(--skra-sys-spacing-2);
+  --skra-comp-button-padding-inline: var(--skra-sys-spacing-4);
+  --skra-comp-button-min-block-size: var(--skra-sys-size-interactive-md);
+  --skra-comp-button-size-sm-padding-block: var(--skra-sys-spacing-1);
+  --skra-comp-button-size-sm-padding-inline: var(--skra-sys-spacing-3);
+  --skra-comp-button-size-sm-min-block-size: var(--skra-sys-size-interactive-sm);
+  --skra-comp-button-size-md-padding-block: var(--skra-sys-spacing-2);
+  --skra-comp-button-size-md-padding-inline: var(--skra-sys-spacing-4);
+  --skra-comp-button-size-md-min-block-size: var(--skra-sys-size-interactive-md);
+  --skra-comp-button-size-lg-padding-block: var(--skra-sys-spacing-3);
+  --skra-comp-button-size-lg-padding-inline: var(--skra-sys-spacing-5);
+  --skra-comp-button-size-lg-min-block-size: var(--skra-sys-size-interactive-lg);
+  --skra-comp-button-icon-gap: var(--skra-sys-spacing-2);
+  --skra-comp-chip-padding-block: var(--skra-sys-spacing-1);
+  --skra-comp-chip-padding-inline: var(--skra-sys-spacing-2);
+  --skra-comp-chip-icon-gap: var(--skra-sys-spacing-1);
+  --skra-comp-chip-remove-gap: var(--skra-sys-spacing-1);
+  --skra-comp-combobox-padding-block: var(--skra-sys-spacing-2);
+  --skra-comp-combobox-padding-inline: var(--skra-sys-spacing-3);
+  --skra-comp-combobox-min-block-size: var(--skra-sys-size-interactive-md);
+  --skra-comp-combobox-gap: var(--skra-sys-spacing-2);
+  --skra-comp-combobox-panel-max-block-size: var(--skra-sys-size-container-sm);
+  --skra-comp-combobox-panel-padding-block: var(--skra-sys-spacing-1);
+  --skra-comp-combobox-panel-padding-inline: var(--skra-sys-spacing-1);
+  --skra-comp-combobox-panel-offset: var(--skra-sys-spacing-1);
+  --skra-comp-combobox-panel-viewport-padding: var(--skra-sys-spacing-2);
+  --skra-comp-combobox-status-padding-block: var(--skra-sys-spacing-2);
+  --skra-comp-combobox-status-padding-inline: var(--skra-sys-spacing-3);
+  --skra-comp-datepicker-padding-block: var(--skra-sys-spacing-2);
+  --skra-comp-datepicker-padding-inline: var(--skra-sys-spacing-3);
+  --skra-comp-datepicker-min-block-size: var(--skra-sys-size-interactive-md);
+  --skra-comp-datepicker-gap: var(--skra-sys-spacing-2);
+  --skra-comp-datepicker-panel-padding: var(--skra-sys-spacing-3);
+  --skra-comp-datepicker-panel-offset: var(--skra-sys-spacing-1);
+  --skra-comp-datepicker-panel-viewport-padding: var(--skra-sys-spacing-2);
+  --skra-comp-datepicker-day-size: var(--skra-sys-size-interactive-md);
+  --skra-comp-dialog-padding-block: var(--skra-sys-spacing-5);
+  --skra-comp-dialog-padding-inline: var(--skra-sys-spacing-5);
+  --skra-comp-dialog-size-sm-max-inline-size: var(--skra-sys-size-container-sm);
+  --skra-comp-dialog-size-md-max-inline-size: var(--skra-sys-size-container-md);
+  --skra-comp-dialog-size-lg-max-inline-size: var(--skra-sys-size-container-lg);
+  --skra-comp-field-padding-block: var(--skra-sys-spacing-2);
+  --skra-comp-field-padding-inline: var(--skra-sys-spacing-4);
+  --skra-comp-field-gap: var(--skra-sys-spacing-2);
+  --skra-comp-field-checkbox-size: var(--skra-sys-spacing-4);
+  --skra-comp-field-checkbox-gap: var(--skra-sys-spacing-2);
+  --skra-comp-field-checkbox-touch-target: var(--skra-sys-spacing-6);
+  --skra-comp-field-radio-size: var(--skra-sys-spacing-4);
+  --skra-comp-field-radio-dot-size: var(--skra-sys-spacing-2);
+  --skra-comp-field-radio-gap: var(--skra-sys-spacing-2);
+  --skra-comp-field-radio-touch-target: var(--skra-sys-spacing-6);
+  --skra-comp-field-switch-gap: var(--skra-sys-spacing-2);
+  --skra-comp-field-switch-touch-target: var(--skra-sys-spacing-6);
+  --skra-comp-field-group-gap: var(--skra-sys-spacing-3);
+  --skra-comp-field-group-legend-spacing-block-end: var(--skra-sys-spacing-2);
+  --skra-comp-field-select-arrow-padding-inline-end: var(--skra-sys-spacing-6);
+  --skra-comp-grid-gap-sm: var(--skra-sys-spacing-1);
+  --skra-comp-grid-gap-md: var(--skra-sys-spacing-2);
+  --skra-comp-grid-gap-lg: var(--skra-sys-spacing-4);
+  --skra-comp-grid-min-sm: var(--skra-sys-size-grid-track-sm);
+  --skra-comp-grid-min-md: var(--skra-sys-size-grid-track-md);
+  --skra-comp-grid-min-lg: var(--skra-sys-size-grid-track-lg);
+  --skra-comp-icon-size-default: var(--skra-sys-size-icon-md);
+  --skra-comp-icon-size-sm: var(--skra-sys-size-icon-sm);
+  --skra-comp-icon-size-md: var(--skra-sys-size-icon-md);
+  --skra-comp-icon-size-lg: var(--skra-sys-size-icon-lg);
+  --skra-comp-kbd-padding-block: var(--skra-sys-spacing-1);
+  --skra-comp-kbd-padding-inline: var(--skra-sys-spacing-2);
+  --skra-comp-menu-padding-block: var(--skra-sys-spacing-1);
+  --skra-comp-menu-padding-inline: var(--skra-sys-spacing-1);
+  --skra-comp-menu-max-inline-size: var(--skra-sys-size-container-sm);
+  --skra-comp-menu-offset: var(--skra-sys-spacing-2);
+  --skra-comp-menu-viewport-padding: var(--skra-sys-spacing-2);
+  --skra-comp-menu-item-padding-block: var(--skra-sys-spacing-2);
+  --skra-comp-menu-item-padding-inline: var(--skra-sys-spacing-3);
+  --skra-comp-menu-item-gap: var(--skra-sys-spacing-2);
+  --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
+  --skra-comp-popover-padding-block: var(--skra-sys-spacing-3);
+  --skra-comp-popover-padding-inline: var(--skra-sys-spacing-3);
+  --skra-comp-popover-max-inline-size: var(--skra-sys-size-container-sm);
+  --skra-comp-popover-offset: var(--skra-sys-spacing-2);
+  --skra-comp-popover-viewport-padding: var(--skra-sys-spacing-2);
+  --skra-comp-select-padding-block: var(--skra-sys-spacing-2);
+  --skra-comp-select-padding-inline: var(--skra-sys-spacing-3);
+  --skra-comp-select-min-block-size: var(--skra-sys-size-interactive-md);
+  --skra-comp-select-gap: var(--skra-sys-spacing-2);
+  --skra-comp-select-panel-max-block-size: var(--skra-sys-size-container-sm);
+  --skra-comp-select-panel-padding-block: var(--skra-sys-spacing-1);
+  --skra-comp-select-panel-padding-inline: var(--skra-sys-spacing-1);
+  --skra-comp-select-panel-offset: var(--skra-sys-spacing-1);
+  --skra-comp-select-panel-viewport-padding: var(--skra-sys-spacing-2);
+  --skra-comp-select-option-padding-block: var(--skra-sys-spacing-2);
+  --skra-comp-select-option-padding-inline: var(--skra-sys-spacing-3);
+  --skra-comp-select-option-gap: var(--skra-sys-spacing-2);
+  --skra-comp-select-option-min-block-size: var(--skra-sys-size-interactive-md);
+  --skra-comp-stack-gap-sm: var(--skra-sys-spacing-1);
+  --skra-comp-stack-gap-md: var(--skra-sys-spacing-2);
+  --skra-comp-stack-gap-lg: var(--skra-sys-spacing-4);
+  --skra-comp-status-dot-size-sm: var(--skra-sys-size-status-dot-sm);
+  --skra-comp-status-dot-size-md: var(--skra-sys-size-status-dot-md);
+  --skra-comp-status-dot-size-lg: var(--skra-sys-size-status-dot-lg);
+  --skra-comp-tabs-padding-block: var(--skra-sys-spacing-2);
+  --skra-comp-tabs-padding-inline: var(--skra-sys-spacing-4);
+  --skra-comp-tabs-gap: var(--skra-sys-spacing-1);
+  --skra-comp-tabs-panel-padding-block: var(--skra-sys-spacing-4);
+  --skra-comp-tabs-panel-padding-inline: var(--skra-sys-spacing-1);
+  --skra-comp-toast-padding-block: var(--skra-sys-spacing-3);
+  --skra-comp-toast-padding-inline: var(--skra-sys-spacing-4);
+  --skra-comp-toast-icon-gap: var(--skra-sys-spacing-3);
+  --skra-comp-toast-dismiss-size: var(--skra-sys-size-interactive-sm);
+  --skra-comp-toast-region-inset-block: var(--skra-sys-spacing-5);
+  --skra-comp-toast-region-inset-inline: var(--skra-sys-spacing-5);
+  --skra-comp-toast-region-gap: var(--skra-sys-spacing-3);
+  --skra-comp-toast-region-max-inline-size: var(--skra-sys-size-container-sm);
+  --skra-comp-tooltip-padding-block: var(--skra-sys-spacing-1);
+  --skra-comp-tooltip-padding-inline: var(--skra-sys-spacing-2);
+  --skra-comp-tooltip-max-inline-size: var(--skra-sys-size-tooltip-max);
+  --skra-comp-tooltip-offset: var(--skra-sys-spacing-2);
+  --skra-comp-tooltip-viewport-padding: var(--skra-sys-spacing-2);
+}

package/skra/_form-controls.scss

@@ -0,0 +1,74 @@
+// Forge Design System — residual form-control slice (ADR 040, supersedes ADR 038)
+//
+// Per ADR 040, every form atom (input / textarea / select / checkbox / radio /
+// fieldset / legend / label) is now a Component-on-its-native-host carrying its
+// own host-scoped CSS via Angular Emulated encapsulation (see each atom's
+// `*.scss` in `libs/ui/forms/`). The bulk of the old ADR 038 slice moved there.
+//
+// This file retains ONLY the rules that genuinely cannot be encapsulated —
+// rules that style content PROJECTED INTO one component from outside its
+// stylesheet. Under Emulated encapsulation a component's selectors are rewritten
+// to require that component's own `_ngcontent` attribute, but projected children
+// carry the CONSUMER's attribute, so the selector silently misses (the same
+// mechanism that created the ADR 038 slice in the first place — see ADR 020 v2.0).
+//
+// Two cross-encapsulation cases remain:
+//   1. <select skraSelect> → its projected <option> / <optgroup> children.
+//   2. <skra-field> → its projected <label> / <skra-hint> / <skra-error>
+//      when a sibling selection control (checkbox/radio) drives the layout.
+//
+// All values remain `var(--skra-comp-field-*)` / `var(--skra-sys-*)` references
+// (ADR 025); zero hardcoded literals; zero `margin`/layout beyond the wrap rule
+// intrinsic to the cross-projection case; zero `!important` / `::ng-deep` (ADR 024).
+//
+// Opt-in: import AFTER `_theme.scss` (the referenced variables must be defined
+// first). Mirrors `_baseline.scss` (ADR 036).
+
+// ─── 1. Select <option> / <optgroup> (projected into <select skraSelect>) ───
+// `select.scss` cannot reach these: an `option { … }` rule there compiles to
+// `option[_ngcontent-select-xxx]`, but the projected <option> carries the
+// consumer's `_ngcontent`. Cross-browser <option> styling is platform-limited
+// (Firefox full; Chromium partial; Safari very limited) — we ship the tokens,
+// effectiveness varies by engine.
+select[skraSelect] > option {
+  color: var(--skra-comp-field-select-option-foreground);
+  background-color: var(--skra-comp-field-select-option-background);
+}
+
+select[skraSelect] > optgroup {
+  color: var(--skra-comp-field-select-optgroup-foreground);
+  font-family: var(--skra-sys-typography-role-label-medium-font-family);
+  font-size: var(--skra-sys-typography-role-label-medium-font-size);
+  font-weight: var(--skra-sys-typography-role-label-medium-font-weight);
+}
+
+// ─── 2a. Touch target — label adjacent to a checkbox/radio inside Field ──────
+// WCAG 2.5.8 minimum 24×24 CSS px. The native box itself is smaller; clicking
+// the label fires the input, so expanding the label's clickable surface meets
+// the criterion without enlarging the visible box. `inline-flex` (not `flex`)
+// so the label sizes to its content in Field's flex-row selection layout — a
+// block-level `flex` would consume remaining inline space and visually shift
+// the text. This rule reaches Field's projected <label>, so it must live here.
+skra-field:has(> input[type='checkbox'][skraCheckbox]) > label[skraLabelFor],
+skra-field:has(> input[type='checkbox'][skraSwitch]) > label[skraLabelFor],
+skra-field:has(> input[type='radio'][skraRadio]) > label[skraLabelFor] {
+  min-block-size: var(--skra-comp-field-checkbox-touch-target);
+  display: inline-flex;
+  align-items: center;
+}
+
+// ─── 2b. Hint / Error wrap in selection-control flex layout ──────────────────
+// Field turns `:host` into `display: flex` (row) when it contains a
+// checkbox/radio (see field.component.scss). The rule that wraps hint/error onto
+// their own full-width line targets Field's PROJECTED <skra-hint>/<skra-error>,
+// so it cannot live in field.component.scss (Emulated encapsulation misses
+// projected children). `flex: 0 0 100%` forces the wrap regardless of sibling
+// sizing.
+skra-field:has(> input[type='checkbox'][skraCheckbox]) > skra-hint,
+skra-field:has(> input[type='checkbox'][skraCheckbox]) > skra-error,
+skra-field:has(> input[type='checkbox'][skraSwitch]) > skra-hint,
+skra-field:has(> input[type='checkbox'][skraSwitch]) > skra-error,
+skra-field:has(> input[type='radio'][skraRadio]) > skra-hint,
+skra-field:has(> input[type='radio'][skraRadio]) > skra-error {
+  flex: 0 0 100%;
+}

package/skra/_overlay.scss

@@ -0,0 +1,42 @@
+/* tokens/skins/skra/_overlay.scss — Tier-2 overlay top-layer slice (ADR 0044).
+ * --------------------------------------------------------------------------------
+ * Top-layer concerns that sit OUTSIDE component Emulated encapsulation and therefore
+ * cannot live in a component's own host-scoped CSS:
+ *   - the native `<dialog>` `::backdrop` scrim (a pseudo-element of the dialog), and
+ *   - the pure-CSS scroll-lock while a Forge modal dialog is open (`html:has(...)`).
+ *
+ * Opt-in: import AFTER `_theme.scss` + `_comp.scss`. Selectors are strictly Forge-attached
+ * natives (`dialog[skraDialog]`); every value is a `var(--skra-comp-dialog-*)` reference;
+ * zero z-index (top-layer stacking is invocation-order), zero `!important`, zero `::ng-deep`.
+ */
+
+dialog[skraDialog]::backdrop {
+  background: var(--skra-comp-dialog-backdrop);
+
+  opacity: 1;
+  transition:
+    opacity var(--skra-comp-dialog-motion-duration)
+      var(--skra-comp-dialog-motion-easing),
+    display var(--skra-comp-dialog-motion-duration) allow-discrete,
+    overlay var(--skra-comp-dialog-motion-duration) allow-discrete;
+
+  @starting-style {
+    opacity: 0;
+  }
+}
+
+/* Scroll-lock: freeze the page behind an open modal dialog. Pure CSS, no JS.
+ * NOTE: `overflow: hidden` removes the scrollbar, which shifts content by the scrollbar width
+ * on pages that have one. For SHIFT-FREE modals the consumer reserves the gutter GLOBALLY
+ * (`html { scrollbar-gutter: stable }`) — a page-level layout choice the consumer owns, which
+ * this scoped slice deliberately does NOT impose (doing it only-while-modal would itself shift,
+ * just on open instead of close). The sandbox opts in; see apps/sandbox/src/styles.scss. */
+html:has(dialog[skraDialog]:modal) {
+  overflow: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  dialog[skraDialog]::backdrop {
+    transition-duration: 0ms;
+  }
+}