jvetrau-ds 0.1.42 → 0.1.43

package/components/flip-list/flip-list.cjs

@@ -0,0 +1,131 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+require('./flip-list.css');
+var classnames = require('../helpers/classnames');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+function hasContent(value) {
+  return value !== null && value !== void 0;
+}
+function getInitialOpenItemId(items, defaultOpenId) {
+  if (defaultOpenId === void 0) {
+    return null;
+  }
+  const hasMatchingItem = items.some(
+    (item) => item.id === defaultOpenId
+  );
+  return hasMatchingItem ? defaultOpenId : null;
+}
+const FlipList = ({
+  items,
+  defaultOpenId,
+  scrollToDefaultOpen = false,
+  className = "",
+  ...props
+}) => {
+  const componentId = React__default.default.useId();
+  const initialOpenItemIdRef = React__default.default.useRef(
+    getInitialOpenItemId(
+      items,
+      defaultOpenId
+    )
+  );
+  const shouldScrollInitiallyRef = React__default.default.useRef(scrollToDefaultOpen);
+  const initialOpenItemRef = React__default.default.useRef(
+    null
+  );
+  const hasScrolledInitiallyRef = React__default.default.useRef(false);
+  const [openItemId, setOpenItemId] = React__default.default.useState(
+    initialOpenItemIdRef.current
+  );
+  React__default.default.useEffect(() => {
+    if (hasScrolledInitiallyRef.current || !shouldScrollInitiallyRef.current || initialOpenItemIdRef.current === null || !initialOpenItemRef.current) {
+      return;
+    }
+    hasScrolledInitiallyRef.current = true;
+    initialOpenItemRef.current.scrollIntoView({
+      behavior: "auto",
+      block: "start"
+    });
+  }, []);
+  if (items.length === 0) {
+    return null;
+  }
+  const classes = classnames.classnames(
+    "flip-list",
+    className,
+    {}
+  );
+  const toggleItem = (itemId) => {
+    setOpenItemId(
+      (current) => current === itemId ? null : itemId
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flip-list__items", children: items.map((item, itemIndex) => {
+        const isOpen = openItemId === item.id;
+        const hasMeta = hasContent(
+          item.meta
+        );
+        const triggerId = `${componentId}-trigger-${itemIndex}`;
+        const contentId = `${componentId}-content-${itemIndex}`;
+        const itemClasses = classnames.classnames(
+          "flip-list__item",
+          "",
+          {
+            "flip-list__item--open": isOpen
+          }
+        );
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: item.id === initialOpenItemIdRef.current ? initialOpenItemRef : void 0,
+            className: itemClasses,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  className: "flip-list__trigger",
+                  id: triggerId,
+                  type: "button",
+                  "aria-expanded": isOpen,
+                  "aria-controls": contentId,
+                  onClick: () => toggleItem(item.id),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flip-list__title", children: item.title }),
+                    hasMeta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flip-list__meta", children: item.meta })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "flip-list__content",
+                  id: contentId,
+                  "aria-labelledby": triggerId,
+                  hidden: !isOpen,
+                  children: item.content
+                }
+              )
+            ]
+          },
+          item.id
+        );
+      }) })
+    }
+  );
+};
+var flip_list_default = FlipList;
+
+module.exports = flip_list_default;
+//# sourceMappingURL=flip-list.cjs.map
+//# sourceMappingURL=flip-list.cjs.map

package/components/flip-list/flip-list.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/flip-list/flip-list.tsx"],"names":["React","classnames","jsx","jsxs"],"mappings":"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","file":"flip-list.cjs","sourcesContent":["import React from 'react';\n\nimport './flip-list.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface FlipListItem {\n  id: React.Key;\n  title: React.ReactNode;\n  meta?: React.ReactNode;\n  content: React.ReactNode;\n}\n\nexport interface FlipListProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  items: FlipListItem[];\n\n  /**\n   * Item opened during the initial render.\n   *\n   * Later changes to this prop do not control\n   * the component state.\n   */\n  defaultOpenId?: React.Key;\n\n  /**\n   * Scrolls the initially opened item into view once\n   * after mounting.\n   *\n   * Has no effect without a valid defaultOpenId.\n   * Manual item opening never triggers scrolling.\n   */\n  scrollToDefaultOpen?: boolean;\n}\n\ntype OpenItemId = React.Key | null;\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return value !== null && value !== undefined;\n}\n\nfunction getInitialOpenItemId(\n  items: FlipListItem[],\n  defaultOpenId: React.Key | undefined,\n): OpenItemId {\n  if (defaultOpenId === undefined) {\n    return null;\n  }\n\n  const hasMatchingItem = items.some(\n    (item) => item.id === defaultOpenId,\n  );\n\n  return hasMatchingItem\n    ? defaultOpenId\n    : null;\n}\n\nconst FlipList: React.FC<FlipListProps> = ({\n  items,\n  defaultOpenId,\n  scrollToDefaultOpen = false,\n  className = '',\n  ...props\n}) => {\n  const componentId = React.useId();\n\n  const initialOpenItemIdRef =\n    React.useRef<OpenItemId>(\n      getInitialOpenItemId(\n        items,\n        defaultOpenId,\n      ),\n    );\n\n  const shouldScrollInitiallyRef =\n    React.useRef(scrollToDefaultOpen);\n\n  const initialOpenItemRef =\n    React.useRef<HTMLDivElement | null>(\n      null,\n    );\n\n  const hasScrolledInitiallyRef =\n    React.useRef(false);\n\n  const [openItemId, setOpenItemId] =\n    React.useState<OpenItemId>(\n      initialOpenItemIdRef.current,\n    );\n\n  React.useEffect(() => {\n    if (\n      hasScrolledInitiallyRef.current ||\n      !shouldScrollInitiallyRef.current ||\n      initialOpenItemIdRef.current === null ||\n      !initialOpenItemRef.current\n    ) {\n      return;\n    }\n\n    hasScrolledInitiallyRef.current = true;\n\n    initialOpenItemRef.current.scrollIntoView({\n      behavior: 'auto',\n      block: 'start',\n    });\n  }, []);\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  const classes = classnames(\n    'flip-list',\n    className,\n    {},\n  );\n\n  const toggleItem = (\n    itemId: React.Key,\n  ) => {\n    setOpenItemId((current) =>\n      current === itemId\n        ? null\n        : itemId,\n    );\n  };\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <div className=\"flip-list__items\">\n        {items.map((item, itemIndex) => {\n          const isOpen =\n            openItemId === item.id;\n\n          const hasMeta = hasContent(\n            item.meta,\n          );\n\n          const triggerId =\n            `${componentId}-trigger-${itemIndex}`;\n\n          const contentId =\n            `${componentId}-content-${itemIndex}`;\n\n          const itemClasses = classnames(\n            'flip-list__item',\n            '',\n            {\n              'flip-list__item--open':\n                isOpen,\n            },\n          );\n\n          return (\n            <div\n              key={item.id}\n              ref={\n                item.id ===\n                initialOpenItemIdRef.current\n                  ? initialOpenItemRef\n                  : undefined\n              }\n              className={itemClasses}\n            >\n              <button\n                className=\"flip-list__trigger\"\n                id={triggerId}\n                type=\"button\"\n                aria-expanded={isOpen}\n                aria-controls={contentId}\n                onClick={() =>\n                  toggleItem(item.id)\n                }\n              >\n                <span className=\"flip-list__title\">\n                  {item.title}\n                </span>\n\n                {hasMeta && (\n                  <span className=\"flip-list__meta\">\n                    {item.meta}\n                  </span>\n                )}\n              </button>\n\n              <div\n                className=\"flip-list__content\"\n                id={contentId}\n                aria-labelledby={triggerId}\n                hidden={!isOpen}\n              >\n                {item.content}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default FlipList;"]}

package/components/flip-list/flip-list.css

@@ -0,0 +1,354 @@
+.flip-list {
+  /* color */
+  --flip-list-color: inherit;
+  --flip-list-trigger-color:
+    var(--color-link);
+  --flip-list-meta-color:
+    var(--color-text-note);
+
+  color: var(--flip-list-color);
+
+  /* typography */
+  --flip-list-title-font-family:
+    var(--font-h4-family);
+  --flip-list-title-font-size:
+    var(--font-h4);
+  --flip-list-title-font-weight:
+    var(--font-h4-weight);
+  --flip-list-title-line-height:
+    var(--font-h4-line);
+  --flip-list-title-letter-spacing:
+    var(--font-h4-letter-spacing);
+
+  --flip-list-open-title-font-family:
+    var(--font-h2-family);
+  --flip-list-open-title-font-size:
+    var(--font-h2);
+  --flip-list-open-title-font-weight:
+    var(--font-h2-weight);
+  --flip-list-open-title-line-height:
+    var(--font-h2-line);
+  --flip-list-open-title-letter-spacing:
+    var(--font-h2-letter-spacing);
+
+  --flip-list-meta-font-family:
+    var(--font-body-family);
+  --flip-list-meta-font-size:
+    var(--font-note);
+  --flip-list-meta-font-weight:
+    var(--font-note-weight);
+  --flip-list-meta-line-height:
+    var(--font-note-line);
+  --flip-list-meta-letter-spacing:
+    var(--font-note-letter-spacing);
+
+  /* size */
+  --flip-list-items-gap:
+    var(--margin-item);
+  --flip-list-open-content-gap:
+    var(--font-h2-margin);
+  --flip-list-trigger-column-gap:
+    var(--margin-item);
+  --flip-list-scroll-margin-block-start:
+    0px;
+
+  display: block;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__items {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  flex-direction: column;
+  gap: var(--flip-list-items-gap);
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__item {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  scroll-margin-block-start:
+    var(
+      --flip-list-scroll-margin-block-start
+    );
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__item--open {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  gap: var(--flip-list-open-content-gap);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__trigger {
+  /* color */
+  background: transparent;
+  color: var(--flip-list-trigger-color);
+
+  /* typography */
+  font: inherit;
+  text-align: left;
+
+  /* size */
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--flip-list-trigger-column-gap);
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  padding: 0;
+
+  /* border */
+  border: 0;
+
+  /* depth */
+
+  /* motion */
+  cursor: pointer;
+}
+
+.flip-list__trigger:focus-visible {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+  outline:
+    var(--size-border-width-focus)
+    solid
+    currentColor;
+  outline-offset:
+    var(--size-border-offset-focus);
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__title {
+  /* color */
+  color: inherit;
+
+  /* typography */
+  font-family:
+    var(--flip-list-title-font-family);
+  font-size:
+    var(--flip-list-title-font-size);
+  font-weight:
+    var(--flip-list-title-font-weight);
+  line-height:
+    var(--flip-list-title-line-height);
+  letter-spacing:
+    var(
+      --flip-list-title-letter-spacing
+    );
+  text-decoration: underline;
+  text-decoration-thickness: from-font;
+  text-underline-offset: from-font;
+
+  /* size */
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__trigger:hover
+  .flip-list__title {
+  /* color */
+
+  /* typography */
+  text-decoration: none;
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__meta {
+  /* color */
+  color: var(--flip-list-meta-color);
+
+  /* typography */
+  font-family:
+    var(--flip-list-meta-font-family);
+  font-size:
+    var(--flip-list-meta-font-size);
+  font-weight:
+    var(--flip-list-meta-font-weight);
+  line-height:
+    var(--flip-list-meta-line-height);
+  letter-spacing:
+    var(--flip-list-meta-letter-spacing);
+  white-space: nowrap;
+
+  /* size */
+  flex: 0 0 auto;
+  min-width: 0;
+  max-width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__item--open
+  .flip-list__trigger {
+  /* color */
+  color: inherit;
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__item--open
+  .flip-list__title {
+  /* color */
+  color: inherit;
+
+  /* typography */
+  font-family:
+    var(
+      --flip-list-open-title-font-family
+    );
+  font-size:
+    var(
+      --flip-list-open-title-font-size
+    );
+  font-weight:
+    var(
+      --flip-list-open-title-font-weight
+    );
+  line-height:
+    var(
+      --flip-list-open-title-line-height
+    );
+  letter-spacing:
+    var(
+      --flip-list-open-title-letter-spacing
+    );
+  text-decoration: none;
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__item--open
+  .flip-list__trigger:hover
+  .flip-list__title {
+  /* color */
+
+  /* typography */
+  text-decoration: none;
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__content {
+  /* color */
+  color: inherit;
+
+  /* typography */
+
+  /* size */
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__content[hidden] {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: none;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}

package/components/flip-list/flip-list.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import './flip-list.css';
+export interface FlipListItem {
+    id: React.Key;
+    title: React.ReactNode;
+    meta?: React.ReactNode;
+    content: React.ReactNode;
+}
+export interface FlipListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    items: FlipListItem[];
+    /**
+     * Item opened during the initial render.
+     *
+     * Later changes to this prop do not control
+     * the component state.
+     */
+    defaultOpenId?: React.Key;
+    /**
+     * Scrolls the initially opened item into view once
+     * after mounting.
+     *
+     * Has no effect without a valid defaultOpenId.
+     * Manual item opening never triggers scrolling.
+     */
+    scrollToDefaultOpen?: boolean;
+}
+declare const FlipList: React.FC<FlipListProps>;
+export default FlipList;

package/components/flip-list/flip-list.js

@@ -0,0 +1,125 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import './flip-list.css';
+import { classnames } from '../helpers/classnames';
+
+function hasContent(value) {
+  return value !== null && value !== void 0;
+}
+function getInitialOpenItemId(items, defaultOpenId) {
+  if (defaultOpenId === void 0) {
+    return null;
+  }
+  const hasMatchingItem = items.some(
+    (item) => item.id === defaultOpenId
+  );
+  return hasMatchingItem ? defaultOpenId : null;
+}
+const FlipList = ({
+  items,
+  defaultOpenId,
+  scrollToDefaultOpen = false,
+  className = "",
+  ...props
+}) => {
+  const componentId = React.useId();
+  const initialOpenItemIdRef = React.useRef(
+    getInitialOpenItemId(
+      items,
+      defaultOpenId
+    )
+  );
+  const shouldScrollInitiallyRef = React.useRef(scrollToDefaultOpen);
+  const initialOpenItemRef = React.useRef(
+    null
+  );
+  const hasScrolledInitiallyRef = React.useRef(false);
+  const [openItemId, setOpenItemId] = React.useState(
+    initialOpenItemIdRef.current
+  );
+  React.useEffect(() => {
+    if (hasScrolledInitiallyRef.current || !shouldScrollInitiallyRef.current || initialOpenItemIdRef.current === null || !initialOpenItemRef.current) {
+      return;
+    }
+    hasScrolledInitiallyRef.current = true;
+    initialOpenItemRef.current.scrollIntoView({
+      behavior: "auto",
+      block: "start"
+    });
+  }, []);
+  if (items.length === 0) {
+    return null;
+  }
+  const classes = classnames(
+    "flip-list",
+    className,
+    {}
+  );
+  const toggleItem = (itemId) => {
+    setOpenItemId(
+      (current) => current === itemId ? null : itemId
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "flip-list__items", children: items.map((item, itemIndex) => {
+        const isOpen = openItemId === item.id;
+        const hasMeta = hasContent(
+          item.meta
+        );
+        const triggerId = `${componentId}-trigger-${itemIndex}`;
+        const contentId = `${componentId}-content-${itemIndex}`;
+        const itemClasses = classnames(
+          "flip-list__item",
+          "",
+          {
+            "flip-list__item--open": isOpen
+          }
+        );
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: item.id === initialOpenItemIdRef.current ? initialOpenItemRef : void 0,
+            className: itemClasses,
+            children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: "flip-list__trigger",
+                  id: triggerId,
+                  type: "button",
+                  "aria-expanded": isOpen,
+                  "aria-controls": contentId,
+                  onClick: () => toggleItem(item.id),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "flip-list__title", children: item.title }),
+                    hasMeta && /* @__PURE__ */ jsx("span", { className: "flip-list__meta", children: item.meta })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "flip-list__content",
+                  id: contentId,
+                  "aria-labelledby": triggerId,
+                  hidden: !isOpen,
+                  children: item.content
+                }
+              )
+            ]
+          },
+          item.id
+        );
+      }) })
+    }
+  );
+};
+var flip_list_default = FlipList;
+
+export { flip_list_default as default };
+//# sourceMappingURL=flip-list.js.map
+//# sourceMappingURL=flip-list.js.map

package/components/flip-list/flip-list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/flip-list/flip-list.tsx"],"names":[],"mappings":"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","file":"flip-list.js","sourcesContent":["import React from 'react';\n\nimport './flip-list.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface FlipListItem {\n  id: React.Key;\n  title: React.ReactNode;\n  meta?: React.ReactNode;\n  content: React.ReactNode;\n}\n\nexport interface FlipListProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  items: FlipListItem[];\n\n  /**\n   * Item opened during the initial render.\n   *\n   * Later changes to this prop do not control\n   * the component state.\n   */\n  defaultOpenId?: React.Key;\n\n  /**\n   * Scrolls the initially opened item into view once\n   * after mounting.\n   *\n   * Has no effect without a valid defaultOpenId.\n   * Manual item opening never triggers scrolling.\n   */\n  scrollToDefaultOpen?: boolean;\n}\n\ntype OpenItemId = React.Key | null;\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return value !== null && value !== undefined;\n}\n\nfunction getInitialOpenItemId(\n  items: FlipListItem[],\n  defaultOpenId: React.Key | undefined,\n): OpenItemId {\n  if (defaultOpenId === undefined) {\n    return null;\n  }\n\n  const hasMatchingItem = items.some(\n    (item) => item.id === defaultOpenId,\n  );\n\n  return hasMatchingItem\n    ? defaultOpenId\n    : null;\n}\n\nconst FlipList: React.FC<FlipListProps> = ({\n  items,\n  defaultOpenId,\n  scrollToDefaultOpen = false,\n  className = '',\n  ...props\n}) => {\n  const componentId = React.useId();\n\n  const initialOpenItemIdRef =\n    React.useRef<OpenItemId>(\n      getInitialOpenItemId(\n        items,\n        defaultOpenId,\n      ),\n    );\n\n  const shouldScrollInitiallyRef =\n    React.useRef(scrollToDefaultOpen);\n\n  const initialOpenItemRef =\n    React.useRef<HTMLDivElement | null>(\n      null,\n    );\n\n  const hasScrolledInitiallyRef =\n    React.useRef(false);\n\n  const [openItemId, setOpenItemId] =\n    React.useState<OpenItemId>(\n      initialOpenItemIdRef.current,\n    );\n\n  React.useEffect(() => {\n    if (\n      hasScrolledInitiallyRef.current ||\n      !shouldScrollInitiallyRef.current ||\n      initialOpenItemIdRef.current === null ||\n      !initialOpenItemRef.current\n    ) {\n      return;\n    }\n\n    hasScrolledInitiallyRef.current = true;\n\n    initialOpenItemRef.current.scrollIntoView({\n      behavior: 'auto',\n      block: 'start',\n    });\n  }, []);\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  const classes = classnames(\n    'flip-list',\n    className,\n    {},\n  );\n\n  const toggleItem = (\n    itemId: React.Key,\n  ) => {\n    setOpenItemId((current) =>\n      current === itemId\n        ? null\n        : itemId,\n    );\n  };\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <div className=\"flip-list__items\">\n        {items.map((item, itemIndex) => {\n          const isOpen =\n            openItemId === item.id;\n\n          const hasMeta = hasContent(\n            item.meta,\n          );\n\n          const triggerId =\n            `${componentId}-trigger-${itemIndex}`;\n\n          const contentId =\n            `${componentId}-content-${itemIndex}`;\n\n          const itemClasses = classnames(\n            'flip-list__item',\n            '',\n            {\n              'flip-list__item--open':\n                isOpen,\n            },\n          );\n\n          return (\n            <div\n              key={item.id}\n              ref={\n                item.id ===\n                initialOpenItemIdRef.current\n                  ? initialOpenItemRef\n                  : undefined\n              }\n              className={itemClasses}\n            >\n              <button\n                className=\"flip-list__trigger\"\n                id={triggerId}\n                type=\"button\"\n                aria-expanded={isOpen}\n                aria-controls={contentId}\n                onClick={() =>\n                  toggleItem(item.id)\n                }\n              >\n                <span className=\"flip-list__title\">\n                  {item.title}\n                </span>\n\n                {hasMeta && (\n                  <span className=\"flip-list__meta\">\n                    {item.meta}\n                  </span>\n                )}\n              </button>\n\n              <div\n                className=\"flip-list__content\"\n                id={contentId}\n                aria-labelledby={triggerId}\n                hidden={!isOpen}\n              >\n                {item.content}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default FlipList;"]}

package/components/flip-list/index.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var flipList = require('./flip-list');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var flipList__default = /*#__PURE__*/_interopDefault(flipList);
+
+
+
+Object.defineProperty(exports, "FlipList", {
+  enumerable: true,
+  get: function () { return flipList__default.default; }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () { return flipList__default.default; }
+});
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/components/flip-list/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs","sourcesContent":[]}

package/components/flip-list/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './flip-list';
+export { default as FlipList } from './flip-list';
+export type { FlipListItem, FlipListProps, } from './flip-list';

package/components/flip-list/index.js

@@ -0,0 +1,3 @@
+export { default as FlipList, default } from './flip-list';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/components/flip-list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/components/index.cjs

@@ -27,6 +27,7 @@ var markdown = require('./markdown/markdown');
 var discussion = require('./discussion/discussion');
 var courseOutline = require('./course-outline/course-outline');
 var calendarMonth = require('./calendar-month');
+var flipList = require('./flip-list/flip-list');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -56,6 +57,7 @@ var breadcrumbs__default = /*#__PURE__*/_interopDefault(breadcrumbs);
 var markdown__default = /*#__PURE__*/_interopDefault(markdown);
 var discussion__default = /*#__PURE__*/_interopDefault(discussion);
 var courseOutline__default = /*#__PURE__*/_interopDefault(courseOutline);
+var flipList__default = /*#__PURE__*/_interopDefault(flipList);
 
 
 
@@ -163,6 +165,10 @@ Object.defineProperty(exports, "CourseOutline", {
   enumerable: true,
   get: function () { return courseOutline__default.default; }
 });
+Object.defineProperty(exports, "FlipList", {
+  enumerable: true,
+  get: function () { return flipList__default.default; }
+});
 Object.keys(calendarMonth).forEach(function (k) {
   if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
     enumerable: true,

package/components/index.d.ts

@@ -51,3 +51,5 @@ export type { DiscussionItem, DiscussionProps, } from './discussion/discussion';
 export { default as CourseOutline } from './course-outline/course-outline';
 export type { CourseOutlineGroup, CourseOutlineHeadingLevel, CourseOutlineItem, CourseOutlineProps, } from './course-outline/course-outline';
 export * from './calendar-month';
+export { default as FlipList } from './flip-list/flip-list';
+export type { FlipListItem, FlipListProps, } from './flip-list/flip-list';

package/components/index.js

@@ -25,5 +25,6 @@ export { default as Markdown } from './markdown/markdown';
 export { default as Discussion } from './discussion/discussion';
 export { default as CourseOutline } from './course-outline/course-outline';
 export * from './calendar-month';
+export { default as FlipList } from './flip-list/flip-list';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/index.cjs

@@ -29,6 +29,7 @@ var markdown = require('./components/markdown');
 var discussion = require('./components/discussion');
 var courseOutline = require('./components/course-outline');
 var calendarMonth = require('./components/calendar-month');
+var flipList = require('./components/flip-list');
 var header = require('./patterns/header');
 var footer = require('./patterns/footer');
 var screenHeader = require('./patterns/screen-header');
@@ -70,6 +71,7 @@ var breadcrumbs__default = /*#__PURE__*/_interopDefault(breadcrumbs);
 var markdown__default = /*#__PURE__*/_interopDefault(markdown);
 var discussion__default = /*#__PURE__*/_interopDefault(discussion);
 var courseOutline__default = /*#__PURE__*/_interopDefault(courseOutline);
+var flipList__default = /*#__PURE__*/_interopDefault(flipList);
 var header__default = /*#__PURE__*/_interopDefault(header);
 var footer__default = /*#__PURE__*/_interopDefault(footer);
 var screenHeader__default = /*#__PURE__*/_interopDefault(screenHeader);
@@ -195,6 +197,10 @@ Object.defineProperty(exports, "CourseOutline", {
   enumerable: true,
   get: function () { return courseOutline__default.default; }
 });
+Object.defineProperty(exports, "FlipList", {
+  enumerable: true,
+  get: function () { return flipList__default.default; }
+});
 Object.defineProperty(exports, "Header", {
   enumerable: true,
   get: function () { return header__default.default; }

package/index.d.ts

@@ -59,6 +59,8 @@ export type { DiscussionItem, DiscussionProps, } from './components/discussion';
 export { default as CourseOutline } from './components/course-outline';
 export type { CourseOutlineGroup, CourseOutlineHeadingLevel, CourseOutlineItem, CourseOutlineProps, } from './components/course-outline';
 export * from './components/calendar-month';
+export { default as FlipList } from './components/flip-list';
+export type { FlipListItem, FlipListProps, } from './components/flip-list';
 export { default as Header } from './patterns/header';
 export type { HeaderProps } from './patterns/header';
 export { default as Footer } from './patterns/footer';

package/index.js

@@ -27,6 +27,7 @@ export { default as Markdown } from './components/markdown';
 export { default as Discussion } from './components/discussion';
 export { default as CourseOutline } from './components/course-outline';
 export * from './components/calendar-month';
+export { default as FlipList } from './components/flip-list';
 export { default as Header } from './patterns/header';
 export { default as Footer } from './patterns/footer';
 export { default as ScreenHeader } from './patterns/screen-header';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jvetrau-ds",
-  "version": "0.1.42",
+  "version": "0.1.43",
   "description": "Multi-brand React design system with semantic tokens",
   "license": "UNLICENSED",
   "type": "module",

package/styles.css

@@ -2175,6 +2175,362 @@
   flex-direction: column;
 }
 
+/* src/components/flip-list/flip-list.css */
+.flip-list {
+  /* color */
+  --flip-list-color: inherit;
+  --flip-list-trigger-color:
+    var(--color-link);
+  --flip-list-meta-color:
+    var(--color-text-note);
+
+  color: var(--flip-list-color);
+
+  /* typography */
+  --flip-list-title-font-family:
+    var(--font-h4-family);
+  --flip-list-title-font-size:
+    var(--font-h4);
+  --flip-list-title-font-weight:
+    var(--font-h4-weight);
+  --flip-list-title-line-height:
+    var(--font-h4-line);
+  --flip-list-title-letter-spacing:
+    var(--font-h4-letter-spacing);
+
+  --flip-list-open-title-font-family:
+    var(--font-h2-family);
+  --flip-list-open-title-font-size:
+    var(--font-h2);
+  --flip-list-open-title-font-weight:
+    var(--font-h2-weight);
+  --flip-list-open-title-line-height:
+    var(--font-h2-line);
+  --flip-list-open-title-letter-spacing:
+    var(--font-h2-letter-spacing);
+
+  --flip-list-meta-font-family:
+    var(--font-body-family);
+  --flip-list-meta-font-size:
+    var(--font-note);
+  --flip-list-meta-font-weight:
+    var(--font-note-weight);
+  --flip-list-meta-line-height:
+    var(--font-note-line);
+  --flip-list-meta-letter-spacing:
+    var(--font-note-letter-spacing);
+
+  /* size */
+  --flip-list-items-gap:
+    var(--margin-item);
+  --flip-list-open-content-gap:
+    var(--font-h2-margin);
+  --flip-list-trigger-column-gap:
+    var(--margin-item);
+  --flip-list-scroll-margin-block-start:
+    0px;
+
+  display: block;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__items {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  flex-direction: column;
+  gap: var(--flip-list-items-gap);
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__item {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  scroll-margin-block-start:
+    var(
+      --flip-list-scroll-margin-block-start
+    );
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__item--open {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  gap: var(--flip-list-open-content-gap);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__trigger {
+  /* color */
+  background: transparent;
+  color: var(--flip-list-trigger-color);
+
+  /* typography */
+  font: inherit;
+  text-align: left;
+
+  /* size */
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--flip-list-trigger-column-gap);
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  padding: 0;
+
+  /* border */
+  border: 0;
+
+  /* depth */
+
+  /* motion */
+  cursor: pointer;
+}
+
+.flip-list__trigger:focus-visible {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+  outline:
+    var(--size-border-width-focus)
+    solid
+    currentColor;
+  outline-offset:
+    var(--size-border-offset-focus);
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__title {
+  /* color */
+  color: inherit;
+
+  /* typography */
+  font-family:
+    var(--flip-list-title-font-family);
+  font-size:
+    var(--flip-list-title-font-size);
+  font-weight:
+    var(--flip-list-title-font-weight);
+  line-height:
+    var(--flip-list-title-line-height);
+  letter-spacing:
+    var(
+      --flip-list-title-letter-spacing
+    );
+  text-decoration: underline;
+  text-decoration-thickness: from-font;
+  text-underline-offset: from-font;
+
+  /* size */
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__trigger:hover
+  .flip-list__title {
+  /* color */
+
+  /* typography */
+  text-decoration: none;
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__meta {
+  /* color */
+  color: var(--flip-list-meta-color);
+
+  /* typography */
+  font-family:
+    var(--flip-list-meta-font-family);
+  font-size:
+    var(--flip-list-meta-font-size);
+  font-weight:
+    var(--flip-list-meta-font-weight);
+  line-height:
+    var(--flip-list-meta-line-height);
+  letter-spacing:
+    var(--flip-list-meta-letter-spacing);
+  white-space: nowrap;
+
+  /* size */
+  flex: 0 0 auto;
+  min-width: 0;
+  max-width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__item--open
+  .flip-list__trigger {
+  /* color */
+  color: inherit;
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__item--open
+  .flip-list__title {
+  /* color */
+  color: inherit;
+
+  /* typography */
+  font-family:
+    var(
+      --flip-list-open-title-font-family
+    );
+  font-size:
+    var(
+      --flip-list-open-title-font-size
+    );
+  font-weight:
+    var(
+      --flip-list-open-title-font-weight
+    );
+  line-height:
+    var(
+      --flip-list-open-title-line-height
+    );
+  letter-spacing:
+    var(
+      --flip-list-open-title-letter-spacing
+    );
+  text-decoration: none;
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__item--open
+  .flip-list__trigger:hover
+  .flip-list__title {
+  /* color */
+
+  /* typography */
+  text-decoration: none;
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__content {
+  /* color */
+  color: inherit;
+
+  /* typography */
+
+  /* size */
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__content[hidden] {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: none;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 /* src/components/input/input.css */
 .input {
   /* color */