@enact/limestone 1.3.0 → 1.9.4

package/Slider/tests/Slider-specs.js

@@ -101,7 +101,8 @@ describe('Slider', function () {
   });
   test('should set "aria-valuetext" to value when value is changed', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
-      defaultValue: 10
+      defaultValue: 10,
+      showMinMax: true
     }));
     var slider = _react.screen.getByRole('slider');
     focus(slider);

package/Spinner/Spinner.d.ts

@@ -37,8 +37,10 @@ export class SpinnerBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, SpinnerBaseProps>
 > {}
 
-export interface SpinnerProps
-  extends Merge<SpinnerBaseProps, SpinnerDecoratorProps> {
+export interface SpinnerProps extends Merge<
+  SpinnerBaseProps,
+  SpinnerDecoratorProps
+> {
   /**
  * Determines how far the click-blocking should extend.
  * 
@@ -55,8 +57,7 @@ export class Spinner extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, SpinnerProps>
 > {}
 
-export interface SpinnerDecoratorProps
-  extends limestone_Skinnable_SkinnableProps {}
+export interface SpinnerDecoratorProps extends limestone_Skinnable_SkinnableProps {}
 export function SpinnerDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & SpinnerDecoratorProps>;

package/Spinner/Spinner.module.css

@@ -60,7 +60,7 @@
   border-radius: 20.8125rem;
   width: 2rem;
   height: 2rem;
-  padding: 0.5rem;
+  padding: var(--primitive-spacing-24);
   margin-left: auto;
   margin-right: auto;
 }
@@ -135,7 +135,7 @@
 :global(.enact-locale-non-latin) .spinner .client {
   font-family: "Limestone";
   font-weight: var(--primitive-font-weight-light);
-  font-size: 1.125rem;
+  font-size: var(--primitive-font-size-54);
   font-style: normal;
 }
 :global(.enact-locale-km) .spinner .client {
@@ -175,7 +175,7 @@
   height: 1rem;
 }
 .spinner.small .bg {
-  padding: 0.25rem;
+  padding: var(--primitive-spacing-12);
 }
 .spinner.small .decorator {
   -webkit-mask-image: radial-gradient(transparent 0.35417rem, black 0.375rem);
@@ -206,7 +206,7 @@
   color: var(--semantic-color-on-background-sub);
 }
 .spinner:global(.neutral) .bg {
-  background-color: var(--semantic-color-surface-default);
+  background-color: var(--semantic-color-surface-spinner);
 }
 .spinner:global(.neutral) .decorator {
   background: conic-gradient(color(from var(--semantic-color-on-background-main) srgb r g b / 0.2) 57.5%, var(--semantic-color-on-background-main) 100%);
@@ -227,7 +227,7 @@
   color: var(--semantic-color-on-background-sub);
 }
 :global(.enact-a11y-high-contrast) .spinner:global(.neutral):global(.highContrast) .bg {
-  background-color: var(--semantic-color-surface-default);
+  background-color: var(--semantic-color-surface-spinner);
 }
 :global(.enact-a11y-high-contrast) .spinner:global(.neutral):global(.highContrast) .decorator {
   background: conic-gradient(color(from var(--semantic-color-on-background-main) srgb r g b / 0.2) 57.5%, var(--semantic-color-on-background-main) 100%);
@@ -248,7 +248,7 @@
   color: var(--semantic-color-on-background-sub);
 }
 .spinner:global(.light) .bg {
-  background-color: var(--semantic-color-surface-default);
+  background-color: var(--semantic-color-surface-spinner);
 }
 .spinner:global(.light) .decorator {
   background: conic-gradient(color(from var(--semantic-color-on-background-main) srgb r g b / 0.2) 57.5%, var(--semantic-color-on-background-main) 100%);
@@ -272,7 +272,7 @@
   color: var(--semantic-color-on-background-sub);
 }
 .spinner:global(.game) .bg {
-  background-color: var(--semantic-color-surface-default);
+  background-color: var(--semantic-color-surface-spinner);
 }
 .spinner:global(.game) .decorator {
   background: conic-gradient(color(from var(--semantic-color-on-background-main) srgb r g b / 0.2) 57.5%, var(--semantic-color-on-background-main) 100%);
@@ -295,7 +295,7 @@
   color: var(--semantic-color-on-background-sub);
 }
 :global(.green) .spinner:global(.game) .bg {
-  background-color: var(--semantic-color-surface-default);
+  background-color: var(--semantic-color-surface-spinner);
 }
 :global(.green) .spinner:global(.game) .decorator {
   background: conic-gradient(color(from var(--semantic-color-on-background-main) srgb r g b / 0.2) 57.5%, var(--semantic-color-on-background-main) 100%);
@@ -318,7 +318,7 @@
   color: var(--semantic-color-on-background-sub);
 }
 :global(.orange) .spinner:global(.game) .bg {
-  background-color: var(--semantic-color-surface-default);
+  background-color: var(--semantic-color-surface-spinner);
 }
 :global(.orange) .spinner:global(.game) .decorator {
   background: conic-gradient(color(from var(--semantic-color-on-background-main) srgb r g b / 0.2) 57.5%, var(--semantic-color-on-background-main) 100%);

package/Steps/Steps.d.ts

@@ -100,14 +100,15 @@ export class StepsBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, StepsBaseProps>
 > {}
 
-export interface StepsDecoratorProps
-  extends limestone_Skinnable_SkinnableProps {}
+export interface StepsDecoratorProps extends limestone_Skinnable_SkinnableProps {}
 export function StepsDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & StepsDecoratorProps>;
 
-export interface StepsProps
-  extends Merge<StepsBaseProps, StepsDecoratorProps> {}
+export interface StepsProps extends Merge<
+  StepsBaseProps,
+  StepsDecoratorProps
+> {}
 /**
  * A full-featured Limestone-styled step component.
  */

package/Steps/Steps.js

@@ -15,7 +15,8 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 var _Skinnable = _interopRequireDefault(require("../Skinnable"));
 var _StepsModule = _interopRequireDefault(require("./Steps.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["css", "iconComponent", "size", "steps"];
+var _excluded = ["className", "css"],
+  _excluded2 = ["css", "iconComponent", "size", "steps"];
 /**
  * Provides Limestone styled component to indicate progress along a continuum.
  *
@@ -40,11 +41,14 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 var PageIndicator = function PageIndicator(_ref) {
   var className = _ref.className,
-    css = _ref.css;
+    css = _ref.css,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  delete rest.children;
+  delete rest.size;
   var mergedClasses = (0, _classnames["default"])(css.pageIndicator, className);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread({
     className: mergedClasses
-  });
+  }, rest));
 };
 
 /**
@@ -258,7 +262,7 @@ var StepsBase = exports.StepsBase = (0, _kind["default"])({
       iconComponent = _ref4.iconComponent,
       size = _ref4.size,
       steps = _ref4.steps,
-      rest = _objectWithoutProperties(_ref4, _excluded);
+      rest = _objectWithoutProperties(_ref4, _excluded2);
     delete rest.current;
     delete rest.currentIcon;
     delete rest.futureIcon;

package/Switch/Switch.d.ts

@@ -29,17 +29,18 @@ export class SwitchBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, SwitchBaseProps>
 > {}
 
-export interface SwitchDecoratorProps
-  extends Merge<
-    ui_Toggleable_ToggleableProps,
-    spotlight_Spottable_SpottableProps
-  > {}
+export interface SwitchDecoratorProps extends Merge<
+  ui_Toggleable_ToggleableProps,
+  spotlight_Spottable_SpottableProps
+> {}
 export function SwitchDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & SwitchDecoratorProps>;
 
-export interface SwitchProps
-  extends Merge<SwitchBaseProps, SwitchDecoratorProps> {}
+export interface SwitchProps extends Merge<
+  SwitchBaseProps,
+  SwitchDecoratorProps
+> {}
 /**
  * A Limestone-styled component that looks like a toggle switch.
  * 

package/Switch/Switch.module.css

@@ -1,9 +1,92 @@
+/* ---------------------------------------
+Animations
+------------------------------------------ */
+:root {
+  /* Bounce
+	------------------------------------------ */
+  --lime-bounce-motion: var(--lime-bounce-animation-name) var(--lime-bounce-motion-duration) var(--lime-bounce-motion-easing-function);
+  --lime-check-motion: var(--lime-check-animation-name) var(--lime-check-motion-duration) forwards;
+}
+/* ---------------------------------------
+Animations properties
+------------------------------------------ */
+:root {
+  /* ---------------------------------------
+	Durations
+	------------------------------------------ */
+  --lime-motion-default-duration: 200ms;
+  --lime-motion-medium1-duration: 250ms;
+  --lime-motion-medium2-duration: 300ms;
+  --lime-motion-medium4-duration: 400ms;
+  --lime-motion-long2-duration: 500ms;
+  --lime-bounce-motion-duration: var(--lime-motion-medium2-duration);
+  --lime-check-motion-duration: var(--lime-motion-medium4-duration);
+  --lime-focus-in-motion-duration: var(--lime-motion-medium2-duration);
+  --lime-focus-out-motion-duration: var(--lime-motion-long2-duration);
+  --lime-press-motion-duration: var(--lime-motion-medium1-duration);
+  --lime-release-motion-duration: var(--lime-motion-medium2-duration);
+  /* ---------------------------------------
+	Easing functions
+	------------------------------------------ */
+  --lime-default-motion-easing-function: ease-out;
+  --lime-EIO-motion-easing-function: cubic-bezier(0.2, 0, 0.05, 1);
+  --lime-EO-motion-easing-function: cubic-bezier(0.1, 0.6, 0.15, 1);
+  --lime-bounce-motion-easing-function: var(--lime-default-motion-easing-function);
+  --lime-focus-in-motion-easing-function: var(--lime-EIO-motion-easing-function);
+  --lime-focus-out-motion-easing-function: var(--lime-EO-motion-easing-function);
+  --lime-press-motion-easing-function: var(--lime-EIO-motion-easing-function);
+  --lime-release-motion-easing-function: var(--lime-EO-motion-easing-function);
+  /* ---------------------------------------
+	Keyframes names
+	------------------------------------------ */
+  --lime-bounce-animation-name: bounce-motion;
+  --lime-check-animation-name: check-motion;
+  /* ---------------------------------------
+	Keyframes values
+	------------------------------------------ */
+  --lime-bounce-motion-offset-default-value: 0.125rem;
+}
+/* ---------------------------------------
+Keyframes
+------------------------------------------ */
+/* Bounce
+	------------------------------------------ */
+@keyframes bounce-motion {
+  0% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(var(--lime-bounce-motion-offset-value, --lime-bounce-motion-offset-default-value));
+  }
+  80% {
+    transform: translateX(calc(var(--lime-bounce-motion-offset-value, --lime-bounce-motion-offset-default-value) / -2));
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+/* Check
+	------------------------------------------ */
+@keyframes check-motion {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+/* ---------------------------------------
+Motion Variables
+------------------------------------------ */
+/* ---------------------------------------
+Motion Mixins
+------------------------------------------ */
 .switch {
   display: inline-block;
   position: relative;
 }
 .switch .client {
-  border-radius: 0.625rem;
+  border-radius: var(--primitive-radius-30);
   width: 2.5rem;
   height: 1.25rem;
   position: relative;
@@ -15,7 +98,7 @@
   visibility: visible;
   height: 1rem;
   width: 1rem;
-  font-size: 1.75rem;
+  font-size: var(--primitive-font-size-84);
   line-height: 1.25rem;
   margin: 0;
   position: absolute;
@@ -32,15 +115,19 @@
 .switch.animated .icon {
   transition: left 200ms, background-color 200ms;
 }
+.switch.animated.selected .icon {
+  animation: var(--lime-bounce-animation-name) var(--lime-bounce-motion-duration) var(--lime-bounce-motion-easing-function);
+  --lime-bounce-motion-offset-value: var(--lime-bounce-motion-offset-default-value);
+}
 .switch:global(.spottable) {
-  margin: 0.75rem;
+  margin: var(--primitive-spacing-36);
 }
 .switch:global(.spottable) .bg {
   position: absolute;
-  top: -0.75rem;
-  right: -0.75rem;
-  bottom: -0.75rem;
-  left: -0.75rem;
+  top: calc(var(--primitive-spacing-36) * -1);
+  right: calc(var(--primitive-spacing-36) * -1);
+  bottom: calc(var(--primitive-spacing-36) * -1);
+  left: calc(var(--primitive-spacing-36) * -1);
   z-index: -1;
 }
 .switch:global(.neutral) .client {
@@ -71,7 +158,7 @@
   border-radius: var(--semantic-radius-button);
 }
 .switch:global(.neutral):global(.spottable) .bg {
-  border-radius: 0.5rem;
+  border-radius: var(--primitive-radius-24);
   will-change: box-shadow, box-shadow;
   opacity: 0;
   background-color: var(--semantic-color-surface-default-focused);
@@ -156,7 +243,7 @@
   border-radius: var(--semantic-radius-button);
 }
 :global(.enact-a11y-high-contrast) .switch:global(.neutral):global(.highContrast):global(.spottable) .bg {
-  border-radius: 0.5rem;
+  border-radius: var(--primitive-radius-24);
   will-change: box-shadow, box-shadow;
   opacity: 0;
   background-color: var(--semantic-color-surface-default-focused);
@@ -241,7 +328,7 @@
   border-radius: var(--semantic-radius-button);
 }
 .switch:global(.light):global(.spottable) .bg {
-  border-radius: 0.5rem;
+  border-radius: var(--primitive-radius-24);
   will-change: box-shadow, box-shadow;
   opacity: 0;
   background-color: var(--semantic-color-surface-default-focused);
@@ -331,7 +418,7 @@
   border-radius: 0;
 }
 .switch:global(.game):global(.spottable) .bg {
-  border-radius: 0.5rem;
+  border-radius: var(--primitive-radius-24);
   will-change: box-shadow, box-shadow;
   opacity: 0;
   background-color: var(--semantic-color-surface-default-focused);
@@ -420,7 +507,7 @@
   border-radius: 0;
 }
 :global(.green) .switch:global(.game):global(.spottable) .bg {
-  border-radius: 0.5rem;
+  border-radius: var(--primitive-radius-24);
   will-change: box-shadow, box-shadow;
   opacity: 0;
   background-color: var(--semantic-color-surface-default-focused);
@@ -509,7 +596,7 @@
   border-radius: 0;
 }
 :global(.orange) .switch:global(.game):global(.spottable) .bg {
-  border-radius: 0.5rem;
+  border-radius: var(--primitive-radius-24);
   will-change: box-shadow, box-shadow;
   opacity: 0;
   background-color: var(--semantic-color-surface-default-focused);

package/SwitchItem/SwitchItem.d.ts

@@ -7,8 +7,10 @@ import * as React from "react";
 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 SwitchItemBaseProps
-  extends Omit<limestone_Item_ItemProps, "iconComponent"> {
+export interface SwitchItemBaseProps extends Omit<
+  limestone_Item_ItemProps,
+  "iconComponent"
+> {
   /**
  * Customizes the component by mapping the supplied collection of CSS class names to the
 corresponding internal elements and states of this component.
@@ -34,14 +36,15 @@ export class SwitchItemBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, SwitchItemBaseProps>
 > {}
 
-export interface SwitchItemDecoratorProps
-  extends ui_Toggleable_ToggleableProps {}
+export interface SwitchItemDecoratorProps extends ui_Toggleable_ToggleableProps {}
 export function SwitchItemDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & SwitchItemDecoratorProps>;
 
-export interface SwitchItemProps
-  extends Merge<SwitchItemBaseProps, SwitchItemDecoratorProps> {}
+export interface SwitchItemProps extends Merge<
+  SwitchItemBaseProps,
+  SwitchItemDecoratorProps
+> {}
 /**
  * A Limestone-styled item with a switch component.
  * 

package/TabLayout/RefocusDecorator.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
 var _TabGroupModule = _interopRequireDefault(require("./TabGroup.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["blockCollapseOnPortrait", "collapsed", "index", "onCollapse", "onTabAnimationEnd", "orientation", "spotlightId"];
+var _excluded = ["blockCollapseOnPortrait", "blockExpandOnLandscape", "collapsed", "index", "onCollapse", "onExpand", "onTabAnimationEnd", "orientation", "spotlightId"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -62,9 +62,11 @@ var RefocusDecorator = exports.RefocusDecorator = function RefocusDecorator(Wrap
   // eslint-disable-next-line no-shadow
   function RefocusDecorator(_ref) {
     var blockCollapseOnPortrait = _ref.blockCollapseOnPortrait,
+      blockExpandOnLandscape = _ref.blockExpandOnLandscape,
       collapsed = _ref.collapsed,
       index = _ref.index,
       onCollapse = _ref.onCollapse,
+      onExpand = _ref.onExpand,
       onTabAnimationEnd = _ref.onTabAnimationEnd,
       orientation = _ref.orientation,
       spotlightId = _ref.spotlightId,
@@ -74,7 +76,7 @@ var RefocusDecorator = exports.RefocusDecorator = function RefocusDecorator(Wrap
       }),
       generateId = _useId.generateId;
     var screenOrientation = useScreenOrientation();
-    var screenOrientationRef = (0, _react.useRef)(null);
+    var screenOrientationRef = (0, _react.useRef)('landscape');
 
     // generate an id for the component (and a derived id for the tabs) so we can refocus them
     // generating a different ID by orientation so swapping orientations doesn't clear container
@@ -97,18 +99,21 @@ var RefocusDecorator = exports.RefocusDecorator = function RefocusDecorator(Wrap
       });
     }, [collapsed, orientation, spotlightId]);
     (0, _react.useEffect)(function () {
-      if (!blockCollapseOnPortrait && screenOrientationRef.current !== screenOrientation) {
-        if (screenOrientation === 'portrait') {
-          var currentFocusedElement = document.querySelector(':focus'),
-            tabsSpotlightId = getTabsSpotlightId(spotlightId, false),
-            tabsContainer = getContainerNode(tabsSpotlightId);
-          if (tabsContainer && !tabsContainer.contains(currentFocusedElement)) {
+      if (screenOrientationRef.current !== screenOrientation) {
+        var currentFocusedElement = document.querySelector(':focus'),
+          tabsSpotlightId = getTabsSpotlightId(spotlightId, false),
+          tabsContainer = getContainerNode(tabsSpotlightId);
+        if (tabsContainer && !tabsContainer.contains(currentFocusedElement)) {
+          if (!blockCollapseOnPortrait && screenOrientation === 'portrait') {
             onCollapse();
           }
+          if (!blockExpandOnLandscape && screenOrientation === 'landscape') {
+            onExpand();
+          }
         }
         screenOrientationRef.current = screenOrientation;
       }
-    }, [blockCollapseOnPortrait, onCollapse, screenOrientation, spotlightId]);
+    }, [blockCollapseOnPortrait, blockExpandOnLandscape, onCollapse, onExpand, screenOrientation, spotlightId]);
     var handleTabAnimationEnd = (0, _react.useCallback)(function (ev) {
       if (onTabAnimationEnd) {
         onTabAnimationEnd(ev);
@@ -125,6 +130,7 @@ var RefocusDecorator = exports.RefocusDecorator = function RefocusDecorator(Wrap
       collapsed: collapsed,
       index: index,
       onCollapse: onCollapse,
+      onExpand: onExpand,
       onTabAnimationEnd: handleTabAnimationEnd,
       orientation: orientation,
       spotlightId: spotlightId

package/TabLayout/TabGroup.js

@@ -59,7 +59,7 @@ var TabBase = (0, _kind["default"])({
   styles: {
     css: _TabGroupModule["default"],
     className: 'tab',
-    publicClassNames: ['bg', 'button', 'client', 'selected', 'tab', 'vertical']
+    publicClassNames: ['bg', 'button', 'client', 'icon', 'selected', 'tab', 'vertical']
   },
   handlers: {
     onClick: (0, _handle["default"])((0, _handle.forward)('onClick'), (0, _handle.not)((0, _handle.forProp)('disabled', true)), (0, _handle.forwardCustom)('onTabClick', function (ev, _ref) {
@@ -196,7 +196,7 @@ var TabGroupBase = (0, _kind["default"])({
   styles: {
     css: _TabGroupModule["default"],
     className: 'tabGroup',
-    publicClassNames: ['bg', 'button', 'client', 'selected', 'tab', 'tabGroup', 'vertical']
+    publicClassNames: ['bg', 'button', 'client', 'icon', 'selected', 'tab', 'tabGroup', 'vertical']
   },
   computed: {
     className: function className(_ref6) {
@@ -313,6 +313,7 @@ var TabGroupBase = (0, _kind["default"])({
       noScrollByWheel: collapsed,
       onScrollStop: onScrollStop,
       scrollbarTrackCss: _TabGroupModule["default"],
+      scrollToContentContainerOnFocus: false,
       spotlightDisabled: spotlightDisabled,
       spotlightId: spotlightId,
       verticalScrollbar: collapsed ? 'hidden' : 'auto'

package/TabLayout/TabGroup.module.css

@@ -132,8 +132,8 @@
   gap: var(--primitive-spacing-36);
 }
 .tabGroup.vertical .scrollbarTrack {
-  margin-top: 0.75rem;
-  margin-bottom: 0.75rem;
+  margin-top: var(--primitive-spacing-36);
+  margin-bottom: var(--primitive-spacing-36);
   height: calc(100% - 72px);
 }
 .tabGroup.vertical.collapsed:has(.noIcons) {

package/TabLayout/TabLayout.d.ts

@@ -56,6 +56,12 @@ export interface TabLayoutProps {
    * Only applies to `orientation="vertical".
    */
   blockCollapseOnPortrait?: boolean;
+  /**
+   * Prevents the tab list from automatically expand when the screen orientation changes to landscape mode.
+   *
+   * Only applies to `orientation="vertical".
+   */
+  blockExpandOnLandscape?: boolean;
   /**
    * Collection of    to render.
    */

package/TabLayout/TabLayout.js

@@ -130,6 +130,15 @@ var TabLayoutBase = exports.TabLayoutBase = (0, _kind["default"])({
      * @public
      */
     blockCollapseOnPortrait: _propTypes["default"].bool,
+    /**
+     * Prevents the tab list from automatically expand when the screen orientation changes to landscape mode.
+     *
+     * Only applies to `orientation="vertical".
+     *
+     * @type {Boolean}
+     * @public
+     */
+    blockExpandOnLandscape: _propTypes["default"].bool,
     /**
      * Collection of {@link limestone/TabLayout.Tab|Tabs} to render.
      *
@@ -331,7 +340,7 @@ var TabLayoutBase = exports.TabLayoutBase = (0, _kind["default"])({
   styles: {
     css: _TabLayoutModule["default"],
     className: 'tabLayout',
-    publicClassNames: ['bg', 'button', 'client', 'collapsed', 'content', 'selected', 'tab', 'tabGroup', 'tabLayout', 'tabs', 'tabsExpanded', 'vertical']
+    publicClassNames: ['bg', 'button', 'client', 'collapsed', 'content', 'icon', 'selected', 'tab', 'tabGroup', 'tabLayout', 'tabs', 'tabsExpanded', 'vertical']
   },
   handlers: {
     onKeyDown: function onKeyDown(ev, props) {
@@ -559,6 +568,7 @@ var TabLayoutBase = exports.TabLayoutBase = (0, _kind["default"])({
       rest = _objectWithoutProperties(_ref12, _excluded);
     delete rest.anchorTo;
     delete rest.blockCollapseOnPortrait;
+    delete rest.blockExpandOnLandscape;
     delete rest.onExpand;
     delete rest.offset;
     delete rest.onTabAnimationEnd;

package/TabLayout/TabLayout.module.css

@@ -12,6 +12,10 @@
 .tabLayout.collapsed .tabGroup .tab.vertical.button.selected .bg {
   /* Override TabLayout */
 }
+.tabLayout.collapsed .tabGroup .tab.vertical.button.selected .icon,
+.tabLayout.collapsed .tabGroup .tab.vertical.button.selected .client {
+  /* Override TabLayout */
+}
 .tabLayout.anchorEnd,
 .tabLayout.anchorRight {
   flex-direction: row-reverse;
@@ -92,10 +96,24 @@
 .tabLayout .tabGroup .tab.vertical.button.selected .bg {
   /* Override TabLayout */
 }
+.tabLayout .tabGroup .tab.vertical.button.selected .icon,
+.tabLayout .tabGroup .tab.vertical.button.selected .client {
+  /* Override TabLayout */
+}
 :global(.spotlight-input-key) .tabLayout .tabGroup .tab.vertical.button:global(.spottable):focus .bg,
 :global(.spotlight-input-mouse) .tabLayout .tabGroup .tab.vertical.button:global(.spottable):focus .bg {
   /* Override TabLayout */
 }
+:global(.spotlight-input-key) .tabLayout .tabGroup .tab.vertical.button:global(.spottable):focus .icon,
+:global(.spotlight-input-mouse) .tabLayout .tabGroup .tab.vertical.button:global(.spottable):focus .icon,
+:global(.spotlight-input-key) .tabLayout .tabGroup .tab.vertical.button:global(.spottable):focus .client,
+:global(.spotlight-input-mouse) .tabLayout .tabGroup .tab.vertical.button:global(.spottable):focus .client {
+  /* Override TabLayout */
+}
 :global(.spotlight-input-touch) .tabLayout .tabGroup .tab.vertical.button:global(.spottable):active .bg {
   /* Override TabLayout */
 }
+:global(.spotlight-input-touch) .tabLayout .tabGroup .tab.vertical.button:global(.spottable):active .icon,
+:global(.spotlight-input-touch) .tabLayout .tabGroup .tab.vertical.button:global(.spottable):active .client {
+  /* Override TabLayout */
+}