@oardi/css-utils 0.132.0 → 0.134.0

package/css-utils-manifest.json

@@ -1,6 +1,6 @@
 {
 	"package": "@oardi/css-utils",
-	"version": "0.132.0",
+	"version": "0.134.0",
 	"breakpoints": { "sm": "576px", "md": "768px", "lg": "992px", "xl": "1200px", "xxl": "1400px" },
 	"lifecycle": {
 		"deprecated": [
@@ -76,7 +76,7 @@
 					"values": ["normal", "tight", "wide", "wider", "widest"]
 				},
 				{
-					"patterns": ["lh-{value}"],
+					"patterns": ["lh-{value}", "text-{breakpoint}-{value}"],
 					"values": ["lg", "md", "sm", "xl", "xs", "xxl", "xxxl"]
 				},
 				{
@@ -766,6 +766,10 @@
 				"range-slider",
 				"required",
 				"right",
+				"segmented-control",
+				"segmented-control-equal",
+				"segmented-control-input",
+				"segmented-control-option",
 				"skeleton",
 				"skeleton-aspect-square",
 				"skeleton-aspect-video",

package/css-utils-reference.md

@@ -3,7 +3,7 @@
 > Generated automatically. Do not edit manually.
 
 - Package: `@oardi/css-utils`
-- Version: `0.132.0`
+- Version: `0.134.0`
 - Source: public SCSS entry point and utility configuration
 
 ## Usage guidance
@@ -104,6 +104,7 @@ Values: `normal` | `tight` | `wide` | `wider` | `widest`
 Values: `lg` | `md` | `sm` | `xl` | `xs` | `xxl` | `xxxl`
 
 - `lh-{value}`
+- `text-{breakpoint}-{value}`
 
 Values: `loose` | `none` | `normal` | `relaxed` | `snug` | `tight`
 
@@ -539,6 +540,10 @@ Classes:
 - `range-slider`
 - `required`
 - `right`
+- `segmented-control`
+- `segmented-control-equal`
+- `segmented-control-input`
+- `segmented-control-option`
 - `skeleton`
 - `skeleton-aspect-square`
 - `skeleton-aspect-video`

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.132.0",
+	"version": "0.134.0",
 	"author": "Ardian Shala",
 	"homepage": "https://css-utils.oardi.com",
 	"description": "Powerful set of semantic css classes with support for breakpoints, directions and spacings",

package/scss/components/form.scss

@@ -329,13 +329,13 @@
 
 @layer components {
 	@media (forced-colors: active) {
-		.form-check .form-check-input:where([type='checkbox']) {
+		.form-check .form-check-input {
 			forced-color-adjust: none;
 			background-color: Canvas;
 			border-color: CanvasText;
 
 			&:checked,
-			&:indeterminate {
+			&:where([type='checkbox']):indeterminate {
 				background-color: Highlight;
 				border-color: Highlight;
 			}
@@ -344,7 +344,11 @@
 				border-color: HighlightText;
 			}
 
-			&:indeterminate::after {
+			&:where([type='checkbox']):indeterminate::after {
+				background-color: HighlightText;
+			}
+
+			&[type='radio']:checked::after {
 				background-color: HighlightText;
 			}
 
@@ -372,7 +376,11 @@
 					border-color: GrayText;
 				}
 
-				&:indeterminate::after {
+				&:where([type='checkbox']):indeterminate::after {
+					background-color: GrayText;
+				}
+
+				&[type='radio']:checked::after {
 					background-color: GrayText;
 				}
 			}
@@ -548,3 +556,46 @@
 		}
 	}
 }
+
+@layer components {
+	@media (forced-colors: active) {
+		.form-switch .form-switch-input {
+			forced-color-adjust: none;
+			background-color: Canvas;
+			border-color: CanvasText;
+
+			&::after {
+				background-color: CanvasText;
+				box-shadow: none;
+			}
+
+			&:checked {
+				background-color: Highlight;
+				border-color: Highlight;
+
+				&::after {
+					background-color: HighlightText;
+				}
+			}
+
+			&:focus-visible,
+			&.is-focus-visible {
+				outline-color: Highlight;
+			}
+
+			&.is-invalid {
+				border-color: LinkText;
+			}
+
+			&:disabled,
+			&[disabled] {
+				background-color: Canvas;
+				border-color: GrayText;
+
+				&::after {
+					background-color: GrayText;
+				}
+			}
+		}
+	}
+}

package/scss/components/segmented-control.scss

@@ -0,0 +1,90 @@
+@use '../layers.scss';
+@use './button.scss';
+
+@layer components {
+	.segmented-control {
+		--segmented-control-gap: var(--spacer-1);
+
+		display: inline-flex;
+		flex-wrap: wrap;
+		gap: var(--segmented-control-gap);
+		max-inline-size: 100%;
+	}
+
+	.segmented-control-option {
+		position: relative;
+		display: flex;
+		min-inline-size: 0;
+
+		> .btn {
+			flex: 1;
+			min-inline-size: 0;
+			overflow-wrap: anywhere;
+		}
+	}
+
+	.segmented-control-input {
+		// Keep the native radio focusable and available to forms and assistive technology.
+		position: absolute;
+		inset-block-start: 0;
+		inset-inline-start: 0;
+		inline-size: 1px;
+		block-size: 1px;
+		padding: 0;
+		margin: 0;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+		border: 0;
+
+		&:checked + .btn {
+			color: var(--button-on-color);
+			background-color: var(--button-surface-color);
+			border-color: var(--button-surface-color);
+			text-decoration: underline;
+			text-underline-offset: 0.2em;
+		}
+
+		&:focus-visible + .btn {
+			outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
+				var(--button-focus-outline-color);
+			outline-offset: var(--button-focus-outline-offset);
+		}
+
+		&:disabled + .btn {
+			color: var(--button-disabled-text-color);
+			background-color: var(--button-disabled-bg-color);
+			border-color: var(--button-disabled-border-color);
+			cursor: not-allowed;
+		}
+	}
+
+	.segmented-control-equal {
+		display: flex;
+
+		> .segmented-control-option {
+			flex: 1 1 0;
+		}
+	}
+
+	@media (forced-colors: active) {
+		.segmented-control-input {
+			&:checked + .btn {
+				forced-color-adjust: none;
+				color: HighlightText;
+				background-color: Highlight;
+				border-color: Highlight;
+			}
+
+			&:focus-visible + .btn {
+				outline-color: Highlight;
+			}
+
+			&:disabled + .btn {
+				color: GrayText;
+				background-color: Canvas;
+				border-color: GrayText;
+			}
+		}
+	}
+}

package/scss/index.scss

@@ -48,6 +48,7 @@
 @forward './components/popover.scss';
 @forward './components/progress.scss';
 @forward './components/range-slider.scss';
+@forward './components/segmented-control.scss';
 @forward './components/skeleton.scss';
 @forward './components/stepper.scss';
 @forward './components/table.scss';

package/scss/text.scss

@@ -87,6 +87,16 @@ $letterSpacings: 0, 1, 2, 3, 4, 5;
 		}
 	}
 
+	@each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
+		@media (min-width: #{$bp-value}) {
+			@each $name, $value in map.get(theme.$theme, fontSizes) {
+				.text-#{$bp}-#{$name} {
+					font-size: var(--font-size-#{$name});
+				}
+			}
+		}
+	}
+
 	// Deprecated: use .line-height-* utilities instead.
 	@each $name, $value in map.get(theme.$theme, lineHeights) {
 		.lh-#{$name} {