@enact/limestone 1.3.0 → 1.10.0

package/Popup/Popup.module.css

@@ -2,14 +2,14 @@
   height: 100%;
   max-height: 100%;
   max-width: 100%;
-  border-radius: 0.5rem;
+  border-radius: var(--primitive-radius-24);
 }
 .popup .body {
   font-family: "Limestone";
   font-weight: normal;
   font-size: var(--primitive-font-size-60);
   line-height: 1.4em;
-  padding: 1rem 1.5rem;
+  padding: var(--primitive-spacing-48) var(--primitive-spacing-72);
   box-sizing: border-box;
   pointer-events: auto;
 }
@@ -30,7 +30,7 @@
   line-height: 1.7em;
 }
 :global(.enact-locale-right-to-left) .popup .body {
-  padding: 1rem 1.5rem 1rem 1.5rem;
+  padding: var(--primitive-spacing-48) var(--primitive-spacing-72) var(--primitive-spacing-48) var(--primitive-spacing-72);
 }
 :global(.enact-locale-ja) .popup .body {
   line-break: strict;
@@ -44,26 +44,26 @@
   height: 100%;
 }
 .popup.top {
-  margin: 3.125rem 2.5rem 1.625rem 2.5rem;
+  margin: 3.125rem var(--primitive-spacing-120) 1.625rem var(--primitive-spacing-120);
 }
 .popup.top.left,
 .popup.top.right {
-  margin: 1.25rem;
+  margin: var(--primitive-spacing-60);
 }
 .popup.right {
-  margin: 2.5rem 1.25rem 2.5rem 0.75rem;
-  max-height: calc(100% - 5rem );
+  margin: var(--primitive-spacing-120) var(--primitive-spacing-60) var(--primitive-spacing-120) var(--primitive-spacing-36);
+  max-height: calc(100% - (var(--primitive-spacing-120) + var(--primitive-spacing-120)));
 }
 .popup.bottom {
-  margin: 0 2.5rem 3.125rem 2.5rem;
+  margin: 0 var(--primitive-spacing-120) 3.125rem var(--primitive-spacing-120);
 }
 .popup.bottom.left,
 .popup.bottom.right {
-  margin: 1.25rem;
+  margin: var(--primitive-spacing-60);
 }
 .popup.left {
-  margin: 2.5rem 0.75rem 2.5rem 1.25rem;
-  max-height: calc(100% - 5rem );
+  margin: var(--primitive-spacing-120) var(--primitive-spacing-36) var(--primitive-spacing-120) var(--primitive-spacing-60);
+  max-height: calc(100% - (var(--primitive-spacing-120) + var(--primitive-spacing-120)));
 }
 .popup.center {
   position: absolute;
@@ -85,17 +85,17 @@
 .popup:global(.neutral).outline {
   outline-color: var(--semantic-color-stroke-overlay-default);
   outline-style: solid;
-  outline-width: 0.021rem;
-  outline-offset: -0.021rem;
+  outline-width: 0.063rem;
+  outline-offset: -0.063rem;
 }
 :global(.enact-a11y-high-contrast) .popup:global(.neutral):global(.highContrast) {
   background-color: var(--semantic-color-background-overlay-default);
 }
 :global(.enact-a11y-high-contrast) .popup:global(.neutral):global(.highContrast).outline {
-  outline-color: #7c848b;
+  outline-color: var(--semantic-color-stroke-main);
   outline-style: solid;
-  outline-width: 0.021rem;
-  outline-offset: -0.021rem;
+  outline-width: 0.063rem;
+  outline-offset: -0.063rem;
 }
 .popup:global(.light) {
   background-color: color(from var(--semantic-color-background-overlay-default) srgb r g b / 0.9);
@@ -103,8 +103,8 @@
 .popup:global(.light).outline {
   outline-color: var(--semantic-color-stroke-overlay-default);
   outline-style: solid;
-  outline-width: 0.021rem;
-  outline-offset: -0.021rem;
+  outline-width: 0.063rem;
+  outline-offset: -0.063rem;
 }
 .popup:global(.game) {
   --semantic-color-surface-default: #2d224c;
@@ -115,8 +115,8 @@
 .popup:global(.game).outline {
   outline-color: var(--semantic-color-stroke-overlay-default);
   outline-style: solid;
-  outline-width: 0.021rem;
-  outline-offset: -0.021rem;
+  outline-width: 0.063rem;
+  outline-offset: -0.063rem;
 }
 :global(.green) .popup:global(.game) {
   --semantic-color-surface-default: #1F2C24;
@@ -126,8 +126,8 @@
 :global(.green) .popup:global(.game).outline {
   outline-color: var(--semantic-color-stroke-overlay-default);
   outline-style: solid;
-  outline-width: 0.021rem;
-  outline-offset: -0.021rem;
+  outline-width: 0.063rem;
+  outline-offset: -0.063rem;
 }
 :global(.orange) .popup:global(.game) {
   --semantic-color-surface-default: #422923;
@@ -137,8 +137,8 @@
 :global(.orange) .popup:global(.game).outline {
   outline-color: var(--semantic-color-stroke-overlay-default);
   outline-style: solid;
-  outline-width: 0.021rem;
-  outline-offset: -0.021rem;
+  outline-width: 0.063rem;
+  outline-offset: -0.063rem;
 }
 .popupTransitionContainer {
   position: absolute;

package/PopupTabLayout/PopupTabLayout.d.ts

@@ -11,11 +11,10 @@ import { TabLayoutProps as limestone_TabLayout_TabLayoutProps } from "limestone/
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
 
-export interface PopupTabLayoutBaseProps
-  extends Merge<
-    limestone_Popup_PopupProps,
-    limestone_TabLayout_TabLayoutProps
-  > {
+export interface PopupTabLayoutBaseProps extends Merge<
+  limestone_Popup_PopupProps,
+  limestone_TabLayout_TabLayoutProps
+> {
   /**
    * Collection of    to render.
    */
@@ -99,8 +98,7 @@ export class PopupTabLayoutBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, PopupTabLayoutBaseProps>
 > {}
 
-export interface PopupTabLayoutDecoratorProps
-  extends limestone_Skinnable_SkinnableProps {}
+export interface PopupTabLayoutDecoratorProps extends limestone_Skinnable_SkinnableProps {}
 export function PopupTabLayoutDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & PopupTabLayoutDecoratorProps>;

package/PopupTabLayout/PopupTabLayout.js

@@ -30,6 +30,7 @@ var _Skinnable = _interopRequireDefault(require("../Skinnable"));
 var _Panels = _interopRequireWildcard(require("../Panels"));
 var _TabLayout = _interopRequireWildcard(require("../TabLayout"));
 var _Popup = _interopRequireDefault(require("../Popup"));
+var _PopupTabLayoutStateContext = require("./PopupTabLayoutStateContext");
 var _PopupTabLayoutModule = _interopRequireDefault(require("./PopupTabLayout.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["children", "css", "optimized", "PopupComponent"],
@@ -327,15 +328,20 @@ var PopupTabLayoutBase = exports.PopupTabLayoutBase = (0, _kind["default"])({
       delete popupProps.onShow;
       delete popupProps.scrimType;
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(PopupComponent, _objectSpread(_objectSpread({}, popupProps), {}, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], _objectSpread(_objectSpread({}, rest), {}, {
-        css: css,
-        align: "start",
-        anchorTo: "left",
-        type: "popup",
-        children: children
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayoutStateContext.PopupTabLayoutStateContext, {
+      value: {
+        type: 'popupTabLayout'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PopupComponent, _objectSpread(_objectSpread({}, popupProps), {}, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], _objectSpread(_objectSpread({}, rest), {}, {
+          css: css,
+          align: "start",
+          anchorTo: "left",
+          type: "popup",
+          children: children
+        }))
       }))
-    }));
+    });
   }
 });
 var OptimizedFocusDecorator = (0, _hoc["default"])(function (config, Wrapped) {
@@ -385,7 +391,7 @@ var OptimizedFocusDecorator = (0, _hoc["default"])(function (config, Wrapped) {
         }
       }
     }]);
-  }(_react.Component), _Class.displayName = 'OptimizedFocusDecorator', _Class.propTypes = /** @lends sandstone/PopupTabLayout.OptimizedFocusDecorator.prototype */{
+  }(_react.Component), _Class.displayName = 'OptimizedFocusDecorator', _Class.propTypes = /** @lends limestone/PopupTabLayout.OptimizedFocusDecorator.prototype */{
     /**
      * Controls the visibility of the PopupTabLayout.
      *
@@ -521,9 +527,10 @@ var tabPanelsHandlers = {
  * @ui
  * @public
  */
-var TabPanelsBase = exports.TabPanelsBase = function TabPanelsBase(_ref9) {
-  var rtl = _ref9.rtl,
-    rest = _objectWithoutProperties(_ref9, _excluded2);
+var _TabPanelsBase = exports.TabPanelsBase = function TabPanelsBase(props) {
+  (0, _util.checkPropTypes)(_TabPanelsBase, props);
+  var rtl = props.rtl,
+    rest = _objectWithoutProperties(props, _excluded2);
   var onTransition = (0, _react.use)(_TabLayout.TabLayoutContext);
   var handlers = (0, _useHandlers["default"])(tabPanelsHandlers, _objectSpread({
     rtl: rtl
@@ -536,7 +543,7 @@ var TabPanelsBase = exports.TabPanelsBase = function TabPanelsBase(_ref9) {
     css: _PopupTabLayoutModule["default"]
   }, handlers));
 };
-TabPanelsBase.propTypes = {
+_TabPanelsBase.propTypes = {
   rtl: _propTypes["default"].bool
 };
 
@@ -551,7 +558,7 @@ TabPanelsBase.propTypes = {
  */
 var TabPanels = exports.TabPanels = (0, _I18nDecorator.I18nContextDecorator)({
   rtlProp: 'rtl'
-}, TabPanelsBase);
+}, _TabPanelsBase);
 
 /**
  * Omits the close button.
@@ -579,9 +586,10 @@ var TabPanels = exports.TabPanels = (0, _I18nDecorator.I18nContextDecorator)({
  * @ui
  * @public
  */
-var TabPanel = exports.TabPanel = function TabPanel(_ref0) {
-  var spotlightId = _ref0.spotlightId,
-    rest = _objectWithoutProperties(_ref0, _excluded3);
+var _TabPanel = exports.TabPanel = function TabPanel(props) {
+  (0, _util.checkPropTypes)(_TabPanel, props);
+  var spotlightId = props.spotlightId,
+    rest = _objectWithoutProperties(props, _excluded3);
   (0, _react.useEffect)(function () {
     _spotlight["default"].set(spotlightId, {
       partition: true
@@ -593,7 +601,7 @@ var TabPanel = exports.TabPanel = function TabPanel(_ref0) {
     spotlightId: spotlightId
   }));
 };
-TabPanel.propTypes = {
+_TabPanel.propTypes = {
   /**
    * The container id for {@link spotlight/SpotlightContainerDecorator/#SpotlightContainerDecorator.spotlightId|Spotlight container}.
    *

package/PopupTabLayout/PopupTabLayout.module.css

@@ -1,7 +1,7 @@
 .popupTabLayout.popup,
 .popupTabLayout.optimized {
-  margin: 1.25rem auto 2.75rem 1.25rem;
-  max-height: calc(100vh - 4rem );
+  margin: var(--primitive-spacing-60) auto var(--primitive-spacing-132) var(--primitive-spacing-60);
+  max-height: calc(100vh - (var(--primitive-spacing-60) + var(--primitive-spacing-132)));
 }
 .popupTabLayout .tabLayout .tabs {
   bottom: auto;
@@ -54,9 +54,15 @@
   background-color: var(--semantic-color-background-overlay-default);
   box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
   outline-color: var(--semantic-color-stroke-overlay-default);
-  outline-width: 0.021rem;
+  outline-width: 0.063rem;
   outline-style: solid;
-  outline-offset: -0.021rem;
+  outline-offset: -0.063rem;
+}
+.popupTabLayout:global(.neutral) .tabGroup {
+  background-color: var(--semantic-color-background-overlay-default);
+}
+.popupTabLayout:global(.neutral) .tabGroup .tab .icon {
+  --icon-size: 2rem;
 }
 :global(.noAnimation) .popupTabLayout:global(.neutral) .tabs,
 :global(.noAnimation) .popupTabLayout:global(.neutral) .content .panels::before {
@@ -75,10 +81,16 @@
 :global(.enact-a11y-high-contrast) .popupTabLayout:global(.neutral):global(.highContrast) .content .panels::before {
   background-color: var(--semantic-color-background-overlay-default);
   box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
-  outline-color: #7c848b;
-  outline-width: 0.021rem;
+  outline-color: var(--semantic-color-stroke-main);
+  outline-width: 0.063rem;
   outline-style: solid;
-  outline-offset: -0.021rem;
+  outline-offset: -0.063rem;
+}
+:global(.enact-a11y-high-contrast) .popupTabLayout:global(.neutral):global(.highContrast) .tabGroup {
+  background-color: var(--semantic-color-background-overlay-default);
+}
+:global(.enact-a11y-high-contrast) .popupTabLayout:global(.neutral):global(.highContrast) .tabGroup .tab .icon {
+  --icon-size: 2rem;
 }
 :global(.noAnimation) :global(.enact-a11y-high-contrast) .popupTabLayout:global(.neutral):global(.highContrast) .tabs,
 :global(.noAnimation) :global(.enact-a11y-high-contrast) .popupTabLayout:global(.neutral):global(.highContrast) .content .panels::before {
@@ -98,9 +110,15 @@
   background-color: var(--semantic-color-background-overlay-default);
   box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
   outline-color: var(--semantic-color-stroke-overlay-default);
-  outline-width: 0.021rem;
+  outline-width: 0.063rem;
   outline-style: solid;
-  outline-offset: -0.021rem;
+  outline-offset: -0.063rem;
+}
+.popupTabLayout:global(.light) .tabGroup {
+  background-color: var(--semantic-color-background-overlay-default);
+}
+.popupTabLayout:global(.light) .tabGroup .tab .icon {
+  --icon-size: 2rem;
 }
 :global(.noAnimation) .popupTabLayout:global(.light) .tabs,
 :global(.noAnimation) .popupTabLayout:global(.light) .content .panels::before {
@@ -123,9 +141,15 @@
   background-color: var(--semantic-color-background-overlay-default);
   box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
   outline-color: var(--semantic-color-stroke-overlay-default);
-  outline-width: 0.021rem;
+  outline-width: 0.063rem;
   outline-style: solid;
-  outline-offset: -0.021rem;
+  outline-offset: -0.063rem;
+}
+.popupTabLayout:global(.game) .tabGroup {
+  background-color: var(--semantic-color-background-overlay-default);
+}
+.popupTabLayout:global(.game) .tabGroup .tab .icon {
+  --icon-size: 2rem;
 }
 :global(.noAnimation) .popupTabLayout:global(.game) .tabs,
 :global(.noAnimation) .popupTabLayout:global(.game) .content .panels::before {
@@ -147,9 +171,15 @@
   background-color: var(--semantic-color-background-overlay-default);
   box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
   outline-color: var(--semantic-color-stroke-overlay-default);
-  outline-width: 0.021rem;
+  outline-width: 0.063rem;
   outline-style: solid;
-  outline-offset: -0.021rem;
+  outline-offset: -0.063rem;
+}
+:global(.green) .popupTabLayout:global(.game) .tabGroup {
+  background-color: var(--semantic-color-background-overlay-default);
+}
+:global(.green) .popupTabLayout:global(.game) .tabGroup .tab .icon {
+  --icon-size: 2rem;
 }
 :global(.noAnimation) :global(.green) .popupTabLayout:global(.game) .tabs,
 :global(.noAnimation) :global(.green) .popupTabLayout:global(.game) .content .panels::before {
@@ -171,9 +201,15 @@
   background-color: var(--semantic-color-background-overlay-default);
   box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
   outline-color: var(--semantic-color-stroke-overlay-default);
-  outline-width: 0.021rem;
+  outline-width: 0.063rem;
   outline-style: solid;
-  outline-offset: -0.021rem;
+  outline-offset: -0.063rem;
+}
+:global(.orange) .popupTabLayout:global(.game) .tabGroup {
+  background-color: var(--semantic-color-background-overlay-default);
+}
+:global(.orange) .popupTabLayout:global(.game) .tabGroup .tab .icon {
+  --icon-size: 2rem;
 }
 :global(.noAnimation) :global(.orange) .popupTabLayout:global(.game) .tabs,
 :global(.noAnimation) :global(.orange) .popupTabLayout:global(.game) .content .panels::before {
@@ -206,7 +242,8 @@
 }
 .panel {
   padding: 0;
-  max-height: calc(100vh - 4rem );
+  max-height: calc(100vh - (var(--primitive-spacing-60) + var(--primitive-spacing-132)));
+  min-height: 20.75rem;
 }
 .panel > .body {
   display: flex;

package/PopupTabLayout/PopupTabLayoutStateContext.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PopupTabLayoutStateContext = void 0;
+var _react = require("react");
+var PopupTabLayoutStateContext = exports.PopupTabLayoutStateContext = /*#__PURE__*/(0, _react.createContext)({});

package/ProgressBar/ProgressBar.d.ts

@@ -152,14 +152,15 @@ export class ProgressBarTooltip extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, ProgressBarTooltipProps>
 > {}
 
-export interface ProgressBarDecoratorProps
-  extends limestone_Skinnable_SkinnableProps {}
+export interface ProgressBarDecoratorProps extends limestone_Skinnable_SkinnableProps {}
 export function ProgressBarDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & ProgressBarDecoratorProps>;
 
-export interface ProgressBarProps
-  extends Merge<ProgressBarBaseProps, ProgressBarDecoratorProps> {}
+export interface ProgressBarProps extends Merge<
+  ProgressBarBaseProps,
+  ProgressBarDecoratorProps
+> {}
 /**
  * The ready-to-use Limestone-styled ProgressBar.
  */

package/ProgressBar/ProgressBarTooltip.module.css

@@ -6,10 +6,10 @@
   left: var(--tooltip-progress-percent);
 }
 .tooltip.horizontal.above {
-  bottom: 0.5rem;
+  bottom: calc(var(--primitive-spacing-12) + 12px);
 }
 .tooltip.horizontal.below {
-  top: 0.5rem;
+  top: calc(var(--primitive-spacing-12) + 12px);
 }
 .tooltip.vertical {
   bottom: var(--tooltip-progress-percent);
@@ -17,12 +17,12 @@
 .tooltip.vertical.left,
 .tooltip.vertical.before,
 :global(.enact-locale-right-to-left) .tooltip.vertical.after {
-  right: 0.5rem;
+  right: calc(var(--primitive-spacing-12) + 12px);
 }
 .tooltip.vertical.right,
 .tooltip.vertical.after,
 :global(.enact-locale-right-to-left) .tooltip.vertical.before {
-  left: 0.5rem;
+  left: calc(var(--primitive-spacing-12) + 12px);
 }
 .tooltip.radial {
   left: 50%;
@@ -49,38 +49,38 @@
   left: 50%;
 }
 .tooltip.radial.center.above {
-  bottom: calc(100% + 0.5rem );
+  bottom: calc(100% + calc(var(--primitive-spacing-12) + 12px) );
 }
 .tooltip.radial.center.below {
-  top: calc(100% + 0.5rem );
+  top: calc(100% + calc(var(--primitive-spacing-12) + 12px) );
 }
 .tooltip.radial.left,
 .tooltip.radial.before,
 :global(.enact-locale-right-to-left) .tooltip.radial.after {
-  left: -0.5rem;
+  left: calc(calc(var(--primitive-spacing-12) + 12px) * -1);
 }
 .tooltip.radial.left.above,
 .tooltip.radial.before.above,
 :global(.enact-locale-right-to-left) .tooltip.radial.after.above {
-  bottom: calc(100% + 0.5rem );
+  bottom: calc(100% + calc(var(--primitive-spacing-12) + 12px) );
 }
 .tooltip.radial.left.below,
 .tooltip.radial.before.below,
 :global(.enact-locale-right-to-left) .tooltip.radial.after.below {
-  top: calc(100% + 0.5rem );
+  top: calc(100% + calc(var(--primitive-spacing-12) + 12px) );
 }
 .tooltip.radial.right,
 .tooltip.radial.after,
 :global(.enact-locale-right-to-left) .tooltip.radial.before {
-  left: calc(100% + 0.5rem );
+  left: calc(100% + calc(var(--primitive-spacing-12) + 12px) );
 }
 .tooltip.radial.right.above,
 .tooltip.radial.after.above,
 :global(.enact-locale-right-to-left) .tooltip.radial.before.above {
-  bottom: calc(100% + 0.5rem );
+  bottom: calc(100% + calc(var(--primitive-spacing-12) + 12px) );
 }
 .tooltip.radial.right.below,
 .tooltip.radial.after.below,
 :global(.enact-locale-right-to-left) .tooltip.radial.before.below {
-  top: calc(100% + 0.5rem );
+  top: calc(100% + calc(var(--primitive-spacing-12) + 12px) );
 }

package/ProgressButton/ProgressButton.d.ts

@@ -7,11 +7,10 @@ import { ProgressBarProps as limestone_ProgressBar_ProgressBarProps } from "lime
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
 
-export interface ProgressButtonBaseProps
-  extends Merge<
-    limestone_Button_ButtonBaseProps,
-    limestone_ProgressBar_ProgressBarProps
-  > {
+export interface ProgressButtonBaseProps extends Merge<
+  limestone_Button_ButtonBaseProps,
+  limestone_ProgressBar_ProgressBarProps
+> {
   /**
  * Customizes the component by mapping the supplied collection of CSS class names to the
 corresponding internal elements and states of this component.

package/QuickGuidePanels/QuickGuidePanels.module.css

@@ -7,7 +7,7 @@
   justify-content: center;
   align-items: center;
   width: 100%;
-  margin-top: 1.875rem;
+  margin-top: var(--primitive-spacing-90);
   min-height: 1rem;
 }
 .quickGuidePanels .contentHeader .close {
@@ -22,5 +22,5 @@
   z-index: 10;
 }
 .quickGuidePanels .navigationButtonContainer .navigationButton {
-  margin: 0 0.25rem;
+  margin: 0 var(--primitive-spacing-12);
 }

package/RadioItem/RadioItem.d.ts

@@ -1,8 +1,8 @@
 // Type definitions for limestone/RadioItem
 
 import { ToggleableProps as ui_Toggleable_ToggleableProps } from "@enact/ui/Toggleable";
-import { ItemProps as limestone_Item_ItemProps } from "limestone/Item";
 import * as React from "react";
+import { ItemProps as limestone_Item_ItemProps } from "limestone/Item";
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
@@ -19,8 +19,10 @@ export class RadioItemBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, RadioItemBaseProps>
 > {}
 
-export interface RadioItemProps
-  extends Merge<RadioItemBaseProps, RadioItemDecoratorProps> {
+export interface RadioItemProps extends Merge<
+  RadioItemBaseProps,
+  RadioItemDecoratorProps
+> {
   /**
  * Customizes the component by mapping the supplied collection of CSS class names to the
 corresponding internal elements and states of this component.
@@ -50,10 +52,21 @@ export class RadioItem extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, RadioItemProps>
 > {}
 
-export interface RadioItemDecoratorProps
-  extends ui_Toggleable_ToggleableProps {}
+export interface RadioItemDecoratorProps extends ui_Toggleable_ToggleableProps {}
 export function RadioItemDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & RadioItemDecoratorProps>;
 
+export interface RadioItemGroupProps {}
+/**
+ * A container that surrounds multiple RadioItems.
+ * 
+ * A list of multiple RadioItems wrapped with a RadioItemGroup component gets
+required audio guidance.
+ */
+
+export class RadioItemGroup extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, RadioItemGroupProps>
+> {}
+
 export default RadioItem;

package/RadioItem/RadioItem.js

@@ -3,18 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.RadioItemDecorator = exports.RadioItemBase = exports.RadioItem = void 0;
+exports["default"] = exports.RadioItemGroup = exports.RadioItemDecorator = exports.RadioItemBase = exports.RadioItem = void 0;
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _util = require("@enact/core/util");
+var _Group = _interopRequireDefault(require("@enact/ui/Group"));
 var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
 var _Slottable = _interopRequireDefault(require("@enact/ui/Slottable"));
 var _Toggleable = _interopRequireDefault(require("@enact/ui/Toggleable"));
+var _IString = _interopRequireDefault(require("ilib/lib/IString"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _compose = _interopRequireDefault(require("ramda/src/compose"));
 var _Icon = _interopRequireDefault(require("../Icon"));
+var _$L = _interopRequireDefault(require("../internal/$L"));
 var _Item = require("../Item");
 var _RadioItemModule = _interopRequireDefault(require("./RadioItem.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["children", "css", "icon", "selected", "slotBefore"];
+var _excluded = ["children", "css", "icon", "selected", "slotBefore"],
+  _excluded2 = ["children", "groupId", "itemProps"],
+  _excluded3 = ["children"];
 /**
  * Provides a Limestone-themed Item component with an interactive radio toggle icon.
  *
@@ -143,4 +149,65 @@ var RadioItemDecorator = exports.RadioItemDecorator = (0, _compose["default"])((
  * @public
  */
 var RadioItem = exports.RadioItem = (0, _Pure["default"])(RadioItemDecorator(RadioItemBase));
+
+/**
+ * A container that surrounds multiple RadioItems.
+ *
+ * A list of multiple RadioItems wrapped with a RadioItemGroup component gets
+ * required audio guidance.
+ *
+ * @class RadioItemGroup
+ * @memberof limestone/RadioItem
+ * @ui
+ * @public
+ */
+var _RadioItemGroup = exports.RadioItemGroup = function RadioItemGroup(props) {
+  (0, _util.checkPropTypes)(_RadioItemGroup, props);
+  var children = props.children,
+    groupId = props.groupId,
+    itemProps = props.itemProps,
+    rest = _objectWithoutProperties(props, _excluded2);
+  if (typeof children[0] === 'string') {
+    // The case of multiple radio items are represented by string array instead of `RadioItem` components using `ui/Group`
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      role: "region",
+      "aria-labelledby": groupId || "radioItemGroup",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Group["default"], _objectSpread(_objectSpread({}, rest), {}, {
+        id: groupId || "radioItemGroup",
+        "aria-label": new _IString["default"]((0, _$L["default"])('{total} items in total')).format({
+          'total': children.length
+        }),
+        childComponent: RadioItem,
+        childSelect: "onToggle",
+        itemProps: _objectSpread({}, itemProps),
+        children: children
+      }))
+    });
+  } else {
+    // The case of multiple radio items are represented by `RadioItem` components
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      role: "region",
+      "aria-labelledby": groupId || "radioItemGroup",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, rest), {}, {
+        role: "group",
+        id: groupId || "radioItemGroup",
+        "aria-label": new _IString["default"]((0, _$L["default"])('{total} items in total')).format({
+          'total': children.length
+        }),
+        children: children.map(function (child, index) {
+          var _child$props = child.props,
+            itemValue = _child$props.children,
+            childRest = _objectWithoutProperties(_child$props, _excluded3);
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(RadioItem, _objectSpread(_objectSpread(_objectSpread({}, childRest), itemProps), {}, {
+            children: itemValue
+          }), index);
+        })
+      }))
+    });
+  }
+};
+_RadioItemGroup.propTypes = {
+  groupId: _propTypes["default"].string,
+  itemProps: _propTypes["default"].object
+};
 var _default = exports["default"] = RadioItem;