@enact/limestone 1.3.0

package/TabLayout/TabGroup.js

@@ -0,0 +1,377 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.TabGroup = void 0;
+var _handle = _interopRequireWildcard(require("@enact/core/handle"));
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _I18nDecorator = require("@enact/i18n/I18nDecorator");
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
+var _SpotlightContainerDecorator = _interopRequireDefault(require("@enact/spotlight/SpotlightContainerDecorator"));
+var _Group = _interopRequireDefault(require("@enact/ui/Group"));
+var _IdProvider = _interopRequireDefault(require("@enact/ui/internal/IdProvider"));
+var _Layout = require("@enact/ui/Layout");
+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 _react = require("react");
+var _$L = _interopRequireDefault(require("../internal/$L"));
+var _DebounceDecorator = _interopRequireDefault(require("../internal/DebounceDecorator"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _Scroller = require("../Scroller");
+var _Sprite = _interopRequireDefault(require("../Sprite"));
+var _TabGroupModule = _interopRequireDefault(require("./TabGroup.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["buttonSize", "index", "children", "collapsed", "css", "primaryIndex", "primaryTabSpotlightId", "orientation"],
+  _excluded2 = ["css", "collapsed", "scrollable", "id", "noIcons", "onBlur", "onBlurList", "onFocus", "onFocusTab", "onScrollStop", "onSelect", "orientation", "primaryIndex", "scrollPosition", "selectedIndex", "size", "spotlightId", "spotlightDisabled", "tabs", "tabsDisabled", "tabsSpotlightDisabled"],
+  _excluded3 = ["icon", "title", "tabKey", "sprite"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return 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; }
+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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var TabBase = (0, _kind["default"])({
+  name: 'Tab',
+  propTypes: {
+    buttonSize: _propTypes["default"].string,
+    collapsed: _propTypes["default"].bool,
+    css: _propTypes["default"].object,
+    icon: _propTypes["default"].string,
+    index: _propTypes["default"].number,
+    noIcons: _propTypes["default"].bool,
+    onFocusTab: _propTypes["default"].func,
+    onTabClick: _propTypes["default"].func,
+    orientation: _propTypes["default"].string,
+    selected: _propTypes["default"].bool,
+    sprite: _propTypes["default"].object,
+    stopped: _propTypes["default"].bool
+  },
+  defaultProps: {
+    orientation: 'vertical'
+  },
+  styles: {
+    css: _TabGroupModule["default"],
+    className: 'tab',
+    publicClassNames: ['bg', 'button', 'client', '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) {
+      var index = _ref.index;
+      return {
+        selected: index
+      };
+    })),
+    onFocus: (0, _handle["default"])((0, _handle.forward)('onFocus'), (0, _handle.not)((0, _handle.forProp)('disabled', true)), function () {
+      return !_spotlight["default"].getPointerMode();
+    }, (0, _handle.forwardCustom)('onFocusTab', function (ev, _ref2) {
+      var index = _ref2.index;
+      return {
+        selected: index
+      };
+    }))
+  },
+  computed: {
+    className: function className(_ref3) {
+      var collapsed = _ref3.collapsed,
+        noIcons = _ref3.noIcons,
+        orientation = _ref3.orientation,
+        styler = _ref3.styler;
+      return styler.append({
+        collapsed: collapsed,
+        noIcons: noIcons
+      }, orientation);
+    },
+    iconComponent: function iconComponent(_ref4) {
+      var sprite = _ref4.sprite,
+        stopped = _ref4.stopped;
+      if (sprite) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Sprite["default"], _objectSpread({
+          stopped: stopped
+        }, sprite));
+      }
+    }
+  },
+  render: function render(_ref5) {
+    var buttonSize = _ref5.buttonSize,
+      index = _ref5.index,
+      children = _ref5.children,
+      collapsed = _ref5.collapsed,
+      css = _ref5.css,
+      primaryIndex = _ref5.primaryIndex,
+      primaryTabSpotlightId = _ref5.primaryTabSpotlightId,
+      orientation = _ref5.orientation,
+      rest = _objectWithoutProperties(_ref5, _excluded);
+    delete rest.noIcons;
+    delete rest.onFocusTab;
+    delete rest.onTabClick;
+    delete rest.stopped;
+    delete rest.sprite;
+    if (collapsed) children = null;
+    if (orientation === 'horizontal') delete rest.icon;
+    var commonProps = {
+      backgroundOpacity: 'transparent',
+      children: children,
+      collapsable: true,
+      css: css,
+      focusEffect: 'static',
+      minWidth: false,
+      role: 'tab',
+      spotlightId: index === primaryIndex ? primaryTabSpotlightId : null
+    };
+    switch (orientation) {
+      // Horizontal Cell sizing can auto-size width or be set to a finite value, stretching the Button.
+      case 'horizontal':
+        {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], _objectSpread(_objectSpread({
+            minWidth: false,
+            size: buttonSize
+          }, rest), commonProps));
+        }
+      case 'vertical':
+        {
+          // Vertical sizing depends on Button establishing the dimensions of the Cell.
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], _objectSpread(_objectSpread({}, rest), commonProps));
+        }
+    }
+  }
+});
+var Tab = (0, _Toggleable["default"])({
+  prop: 'stopped',
+  activate: 'onBlur',
+  deactivate: 'onFocus'
+}, (0, _Skinnable["default"])(TabBase));
+var spotlightContainerConfig = {
+  // using default-element so we always land on the selected tab in order to avoid changing
+  // the view when re-entering the tab group
+  defaultElement: ".".concat(_TabGroupModule["default"].selected),
+  enterTo: 'default-element',
+  partition: true,
+  // When swapping from unscrolled to scrolled tab group, the container config is lost so this
+  // preserves it across unmounts / remounts
+  preserveId: true
+};
+var Scroller = (0, _Skinnable["default"])((0, _SpotlightContainerDecorator["default"])(_objectSpread(_objectSpread({}, spotlightContainerConfig), {}, {
+  overflow: true
+}), (0, _I18nDecorator.I18nContextDecorator)({
+  rtlProp: 'rtl'
+}, _Scroller.ScrollerBase)));
+var GroupContainer = (0, _SpotlightContainerDecorator["default"])(spotlightContainerConfig, _Group["default"]);
+
+/**
+ * A group of tabs
+ *
+ * @class TabGroup
+ * @memberof limestone/TabLayout
+ * @ui
+ * @private
+ */
+var TabGroupBase = (0, _kind["default"])({
+  name: 'TabGroup',
+  functional: true,
+  propTypes: /** @lends limestone/TabGroup.TabGroup.prototype */{
+    tabs: _propTypes["default"].array.isRequired,
+    collapsed: _propTypes["default"].bool,
+    css: _propTypes["default"].object,
+    id: _propTypes["default"].string,
+    onBlur: _propTypes["default"].func,
+    onBlurList: _propTypes["default"].func,
+    onFocus: _propTypes["default"].func,
+    onFocusTab: _propTypes["default"].func,
+    onScrollStop: _propTypes["default"].func,
+    onSelect: _propTypes["default"].func,
+    orientation: _propTypes["default"].string,
+    scrollPosition: _propTypes["default"].object,
+    selectedIndex: _propTypes["default"].number,
+    size: _propTypes["default"].string,
+    spotlightDisabled: _propTypes["default"].bool,
+    spotlightId: _propTypes["default"].string
+  },
+  styles: {
+    css: _TabGroupModule["default"],
+    className: 'tabGroup',
+    publicClassNames: ['bg', 'button', 'client', 'selected', 'tab', 'tabGroup', 'vertical']
+  },
+  computed: {
+    className: function className(_ref6) {
+      var collapsed = _ref6.collapsed,
+        scrollable = _ref6.scrollable,
+        orientation = _ref6.orientation,
+        styler = _ref6.styler;
+      return styler.append({
+        collapsed: collapsed,
+        scrollable: scrollable
+      }, orientation);
+    },
+    // check if there's no tab icons
+    noIcons: function noIcons(_ref7) {
+      var collapsed = _ref7.collapsed,
+        orientation = _ref7.orientation,
+        tabs = _ref7.tabs;
+      return orientation === 'vertical' && collapsed && tabs.filter(function (tab) {
+        return !tab.icon && !tab.sprite;
+      }).length;
+    },
+    tabsDisabled: function tabsDisabled(_ref8) {
+      var tabs = _ref8.tabs;
+      return tabs.find(function (tab) {
+        return tab && !tab.disabled;
+      }) == null;
+    },
+    tabsSpotlightDisabled: function tabsSpotlightDisabled(_ref9) {
+      var spotlightDisabled = _ref9.spotlightDisabled,
+        tabs = _ref9.tabs;
+      return spotlightDisabled || tabs.find(function (tab) {
+        return tab && !tab.spotlightDisabled;
+      }) == null;
+    }
+  },
+  render: function render(_ref0) {
+    var css = _ref0.css,
+      collapsed = _ref0.collapsed,
+      scrollable = _ref0.scrollable,
+      id = _ref0.id,
+      noIcons = _ref0.noIcons,
+      onBlur = _ref0.onBlur,
+      onBlurList = _ref0.onBlurList,
+      onFocus = _ref0.onFocus,
+      onFocusTab = _ref0.onFocusTab,
+      onScrollStop = _ref0.onScrollStop,
+      onSelect = _ref0.onSelect,
+      orientation = _ref0.orientation,
+      primaryIndex = _ref0.primaryIndex,
+      scrollPosition = _ref0.scrollPosition,
+      selectedIndex = _ref0.selectedIndex,
+      size = _ref0.size,
+      spotlightId = _ref0.spotlightId,
+      spotlightDisabled = _ref0.spotlightDisabled,
+      tabs = _ref0.tabs,
+      tabsDisabled = _ref0.tabsDisabled,
+      tabsSpotlightDisabled = _ref0.tabsSpotlightDisabled,
+      rest = _objectWithoutProperties(_ref0, _excluded2);
+    delete rest.children;
+    var primaryTabSpotlightId = "".concat(spotlightId, "-primary-tab");
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var itemProps = (0, _react.useMemo)(function () {
+      return {
+        buttonSize: size,
+        css: css,
+        collapsed: collapsed,
+        orientation: orientation,
+        primaryIndex: collapsed ? null : primaryIndex,
+        primaryTabSpotlightId: primaryTabSpotlightId
+      };
+    }, [css, collapsed, orientation, primaryIndex, primaryTabSpotlightId, size]);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var children = (0, _react.useMemo)(function () {
+      return tabs.map(function (tab) {
+        if (tab) {
+          // eslint-disable-next-line no-shadow
+          var icon = tab.icon,
+            title = tab.title,
+            tabKey = tab.tabKey,
+            sprite = tab.sprite,
+            _rest = _objectWithoutProperties(tab, _excluded3);
+          var key = tabKey || tabKey === 0 ? tabKey : "tabs_".concat(title + (typeof icon === 'string' ? icon : ''));
+          return _objectSpread({
+            children: title,
+            defaultStopped: Boolean(sprite),
+            icon: icon,
+            key: key,
+            onFocusTab: onFocusTab,
+            sprite: sprite
+          }, _rest);
+        } else {
+          return null;
+        }
+      }).filter(function (tab) {
+        return tab != null;
+      });
+    }, [onFocusTab, tabs]);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var scrollToRef = (0, _react.useRef)(null);
+    var isHorizontal = orientation === 'horizontal';
+    var groupComponent = isHorizontal ? _Layout.Layout : 'div'; // Only horizontal needs the arrangement capabilities of `Layout`
+
+    var groupProps = scrollable ? null : {
+      spotlightId: spotlightId,
+      spotlightDisabled: spotlightDisabled
+    };
+    var scrollerProps = scrollable ? {
+      cbScrollTo: function cbScrollTo(scrollTo) {
+        scrollToRef.current = collapsed ? scrollTo : null;
+      },
+      direction: isHorizontal ? 'horizontal' : 'vertical',
+      horizontalScrollbar: 'hidden',
+      hoverToScroll: !collapsed,
+      noScrollByWheel: collapsed,
+      onScrollStop: onScrollStop,
+      scrollbarTrackCss: _TabGroupModule["default"],
+      spotlightDisabled: spotlightDisabled,
+      spotlightId: spotlightId,
+      verticalScrollbar: collapsed ? 'hidden' : 'auto'
+    } : null;
+    var Component = scrollable ? Scroller : 'div';
+    var GroupComponent = scrollable ? _Group["default"] : GroupContainer;
+    if (!scrollable) scrollToRef.current = null;
+    if (!noIcons && scrollToRef.current) {
+      scrollToRef.current({
+        animate: false,
+        position: scrollPosition
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread(_objectSpread(_objectSpread({}, rest), {}, {
+      onBlur: onBlur,
+      onFocus: onFocus
+    }, scrollerProps), {}, {
+      children: noIcons ? /*#__PURE__*/(0, _jsxRuntime.jsx)(TabBase, {
+        collapsed: true,
+        disabled: tabsDisabled,
+        icon: "list",
+        noIcons: true,
+        onSpotlightDisappear: onBlurList,
+        spotlightDisabled: tabsSpotlightDisabled
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        role: "region",
+        "aria-labelledby": "".concat(id, "_tabgroup"),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GroupComponent, _objectSpread(_objectSpread({
+          id: "".concat(id, "_tabgroup"),
+          childComponent: Tab,
+          "aria-label": "".concat(new _IString["default"]((0, _$L["default"])('{total} items in total')).format({
+            'total': tabs.length
+          })),
+          className: _TabGroupModule["default"].tabs,
+          component: groupComponent,
+          indexProp: "index",
+          itemProps: itemProps,
+          onSelect: onSelect,
+          orientation: orientation,
+          role: "tablist",
+          select: "radio",
+          selected: selectedIndex,
+          selectedProp: "selected"
+        }, groupProps), {}, {
+          children: children
+        }))
+      })
+    }));
+  }
+});
+var TabGroupDecorator = (0, _compose["default"])((0, _DebounceDecorator["default"])({
+  cancel: 'onBlur',
+  debounce: 'onFocusTab',
+  delay: 300
+}), (0, _IdProvider["default"])({
+  generateProp: null,
+  prefix: 'tg_'
+}));
+
+// Only documenting TabGroup since base is not useful for extension as-is
+var TabGroup = exports.TabGroup = TabGroupDecorator(TabGroupBase);
+var _default = exports["default"] = TabGroup;

package/TabLayout/TabGroup.module.css

@@ -0,0 +1,280 @@
+.tab {
+  font-size: var(--primitive-font-size-60);
+  margin: 0;
+}
+.tab.horizontal.button {
+  display: block;
+  height: 2.25rem;
+  width: var(--tab-width);
+  margin: 0;
+  padding-left: var(--primitive-spacing-24);
+  padding-right: var(--primitive-spacing-24);
+}
+:global(.enact-locale-right-to-left) .tab.horizontal.button {
+  padding-left: var(--primitive-spacing-24);
+  padding-right: var(--primitive-spacing-24);
+}
+.tab.horizontal.button:before {
+  right: 0;
+}
+.tab.horizontal.button.small {
+  font-size: var(--primitive-font-size-48);
+  height: 2rem;
+  line-height: 1.25rem;
+}
+.tab.vertical.button {
+  height: 3.25rem;
+  padding: var(--primitive-spacing-36) var(--primitive-spacing-48);
+}
+.tab.vertical.button.collapsed {
+  width: 3.25rem;
+}
+.tab.vertical.button.hasIcon {
+  padding: var(--primitive-spacing-30);
+}
+.tab.vertical.button.hasIcon:not(.tab.vertical.button.collapsed) {
+  padding-left: var(--primitive-spacing-30);
+  padding-right: var(--primitive-spacing-48);
+}
+:global(.enact-locale-right-to-left) .tab.vertical.button.hasIcon:not(.tab.vertical.button.collapsed) {
+  padding-left: var(--primitive-spacing-48);
+  padding-right: var(--primitive-spacing-30);
+}
+.tab.vertical.button.hasIcon:not(.tab.vertical.button.collapsed) .icon {
+  margin-left: 0;
+  margin-right: var(--primitive-spacing-30);
+}
+:global(.enact-locale-right-to-left) .tab.vertical.button.hasIcon:not(.tab.vertical.button.collapsed) .icon {
+  margin-left: var(--primitive-spacing-30);
+  margin-right: 0;
+}
+.tab.vertical.button:global(.largeText) {
+  font-size: var(--primitive-font-size-60);
+  min-width: 2.75rem;
+}
+.tab.vertical .client {
+  text-align: left;
+}
+:global(.enact-locale-right-to-left) .tab.vertical .client {
+  text-align: right;
+}
+.tab:global(.neutral).button.selected {
+  background-color: color(from var(--semantic-color-surface-default-translucent) srgb r g b / 0.1);
+}
+.tab:global(.neutral).button.selected .bg {
+  opacity: 0;
+}
+:global(.enact-a11y-high-contrast) .tab:global(.neutral):global(.highContrast).button.selected {
+  background-color: color(from var(--semantic-color-surface-default-translucent) srgb r g b / 0.1);
+}
+:global(.enact-a11y-high-contrast) .tab:global(.neutral):global(.highContrast).button.selected .bg {
+  opacity: 0;
+}
+.tab:global(.light).button.selected {
+  background-color: color(from var(--semantic-color-surface-default-translucent) srgb r g b / 0.1);
+}
+.tab:global(.light).button.selected .bg {
+  opacity: 0;
+}
+.tab:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+}
+.tab:global(.game).button.selected {
+  background-color: color(from var(--semantic-color-surface-default-translucent) srgb r g b / 0.1);
+}
+.tab:global(.game).button.selected .bg {
+  opacity: 0;
+}
+:global(.green) .tab:global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+}
+:global(.green) .tab:global(.game).button.selected {
+  background-color: color(from var(--semantic-color-surface-default-translucent) srgb r g b / 0.1);
+}
+:global(.green) .tab:global(.game).button.selected .bg {
+  opacity: 0;
+}
+:global(.orange) .tab:global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+}
+:global(.orange) .tab:global(.game).button.selected {
+  background-color: color(from var(--semantic-color-surface-default-translucent) srgb r g b / 0.1);
+}
+:global(.orange) .tab:global(.game).button.selected .bg {
+  opacity: 0;
+}
+.tabGroup .tabs {
+  display: flex;
+}
+.tabGroup.horizontal {
+  margin-left: calc((1 - var(--scrollable)) * var(--offset));
+  padding: var(--primitive-spacing-12);
+}
+.tabGroup.horizontal:not(.scrollable) {
+  width: var(--tabs-width);
+}
+.tabGroup.horizontal .tabs {
+  gap: var(--primitive-spacing-48);
+  width: calc(var(--tabs-width) - var(--scrollable) * var(--offset) * 2);
+}
+.tabGroup.vertical {
+  padding: var(--primitive-spacing-36);
+}
+.tabGroup.vertical.scrollable {
+  height: 33rem;
+}
+.tabGroup.vertical .tabs {
+  flex-direction: column;
+  gap: var(--primitive-spacing-36);
+}
+.tabGroup.vertical .scrollbarTrack {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+  height: calc(100% - 72px);
+}
+.tabGroup.vertical.collapsed:has(.noIcons) {
+  height: fit-content;
+}
+:global(.neutral) .tabGroup {
+  background-color: color(from var(--semantic-color-surface-default-group) srgb r g b / 0.1);
+  border-radius: var(--semantic-radius-container);
+}
+:global(.neutral) .tabGroup > :first-child {
+  background: transparent;
+}
+:global(.neutral) .tabGroup .tab.button.selected .icon,
+:global(.neutral) .tabGroup .tab.button.selected .client {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.neutral) .tabGroup .tab.vertical.button.selected .bg {
+  /* Override TabLayout */
+}
+:global(.spotlight-input-key) :global(.neutral) .tabGroup .tab.vertical.button:global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) :global(.neutral) .tabGroup .tab.vertical.button:global(.spottable):focus .bg {
+  /* Override TabLayout */
+}
+:global(.spotlight-input-touch) :global(.neutral) .tabGroup .tab.vertical.button:global(.spottable):active .bg {
+  /* Override TabLayout */
+}
+:global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .tabGroup {
+  background-color: color(from var(--semantic-color-surface-default-group) srgb r g b / 0.1);
+  border-radius: var(--semantic-radius-container);
+}
+:global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .tabGroup > :first-child {
+  background: transparent;
+}
+:global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .tabGroup .tab.button.selected .icon,
+:global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .tabGroup .tab.button.selected .client {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .tabGroup .tab.vertical.button.selected .bg {
+  /* Override TabLayout */
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .tabGroup .tab.vertical.button:global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .tabGroup .tab.vertical.button:global(.spottable):focus .bg {
+  /* Override TabLayout */
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .tabGroup .tab.vertical.button:global(.spottable):active .bg {
+  /* Override TabLayout */
+}
+:global(.light) .tabGroup {
+  background-color: color(from var(--semantic-color-surface-default-group) srgb r g b / 0.1);
+  border-radius: var(--semantic-radius-container);
+}
+:global(.light) .tabGroup > :first-child {
+  background: transparent;
+}
+:global(.light) .tabGroup .tab.button.selected .icon,
+:global(.light) .tabGroup .tab.button.selected .client {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.light) .tabGroup .tab.vertical.button.selected .bg {
+  /* Override TabLayout */
+}
+:global(.spotlight-input-key) :global(.light) .tabGroup .tab.vertical.button:global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) :global(.light) .tabGroup .tab.vertical.button:global(.spottable):focus .bg {
+  /* Override TabLayout */
+}
+:global(.spotlight-input-touch) :global(.light) .tabGroup .tab.vertical.button:global(.spottable):active .bg {
+  /* Override TabLayout */
+}
+:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+}
+:global(.game) .tabGroup {
+  background-color: color(from var(--semantic-color-surface-default-group) srgb r g b / 0.1);
+  border-radius: var(--semantic-radius-container);
+}
+:global(.game) .tabGroup > :first-child {
+  background: transparent;
+}
+:global(.game) .tabGroup .tab.button.selected .icon,
+:global(.game) .tabGroup .tab.button.selected .client {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.game) .tabGroup .tab.vertical.button.selected .bg {
+  /* Override TabLayout */
+}
+:global(.spotlight-input-key) :global(.game) .tabGroup .tab.vertical.button:global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) :global(.game) .tabGroup .tab.vertical.button:global(.spottable):focus .bg {
+  /* Override TabLayout */
+}
+:global(.spotlight-input-touch) :global(.game) .tabGroup .tab.vertical.button:global(.spottable):active .bg {
+  /* Override TabLayout */
+}
+:global(.green) :global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+}
+:global(.green) :global(.game) .tabGroup {
+  background-color: color(from var(--semantic-color-surface-default-group) srgb r g b / 0.1);
+  border-radius: var(--semantic-radius-container);
+}
+:global(.green) :global(.game) .tabGroup > :first-child {
+  background: transparent;
+}
+:global(.green) :global(.game) .tabGroup .tab.button.selected .icon,
+:global(.green) :global(.game) .tabGroup .tab.button.selected .client {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.green) :global(.game) .tabGroup .tab.vertical.button.selected .bg {
+  /* Override TabLayout */
+}
+:global(.spotlight-input-key) :global(.green) :global(.game) .tabGroup .tab.vertical.button:global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) :global(.green) :global(.game) .tabGroup .tab.vertical.button:global(.spottable):focus .bg {
+  /* Override TabLayout */
+}
+:global(.spotlight-input-touch) :global(.green) :global(.game) .tabGroup .tab.vertical.button:global(.spottable):active .bg {
+  /* Override TabLayout */
+}
+:global(.orange) :global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+}
+:global(.orange) :global(.game) .tabGroup {
+  background-color: color(from var(--semantic-color-surface-default-group) srgb r g b / 0.1);
+  border-radius: var(--semantic-radius-container);
+}
+:global(.orange) :global(.game) .tabGroup > :first-child {
+  background: transparent;
+}
+:global(.orange) :global(.game) .tabGroup .tab.button.selected .icon,
+:global(.orange) :global(.game) .tabGroup .tab.button.selected .client {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.orange) :global(.game) .tabGroup .tab.vertical.button.selected .bg {
+  /* Override TabLayout */
+}
+:global(.spotlight-input-key) :global(.orange) :global(.game) .tabGroup .tab.vertical.button:global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) :global(.orange) :global(.game) .tabGroup .tab.vertical.button:global(.spottable):focus .bg {
+  /* Override TabLayout */
+}
+:global(.spotlight-input-touch) :global(.orange) :global(.game) .tabGroup .tab.vertical.button:global(.spottable):active .bg {
+  /* Override TabLayout */
+}