@brightspace-ui/core 3.174.2 → 3.175.1

package/components/button/demo/floating-buttons-in-tabs.html

@@ -86,7 +86,7 @@
 			}
 			.d2l-textblock {
 				margin-bottom: 0;
-				word-wrap: break-word;
+				overflow-wrap: break-word;
 			}
 			.d2l-hidden {
 				display: none !important;

package/components/demo/code-dark-plus-styles.js

@@ -11,11 +11,11 @@ export const themeStyles = css`
 		color: #ccc;
 		background: none;
 		font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+		overflow-wrap: normal;
 		text-align: left;
 		white-space: pre;
 		word-spacing: normal;
 		word-break: normal;
-		word-wrap: normal;
 		line-height: 1.5;
 
 		-moz-tab-size: 4;

package/components/demo/code-tomorrow-styles.js

@@ -12,11 +12,11 @@ export const themeStyles = css`
 		color: #ccc;
 		background: none;
 		font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+		overflow-wrap: normal;
 		text-align: left;
 		white-space: pre;
 		word-spacing: normal;
 		word-break: normal;
-		word-wrap: normal;
 		line-height: 1.5;
 
 		-moz-tab-size: 4;

package/components/inputs/docs/input-numeric.md

@@ -38,7 +38,7 @@ The `<d2l-input-number>` element is similar to `<d2l-input-text>`, except it's i
 | `autocomplete` | String | Specifies which types of values [can be autofilled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) by the browser. |
 | `autofocus` | Boolean, default: `false` | When set, will automatically place focus on the input. |
 | `disabled` | Boolean, default: `false` | Disables the input. |
-| `input-width` | String, default: `4rem` | Restricts the maximum width of the input box without impacting the width of the label. |
+| `input-width` | String, default: `4rem` | Restricts the maximum width of the input box without restricting the width of the label. |
 | `label-hidden` | Boolean, default: `false` | Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label. |
 | `labelled-by` | String | HTML id of an element in the same shadow root which acts as the input's label |
 | `max` | Number | Maximum value allowed. |
@@ -100,7 +100,7 @@ The `<d2l-input-percent>` element is similar to `<d2l-input-number>`, except it
 | `label` | String, required | Explicitly defined label for the element. |
 | `autofocus` | Boolean, default: `false` | When set, will automatically place focus on the input. |
 | `disabled` | Boolean, default: `false` | Disables the input. |
-| `input-width` | String, default: `4rem` | Restricts the maximum width of the input box without impacting the width of the label. |
+| `input-width` | String, default: `4rem` | Restricts the maximum width of the input box without restricting the width of the label. |
 | `label-hidden` | Boolean, default: `false` | Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label. |
 | `max-fraction-digits` | Number | Maximum number of digits allowed after the decimal place. |
 | `min-fraction-digits` | Number | Minimum number of digits allowed after the decimal place. |

package/components/inputs/docs/input-text.md

@@ -53,7 +53,7 @@ The `<d2l-input-text>` element is a simple wrapper around the native `<input typ
 | `autofocus` | Boolean | When set, will automatically place focus on the input |
 | `description` | String | A description to be added to the `input` for accessibility |
 | `disabled` | Boolean | Disables the input |
-| `input-width` | String, default: `100%` | Restricts the maximum width of the input box without impacting the width of the label |
+| `input-width` | String, default: `100%` | Restricts the maximum width of the input box without restricting the width of the label |
 | `instructions` | String | Additional information relating to how to use the component |
 | `label-hidden` | Boolean | Hides the label visually (moves it to the input's `aria-label` attribute) |
 | `labelled-by` | String | HTML id of an element in the same shadow root which acts as the input's label |

package/components/inputs/input-number.js

@@ -102,7 +102,7 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 			 */
 			hideInvalidIcon: { attribute: 'hide-invalid-icon', type: Boolean, reflect: true },
 			/**
-			 * Restricts the maximum width of the input box without impacting the width of the label
+			 * Restricts the maximum width of the input box without restricting the width of the label
 			 * @type {string}
 			 */
 			inputWidth: { attribute: 'input-width', type: String },

package/components/inputs/input-percent.js

@@ -28,7 +28,7 @@ class InputPercent extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMix
 			 */
 			disabled: { type: Boolean },
 			/**
-			 * Restricts the maximum width of the input box without impacting the width of the label.
+			 * Restricts the maximum width of the input box without restricting the width of the label.
 			 * @type {string}
 			 */
 			inputWidth: { attribute: 'input-width', type: String },

package/components/inputs/input-text.js

@@ -72,7 +72,7 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 			 */
 			hideInvalidTooltip: { attribute: 'hide-invalid-tooltip', type: Boolean, reflect: true },
 			/**
-			 * Restricts the maximum width of the input box without impacting the width of the label.
+			 * Restricts the maximum width of the input box without restricting the width of the label.
 			 * @type {string}
 			 */
 			inputWidth: { attribute: 'input-width', type: String },
@@ -431,7 +431,7 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 			maxWidth: this.inputWidth
 		};
 		const labelStyles = {
-			minWidth: this.skeleton ? undefined : this.inputWidth
+			minWidth: this.inputWidth && !this.skeleton ? `min(100%, ${this.inputWidth})` : undefined
 		};
 
 		const firstSlotName = (this.dir === 'rtl') ? 'right' : 'left';

package/components/inputs/input-textarea.js

@@ -40,7 +40,7 @@ class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormEl
 			 */
 			disabled: { type: Boolean, reflect: true },
 			/**
-			 * Restricts the maximum width of the input box without impacting the width of the label.
+			 * Restricts the maximum width of the input box without restricting the width of the label.
 			 * @type {string}
 			 */
 			inputWidth: { attribute: 'input-width', type: String },
@@ -229,7 +229,7 @@ class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormEl
 			maxWidth: this.inputWidth
 		};
 		const labelStyles = {
-			minWidth: this.skeleton ? undefined : this.inputWidth
+			minWidth: this.inputWidth && !this.skeleton ? `min(100%, ${this.inputWidth})` : undefined
 		};
 
 		const textarea = html`

package/custom-elements.json

@@ -6651,7 +6651,7 @@
         },
         {
           "name": "input-width",
-          "description": "Restricts the maximum width of the input box without impacting the width of the label",
+          "description": "Restricts the maximum width of the input box without restricting the width of the label",
           "type": "string",
           "default": "\"4rem\""
         },
@@ -6784,7 +6784,7 @@
         {
           "name": "inputWidth",
           "attribute": "input-width",
-          "description": "Restricts the maximum width of the input box without impacting the width of the label",
+          "description": "Restricts the maximum width of the input box without restricting the width of the label",
           "type": "string",
           "default": "\"4rem\""
         },
@@ -6885,7 +6885,7 @@
       "attributes": [
         {
           "name": "input-width",
-          "description": "Restricts the maximum width of the input box without impacting the width of the label.",
+          "description": "Restricts the maximum width of the input box without restricting the width of the label.",
           "type": "string"
         },
         {
@@ -6946,7 +6946,7 @@
         {
           "name": "inputWidth",
           "attribute": "input-width",
-          "description": "Restricts the maximum width of the input box without impacting the width of the label.",
+          "description": "Restricts the maximum width of the input box without restricting the width of the label.",
           "type": "string"
         },
         {
@@ -7381,7 +7381,7 @@
         },
         {
           "name": "input-width",
-          "description": "Restricts the maximum width of the input box without impacting the width of the label.",
+          "description": "Restricts the maximum width of the input box without restricting the width of the label.",
           "type": "string"
         },
         {
@@ -7547,7 +7547,7 @@
         {
           "name": "inputWidth",
           "attribute": "input-width",
-          "description": "Restricts the maximum width of the input box without impacting the width of the label.",
+          "description": "Restricts the maximum width of the input box without restricting the width of the label.",
           "type": "string"
         },
         {
@@ -7766,7 +7766,7 @@
         },
         {
           "name": "input-width",
-          "description": "Restricts the maximum width of the input box without impacting the width of the label.",
+          "description": "Restricts the maximum width of the input box without restricting the width of the label.",
           "type": "string"
         },
         {
@@ -7862,7 +7862,7 @@
         {
           "name": "inputWidth",
           "attribute": "input-width",
-          "description": "Restricts the maximum width of the input box without impacting the width of the label.",
+          "description": "Restricts the maximum width of the input box without restricting the width of the label.",
           "type": "string"
         },
         {

package/helpers/prism.js

@@ -171,10 +171,10 @@ export const codeStyles = css`
 		-moz-hyphens: none;
 		-ms-hyphens: none;
 		hyphens: none;
+		overflow-wrap: normal;
 		white-space: pre;
 		word-break: normal;
 		word-spacing: normal;
-		word-wrap: normal;
 	}
 
 	pre[class*="language-"].d2l-code {

package/package.json

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