@carbon/web-components 2.23.0 → 2.24.0

package/es/components/tile/radio-tile.d.ts

@@ -8,21 +8,18 @@
  */
 import SelectableTile from './selectable-tile';
 /**
- * Single-selectable tile.
+ * Radio tile.
  *
  * @element cds-radio-tile
  * @fires cds-radio-tile-selected
- *   The name of the custom event fired after this selectable tile changes its selected state.
+ *   The name of the custom event fired after this radio tile changes its selected state.
  */
 declare class CDSRadioTile extends SelectableTile {
-    /**
-     * The `type` attribute of the `<input>`.
-     */
-    protected _inputType: string;
     /**
      * Handles `change` event on the `<input>` in the shadow DOM.
      */
     protected _handleChange(): void;
+    protected _handleKeydown: (event: KeyboardEvent) => void;
     render(): import("lit-html").TemplateResult<1>;
     /**
      * The name of the custom event fired after this selectable tile changes its selected state.

package/es/components/tile/radio-tile.js

@@ -23,19 +23,20 @@ import { carbonElement } from '../../globals/decorators/carbon-element.js';
  * LICENSE file in the root directory of this source tree.
  */
 /**
- * Single-selectable tile.
+ * Radio tile.
  *
  * @element cds-radio-tile
  * @fires cds-radio-tile-selected
- *   The name of the custom event fired after this selectable tile changes its selected state.
+ *   The name of the custom event fired after this radio tile changes its selected state.
  */
 let CDSRadioTile = class CDSRadioTile extends SelectableTile {
     constructor() {
         super(...arguments);
-        /**
-         * The `type` attribute of the `<input>`.
-         */
-        this._inputType = 'radio';
+        this._handleKeydown = (event) => {
+            if (event.key === ' ' || event.key === 'Enter') {
+                event.preventDefault();
+            }
+        };
     }
     /**
      * Handles `change` event on the `<input>` in the shadow DOM.
@@ -54,33 +55,39 @@ let CDSRadioTile = class CDSRadioTile extends SelectableTile {
         }));
     }
     render() {
-        const { colorScheme, checkmarkLabel, name, selected, value, _inputType: inputType, _handleChange: handleChange, } = this;
+        const { colorScheme, checkmarkLabel, disabled, hasRoundedCorners, name, selected, value, _handleChange: handleChange, _handleKeydown: handleKeydown, _hasAILabel: hasAILabel, } = this;
         const classes = classMap({
             [`${prefix}--tile`]: true,
             [`${prefix}--tile--selectable`]: true,
+            [`${prefix}--tile--radio`]: true,
+            [`${prefix}--tile--disabled`]: disabled,
             [`${prefix}--tile--is-selected`]: selected,
             [`${prefix}--tile--${colorScheme}`]: colorScheme,
+            [`${prefix}--tile--slug-rounded`]: hasAILabel && hasRoundedCorners,
         });
         return html `
       <input
-        type="${inputType}"
+        type="radio"
         id="input"
         class="${prefix}--tile-input"
-        tabindex="-1"
+        ?disabled="${disabled}"
+        tabindex="${selected ? 0 : -1}"
         name="${ifDefined(name)}"
         value="${ifDefined(value)}"
         .checked=${selected}
-        @change=${handleChange} />
-      <label for="input" class="${classes}" tabindex="0">
-        <div class="${prefix}--tile__checkmark">
-          ${CheckmarkFilled16({
+        @change=${!disabled ? handleChange : undefined}
+        @keydown="${!disabled ? handleKeydown : undefined}" />
+      <label part="label" for="input" class="${classes}">
+        ${CheckmarkFilled16({
             children: !checkmarkLabel
                 ? undefined
                 : svg `<title>${checkmarkLabel}</title>`,
+            class: `${prefix}--tile__checkmark`,
         })}
-        </div>
         <div class="${prefix}--tile-content"><slot></slot></div>
       </label>
+      <slot name="decorator"></slot>
+      <slot name="ai-label" @slotchange="${this._handleSlotChange}"></slot>
     `;
     }
     /**

package/es/components/tile/radio-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-tile.js","sources":["../../../src/components/tile/radio-tile.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;AAOG;AAUH;;;;;;AAMG;AAEH,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,cAAc,CAAA;AAAzC,IAAA,WAAA,GAAA;;AACE;;AAEG;QACO,IAAU,CAAA,UAAA,GAAG,OAAO,CAAC;KAkEhC;AAhEC;;AAEG;IACO,aAAa,GAAA;AACrB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;AACrB,QAAA,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;AAChC,QAAA,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,WAAkC,CAAC;AACrE,QAAA,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,gBAAgB,EAAE;AAChC,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,MAAM,EAAE;gBACN,QAAQ;gBACR,IAAI;AACL,aAAA;AACF,SAAA,CAAC,CACH,CAAC;KACH;IAED,MAAM,GAAA;QACJ,MAAM,EACJ,WAAW,EACX,cAAc,EACd,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,UAAU,EAAE,SAAS,EACrB,aAAa,EAAE,YAAY,GAC5B,GAAG,IAAI,CAAC;QACT,MAAM,OAAO,GAAG,QAAQ,CAAC;AACvB,YAAA,CAAC,CAAG,EAAA,MAAM,CAAQ,MAAA,CAAA,GAAG,IAAI;AACzB,YAAA,CAAC,CAAG,EAAA,MAAM,CAAoB,kBAAA,CAAA,GAAG,IAAI;AACrC,YAAA,CAAC,CAAG,EAAA,MAAM,CAAqB,mBAAA,CAAA,GAAG,QAAQ;AAC1C,YAAA,CAAC,GAAG,MAAM,CAAA,QAAA,EAAW,WAAW,CAAE,CAAA,GAAG,WAAW;AACjD,SAAA,CAAC,CAAC;AACH,QAAA,OAAO,IAAI,CAAA,CAAA;;gBAEC,SAAS,CAAA;;iBAER,MAAM,CAAA;;gBAEP,SAAS,CAAC,IAAI,CAAC,CAAA;iBACd,SAAS,CAAC,KAAK,CAAC,CAAA;mBACd,QAAQ,CAAA;kBACT,YAAY,CAAA;kCACI,OAAO,CAAA;sBACnB,MAAM,CAAA;AAChB,UAAA,EAAA,iBAAiB,CAAC;YAClB,QAAQ,EAAE,CAAC,cAAc;AACvB,kBAAE,SAAS;AACX,kBAAE,GAAG,CAAA,CAAA,OAAA,EAAU,cAAc,CAAU,QAAA,CAAA;SAC1C,CAAC,CAAA;;sBAEU,MAAM,CAAA;;KAEvB,CAAC;KACH;AAED;;AAEG;AACH,IAAA,WAAW,gBAAgB,GAAA;QACzB,OAAO,CAAA,EAAG,MAAM,CAAA,oBAAA,CAAsB,CAAC;KACxC;CACF,CAAA;AAtEK,YAAY,GAAA,UAAA,CAAA;AADjB,IAAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,WAAA,CAAa,CAAC;AAChC,CAAA,EAAA,YAAY,CAsEjB,CAAA;AAED,qBAAe,YAAY;;;;"}
+{"version":3,"file":"radio-tile.js","sources":["../../../src/components/tile/radio-tile.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":"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"}