@enact/limestone 1.3.0

package/Panels/Header.module.css

@@ -0,0 +1,243 @@
+.header {
+  position: relative;
+  max-width: 100%;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: top left;
+  box-sizing: border-box;
+}
+.header .titlesRow {
+  padding-bottom: 70.2px;
+}
+.header .titlesRow .subtitle {
+  position: absolute;
+  right: 0;
+  left: 0;
+}
+.header .titlesRow .back {
+  margin-inline-start: 0;
+}
+.header .titlesRow .back:global(.largeText) {
+  font-family: "Limestone";
+  font-size: var(--primitive-font-size-60);
+  font-style: normal;
+  font-weight: var(--primitive-font-weight-semibold);
+  font-kerning: normal;
+  height: 2.75rem;
+  line-height: 2.5rem;
+  min-width: 2.75rem;
+}
+:global(.enact-locale-non-latin) .header .titlesRow .back:global(.largeText) {
+  font-family: "Limestone";
+}
+:global(.enact-locale-non-latin) .header .titlesRow .back:global(.largeText) {
+  font-family: "Limestone";
+  font-size: var(--primitive-font-size-54);
+  font-style: normal;
+  font-weight: var(--primitive-font-weight-bold);
+}
+.header .titlesRow .close {
+  margin-inline-end: 0;
+}
+.header.wizard .titlesRow {
+  padding-bottom: 70.2px;
+}
+.header .slotBefore,
+.header .slotAfter,
+.header .slotSizer {
+  white-space: nowrap;
+}
+.header .slotSizer {
+  display: inline-block;
+}
+.header.centered .title {
+  margin-top: var(--primitive-spacing-60);
+}
+.header.centered .slotAbove,
+.header.centered .slotBelow {
+  text-align: center;
+}
+.header .title {
+  margin: 0;
+}
+.header .subtitle {
+  margin-left: var(--primitive-spacing-6);
+  margin-right: 0;
+}
+:global(.enact-locale-right-to-left) .header .subtitle {
+  margin-left: 0;
+  margin-right: var(--primitive-spacing-6);
+}
+.header .slotAbove {
+  margin: 0 -0.75rem var(--primitive-spacing-24) -0.75rem;
+}
+.header .slotAfter {
+  text-align: right;
+}
+:global(.enact-locale-right-to-left) .header .slotAfter {
+  text-align: left;
+}
+.header .slotBelow {
+  margin: 0.375rem -0.75rem 0 -0.75rem;
+}
+.header .standard .slotBefore > *:first-child,
+.header .compact .slotBefore > *:first-child,
+.header .mini .slotBefore > *:first-child {
+  margin-inline-start: 0;
+}
+.header .standard .slotAfter > *:last-child,
+.header .compact .slotAfter > *:last-child,
+.header .mini .slotAfter > *:last-child {
+  margin-inline-end: 0;
+}
+.header.standard {
+  margin: 0;
+  padding: 2.0375rem 2.75rem 0.125rem 2.75rem;
+}
+.header.standard .subtitle,
+.header.standard .title {
+  padding: 0;
+}
+.header.standard .subtitle {
+  margin: 0.43125rem 0 0 0;
+}
+.header.standard.slotBefore:not(.centered) .slotBefore {
+  margin-left: 0;
+  margin-right: var(--primitive-spacing-36);
+}
+:global(.enact-locale-right-to-left) .header.standard.slotBefore:not(.centered) .slotBefore {
+  margin-left: var(--primitive-spacing-36);
+  margin-right: 0;
+}
+.header.standard.slotAfter:not(.centered) .slotAfter {
+  margin-left: var(--primitive-spacing-36);
+  margin-right: 0;
+}
+:global(.enact-locale-right-to-left) .header.standard.slotAfter:not(.centered) .slotAfter {
+  margin-left: 0;
+  margin-right: var(--primitive-spacing-36);
+}
+.header.compact {
+  margin: 0;
+  padding: 1.28125rem 1.25rem 1.5px 1.25rem;
+}
+.header.compact .back,
+.header.compact .close {
+  margin: 0;
+}
+.header.compact .title {
+  padding: 0;
+}
+.header.compact .titlesRow {
+  padding: 0 0 1.75rem;
+}
+.header.compact .subtitle {
+  padding: 0;
+  margin-top: 0.25rem;
+}
+.header.compact .title {
+  font-size: 1.875rem;
+}
+:global(.enact-locale-non-latin) .header.compact .title {
+  font-size: 1.875rem;
+}
+.header.compact.slotBefore:not(.centered) .slotBefore {
+  margin-left: 0;
+  margin-right: var(--primitive-spacing-24);
+}
+:global(.enact-locale-right-to-left) .header.compact.slotBefore:not(.centered) .slotBefore {
+  margin-left: var(--primitive-spacing-24);
+  margin-right: 0;
+}
+.header.compact.slotAfter:not(.centered) .slotAfter {
+  margin-left: var(--primitive-spacing-30);
+  margin-right: 0;
+}
+:global(.enact-locale-right-to-left) .header.compact.slotAfter:not(.centered) .slotAfter {
+  margin-left: 0;
+  margin-right: var(--primitive-spacing-30);
+}
+.header.wizard {
+  margin: 0;
+  padding: 3.2875rem 2.75rem 0.125rem 2.75rem;
+}
+.header.wizard.noSubtitle {
+  padding-bottom: calc( 70.2px + var(--primitive-spacing-6));
+}
+.header.wizard .titleContainer:nth-child(2) {
+  top: 0;
+  position: absolute;
+  width: 100%;
+}
+.header.wizard .title {
+  font-size: 2.25rem;
+  padding: 0;
+}
+:global(.enact-locale-non-latin) .header.wizard .title {
+  font-size: 2.25rem;
+}
+.header.wizard .subtitle {
+  padding: 0;
+}
+.header.wizard.centered .subtitle {
+  text-align: center;
+}
+.header.mini {
+  margin: 0 0 0.75rem 0;
+  padding: 0.86458rem 1.25rem 0.55208rem 1.25rem;
+}
+.header.mini .titlesRow {
+  padding: 0;
+}
+.header.mini .titleCell {
+  width: auto;
+}
+.header.mini .title {
+  font-size: 1.875rem;
+}
+:global(.enact-locale-non-latin) .header.mini .title {
+  font-size: 1.875rem;
+}
+.header.mini.withSubtitle:not(.noSubtitle) .titlesRow {
+  padding-bottom: 70.2px;
+}
+.header.noSubtitle .titlesRow {
+  padding-bottom: 0;
+}
+.header:global(.neutral).shadowed .subtitle,
+.header:global(.neutral).shadowed .title {
+  text-shadow: 0.125rem 0.25rem 0.25rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+:global(.enact-a11y-high-contrast) .header:global(.neutral):global(.highContrast).shadowed .subtitle,
+:global(.enact-a11y-high-contrast) .header:global(.neutral):global(.highContrast).shadowed .title {
+  text-shadow: 0.125rem 0.25rem 0.25rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+.header:global(.light).shadowed .subtitle,
+.header:global(.light).shadowed .title {
+  text-shadow: 0.125rem 0.25rem 0.25rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+.header:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+}
+.header:global(.game).shadowed .subtitle,
+.header:global(.game).shadowed .title {
+  text-shadow: 0.125rem 0.25rem 0.25rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+:global(.green) .header:global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+}
+:global(.green) .header:global(.game).shadowed .subtitle,
+:global(.green) .header:global(.game).shadowed .title {
+  text-shadow: 0.125rem 0.25rem 0.25rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+:global(.orange) .header:global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+}
+:global(.orange) .header:global(.game).shadowed .subtitle,
+:global(.orange) .header:global(.game).shadowed .title {
+  text-shadow: 0.125rem 0.25rem 0.25rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}

package/Panels/Panel.js

@@ -0,0 +1,347 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.PanelDecorator = exports.PanelBase = exports.Panel = void 0;
+var _handle = require("@enact/core/handle");
+var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
+var _SpotlightContainerDecorator = _interopRequireWildcard(require("@enact/spotlight/SpotlightContainerDecorator"));
+var _ComponentOverride = _interopRequireDefault(require("@enact/ui/ComponentOverride"));
+var _ForwardRef = _interopRequireDefault(require("@enact/ui/ForwardRef"));
+var _Slottable = _interopRequireDefault(require("@enact/ui/Slottable"));
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
+var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _SharedStateDecorator = _interopRequireDefault(require("../internal/SharedStateDecorator"));
+var _Panels = require("../internal/Panels");
+var _util = require("../internal/Panels/util");
+var _PanelModule = _interopRequireDefault(require("./Panel.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["bodyClassName", "children", "componentRef", "css", "floatingLayerId", "header", "ids"];
+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 _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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); }
+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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var panelId = 0;
+
+/**
+ * A Panel is the standard view container used inside a {@link limestone/Panels.Panels|Panels} view
+ * manager instance.
+ *
+ * {@link limestone/Panels.Panels|Panels} will typically contain several instances of these and
+ * transition between them.
+ *
+ * @class Panel
+ * @memberof limestone/Panels
+ * @ui
+ * @public
+ */
+var PanelBase = exports.PanelBase = (0, _kind["default"])({
+  name: 'Panel',
+  propTypes: /** @lends limestone/Panels.Panel.prototype */{
+    /**
+    	 * The "aria-label" for the Panel.
+     *
+     * By default, the panel will be labeled by its {@link limestone/Panels.Header|Header}.
+     * When `aria-label` is set, it will be used instead to provide an accessibility label for
+     * the panel.
+     *
+     * @memberof limestone/Panels.Panel.prototype
+     * @type {String}
+     * @public
+     */
+    'aria-label': _propTypes2["default"].string,
+    /**
+     * Obtains a reference to the root node.
+     *
+     * @type {Function|Object}
+     * @public
+     */
+    componentRef: _propTypes["default"].ref,
+    /**
+     * Customizes the component by mapping the supplied collection of CSS class names to the
+     * corresponding internal elements and states of this component.
+     *
+     * The following classes are supported:
+     *
+     * * `panel` - The root class name
+     * * `body` - The node containing the panel's children
+     *
+     * @type {Object}
+     * @public
+     */
+    css: _propTypes2["default"].object,
+    /**
+     * The floating layer id
+     *
+     * @type {String}
+     * @private
+     */
+    floatingLayerId: _propTypes2["default"].string,
+    /**
+     * Header for the panel.
+     *
+     * This is usually passed by the {@link ui/Slottable.Slottable|Slottable} API by using a
+     * {@link limestone/Panels.Header|Header} component as a child of the Panel.
+     *
+     * @type {Header}
+     * @public
+     */
+    header: _propTypes2["default"].node,
+    /**
+     * Hides the body components.
+     *
+     * When a Panel is used within {@link limestone/Panels.Panels|Panels} this property will
+     * be set automatically to `true` on render and `false` after animating into view.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    hideChildren: _propTypes2["default"].bool,
+    /**
+     * Set the type of panel to be used.
+     *
+     * @type {('wizard')}
+     * @private
+     */
+    panelType: _propTypes2["default"].oneOf(['wizard'])
+  },
+  defaultProps: {
+    hideChildren: false
+  },
+  styles: {
+    css: _PanelModule["default"],
+    className: 'panel',
+    publicClassNames: ['panel', 'body']
+  },
+  handlers: {
+    onScroll: (0, _handle.handle)((0, _handle.forward)('onScroll'), function (_ref) {
+      var currentTarget = _ref.currentTarget,
+        eventTarget = _ref.eventTarget;
+      if (currentTarget === eventTarget) {
+        currentTarget.scrollTop = 0;
+        currentTarget.scrollLeft = 0;
+      }
+    })
+  },
+  computed: {
+    children: function children(_ref2) {
+      var _children = _ref2.children,
+        hideChildren = _ref2.hideChildren;
+      return hideChildren ? null : _children;
+    },
+    bodyClassName: function bodyClassName(_ref3) {
+      var css = _ref3.css,
+        header = _ref3.header,
+        hideChildren = _ref3.hideChildren,
+        styler = _ref3.styler;
+      return styler.join(css.body, {
+        noHeader: !header,
+        visible: !hideChildren
+      });
+    },
+    // nulling headerId prevents the aria-labelledby relationship which is necessary to allow
+    // aria-label to take precedence
+    // (see https://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby)
+    ids: function ids(_ref4) {
+      var label = _ref4['aria-label'],
+        panelType = _ref4.panelType;
+      if (label) {
+        return {};
+      } else if (panelType === 'wizard') {
+        var id = "panel_".concat(++panelId, "_header");
+        return {
+          headerId: id,
+          labelledby: id
+        };
+      } else {
+        var labelledby = "panel_".concat(++panelId, "_title panel_").concat(panelId, "_subtitle");
+        var _labelledby$split = labelledby.split(' '),
+          _labelledby$split2 = _slicedToArray(_labelledby$split, 2),
+          titleId = _labelledby$split2[0],
+          subtitleId = _labelledby$split2[1];
+        return {
+          labelledby: labelledby,
+          subtitleId: subtitleId,
+          titleId: titleId
+        };
+      }
+    }
+  },
+  render: function render(_ref5) {
+    var bodyClassName = _ref5.bodyClassName,
+      children = _ref5.children,
+      componentRef = _ref5.componentRef,
+      css = _ref5.css,
+      floatingLayerId = _ref5.floatingLayerId,
+      header = _ref5.header,
+      _ref5$ids = _ref5.ids,
+      _ref5$ids$headerId = _ref5$ids.headerId,
+      headerId = _ref5$ids$headerId === void 0 ? null : _ref5$ids$headerId,
+      _ref5$ids$labelledby = _ref5$ids.labelledby,
+      labelledby = _ref5$ids$labelledby === void 0 ? null : _ref5$ids$labelledby,
+      _ref5$ids$subtitleId = _ref5$ids.subtitleId,
+      subtitleId = _ref5$ids$subtitleId === void 0 ? null : _ref5$ids$subtitleId,
+      _ref5$ids$titleId = _ref5$ids.titleId,
+      titleId = _ref5$ids$titleId === void 0 ? null : _ref5$ids$titleId,
+      rest = _objectWithoutProperties(_ref5, _excluded);
+    delete rest.hideChildren;
+    delete rest.panelType;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("article", _objectSpread(_objectSpread({
+      role: "region"
+    }, rest), {}, {
+      "aria-owns": floatingLayerId,
+      "aria-labelledby": labelledby,
+      ref: componentRef,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: css.header,
+        id: headerId,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentOverride["default"], {
+          component: header,
+          "data-index": rest['data-index'],
+          subtitleId: subtitleId,
+          titleId: titleId
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
+        className: bodyClassName,
+        children: children
+      })]
+    }));
+  }
+});
+
+/**
+ * Sets the strategy used to automatically focus an element within the panel upon render.
+ *
+ * * "none" - Automatic focus is disabled
+ * * "last-focused" - The element last focused in the panel with be restored
+ * * "default-element" - The first spottable component within the body will be focused
+ * * Custom Selector - A custom CSS selector may also be provided which will be used to find
+ *   the target within the Panel
+ *
+ * When used within {@link limestone/Panels.Panels|Panels}, this prop may be set by
+ * `Panels` to "default-element" when navigating "forward" to a higher index. This behavior
+ * may be overridden by setting `autoFocus` on the `Panel` instance as a child of `Panels`
+ * or by wrapping `Panel` with a custom component and overriding the value passed by
+ * `Panels`.
+ *
+ * ```
+ * // Panel within CustomPanel will always receive "last-focused"
+ * const CustomPanel = (props) => <Panel {...props} autoFocus="last-focused" />;
+ *
+ * // The first panel will always receive "last-focused". The second panel will receive
+ * // "default-element" when navigating from the first panel but `autoFocus` will be unset
+ * // when navigating from the third panel and as a result will default to "last-focused".
+ * const MyPanels = () => (
+ *   <Panels>
+ *     <Panel autoFocus="last-focused" />
+ *     <Panel />
+ *     <Panel />
+ *   </Panels>
+ * );
+ * ```
+ *
+ * @name autoFocus
+ * @type {('default-element'|'last-focused'|'none'|String)}
+ * @memberof limestone/Panels.Panel.prototype
+ * @default 'last-focused'
+ * @public
+ */
+
+/**
+ * Applies Limestone specific behaviors to {@link limestone/Panels.Panel.PanelBase|Panel} components.
+ *
+ * @hoc
+ * @memberof limestone/Panels
+ * @mixes spotlight/SpotlightContainerDecorator.SpotlightContainerDecorator
+ * @mixes ui/Slottable.Slottable
+ * @mixes limestone/Skinnable.Skinnable
+ * @public
+ */
+var PanelDecorator = exports.PanelDecorator = (0, _hoc["default"])({
+  defaultElement: ".".concat(_PanelModule["default"].body, " *")
+}, function (config, Wrapped) {
+  var defaultElement = config.defaultElement;
+  defaultElement = [".".concat(_SpotlightContainerDecorator.spotlightDefaultClass)].concat(_toConsumableArray(Array.isArray(defaultElement) ? defaultElement : [defaultElement]));
+  var Decorator = (0, _compose["default"])((0, _ForwardRef["default"])({
+    prop: 'componentRef'
+  }), _Panels.FloatingLayerIdProvider, _util.ContextAsDefaults, (0, _SharedStateDecorator["default"])({
+    idProp: 'data-index'
+  }), (0, _SpotlightContainerDecorator["default"])({
+    // prefer any spottable within the panel body for first render
+    continue5WayHold: true,
+    defaultElement: defaultElement,
+    enterTo: 'last-focused',
+    lastFocusedPersist: function lastFocusedPersist(node, all) {
+      var filtered = all.filter(function (element) {
+        var _element$dataset;
+        return element && !((_element$dataset = element.dataset) !== null && _element$dataset !== void 0 && _element$dataset.spotlightIgnoreRestore);
+      });
+      var container = typeof node === 'string';
+      return {
+        container: container,
+        element: !container,
+        key: container ? node : filtered.indexOf(node)
+      };
+    },
+    lastFocusedRestore: function lastFocusedRestore(_ref6, all) {
+      var container = _ref6.container,
+        key = _ref6.key;
+      var filtered = all.filter(function (element) {
+        var _element$dataset2;
+        return element && !((_element$dataset2 = element.dataset) !== null && _element$dataset2 !== void 0 && _element$dataset2.spotlightIgnoreRestore);
+      });
+      return container ? key : filtered[key];
+    },
+    preserveId: true
+  }), (0, _Slottable["default"])({
+    slots: ['header']
+  }), _Panels.AutoFocusDecorator, _Skinnable["default"]);
+  return Decorator(Wrapped);
+});
+
+/**
+ * Prevents the component from restoring any framework shared state.
+ *
+ * When `false`, the default, Panel will store state for some framework components in order to
+ * restore that state when returning to the Panel. Setting this prop to `true` will suppress that
+ * behavior and not store or retrieve any framework component state.
+ *
+ * @name noSharedState
+ * @type {Boolean}
+ * @default false
+ * @memberof limestone/Panels.Panel.prototype
+ */
+
+/**
+ * The container id for {@link spotlight/SpotlightContainerDecorator/#SpotlightContainerDecorator.spotlightId|Spotlight container}.
+ *
+ * When the `Panel` is used within {@link limestone/Panels.Panels|Panels}, this prop will be
+ * generated by `Panels`. When using the panel alone, you need to specify this prop for restoring focus.
+ *
+ * @name spotlightId
+ * @type {String}
+ * @memberof limestone/Panels.Panel.prototype
+ */
+
+var Panel = exports.Panel = PanelDecorator(PanelBase);
+var _default = exports["default"] = Panel;

package/Panels/Panel.module.css

@@ -0,0 +1,33 @@
+.panel {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  padding: 0;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: column;
+  vertical-align: top;
+  white-space: initial;
+}
+.panel .body {
+  position: relative;
+  padding: 0 2rem;
+  flex: 1;
+  min-height: 0;
+  opacity: 0;
+  transition: opacity 200ms ease-out;
+  will-change: opacity;
+}
+.panel .body.noHeader {
+  padding-top: 0;
+}
+.panel .body.visible {
+  opacity: 1;
+}
+.panel:global(.enact-fit) {
+  height: auto;
+}
+:global(.enact-locale-right-to-left) .panel {
+  direction: rtl;
+}