@brightspace-ui/core 3.318.0 → 3.319.1

package/components/inputs/input-radio-styles.js

@@ -1,10 +1,7 @@
 import { css, unsafeCSS } from 'lit';
 import { _isValidCssSelector } from '../../helpers/internal/css.js';
-import { getFlag } from '../../helpers/flags.js';
 import { registerSemanticVariableForSvgImageUrl } from '../colors/colors.js';
 
-export const useGeneratedStyles = getFlag('GAUD-8849-Use-input-radio-generated-styles', true);
-
 registerSemanticVariableForSvgImageUrl(
 	'--d2l-input-radio-check-image',
 	`<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
@@ -50,7 +47,7 @@ function _getRadioStyleSelectors(inputSelectors) {
  * A private helper method that should not be used by general consumers
  */
 export function _generateRadioStyles(selector, containerSelector) {
-	if (!_isValidCssSelector(selector) || (containerSelector && !_isValidCssSelector(containerSelector))) return '';
+	if (!_isValidCssSelector(selector) || (containerSelector && !_isValidCssSelector(containerSelector))) return;
 	const inputSelectors = [selector];
 	if (containerSelector) {
 		inputSelectors.push(`${containerSelector} > input[type="radio"]`);
@@ -172,129 +169,4 @@ export function _generateRadioStyles(selector, containerSelector) {
 
 }
 
-export const radioStyles = useGeneratedStyles ? css`
-	${_generateRadioStyles('.d2l-input-radio', '.d2l-input-radio-label')}
-` : css`
-	.d2l-input-radio,
-	.d2l-input-radio-label > input[type="radio"] {
-		-webkit-appearance: none;
-		-moz-appearance: none;
-		appearance: none;
-		background-position: center center;
-		background-repeat: no-repeat;
-		background-size: 0.5rem 0.5rem;
-		border-radius: 50%;
-		border-style: solid;
-		box-sizing: border-box;
-		display: inline-block;
-		height: 1.2rem;
-		margin: 0;
-		padding: 0;
-		vertical-align: middle;
-		width: 1.2rem;
-	}
-	.d2l-input-radio[aria-checked="true"],
-	.d2l-input-radio:checked,
-	.d2l-input-radio-label > input[type="radio"]:checked {
-		background-image: var(--d2l-input-radio-check-image);
-	}
-	.d2l-input-radio,
-	.d2l-input-radio:hover:disabled,
-	.d2l-input-radio:hover.d2l-disabled,
-	.d2l-input-radio-label > input[type="radio"],
-	.d2l-input-radio-label > input[type="radio"]:hover:disabled {
-		background-color: var(--d2l-theme-background-color-interactive-faint-default);
-		border-color: var(--d2l-theme-border-color-emphasized);
-		border-width: 1px;
-	}
-	.d2l-input-radio.d2l-hovering,
-	.d2l-input-radio:hover,
-	.d2l-input-radio:focus,
-	.d2l-input-radio-label > input[type="radio"]:hover,
-	.d2l-input-radio-label > input[type="radio"]:focus {
-		border-color: var(--d2l-input-radio-border-color-hover-focus, var(--d2l-theme-border-color-focus));
-		border-width: 2px;
-		outline: none;
-	}
-	.d2l-input-radio[aria-invalid="true"],
-	.d2l-input-radio-label > input[type="radio"][aria-invalid="true"] {
-		border-color: var(--d2l-theme-status-color-error);
-	}
-	.d2l-input-radio:disabled,
-	.d2l-input-radio.d2l-disabled,
-	.d2l-input-radio-label > input[type="radio"]:disabled {
-		opacity: var(--d2l-theme-opacity-disabled-control);
-	}
-	.d2l-input-radio-label {
-		align-items: center;
-		color: var(--d2l-theme-text-color-static-standard);
-		display: flex;
-		font-size: 0.8rem;
-		font-weight: 400;
-		line-height: 1.2rem;
-		margin-bottom: 0.9rem;
-		overflow-wrap: anywhere;
-		padding-inline-end: 0;
-		padding-inline-start: 1.7rem;
-		vertical-align: middle;
-	}
-	.d2l-input-radio-label-disabled:not(.d2l-input-radio-label-disabled-tooltip),
-	.d2l-input-radio-label-disabled-tooltip > * {
-		opacity: var(--d2l-theme-opacity-disabled-control);
-	}
-	.d2l-input-radio-label-disabled:not(.d2l-input-radio-label-disabled-tooltip) > .d2l-input-radio,
-	.d2l-input-radio-label-disabled:not(.d2l-input-radio-label-disabled-tooltip) > input[type="radio"] {
-		opacity: 1;
-	}
-	.d2l-input-radio.d2l-input-radio-disabled-tooltip.d2l-hovering,
-	.d2l-input-radio.d2l-input-radio-disabled-tooltip:hover,
-	.d2l-input-radio.d2l-input-radio-disabled-tooltip:focus,
-	.d2l-input-radio-label-disabled-tooltip .d2l-input-radio.d2l-hovering,
-	.d2l-input-radio-label-disabled-tooltip .d2l-input-radio:hover,
-	.d2l-input-radio-label-disabled-tooltip .d2l-input-radio:focus,
-	.d2l-input-radio-label-disabled-tooltip .d2l-input-radio-label > input[type="radio"]:hover,
-	.d2l-input-radio-label-disabled-tooltip .d2l-input-radio-label > input[type="radio"]:focus {
-		background-blend-mode: lighten;
-		background-color: var(--d2l-theme-background-color-interactive-faint-disabled);
-		border-color: var(--d2l-input-radio-border-color-hover-focus, var(--d2l-theme-border-color-focus));
-		border-width: 2px;
-		opacity: 1;
-		outline: none;
-	}
-
-	.d2l-input-radio-label:last-of-type {
-		margin-bottom: 0;
-	}
-	.d2l-input-radio-label > .d2l-input-radio,
-	.d2l-input-radio-label > input[type="radio"] {
-		flex: 0 0 auto;
-		margin-inline-end: 0.5rem;
-		margin-inline-start: -1.7rem;
-	}
-
-	@media (prefers-contrast: more) {
-		.d2l-input-radio[aria-checked="true"],
-		.d2l-input-radio:checked,
-		.d2l-input-radio-label > input[type="radio"]:checked {
-			background-image: none;
-			position: relative;
-		}
-		.d2l-input-radio[aria-checked="true"]::after,
-		.d2l-input-radio:checked::after,
-		.d2l-input-radio-label > input[type="radio"]:checked::after {
-			background-color: FieldText;
-			content: "";
-			display: block;
-			height: 1.2rem;
-			left: 50%;
-			mask-image: var(--d2l-input-radio-check-image);
-			mask-position: center center;
-			mask-repeat: no-repeat;
-			mask-size: 0.5rem 0.5rem;
-			position: absolute;
-			top: 50%;
-			transform: translate(-50%, -50%);
-			width: 1.2rem;
-		}
-	}
-`;
+export const radioStyles = _generateRadioStyles('.d2l-input-radio', '.d2l-input-radio-label');

package/components/inputs/input-radio.js

@@ -1,13 +1,13 @@
 import '../expand-collapse/expand-collapse-content.js';
 import '../tooltip/tooltip.js';
 import { css, html, LitElement, nothing } from 'lit';
-import { radioStyles, useGeneratedStyles } from './input-radio-styles.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { InputInlineHelpMixin } from './input-inline-help.js';
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
+import { radioStyles } from './input-radio-styles.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
@@ -128,12 +128,11 @@ class InputRadio extends InputInlineHelpMixin(SkeletonMixin(FocusMixin(PropertyR
 		};
 		const labelClasses = {
 			'd2l-input-radio-label': true,
-			'd2l-input-radio-label-disabled': this.disabled && !this.skeleton,
-			'd2l-input-radio-label-disabled-tooltip': !useGeneratedStyles && this.disabled && this.disabledTooltip
+			'd2l-input-radio-label-disabled': this.disabled && !this.skeleton
 		};
 		const radioClasses = {
 			'd2l-input-radio': true,
-			'd2l-input-radio-disabled-tooltip': useGeneratedStyles && this.disabled && this.disabledTooltip,
+			'd2l-input-radio-disabled-tooltip': this.disabled && this.disabledTooltip,
 			'd2l-disabled': this.focusDisabled && !this.skeleton,
 			'd2l-hovering': this._isHovered && !this.focusDisabled,
 			'd2l-skeletize': true

package/components/inputs/input-select-styles.js

@@ -38,7 +38,7 @@ function _getSelectFocusStyles(selector) {
  * A private helper method that should not be used by general consumers
  */
 export function _generateSelectStyles(selector) {
-	if (!_isValidCssSelector(selector)) return '';
+	if (!_isValidCssSelector(selector)) return;
 	const finalSelector = unsafeCSS(selector);
 	const selectFocusStyles = _getSelectFocusStyles(finalSelector);
 

package/components/inputs/input-styles.js

@@ -125,7 +125,7 @@ function _generatewebkitSearchStyles(selector) {
  * A private helper method that should not be used by general consumers
  */
 export function _generateInputStyles(selector, focusSelector) {
-	if (!_isValidCssSelector(selector) || (focusSelector && !_isValidCssSelector(focusSelector))) return '';
+	if (!_isValidCssSelector(selector) || (focusSelector && !_isValidCssSelector(focusSelector))) return;
 	const lastSpaceIndex = selector.lastIndexOf(' ');
 	const textareaSelector = unsafeCSS(`${selector.substring(0, lastSpaceIndex + 1)}textarea${selector.substring(lastSpaceIndex + 1)}`);
 	const delegates = getStyleDelegates(selector, focusSelector, textareaSelector);
@@ -191,7 +191,7 @@ export function _generateInputStyles(selector, focusSelector) {
  * A private helper method that should not be used by general consumers
  */
 export function _generateInputTextStyles(selector) {
-	if (!_isValidCssSelector(selector)) return '';
+	if (!_isValidCssSelector(selector)) return;
 	const finalSelector = unsafeCSS(selector);
 	const input = _getInputBaseStyleDelegates(selector);
 

package/components/page/page-divider-internal.js

@@ -13,8 +13,8 @@ export const KEYBOARD_STEP = 20; // TO DO: Confirm
 export const KEYBOARD_STEP_LARGE = 80; // TO DO: Confirm
 
 const DRAG_THRESHOLD = 3; // Number of pixels to move to count as a drag
-const AUTO_EXPAND_WIDTH_FACTOR = 0.1;
-const AUTO_COLLAPSE_WIDTH_FACTOR = 0.75;
+export const AUTO_EXPAND_WIDTH_FACTOR = 0.1;
+export const AUTO_COLLAPSE_WIDTH_FACTOR = 0.75;
 
 const clampedSize = (size, min, max) => Math.max(min, Math.min(size, max));
 const isRtl = () => document.documentElement.getAttribute('dir') === 'rtl';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.318.0",
+  "version": "3.319.1",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",