feat: add internal label across form components

packages/calcite-components/src/assets/styles/includes.scss

@@ -36,6 +36,81 @@
   }
 }
 
+// mixin for the container of label displayed with form-associated components
+@mixin form-internal-label() {
+  .internal-label-alignment--center {
+    align-items: center;
+  }
+
+  .internal-label-alignment--end {
+    align-items: end;
+  }
+
+  .internal-label--container {
+    display: flex;
+    justify-content: space-between;
+    color: var(--calcite-color-text-1);
+  }
+
+  .internal-label-required--indicator {
+    font-weight: var(--calcite-font-weight-medium);
+    color: var(--calcite-color-status-danger);
+    padding-inline: var(--calcite-spacing-base);
+    &:hover {
+      cursor: help;
+    }
+  }
+
+  .internal-label--text {
+    line-height: 1;
+  }
+
+  :host([scale="s"]) {
+    .internal-label-spacing--bottom {
+      margin-block-end: var(--calcite-spacing-xxs);
+    }
+    .internal-label-spacing-inline--end {
+      margin-inline-end: var(--calcite-spacing-sm);
+    }
+    .internal-label-spacing-inline--start {
+      margin-inline-start: var(--calcite-spacing-sm);
+    }
+    .internal-label--text {
+      font-size: var(--calcite-font-size--2);
+    }
+  }
+
+  :host([scale="m"]) {
+    .internal-label-spacing--bottom {
+      margin-block-end: var(--calcite-spacing-sm);
+    }
+    .internal-label-spacing-inline--end {
+      margin-inline-end: var(--calcite-spacing-sm);
+    }
+    .internal-label-spacing-inline--start {
+      margin-inline-start: var(--calcite-spacing-sm);
+    }
+    .internal-label--text {
+      font-size: var(--calcite-font-size--1);
+    }
+  }
+
+  :host([scale="l"]) {
+    .internal-label-spacing--bottom {
+      margin-block-end: var(--calcite-spacing-sm);
+    }
+    .internal-label-spacing-inline--end {
+      margin-inline-end: var(--calcite-spacing-md);
+    }
+    .internal-label-spacing-inline--start {
+      margin-inline-start: var(--calcite-spacing-md);
+    }
+    .internal-label--text {
+      font-size: var(--calcite-font-size-0);
+    }
+  }
+}
+
 // mixin for the container of validation messages displayed below form-associated components
 @mixin form-validation-message() {
   .validation-container {

packages/calcite-components/src/components/autocomplete/autocomplete.e2e.ts

@@ -8,6 +8,7 @@ import {
   focusable,
   formAssociated,
   hidden,
+  internalLabel,
   labelable,
   openClose,
   reflects,
@@ -478,6 +479,10 @@ describe("calcite-autocomplete", () => {
     focusable("calcite-autocomplete");
   });
 
+  describe("InternalLabel", () => {
+    internalLabel(`calcite-autocomplete`);
+  });
+
   it("should set screen reader list attribute 'aria-live' to 'polite'", async () => {
     const page = await newE2EPage();
     await page.setContent(simpleHTML);

packages/calcite-components/src/components/autocomplete/autocomplete.scss

@@ -117,6 +117,7 @@
   @apply sr-only;
 }
 
+@include form-internal-label();
 @include form-validation-message();
 @include hidden-form-input();
 @include base-component();

packages/calcite-components/src/components/autocomplete/autocomplete.tsx

@@ -34,7 +34,7 @@ import {
 import { toggleOpenClose, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { Alignment, Scale, Status } from "../interfaces";
 import { IconNameOrString } from "../icon/interfaces";
-import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label";
+import { connectLabel, disconnectLabel, LabelableComponent, getLabelText } from "../../utils/label";
 import { TextualInputComponent } from "../input/common/input";
 import {
   afterConnectDefaultValueSet,
@@ -53,6 +53,7 @@ import type { Input } from "../input/input";
 import type { AutocompleteItem } from "../autocomplete-item/autocomplete-item";
 import type { AutocompleteItemGroup } from "../autocomplete-item-group/autocomplete-item-group";
 import type { Label } from "../label/label";
+import { InternalLabel } from "../functional/InternalLabel";
 import { Validation } from "../functional/Validation";
 import { createObserver } from "../../utils/observers";
 import { useSetFocus } from "../../controllers/useSetFocus";
@@ -73,6 +74,7 @@ declare global {
  * @slot - A slot for adding `calcite-autocomplete-item` elements.
  * @slot content-bottom - A slot for adding content below `calcite-autocomplete-item` elements.
  * @slot content-top - A slot for adding content above `calcite-autocomplete-item` elements.
+ * @slot label-content - A slot for rendering content next to the component's `labelText`.
  */
 export class Autocomplete
   extends LitElement
@@ -206,6 +208,9 @@ export class Autocomplete
   /** Accessible name for the component. */
   @property() label: string;
 
+  /** When provided, displays label text on the component. */
+  @property() labelText: string;
+
   /** When present, a busy indicator is displayed. */
   @property({ reflect: true }) loading = false;
 
@@ -781,11 +786,20 @@ export class Autocomplete
 
     return (
       <InteractiveContainer disabled={disabled}>
+        {this.labelText && (
+          <InternalLabel
+            labelText={this.labelText}
+            onClick={this.onLabelClick}
+            required={this.required}
+            tooltipText={this.messages.required}
+          />
+        )}
         <div class={CSS.inputContainer}>
           <calcite-input
             alignment={this.alignment}
             aria-activedescendant={this.activeDescendant}
             aria-controls={listId}
+            aria-label={getLabelText(this)}
             aria-owns={listId}
             ariaAutoComplete="list"
             ariaExpanded={isOpen}
@@ -817,6 +831,7 @@ export class Autocomplete
             prefixText={this.prefixText}
             readOnly={this.readOnly}
             ref={this.setReferenceEl}
+            required={this.required}
             role="combobox"
             scale={this.scale}
             status={this.status}

packages/calcite-components/src/components/block/block.stories.ts

@@ -415,4 +415,3 @@ export const emptyHeader = (): string => html`
     </calcite-label>
   </calcite-block>
 `;
-

packages/calcite-components/src/components/checkbox/checkbox.e2e.ts

@@ -7,8 +7,10 @@ import {
   focusable,
   formAssociated,
   hidden,
+  internalLabel,
   HYDRATED_ATTR,
   labelable,
+  t9n,
   themed,
 } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
@@ -184,6 +186,10 @@ describe("calcite-checkbox", () => {
     });
   });
 
+  describe("InternalLabel", () => {
+    internalLabel(`calcite-checkbox`);
+  });
+
   describe("WCAG AA recommended minimum 24px click area", () => {
     const testCheckboxClick = async (scale: Scale, maxExtraPixels: number, direction: "ltr" | "rtl"): Promise<void> => {
       const page = await newE2EPage();
@@ -225,6 +231,10 @@ describe("calcite-checkbox", () => {
     });
   });
 
+  describe("translation support", () => {
+    t9n("calcite-checkbox");
+  });
+
   describe("theme", () => {
     describe("default", () => {
       themed(html` <calcite-checkbox name="s-unchecked" scale="s"></calcite-checkbox> `, {

packages/calcite-components/src/components/checkbox/checkbox.scss

@@ -146,6 +146,7 @@
   }
 }
 
+@include form-internal-label();
 @include disabled();
 @include hidden-form-input();
 @include base-component();

packages/calcite-components/src/components/checkbox/checkbox.tsx

@@ -19,9 +19,12 @@ import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from
 import { Scale, Status } from "../interfaces";
 import { CSS_UTILITY } from "../../utils/resources";
 import type { Label } from "../label/label";
+import { InternalLabel } from "../functional/InternalLabel";
+import { useT9n } from "../../controllers/useT9n";
 import { useSetFocus } from "../../controllers/useSetFocus";
 import { CSS } from "./resources";
 import { styles } from "./checkbox.scss";
+import T9nStrings from "./assets/t9n/messages.en.json";
 
 declare global {
   interface DeclareElements {
@@ -59,6 +62,13 @@ export class Checkbox
 
   private toggleEl = createRef<HTMLDivElement>();
 
+  /**
+   * Made into a prop for testing purposes only
+   *
+   * @private
+   */
+  messages = useT9n<typeof T9nStrings>();
+
   private focusSetter = useSetFocus<this>()(this);
 
   // #endregion
@@ -97,6 +107,12 @@ export class Checkbox
   /** Accessible name for the component. */
   @property() label: string;
 
+  /** When provided, displays label text on the component. */
+  @property() labelText: string;
+
+  /** Use this property to override individual strings used by the component. */
+  @property() messageOverrides?: typeof this.messages._overrides;
+
   /**
    * Specifies the name of the component.
    *
@@ -254,6 +270,7 @@ export class Checkbox
         <div
           ariaChecked={this.checked}
           ariaLabel={getLabelText(this)}
+          ariaRequired={this.required}
           class={{
             [CSS.toggle]: true,
             [CSS_UTILITY.rtl]: rtl,
@@ -269,6 +286,15 @@ export class Checkbox
           </svg>
           <slot />
         </div>
+        {this.labelText && (
+          <InternalLabel
+            bottomSpacingDisabled={true}
+            labelText={this.labelText}
+            required={this.required}
+            spacingInlineStart={true}
+            tooltipText={this.messages.required}
+          />
+        )}
         <HiddenFormInputSlot component={this} />
       </InteractiveContainer>
     );

packages/calcite-components/src/components/combobox/combobox.e2e.ts

@@ -9,6 +9,7 @@ import {
   focusable,
   formAssociated,
   hidden,
+  internalLabel,
   labelable,
   openClose,
   reflects,
@@ -150,6 +151,10 @@ describe("calcite-combobox", () => {
     `);
   });
 
+  describe("InternalLabel", () => {
+    internalLabel(`calcite-combobox`);
+  });
+
   describe("honors hidden attribute", () => {
     hidden("calcite-combobox");
   });

packages/calcite-components/src/components/combobox/combobox.scss

@@ -292,4 +292,5 @@ calcite-chip {
   padding-block-start: var(--calcite-internal-combobox-spacing-unit-l);
 }
 
+@include form-internal-label();
 @include input-placeholder-text();

packages/calcite-components/src/components/combobox/combobox.tsx

@@ -51,6 +51,7 @@ import { DEBOUNCE } from "../../utils/resources";
 import { Scale, SelectionMode, Status } from "../interfaces";
 import { CSS as XButtonCSS, XButton } from "../functional/XButton";
 import { getIconScale, isHidden } from "../../utils/component";
+import { InternalLabel } from "../functional/InternalLabel";
 import { Validation } from "../functional/Validation";
 import { IconNameOrString } from "../icon/interfaces";
 import { useT9n } from "../../controllers/useT9n";
@@ -79,7 +80,10 @@ declare global {
   }
 }
 
-/** @slot - A slot for adding `calcite-combobox-item`s. */
+/**
+ * @slot - A slot for adding `calcite-combobox-item`s.
+ * @slot label-content - A slot for rendering content next to the component's `labelText`.
+ */
 export class Combobox
   extends LitElement
   implements
@@ -369,6 +373,9 @@ export class Combobox
    */
   @property() label: string;
 
+  /** When provided, displays label text on the component. */
+  @property() labelText: string;
+
   /** Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar. */
   @property({ reflect: true }) maxItems = 0;
 
@@ -1757,6 +1764,7 @@ export class Combobox
           placeholder={placeholder}
           readOnly={this.readOnly}
           ref={this.textInput}
+          required={this.required}
           role="combobox"
           tabIndex={this.activeChipIndex === -1 ? 0 : -1}
           type="text"
@@ -1897,6 +1905,14 @@ export class Combobox
 
     return (
       <InteractiveContainer disabled={this.disabled}>
+        {this.labelText && (
+          <InternalLabel
+            labelText={this.labelText}
+            onClick={this.onLabelClick}
+            required={this.required}
+            tooltipText={this.messages.required}
+          />
+        )}
         <div
           ariaLive="polite"
           class={{

packages/calcite-components/src/components/combobox/resources.ts

@@ -50,3 +50,7 @@ export const ICONS = {
   chevronUp: "chevron-up",
   chevronDown: "chevron-down",
 };
+
+export const SLOTS = {
+  labelContent: "label-content",
+};