@enact/limestone 1.3.0

package/FormCheckboxItem/FormCheckboxItem.module.css

@@ -0,0 +1,374 @@
+.formCheckboxItem.hasSlotBefore .checkbox {
+  margin-inline-end: 0.75rem;
+}
+.formCheckboxItem:global(.largeText) {
+  font-size: var(--primitive-font-size-60);
+  line-height: 1.4em;
+}
+:global(.enact-locale-km) .formCheckboxItem:global(.largeText) {
+  line-height: 1.5em;
+}
+:global(.enact-locale-si) .formCheckboxItem:global(.largeText) {
+  line-height: 1.5em;
+}
+:global(.enact-locale-th) .formCheckboxItem:global(.largeText) {
+  line-height: 1.5em;
+}
+:global(.enact-locale-vi) .formCheckboxItem:global(.largeText) {
+  line-height: 1.5em;
+}
+:global(.spotlight-input-key) .item:global(.neutral):global(.spottable):focus,
+:global(.spotlight-input-mouse) .item:global(.neutral):global(.spottable):focus {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.spotlight-input-key) .item:global(.neutral):global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) .item:global(.neutral):global(.spottable):focus .bg {
+  background-color: transparent;
+  opacity: 0;
+}
+:global(.spotlight-input-key) .item:global(.neutral):global(.spottable):focus .label,
+:global(.spotlight-input-mouse) .item:global(.neutral):global(.spottable):focus .label {
+  color: var(--semantic-color-on-background-sub);
+}
+:global(.spotlight-input-key) .item:global(.neutral):global(.spottable):focus[disabled],
+:global(.spotlight-input-mouse) .item:global(.neutral):global(.spottable):focus[disabled] {
+  color: inherit;
+}
+:global(.spotlight-input-key) .item:global(.neutral):global(.spottable):focus[disabled] .bg,
+:global(.spotlight-input-mouse) .item:global(.neutral):global(.spottable):focus[disabled] .bg {
+  opacity: 0;
+}
+:global(.spotlight-input-key) .item:global(.neutral):global(.spottable):focus[disabled] .slotBefore,
+:global(.spotlight-input-mouse) .item:global(.neutral):global(.spottable):focus[disabled] .slotBefore {
+  opacity: initial;
+}
+:global(.spotlight-input-key) .item:global(.neutral):global(.spottable):focus[disabled].hasSlotBefore .slotBefore > :last-child,
+:global(.spotlight-input-mouse) .item:global(.neutral):global(.spottable):focus[disabled].hasSlotBefore .slotBefore > :last-child {
+  opacity: 0.4;
+}
+:global(.spotlight-input-touch) .item:global(.neutral):global(.spottable):active {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.spotlight-input-touch) .item:global(.neutral):global(.spottable):active .bg {
+  background-color: transparent;
+  opacity: 0;
+}
+:global(.spotlight-input-touch) .item:global(.neutral):global(.spottable):active .label {
+  color: var(--semantic-color-on-background-sub);
+}
+:global(.spotlight-input-touch) .item:global(.neutral):global(.spottable):active[disabled] {
+  color: inherit;
+}
+:global(.spotlight-input-touch) .item:global(.neutral):global(.spottable):active[disabled] .bg {
+  opacity: 0;
+}
+:global(.spotlight-input-touch) .item:global(.neutral):global(.spottable):active[disabled] .slotBefore {
+  opacity: initial;
+}
+:global(.spotlight-input-touch) .item:global(.neutral):global(.spottable):active[disabled].hasSlotBefore .slotBefore > :last-child {
+  opacity: 0.4;
+}
+.item:global(.neutral).selected .bg {
+  background-color: transparent;
+}
+.item:global(.neutral)[disabled] {
+  color: inherit;
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):focus,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):focus {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):focus .bg {
+  background-color: transparent;
+  opacity: 0;
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):focus .label,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):focus .label {
+  color: var(--semantic-color-on-background-sub);
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):focus[disabled],
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):focus[disabled] {
+  color: inherit;
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):focus[disabled] .bg,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):focus[disabled] .bg {
+  opacity: 0;
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):focus[disabled] .slotBefore,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):focus[disabled] .slotBefore {
+  opacity: initial;
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):focus[disabled].hasSlotBefore .slotBefore > :last-child,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):focus[disabled].hasSlotBefore .slotBefore > :last-child {
+  opacity: 0.4;
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):active {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):active .bg {
+  background-color: transparent;
+  opacity: 0;
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):active .label {
+  color: var(--semantic-color-on-background-sub);
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):active[disabled] {
+  color: inherit;
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):active[disabled] .bg {
+  opacity: 0;
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):active[disabled] .slotBefore {
+  opacity: initial;
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):active[disabled].hasSlotBefore .slotBefore > :last-child {
+  opacity: 0.4;
+}
+:global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast).selected .bg {
+  background-color: transparent;
+}
+:global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast)[disabled] {
+  color: inherit;
+}
+:global(.spotlight-input-key) .item:global(.light):global(.spottable):focus,
+:global(.spotlight-input-mouse) .item:global(.light):global(.spottable):focus {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.spotlight-input-key) .item:global(.light):global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) .item:global(.light):global(.spottable):focus .bg {
+  background-color: transparent;
+  opacity: 0;
+}
+:global(.spotlight-input-key) .item:global(.light):global(.spottable):focus .label,
+:global(.spotlight-input-mouse) .item:global(.light):global(.spottable):focus .label {
+  color: var(--semantic-color-on-background-sub);
+}
+:global(.spotlight-input-key) .item:global(.light):global(.spottable):focus[disabled],
+:global(.spotlight-input-mouse) .item:global(.light):global(.spottable):focus[disabled] {
+  color: inherit;
+}
+:global(.spotlight-input-key) .item:global(.light):global(.spottable):focus[disabled] .bg,
+:global(.spotlight-input-mouse) .item:global(.light):global(.spottable):focus[disabled] .bg {
+  opacity: 0;
+}
+:global(.spotlight-input-key) .item:global(.light):global(.spottable):focus[disabled] .slotBefore,
+:global(.spotlight-input-mouse) .item:global(.light):global(.spottable):focus[disabled] .slotBefore {
+  opacity: initial;
+}
+:global(.spotlight-input-key) .item:global(.light):global(.spottable):focus[disabled].hasSlotBefore .slotBefore > :last-child,
+:global(.spotlight-input-mouse) .item:global(.light):global(.spottable):focus[disabled].hasSlotBefore .slotBefore > :last-child {
+  opacity: 0.4;
+}
+:global(.spotlight-input-touch) .item:global(.light):global(.spottable):active {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.spotlight-input-touch) .item:global(.light):global(.spottable):active .bg {
+  background-color: transparent;
+  opacity: 0;
+}
+:global(.spotlight-input-touch) .item:global(.light):global(.spottable):active .label {
+  color: var(--semantic-color-on-background-sub);
+}
+:global(.spotlight-input-touch) .item:global(.light):global(.spottable):active[disabled] {
+  color: inherit;
+}
+:global(.spotlight-input-touch) .item:global(.light):global(.spottable):active[disabled] .bg {
+  opacity: 0;
+}
+:global(.spotlight-input-touch) .item:global(.light):global(.spottable):active[disabled] .slotBefore {
+  opacity: initial;
+}
+:global(.spotlight-input-touch) .item:global(.light):global(.spottable):active[disabled].hasSlotBefore .slotBefore > :last-child {
+  opacity: 0.4;
+}
+.item:global(.light).selected .bg {
+  background-color: transparent;
+}
+.item:global(.light)[disabled] {
+  color: inherit;
+}
+.item:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+}
+:global(.spotlight-input-key) .item:global(.game):global(.spottable):focus,
+:global(.spotlight-input-mouse) .item:global(.game):global(.spottable):focus {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.spotlight-input-key) .item:global(.game):global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) .item:global(.game):global(.spottable):focus .bg {
+  background-color: transparent;
+  opacity: 0;
+}
+:global(.spotlight-input-key) .item:global(.game):global(.spottable):focus .label,
+:global(.spotlight-input-mouse) .item:global(.game):global(.spottable):focus .label {
+  color: var(--semantic-color-on-background-sub);
+}
+:global(.spotlight-input-key) .item:global(.game):global(.spottable):focus[disabled],
+:global(.spotlight-input-mouse) .item:global(.game):global(.spottable):focus[disabled] {
+  color: inherit;
+}
+:global(.spotlight-input-key) .item:global(.game):global(.spottable):focus[disabled] .bg,
+:global(.spotlight-input-mouse) .item:global(.game):global(.spottable):focus[disabled] .bg {
+  opacity: 0;
+}
+:global(.spotlight-input-key) .item:global(.game):global(.spottable):focus[disabled] .slotBefore,
+:global(.spotlight-input-mouse) .item:global(.game):global(.spottable):focus[disabled] .slotBefore {
+  opacity: initial;
+}
+:global(.spotlight-input-key) .item:global(.game):global(.spottable):focus[disabled].hasSlotBefore .slotBefore > :last-child,
+:global(.spotlight-input-mouse) .item:global(.game):global(.spottable):focus[disabled].hasSlotBefore .slotBefore > :last-child {
+  opacity: 0.4;
+}
+:global(.spotlight-input-touch) .item:global(.game):global(.spottable):active {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.spotlight-input-touch) .item:global(.game):global(.spottable):active .bg {
+  background-color: transparent;
+  opacity: 0;
+}
+:global(.spotlight-input-touch) .item:global(.game):global(.spottable):active .label {
+  color: var(--semantic-color-on-background-sub);
+}
+:global(.spotlight-input-touch) .item:global(.game):global(.spottable):active[disabled] {
+  color: inherit;
+}
+:global(.spotlight-input-touch) .item:global(.game):global(.spottable):active[disabled] .bg {
+  opacity: 0;
+}
+:global(.spotlight-input-touch) .item:global(.game):global(.spottable):active[disabled] .slotBefore {
+  opacity: initial;
+}
+:global(.spotlight-input-touch) .item:global(.game):global(.spottable):active[disabled].hasSlotBefore .slotBefore > :last-child {
+  opacity: 0.4;
+}
+.item:global(.game).selected .bg {
+  background-color: transparent;
+}
+.item:global(.game)[disabled] {
+  color: inherit;
+}
+:global(.green) .item:global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+}
+:global(.spotlight-input-key) :global(.green) .item:global(.game):global(.spottable):focus,
+:global(.spotlight-input-mouse) :global(.green) .item:global(.game):global(.spottable):focus {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.spotlight-input-key) :global(.green) .item:global(.game):global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) :global(.green) .item:global(.game):global(.spottable):focus .bg {
+  background-color: transparent;
+  opacity: 0;
+}
+:global(.spotlight-input-key) :global(.green) .item:global(.game):global(.spottable):focus .label,
+:global(.spotlight-input-mouse) :global(.green) .item:global(.game):global(.spottable):focus .label {
+  color: var(--semantic-color-on-background-sub);
+}
+:global(.spotlight-input-key) :global(.green) .item:global(.game):global(.spottable):focus[disabled],
+:global(.spotlight-input-mouse) :global(.green) .item:global(.game):global(.spottable):focus[disabled] {
+  color: inherit;
+}
+:global(.spotlight-input-key) :global(.green) .item:global(.game):global(.spottable):focus[disabled] .bg,
+:global(.spotlight-input-mouse) :global(.green) .item:global(.game):global(.spottable):focus[disabled] .bg {
+  opacity: 0;
+}
+:global(.spotlight-input-key) :global(.green) .item:global(.game):global(.spottable):focus[disabled] .slotBefore,
+:global(.spotlight-input-mouse) :global(.green) .item:global(.game):global(.spottable):focus[disabled] .slotBefore {
+  opacity: initial;
+}
+:global(.spotlight-input-key) :global(.green) .item:global(.game):global(.spottable):focus[disabled].hasSlotBefore .slotBefore > :last-child,
+:global(.spotlight-input-mouse) :global(.green) .item:global(.game):global(.spottable):focus[disabled].hasSlotBefore .slotBefore > :last-child {
+  opacity: 0.4;
+}
+:global(.spotlight-input-touch) :global(.green) .item:global(.game):global(.spottable):active {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.spotlight-input-touch) :global(.green) .item:global(.game):global(.spottable):active .bg {
+  background-color: transparent;
+  opacity: 0;
+}
+:global(.spotlight-input-touch) :global(.green) .item:global(.game):global(.spottable):active .label {
+  color: var(--semantic-color-on-background-sub);
+}
+:global(.spotlight-input-touch) :global(.green) .item:global(.game):global(.spottable):active[disabled] {
+  color: inherit;
+}
+:global(.spotlight-input-touch) :global(.green) .item:global(.game):global(.spottable):active[disabled] .bg {
+  opacity: 0;
+}
+:global(.spotlight-input-touch) :global(.green) .item:global(.game):global(.spottable):active[disabled] .slotBefore {
+  opacity: initial;
+}
+:global(.spotlight-input-touch) :global(.green) .item:global(.game):global(.spottable):active[disabled].hasSlotBefore .slotBefore > :last-child {
+  opacity: 0.4;
+}
+:global(.green) .item:global(.game).selected .bg {
+  background-color: transparent;
+}
+:global(.green) .item:global(.game)[disabled] {
+  color: inherit;
+}
+:global(.orange) .item:global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+}
+:global(.spotlight-input-key) :global(.orange) .item:global(.game):global(.spottable):focus,
+:global(.spotlight-input-mouse) :global(.orange) .item:global(.game):global(.spottable):focus {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.spotlight-input-key) :global(.orange) .item:global(.game):global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) :global(.orange) .item:global(.game):global(.spottable):focus .bg {
+  background-color: transparent;
+  opacity: 0;
+}
+:global(.spotlight-input-key) :global(.orange) .item:global(.game):global(.spottable):focus .label,
+:global(.spotlight-input-mouse) :global(.orange) .item:global(.game):global(.spottable):focus .label {
+  color: var(--semantic-color-on-background-sub);
+}
+:global(.spotlight-input-key) :global(.orange) .item:global(.game):global(.spottable):focus[disabled],
+:global(.spotlight-input-mouse) :global(.orange) .item:global(.game):global(.spottable):focus[disabled] {
+  color: inherit;
+}
+:global(.spotlight-input-key) :global(.orange) .item:global(.game):global(.spottable):focus[disabled] .bg,
+:global(.spotlight-input-mouse) :global(.orange) .item:global(.game):global(.spottable):focus[disabled] .bg {
+  opacity: 0;
+}
+:global(.spotlight-input-key) :global(.orange) .item:global(.game):global(.spottable):focus[disabled] .slotBefore,
+:global(.spotlight-input-mouse) :global(.orange) .item:global(.game):global(.spottable):focus[disabled] .slotBefore {
+  opacity: initial;
+}
+:global(.spotlight-input-key) :global(.orange) .item:global(.game):global(.spottable):focus[disabled].hasSlotBefore .slotBefore > :last-child,
+:global(.spotlight-input-mouse) :global(.orange) .item:global(.game):global(.spottable):focus[disabled].hasSlotBefore .slotBefore > :last-child {
+  opacity: 0.4;
+}
+:global(.spotlight-input-touch) :global(.orange) .item:global(.game):global(.spottable):active {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.spotlight-input-touch) :global(.orange) .item:global(.game):global(.spottable):active .bg {
+  background-color: transparent;
+  opacity: 0;
+}
+:global(.spotlight-input-touch) :global(.orange) .item:global(.game):global(.spottable):active .label {
+  color: var(--semantic-color-on-background-sub);
+}
+:global(.spotlight-input-touch) :global(.orange) .item:global(.game):global(.spottable):active[disabled] {
+  color: inherit;
+}
+:global(.spotlight-input-touch) :global(.orange) .item:global(.game):global(.spottable):active[disabled] .bg {
+  opacity: 0;
+}
+:global(.spotlight-input-touch) :global(.orange) .item:global(.game):global(.spottable):active[disabled] .slotBefore {
+  opacity: initial;
+}
+:global(.spotlight-input-touch) :global(.orange) .item:global(.game):global(.spottable):active[disabled].hasSlotBefore .slotBefore > :last-child {
+  opacity: 0.4;
+}
+:global(.orange) .item:global(.game).selected .bg {
+  background-color: transparent;
+}
+:global(.orange) .item:global(.game)[disabled] {
+  color: inherit;
+}

package/FormCheckboxItem/package.json

@@ -0,0 +1,3 @@
+{
+	"main": "FormCheckboxItem.js"
+}

package/FormCheckboxItem/tests/FormCheckboxItem-specs.js

@@ -0,0 +1,164 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _FormCheckboxItem = _interopRequireWildcard(require("../FormCheckboxItem"));
+var _Icon = _interopRequireDefault(require("../../Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+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 asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+describe('FormCheckboxItem Specs', function () {
+  test('should support a custom icon', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormCheckboxItem.FormCheckboxItemBase, {
+      icon: "trash",
+      children: "Hello FormCheckboxItem"
+    }));
+    var formCheckboxItemElement = _react.screen.getAllByRole('checkbox');
+    var actual = formCheckboxItemElement[1].textContent.codePointAt();
+    var expected = 983077; // decimal converted charCode of Unicode 'trash' character
+
+    expect(actual).toBe(expected);
+  });
+  test('should have correct text', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormCheckboxItem.FormCheckboxItemBase, {
+      children: "Hello FormCheckboxItem"
+    }));
+    var element = _react.screen.getByText(/Hello FormCheckboxItem/i);
+    expect(element).toBeInTheDocument();
+  });
+  test('should select with click', /*#__PURE__*/_asyncToGenerator(function* () {
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormCheckboxItem["default"], {
+      children: "Hello FormCheckboxItem"
+    }));
+    var formCheckboxItemElement = _react.screen.getAllByRole('checkbox')[0];
+    var expected = 'selected';
+    yield user.click(formCheckboxItemElement);
+    expect(formCheckboxItemElement).toHaveClass(expected);
+  }));
+  test('should deselect by clicking twice', /*#__PURE__*/_asyncToGenerator(function* () {
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormCheckboxItem["default"], {
+      children: "Hello FormCheckboxItem"
+    }));
+    var formCheckboxItemElement = _react.screen.getAllByRole('checkbox')[0];
+    var expected = 'selected';
+    yield user.click(formCheckboxItemElement);
+    yield user.click(formCheckboxItemElement);
+    expect(formCheckboxItemElement).not.toHaveClass(expected);
+  }));
+  test('should be disabled when `disabled` prop is true', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormCheckboxItem["default"], {
+      disabled: true,
+      children: "Hello FormCheckboxItem"
+    }));
+    var formCheckboxItemElement = _react.screen.getAllByRole('checkbox')[0];
+    var expected = 'disabled';
+    expect(formCheckboxItemElement).toHaveAttribute(expected);
+  });
+  test('should have the `-` icon when indeterminate', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormCheckboxItem["default"], {
+      indeterminate: true,
+      children: "Hello FormCheckboxItem"
+    }));
+    var formCheckboxItemIcon = _react.screen.getAllByRole('checkbox')[1];
+    var expected = '-';
+    expect(formCheckboxItemIcon).toHaveTextContent(expected);
+  });
+  test('should have the `-` icon when indeterminate even when clicked', /*#__PURE__*/_asyncToGenerator(function* () {
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormCheckboxItem["default"], {
+      indeterminate: true,
+      children: "Hello FormCheckboxItem"
+    }));
+    var formCheckboxItemElement = _react.screen.getAllByRole('checkbox')[0];
+    yield user.click(formCheckboxItemElement);
+    var formCheckboxItemIcon = _react.screen.getAllByRole('checkbox')[1];
+    var expected = '-';
+    expect(formCheckboxItemIcon).toHaveTextContent(expected);
+  }));
+  test('should support a custom indeterminate icon', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormCheckboxItem.FormCheckboxItemBase, {
+      indeterminate: true,
+      indeterminateIcon: "trash",
+      children: "Hello FormCheckboxItem"
+    }));
+    var formCheckboxItemElement = _react.screen.getAllByRole('checkbox');
+    var actual = formCheckboxItemElement[1].textContent.codePointAt();
+    var expected = 983077; // decimal converted charCode of Unicode 'trash' character
+
+    expect(actual).toBe(expected);
+  });
+  test('should support slotBefore', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormCheckboxItem["default"], {
+      slotBefore: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
+        children: "minus"
+      }),
+      children: "Hello FormCheckboxItem"
+    }));
+    var formCheckboxItemElement = _react.screen.getAllByRole('checkbox')[0].children.item(1).children;
+    var expected = 2;
+    expect(formCheckboxItemElement).toHaveLength(expected);
+  });
+  test('should have inline class when `inline` prop is true', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormCheckboxItem["default"], {
+      inline: true,
+      children: "Hello FormCheckboxItem"
+    }));
+    var formCheckboxItem = _react.screen.getAllByRole('checkbox')[0];
+    var expected = 'inline';
+    expect(formCheckboxItem).toHaveClass(expected);
+  });
+  test('should support label', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormCheckboxItem["default"], {
+      label: "LabelText",
+      children: "Hello FormCheckboxItem"
+    }));
+    var label = _react.screen.getByText('LabelText').parentElement.parentElement;
+    var expectedClass = 'label';
+    expect(label).toBeInTheDocument();
+    expect(label).toHaveClass(expectedClass);
+  });
+  test('should have label default position `below`', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormCheckboxItem["default"], {
+      label: "LabelText",
+      children: "Hello FormCheckboxItem"
+    }));
+    var formCheckboxItemElement = _react.screen.getAllByRole('checkbox')[0].lastElementChild;
+    var expectedClass = 'labelBelow';
+    expect(formCheckboxItemElement).toHaveClass(expectedClass);
+  });
+  test('should have class labelAfter when position is set to `after`', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormCheckboxItem["default"], {
+      label: "LabelText",
+      labelPosition: "after",
+      children: "Hello FormCheckboxItem"
+    }));
+    var formCheckboxItemElement = _react.screen.getAllByRole('checkbox')[0].lastElementChild;
+    var expectedClass = 'labelAfter';
+    expect(formCheckboxItemElement).toHaveClass(expectedClass);
+  });
+  test('should have class labelAbove when position is set to `above`', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormCheckboxItem["default"], {
+      label: "LabelText",
+      labelPosition: "above",
+      children: "Hello FormCheckboxItem"
+    }));
+    var formCheckboxItemElement = _react.screen.getAllByRole('checkbox')[0].lastElementChild;
+    var expectedClass = 'labelAbove';
+    expect(formCheckboxItemElement).toHaveClass(expectedClass);
+  });
+  test('should have class labelBefore when position is set to `before`', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormCheckboxItem["default"], {
+      label: "LabelText",
+      labelPosition: "before",
+      children: "Hello FormCheckboxItem"
+    }));
+    var formCheckboxItemElement = _react.screen.getAllByRole('checkbox')[0].lastElementChild;
+    var expectedClass = 'labelBefore';
+    expect(formCheckboxItemElement).toHaveClass(expectedClass);
+  });
+});

package/Heading/Heading.d.ts

@@ -0,0 +1,104 @@
+// Type definitions for limestone/Heading
+
+import { MarqueeDecoratorProps as limestone_Marquee_MarqueeDecoratorProps } from "limestone/Marquee";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+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 HeadingBaseProps {
+  /**
+ * 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:
+ * *  `heading`  - The root component class
+ * *  `title`  - Applied when  `size`  is set to "title"
+ * *  `subtitle`  - Applied when  `size`  is set to "subtitle"
+ * *  `large`  - Applied when  `size`  is set to "large"
+ * *  `medium`  - Applied when  `size`  is set to "medium"
+ * *  `small`  - Applied when  `size`  is set to "small"
+ * *  `tiny`  - Applied when  `size`  is set to "tiny"
+ * *  `largeSpacing`  - Applied when  `spacing`  is set to "large"
+ * *  `mediumSpacing`  - Applied when  `spacing`  is set to "medium"
+ * *  `smallSpacing`  - Applied when  `spacing`  is set to "small"
+ * *  `noneSpacing`  - Applied when  `spacing`  is set to "none"
+ */
+  css?: object;
+  /**
+   * Adds a horizontal-rule (line) under the component
+   */
+  showLine?: boolean;
+  /**
+ * Set the size of the component.
+ * 
+ * If the  `spacing`  prop is not set (defaulting to "auto"), these values automatically set
+the spacing to the correlated names.
+ */
+  size?: "large" | "medium" | "small" | "tiny";
+  /**
+   * The size of the spacing around the Heading.
+   *
+   * Allowed values include:
+   * *  `'auto'`  - Value is based on the  `size`  prop for automatic usage.
+   * *  `'large'`  - Specifically assign the  `'large'`  spacing.
+   * *  `'medium'`  - Specifically assign the  `'medium'`  spacing.
+   * *  `'small'`  - Specifically assign the  `'small'`  spacing.
+   * *  `'none'`  - No spacing at all. Neighboring elements will directly touch the Heading.
+   */
+  spacing?: "auto" | "large" | "medium" | "small" | "none";
+}
+/**
+ * A labeled Heading component.
+ * 
+ * This component is most often not used directly but may be composed within another component as it
+is within   .
+ */
+
+export class HeadingBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, HeadingBaseProps>
+> {}
+
+export interface HeadingDecoratorProps
+  extends Merge<
+    limestone_Marquee_MarqueeDecoratorProps,
+    limestone_Skinnable_SkinnableProps
+  > {}
+export function HeadingDecorator<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & HeadingDecoratorProps>;
+
+export interface HeadingProps
+  extends Merge<HeadingBaseProps, HeadingDecoratorProps> {
+  /**
+   * Marquee animation trigger.
+   *
+   * Allowed values include:
+   * *  `'hover'`  - Marquee begins when the pointer enters the component
+   * *  `'render'`  - Marquee begins when the component is rendered
+   */
+  marqueeOn?: "hover" | "render";
+}
+/**
+ * A labeled Heading component, ready to use in Limestone applications.
+ * 
+ * `Heading`  may be used as a header to group related components.
+ * 
+ * Usage:
+ * ```
+<Heading
+  spacing="medium"
+>
+  Related Settings
+</Heading>
+<CheckboxItem>A Setting</CheckboxItem>
+<CheckboxItem>A Second Setting</CheckboxItem>
+```
+ */
+
+export class Heading extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, HeadingProps>
+> {}
+
+export default Heading;