@abstraks-dev/ui-library 1.0.1

package/dist/styles/card.scss

@@ -0,0 +1,210 @@
+@use 'variables' as *;
+
+.card {
+	display: flex;
+	flex-direction: column;
+	border-radius: 5px;
+	border: 1px solid $gray-400;
+	background-color: $gray-100;
+	position: relative;
+	transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+	// Enhanced accessibility and interaction
+	&:focus-within {
+		outline: 2px solid $focus-color;
+		outline-offset: 2px;
+	}
+
+	&:hover {
+		transform: translateY(-2px);
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+	}
+
+	@media #{$medium} {
+		display: inline-flex;
+		max-width: 400px;
+	}
+
+	@media #{$large} {
+		max-width: 450px;
+	}
+
+	@media #{$xlarge} {
+		max-width: 500px;
+	}
+
+	.head {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20px;
+		border-bottom: 1px solid $gray-300;
+
+		.ellipses {
+			position: relative;
+
+			.ellipses-trigger {
+				background: none;
+				border: none;
+				cursor: pointer;
+				padding: 8px;
+				border-radius: 4px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				transition: background-color 0.2s ease;
+
+				&:hover {
+					background-color: $gray-200;
+				}
+
+				&:focus {
+					outline: 2px solid $focus-color;
+					outline-offset: 2px;
+					background-color: $gray-200;
+				}
+
+				&[aria-expanded='true'] {
+					background-color: $gray-300;
+				}
+			}
+
+			.ellipses-content {
+				display: flex;
+				z-index: $z-index-low;
+				position: absolute;
+				padding: 8px 0;
+				right: 0;
+				top: 100%;
+				margin-top: 4px;
+				min-width: 160px;
+				border-radius: 4px;
+				box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+					0 2px 4px -1px rgba(0, 0, 0, 0.06);
+				background-color: $color-white;
+				border: 1px solid $gray-300;
+
+				// Animation
+				opacity: 1;
+				transform: scale(1);
+				transition: opacity 0.15s ease, transform 0.15s ease;
+
+				@media #{$medium} {
+					right: 20px;
+				}
+
+				.unordered-list {
+					margin: 0;
+					padding: 0;
+					list-style: none;
+					flex-direction: column;
+
+					.list-item {
+						padding: 8px 16px;
+						cursor: pointer;
+						transition: background-color 0.15s ease;
+						color: $color-font-body;
+						font-size: 14px;
+
+						&:hover {
+							background-color: $gray-100;
+						}
+
+						&:focus {
+							background-color: $gray-100;
+							outline: none;
+						}
+
+						&:first-child {
+							border-radius: 4px 4px 0 0;
+						}
+
+						&:last-child {
+							border-radius: 0 0 4px 4px;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.card-image {
+		width: 100%;
+		height: auto;
+		object-fit: cover;
+		display: block;
+
+		@media #{$medium} {
+			max-height: 200px;
+		}
+
+		@media #{$large} {
+			max-height: 250px;
+		}
+	}
+
+	.card-title {
+		padding: 20px 20px 10px 20px;
+		margin: 0;
+		color: $color-font-body;
+		line-height: 1.3;
+
+		@media #{$medium} {
+			padding: 16px 20px 8px 20px;
+		}
+	}
+
+	.card-subtitle {
+		padding: 0 20px 10px 20px;
+		margin: 0;
+		color: $gray-600;
+		font-size: 14px;
+		line-height: 1.4;
+
+		@media #{$medium} {
+			padding: 0 20px 8px 20px;
+		}
+	}
+
+	.card__body {
+		padding: 0 20px 20px 20px;
+		margin: 0;
+		color: $color-font-body;
+		line-height: 1.6;
+		flex-grow: 1;
+
+		@media #{$medium} {
+			padding: 0 20px 16px 20px;
+			font-size: 15px;
+		}
+
+		@media #{$large} {
+			font-size: 16px;
+		}
+	}
+
+	// High contrast mode support
+	@media (prefers-contrast: high) {
+		border-width: 2px;
+		box-shadow: none;
+
+		&:hover {
+			transform: none;
+			box-shadow: none;
+			border-color: $color-black;
+		}
+	}
+
+	// Reduced motion support
+	@media (prefers-reduced-motion: reduce) {
+		transition: none;
+
+		&:hover {
+			transform: none;
+		}
+
+		.ellipses-content {
+			transition: none;
+		}
+	}
+}

package/dist/styles/checkbox.scss

@@ -0,0 +1,160 @@
+@use 'variables' as *;
+
+// Make required asterisk red
+.required {
+	color: red;
+}
+
+.checkbox-wrapper {
+	// Hide the default checkbox completely (applies to all checkboxes)
+	input[type='checkbox'].checkbox {
+		position: absolute;
+		opacity: 0;
+		cursor: pointer;
+		height: 20px;
+		width: 20px;
+		margin: 0;
+		z-index: $z-index-base;
+	}
+
+	// Custom checkbox styling (applies to all checkboxes)
+	.custom-checkbox {
+		position: relative;
+		display: inline-block;
+		width: 20px;
+		height: 20px;
+		background-color: $color-white;
+		border: 2px solid $gray-400;
+		border-radius: 4px;
+		cursor: pointer;
+		transition: all 0.2s ease;
+
+		// Checkmark (hidden by default)
+		&::after {
+			content: '';
+			position: absolute;
+			display: none;
+			left: 6px;
+			top: 2px;
+			width: 6px;
+			height: 10px;
+			border: solid $color-white;
+			border-width: 0 2px 2px 0;
+			transform: rotate(45deg);
+		}
+	}
+
+	// When checkbox is checked (applies to all checkboxes)
+	input[type='checkbox'].checkbox:checked + .custom-checkbox {
+		background-color: $color-primary;
+		border-color: $color-primary;
+
+		&::after {
+			display: block;
+		}
+	}
+
+	// Hover states (applies to all checkboxes)
+	.custom-checkbox:hover {
+		border-color: $color-primary;
+	}
+
+	input[type='checkbox'].checkbox:checked + .custom-checkbox:hover {
+		background-color: $color-primary-hover;
+		border-color: $color-primary-hover;
+	}
+
+	// Focus states - Enhanced for accessibility (applies to all checkboxes)
+	input[type='checkbox'].checkbox:focus + .custom-checkbox {
+		outline: 2px solid $color-primary;
+		outline-offset: 2px;
+		box-shadow: 0 0 0 3px rgba($color-primary, 0.3);
+	}
+
+	// Focus-visible for keyboard navigation only
+	input[type='checkbox'].checkbox:focus-visible + .custom-checkbox {
+		outline: 2px solid $color-primary;
+		outline-offset: 2px;
+		box-shadow: 0 0 0 3px rgba($color-primary, 0.3);
+	}
+
+	// Remove focus outline for mouse clicks
+	input[type='checkbox'].checkbox:focus:not(:focus-visible) + .custom-checkbox {
+		outline: none;
+		box-shadow: none;
+	}
+
+	// Disabled state (applies to all checkboxes)
+	input[type='checkbox'].checkbox:disabled + .custom-checkbox {
+		background-color: $gray-200;
+		border-color: $gray-300;
+		cursor: not-allowed;
+
+		&::after {
+			border-color: $gray-500;
+		}
+	}
+
+	// High contrast mode support (applies to all checkboxes)
+	@media (prefers-contrast: high) {
+		.custom-checkbox {
+			border-width: 3px;
+			border-color: ButtonText;
+		}
+
+		input[type='checkbox'].checkbox:checked + .custom-checkbox {
+			background-color: ButtonText;
+			border-color: ButtonText;
+
+			&::after {
+				border-color: ButtonFace;
+			}
+		}
+
+		input[type='checkbox'].checkbox:focus + .custom-checkbox {
+			outline: 3px solid Highlight;
+			outline-offset: 2px;
+		}
+	}
+
+	// Reduce motion for users who prefer it (applies to all checkboxes)
+	@media (prefers-reduced-motion: reduce) {
+		.custom-checkbox {
+			transition: none;
+		}
+	}
+
+	// Label-specific styling
+	.label {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		cursor: pointer;
+		position: relative;
+
+		// Label-specific positioning for checkbox and custom-checkbox
+		input[type='checkbox'].checkbox {
+			order: 1;
+		}
+
+		.custom-checkbox {
+			order: 1;
+			margin-right: 0;
+		}
+
+		&:disabled {
+			cursor: not-allowed;
+		}
+	}
+
+	.label-text {
+		order: 2;
+		margin-left: 10px;
+
+		// Hide empty label text
+		&:empty {
+			display: none;
+			margin-left: 0;
+		}
+	}
+}