@enact/limestone 1.3.0 → 1.10.0

package/.github/workflows/ci-branch.yml

@@ -0,0 +1,21 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - develop
+      - master
+  pull_request:
+    types: [opened, synchronize, reopened]
+  workflow_dispatch:
+
+concurrency:
+  group: ci-branch-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  branch:
+    uses: ./.github/workflows/ci-reusable.yml
+    with:
+      checkout-ref: ${{ github.event.pull_request.head.sha || github.sha }}
+    secrets: inherit

package/.github/workflows/ci-pull-request.yml

@@ -0,0 +1,16 @@
+name: CI
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+concurrency:
+  group: ci-pr-${{ github.event.pull_request.number }}
+  cancel-in-progress: true
+
+jobs:
+  pull-request:
+    uses: ./.github/workflows/ci-reusable.yml
+    with:
+      checkout-ref: ''
+    secrets: inherit

package/.github/workflows/ci-reusable.yml

@@ -0,0 +1,73 @@
+name: CI Pipeline
+
+on:
+  workflow_call:
+    inputs:
+      checkout-ref:
+        description: 'Git ref to checkout (empty for default merge commit)'
+        type: string
+        required: false
+        default: ''
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: ['lts/*', 'node']
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.checkout-ref || github.ref }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install system dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev
+
+      - name: Clone and setup Enact CLI
+        run: |
+          git clone --branch=develop --depth 1 https://github.com/enactjs/cli ../cli
+          pushd ../cli
+          npm install
+          npm link
+          popd
+
+      - name: Clone and setup Enact framework
+        run: |
+          git clone --branch=develop --depth 1 https://github.com/enactjs/enact ../enact
+          pushd ../enact
+          npm install
+          npm run lerna exec -- --ignore enact-sampler --concurrency 1 -- npm --no-package-lock install
+          npm run lerna exec -- --ignore enact-sampler --concurrency 1 -- npm --no-package-lock link
+          npm run interlink
+          popd
+
+      - name: Install project dependencies
+        run: |
+          rm -fr node_modules/@enact
+          npm install
+          enact link
+
+      - name: Run tests with coverage
+        run: npm test -- --runInBand --coverage
+
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v5
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          fail_ci_if_error: false
+
+      - name: Run ESLint
+        run: npm run lint -- -- --report-unused-disable-directives --max-warnings 0 .
+
+      - name: Validate documentation
+        run: npm run validate-docs

package/ActionGuide/ActionGuide.d.ts

@@ -47,14 +47,15 @@ export class ActionGuideBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, ActionGuideBaseProps>
 > {}
 
-export interface ActionGuideDecoratorProps
-  extends limestone_Skinnable_SkinnableProps {}
+export interface ActionGuideDecoratorProps extends limestone_Skinnable_SkinnableProps {}
 export function ActionGuideDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & ActionGuideDecoratorProps>;
 
-export interface ActionGuideProps
-  extends Merge<ActionGuideBaseProps, ActionGuideDecoratorProps> {}
+export interface ActionGuideProps extends Merge<
+  ActionGuideBaseProps,
+  ActionGuideDecoratorProps
+> {}
 /**
  * An Action Guide component, ready to use in Limestone applications.
  * 

package/ActionGuide/ActionGuide.module.css

@@ -6,7 +6,7 @@
   padding: var(--primitive-spacing-12) 0 var(--primitive-spacing-36) 0;
 }
 .actionGuide .button {
-  margin: 0 0 -0.25rem 0;
+  margin: 0 0 calc( var(--primitive-spacing-12) * -1) 0;
   height: 1.75rem;
   min-width: 1.75rem;
   width: 1.75rem;

package/Alert/Alert.d.ts

@@ -32,6 +32,15 @@ export class AlertImage extends React.Component<
 > {}
 
 export interface AlertBaseProps {
+  /**
+   * Sets the buttons layout direction.
+   *
+   * In  `auto`  mode, button direction follows UX defaults:
+   * *  `overlay`  - horizontal when there are exactly 2 buttons
+   * *  `fullscreen`  - horizontal when there are less than 3 buttons
+   * *  otherwise vertical
+   */
+  buttonDirection?: "auto" | "horizontal" | "vertical";
   /**
    * Buttons to be included under the component.
    *
@@ -119,8 +128,10 @@ export class AlertBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, AlertBaseProps>
 > {}
 
-export interface AlertProps
-  extends Merge<AlertBaseProps, ui_Slottable_SlottableProps> {}
+export interface AlertProps extends Merge<
+  AlertBaseProps,
+  ui_Slottable_SlottableProps
+> {}
 /**
  * A modal Alert component, ready to use in Limestone applications.
  * 

package/Alert/Alert.js

@@ -17,13 +17,14 @@ var _IdProvider = _interopRequireDefault(require("@enact/ui/internal/IdProvider"
 var _Layout = _interopRequireWildcard(require("@enact/ui/Layout"));
 var _Slottable = _interopRequireDefault(require("@enact/ui/Slottable"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
 var _BodyText = _interopRequireDefault(require("../BodyText"));
 var _Heading = _interopRequireDefault(require("../Heading"));
 var _Popup = _interopRequireDefault(require("../Popup"));
 var _AlertImage = _interopRequireDefault(require("./AlertImage"));
 var _AlertModule = _interopRequireDefault(require("./Alert.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["buttons", "contentComponent", "children", "css", "id", "image", "overlayPosition", "title", "type"];
+var _excluded = ["buttonDirection", "buttons", "contentComponent", "children", "css", "id", "image", "overlayPosition", "title", "type", "style"];
 /**
  * Limestone styled modal Alert components.
  *
@@ -55,6 +56,19 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 var AlertBase = exports.AlertBase = (0, _kind["default"])({
   name: 'Alert',
   propTypes: /** @lends limestone/Alert.AlertBase.prototype */{
+    /**
+     * Sets the buttons layout direction.
+     *
+     * In `auto` mode, button direction follows UX defaults:
+     * * `overlay` - horizontal when there are exactly 2 buttons
+     * * `fullscreen` - horizontal when there are less than 3 buttons
+     * * otherwise vertical
+     *
+     * @type {('auto'|'horizontal'|'vertical')}
+     * @default 'auto'
+     * @public
+     */
+    buttonDirection: _propTypes["default"].oneOf(['auto', 'horizontal', 'vertical']),
     /**
      * Buttons to be included under the component.
      *
@@ -170,6 +184,7 @@ var AlertBase = exports.AlertBase = (0, _kind["default"])({
     type: _propTypes["default"].oneOf(['fullscreen', 'overlay'])
   },
   defaultProps: {
+    buttonDirection: 'auto',
     open: false,
     overlayPosition: 'center',
     type: 'fullscreen'
@@ -187,7 +202,9 @@ var AlertBase = exports.AlertBase = (0, _kind["default"])({
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
           className: css.buttonCell,
           shrink: true,
-          children: button
+          children: /*#__PURE__*/(0, _react.cloneElement)(button, {
+            css: css
+          })
         }, "button".concat(index));
       }) || null;
     },
@@ -209,7 +226,8 @@ var AlertBase = exports.AlertBase = (0, _kind["default"])({
     }
   },
   render: function render(_ref4) {
-    var buttons = _ref4.buttons,
+    var buttonDirection = _ref4.buttonDirection,
+      buttons = _ref4.buttons,
       contentComponent = _ref4.contentComponent,
       children = _ref4.children,
       css = _ref4.css,
@@ -218,10 +236,25 @@ var AlertBase = exports.AlertBase = (0, _kind["default"])({
       overlayPosition = _ref4.overlayPosition,
       title = _ref4.title,
       type = _ref4.type,
+      style = _ref4.style,
       rest = _objectWithoutProperties(_ref4, _excluded);
     var fullscreen = type === 'fullscreen';
     var position = type === 'overlay' ? overlayPosition : type;
     var showTitle = fullscreen && title;
+    var buttonCount = _react.Children.toArray(buttons).filter(Boolean).length;
+    var resolvedButtonDirection = buttonDirection;
+    if (buttonDirection === 'auto') {
+      var useHorizontal = type === 'overlay' && buttonCount === 2 || type === 'fullscreen' && buttonCount < 3;
+      resolvedButtonDirection = useHorizontal ? 'horizontal' : 'vertical';
+    }
+    var overlayHorizontalButtons = type === 'overlay' && resolvedButtonDirection === 'horizontal';
+    var popupStyle = style;
+    if (overlayHorizontalButtons) {
+      var overlayHorizontalButtonCount = Math.max(1, Math.min(buttonCount, 4));
+      popupStyle = _objectSpread(_objectSpread({}, style), {}, {
+        '--alert-overlay-horizontal-button-count': overlayHorizontalButtonCount
+      });
+    }
     var ariaLabelledBy = (showTitle ? "".concat(id, "_title ") : '') + "".concat(id, "_content ").concat(id, "_buttons");
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       "aria-owns": id,
@@ -232,6 +265,7 @@ var AlertBase = exports.AlertBase = (0, _kind["default"])({
         "aria-labelledby": ariaLabelledBy,
         css: css,
         position: position,
+        style: popupStyle,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout["default"], {
           align: "center center",
           orientation: "vertical",
@@ -259,8 +293,8 @@ var AlertBase = exports.AlertBase = (0, _kind["default"])({
             shrink: true,
             className: css.buttonContainer,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout["default"], {
-              align: "center",
-              orientation: "vertical",
+              align: "center center",
+              orientation: resolvedButtonDirection,
               id: "".concat(id, "_buttons"),
               children: buttons
             })

package/Alert/Alert.module.css

@@ -40,6 +40,7 @@
 .alert.overlay .buttonContainer {
   box-sizing: border-box;
   margin-top: var(--primitive-spacing-36);
+  padding: 0 var(--primitive-spacing-84);
 }
 .alert.overlay .content {
   align-self: stretch;
@@ -52,6 +53,7 @@
   word-break: keep-all;
   padding: 0 var(--primitive-spacing-84);
   margin: 0;
+  max-width: var(--alert-overlay-content-max-width, 23.5rem);
 }
 :global(.enact-locale-non-latin) .alert.overlay .content {
   font-family: "Limestone";
@@ -77,7 +79,16 @@
   word-break: normal;
 }
 .popup.overlay {
-  width: 23.5rem;
+  box-sizing: border-box;
+  --alert-overlay-horizontal-button-count: 1;
+  --alert-overlay-horizontal-button-width: NaNrem + (2 * var(--primitive-spacing-36)));
+  --alert-overlay-horizontal-buttons-total-width: calc(var(--alert-overlay-horizontal-button-width) * var(--alert-overlay-horizontal-button-count));
+  --alert-overlay-width: max(1128px, var(--alert-overlay-horizontal-buttons-total-width));
+  --alert-overlay-content-horizontal-padding: var(--primitive-spacing-84);
+  --alert-overlay-content-max-width: calc(var(--alert-overlay-width) - (2 * var(--alert-overlay-content-horizontal-padding)));
+  width: var(--alert-overlay-width);
+  min-width: 23.5rem;
+  max-width: calc(100vw - 2 * var(--primitive-spacing-60));
   margin-left: auto;
   margin-right: auto;
 }
@@ -101,6 +112,12 @@
 :global(.noAnimation) .popup:global(.neutral).overlay {
   box-shadow: none;
 }
+:has(:global(.highContrast)) .popup:global(.neutral).overlay {
+  outline-style: solid;
+}
+.popup:global(.neutral).overlay .button .bg {
+  background-color: var(--semantic-color-surface-popup-default);
+}
 :global(.enact-a11y-high-contrast) .popup:global(.neutral):global(.highContrast) {
   background-color: var(--semantic-color-background-full-default);
 }
@@ -117,6 +134,12 @@
 :global(.noAnimation) :global(.enact-a11y-high-contrast) .popup:global(.neutral):global(.highContrast).overlay {
   box-shadow: none;
 }
+:has(:global(.highContrast)) :global(.enact-a11y-high-contrast) .popup:global(.neutral):global(.highContrast).overlay {
+  outline-style: solid;
+}
+:global(.enact-a11y-high-contrast) .popup:global(.neutral):global(.highContrast).overlay .button .bg {
+  background-color: var(--semantic-color-surface-popup-default);
+}
 .popup:global(.light) {
   background-color: var(--semantic-color-background-full-default);
 }
@@ -133,6 +156,12 @@
 :global(.noAnimation) .popup:global(.light).overlay {
   box-shadow: none;
 }
+:has(:global(.highContrast)) .popup:global(.light).overlay {
+  outline-style: solid;
+}
+.popup:global(.light).overlay .button .bg {
+  background-color: var(--semantic-color-surface-popup-default);
+}
 .popup:global(.game) {
   --semantic-color-surface-default: #2d224c;
   --semantic-color-surface-default-focused: #6d2fa1;
@@ -152,6 +181,12 @@
 :global(.noAnimation) .popup:global(.game).overlay {
   box-shadow: none;
 }
+:has(:global(.highContrast)) .popup:global(.game).overlay {
+  outline-style: solid;
+}
+.popup:global(.game).overlay .button .bg {
+  background-color: var(--semantic-color-surface-popup-default);
+}
 :global(.green) .popup:global(.game) {
   --semantic-color-surface-default: #1F2C24;
   --semantic-color-surface-default-focused: #3ea07d;
@@ -170,6 +205,12 @@
 :global(.noAnimation) :global(.green) .popup:global(.game).overlay {
   box-shadow: none;
 }
+:has(:global(.highContrast)) :global(.green) .popup:global(.game).overlay {
+  outline-style: solid;
+}
+:global(.green) .popup:global(.game).overlay .button .bg {
+  background-color: var(--semantic-color-surface-popup-default);
+}
 :global(.orange) .popup:global(.game) {
   --semantic-color-surface-default: #422923;
   --semantic-color-surface-default-focused: #b85f23;
@@ -188,3 +229,9 @@
 :global(.noAnimation) :global(.orange) .popup:global(.game).overlay {
   box-shadow: none;
 }
+:has(:global(.highContrast)) :global(.orange) .popup:global(.game).overlay {
+  outline-style: solid;
+}
+:global(.orange) .popup:global(.game).overlay .button .bg {
+  background-color: var(--semantic-color-surface-popup-default);
+}

package/Alert/tests/Alert-specs.js

@@ -102,6 +102,60 @@ describe('Alert', function () {
     var expectedClass = 'thumbnail';
     expect(image).toHaveClass(expectedClass);
   });
+  test('should align buttons horizontally by default in fullscreen when button count is less than 3', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.Alert, {
+        open: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("buttons", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            children: "yes"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            children: "no"
+          })]
+        })
+      })
+    }));
+    var alert = _react.screen.getByRole('alert');
+    var buttonsLayout = alert.querySelector('[id$="_buttons"]');
+    expect(buttonsLayout).toHaveClass('horizontal');
+  });
+  test('should align buttons vertically by default in fullscreen when button count is 3', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.Alert, {
+        open: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("buttons", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            children: "yes"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            children: "no"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            children: "later"
+          })]
+        })
+      })
+    }));
+    var alert = _react.screen.getByRole('alert');
+    var buttonsLayout = alert.querySelector('[id$="_buttons"]');
+    expect(buttonsLayout).toHaveClass('vertical');
+  });
+  test('should allow overriding button direction to vertical', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.Alert, {
+        open: true,
+        buttonDirection: "vertical",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("buttons", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            children: "yes"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            children: "no"
+          })]
+        })
+      })
+    }));
+    var alert = _react.screen.getByRole('alert');
+    var buttonsLayout = alert.querySelector('[id$="_buttons"]');
+    expect(buttonsLayout).toHaveClass('vertical');
+  });
 });
 describe('AlertOverlay specs', function () {
   test('should be rendered opened if open is set to true', function () {
@@ -201,4 +255,41 @@ describe('AlertOverlay specs', function () {
     var expectedClass = 'thumbnail';
     expect(image).toHaveClass(expectedClass);
   });
+  test('should align buttons horizontally by default in overlay when button count is 2', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.Alert, {
+        open: true,
+        type: "overlay",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("buttons", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            size: "small",
+            children: "yes"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            size: "small",
+            children: "no"
+          })]
+        })
+      })
+    }));
+    var alert = _react.screen.getByRole('alert');
+    var buttonsLayout = alert.querySelector('[id$="_buttons"]');
+    expect(buttonsLayout).toHaveClass('horizontal');
+  });
+  test('should align buttons vertically by default in overlay when button count is not 2', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.Alert, {
+        open: true,
+        type: "overlay",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("buttons", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            size: "small",
+            children: "yes"
+          })
+        })
+      })
+    }));
+    var alert = _react.screen.getByRole('alert');
+    var buttonsLayout = alert.querySelector('[id$="_buttons"]');
+    expect(buttonsLayout).toHaveClass('vertical');
+  });
 });

package/BodyText/BodyText.d.ts

@@ -45,14 +45,15 @@ export class BodyTextBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, BodyTextBaseProps>
 > {}
 
-export interface BodyTextDecoratorProps
-  extends limestone_Skinnable_SkinnableProps {}
+export interface BodyTextDecoratorProps extends limestone_Skinnable_SkinnableProps {}
 export function BodyTextDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & BodyTextDecoratorProps>;
 
-export interface BodyTextProps
-  extends Merge<BodyTextBaseProps, BodyTextDecoratorProps> {}
+export interface BodyTextProps extends Merge<
+  BodyTextBaseProps,
+  BodyTextDecoratorProps
+> {}
 /**
  * A simple text block component, ready to use in Limestone applications.
  * 

package/BodyText/BodyText.module.css

@@ -4,7 +4,7 @@
   font-style: normal;
   font-family: "Limestone";
   line-height: 1.4em;
-  margin: 0 0.75rem var(--primitive-font-size-60) 0.75rem;
+  margin: 0 var(--primitive-spacing-36) var(--primitive-font-size-60) var(--primitive-spacing-36);
   padding: 0;
   white-space: normal;
 }
@@ -14,7 +14,7 @@
 :global(.enact-locale-non-latin) .bodyText {
   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) .bodyText {
@@ -65,19 +65,19 @@
   line-height: 1.7em;
 }
 :global(.enact-locale-km) .bodyText.small {
-  font-size: 1rem;
+  font-size: var(--primitive-font-size-48);
 }
 :global(.enact-locale-si) .bodyText.small {
-  font-size: 1rem;
+  font-size: var(--primitive-font-size-48);
 }
 :global(.enact-locale-th) .bodyText.small {
-  font-size: 1rem;
+  font-size: var(--primitive-font-size-48);
 }
 :global(.enact-locale-vi) .bodyText.small {
-  font-size: 1rem;
+  font-size: var(--primitive-font-size-48);
 }
 :global(.enact-locale-non-latin) .bodyText.small {
-  font-size: 1rem;
+  font-size: var(--primitive-font-size-48);
   line-height: 1.375rem;
 }
 :global(.enact-locale-right-to-left) .bodyText {

package/Button/Button.d.ts

@@ -53,6 +53,10 @@ corresponding internal elements and states of this component.
  * *  `small`  - Applied to a  `size='small'`  button
  */
   css?: object;
+  /**
+   * Set the visual effect applied to the button when focused.
+   */
+  focusEffect?: "expand" | "static";
   /**
    * Specifies on which side ( `'before'`  or  `'after'` ) of the text the icon appears.
    */
@@ -89,26 +93,27 @@ export class ButtonBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, ButtonBaseProps>
 > {}
 
-export interface ButtonDecoratorProps
-  extends Merge<
+export interface ButtonDecoratorProps extends Merge<
+  Merge<
     Merge<
       Merge<
-        Merge<
-          limestone_TooltipDecorator_TooltipDecoratorProps,
-          limestone_Marquee_MarqueeDecoratorProps
-        >,
-        ui_Button_ButtonDecoratorProps
+        limestone_TooltipDecorator_TooltipDecoratorProps,
+        limestone_Marquee_MarqueeDecoratorProps
       >,
-      spotlight_Spottable_SpottableProps
+      ui_Button_ButtonDecoratorProps
     >,
-    limestone_Skinnable_SkinnableProps
-  > {}
+    spotlight_Spottable_SpottableProps
+  >,
+  limestone_Skinnable_SkinnableProps
+> {}
 export function ButtonDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & ButtonDecoratorProps>;
 
-export interface ButtonProps
-  extends Merge<ButtonBaseProps, ButtonDecoratorProps> {}
+export interface ButtonProps extends Merge<
+  ButtonBaseProps,
+  ButtonDecoratorProps
+> {}
 /**
  * A button component, ready to use in Limestone applications.
  * 

package/Button/Button.js

@@ -148,7 +148,7 @@ var ButtonBase = exports.ButtonBase = (0, _kind["default"])({
      *
      * @type {('expand'|'static')}
      * @default 'expand'
-     * @private
+     * @public
      */
     focusEffect: _propTypes2["default"].oneOf(['expand', 'static']),
     /**