@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/src/icons/Menu.svelte

@@ -0,0 +1,26 @@
+<script>
+  export let size = 16;
+
+  export let title = undefined;
+
+  $: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
+  $: attributes = {
+    "aria-hidden": labelled ? undefined : true,
+    role: labelled ? "img" : undefined,
+    focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
+  };
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  fill="currentColor"
+  preserveAspectRatio="xMidYMid meet"
+  width={size}
+  height={size}
+  {...attributes}
+  {...$$restProps}
+>
+  {#if title}<title>{title}</title>{/if}
+  <path d="M4 6H28V8H4zM4 24H28V26H4zM4 12H28V14H4zM4 18H28V20H4z"></path>
+</svg>

package/src/icons/OverflowMenuHorizontal.svelte

@@ -0,0 +1,27 @@
+<script>
+  export let size = 16;
+
+  export let title = undefined;
+
+  $: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
+  $: attributes = {
+    "aria-hidden": labelled ? undefined : true,
+    role: labelled ? "img" : undefined,
+    focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
+  };
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  fill="currentColor"
+  preserveAspectRatio="xMidYMid meet"
+  width={size}
+  height={size}
+  {...attributes}
+  {...$$restProps}
+>
+  {#if title}<title>{title}</title>{/if}
+  <circle cx="8" cy="16" r="2"></circle><circle cx="16" cy="16" r="2"
+  ></circle><circle cx="24" cy="16" r="2"></circle>
+</svg>

package/src/icons/OverflowMenuVertical.svelte

@@ -0,0 +1,27 @@
+<script>
+  export let size = 16;
+
+  export let title = undefined;
+
+  $: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
+  $: attributes = {
+    "aria-hidden": labelled ? undefined : true,
+    role: labelled ? "img" : undefined,
+    focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
+  };
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  fill="currentColor"
+  preserveAspectRatio="xMidYMid meet"
+  width={size}
+  height={size}
+  {...attributes}
+  {...$$restProps}
+>
+  {#if title}<title>{title}</title>{/if}
+  <circle cx="16" cy="8" r="2"></circle><circle cx="16" cy="16" r="2"
+  ></circle><circle cx="16" cy="24" r="2"></circle>
+</svg>

package/src/icons/Settings.svelte

@@ -0,0 +1,30 @@
+<script>
+  export let size = 16;
+
+  export let title = undefined;
+
+  $: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
+  $: attributes = {
+    "aria-hidden": labelled ? undefined : true,
+    role: labelled ? "img" : undefined,
+    focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
+  };
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  fill="currentColor"
+  preserveAspectRatio="xMidYMid meet"
+  width={size}
+  height={size}
+  {...attributes}
+  {...$$restProps}
+>
+  {#if title}<title>{title}</title>{/if}
+  <path
+    d="M27,16.76c0-.25,0-.5,0-.76s0-.51,0-.77l1.92-1.68A2,2,0,0,0,29.3,11L26.94,7a2,2,0,0,0-1.73-1,2,2,0,0,0-.64.1l-2.43.82a11.35,11.35,0,0,0-1.31-.75l-.51-2.52a2,2,0,0,0-2-1.61H13.64a2,2,0,0,0-2,1.61l-.51,2.52a11.48,11.48,0,0,0-1.32.75L7.43,6.06A2,2,0,0,0,6.79,6,2,2,0,0,0,5.06,7L2.7,11a2,2,0,0,0,.41,2.51L5,15.24c0,.25,0,.5,0,.76s0,.51,0,.77L3.11,18.45A2,2,0,0,0,2.7,21L5.06,25a2,2,0,0,0,1.73,1,2,2,0,0,0,.64-.1l2.43-.82a11.35,11.35,0,0,0,1.31.75l.51,2.52a2,2,0,0,0,2,1.61h4.72a2,2,0,0,0,2-1.61l.51-2.52a11.48,11.48,0,0,0,1.32-.75l2.42.82a2,2,0,0,0,.64.1,2,2,0,0,0,1.73-1L29.3,21a2,2,0,0,0-.41-2.51ZM25.21,24l-3.43-1.16a8.86,8.86,0,0,1-2.71,1.57L18.36,28H13.64l-.71-3.55a9.36,9.36,0,0,1-2.7-1.57L6.79,24,4.43,20l2.72-2.4a8.9,8.9,0,0,1,0-3.13L4.43,12,6.79,8l3.43,1.16a8.86,8.86,0,0,1,2.71-1.57L13.64,4h4.72l.71,3.55a9.36,9.36,0,0,1,2.7,1.57L25.21,8,27.57,12l-2.72,2.4a8.9,8.9,0,0,1,0,3.13L27.57,20Z"
+  ></path><path
+    d="M16,22a6,6,0,1,1,6-6A5.94,5.94,0,0,1,16,22Zm0-10a3.91,3.91,0,0,0-4,4,3.91,3.91,0,0,0,4,4,3.91,3.91,0,0,0,4-4A3.91,3.91,0,0,0,16,12Z"
+  ></path>
+</svg>

package/src/icons/Subtract.svelte

@@ -0,0 +1,26 @@
+<script>
+  export let size = 16;
+
+  export let title = undefined;
+
+  $: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
+  $: attributes = {
+    "aria-hidden": labelled ? undefined : true,
+    role: labelled ? "img" : undefined,
+    focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
+  };
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  fill="currentColor"
+  preserveAspectRatio="xMidYMid meet"
+  width={size}
+  height={size}
+  {...attributes}
+  {...$$restProps}
+>
+  {#if title}<title>{title}</title>{/if}
+  <path d="M8 15H24V17H8z"></path>
+</svg>

package/src/icons/Switcher.svelte

@@ -0,0 +1,28 @@
+<script>
+  export let size = 16;
+
+  export let title = undefined;
+
+  $: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
+  $: attributes = {
+    "aria-hidden": labelled ? undefined : true,
+    role: labelled ? "img" : undefined,
+    focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
+  };
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  fill="currentColor"
+  preserveAspectRatio="xMidYMid meet"
+  width={size}
+  height={size}
+  {...attributes}
+  {...$$restProps}
+>
+  {#if title}<title>{title}</title>{/if}
+  <path
+    d="M14 4H18V8H14zM4 4H8V8H4zM24 4H28V8H24zM14 14H18V18H14zM4 14H8V18H4zM24 14H28V18H24zM14 24H18V28H14zM4 24H8V28H4zM24 24H28V28H24z"
+  ></path>
+</svg>

package/src/icons/View.svelte

@@ -0,0 +1,30 @@
+<script>
+  export let size = 16;
+
+  export let title = undefined;
+
+  $: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
+  $: attributes = {
+    "aria-hidden": labelled ? undefined : true,
+    role: labelled ? "img" : undefined,
+    focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
+  };
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  fill="currentColor"
+  preserveAspectRatio="xMidYMid meet"
+  width={size}
+  height={size}
+  {...attributes}
+  {...$$restProps}
+>
+  {#if title}<title>{title}</title>{/if}
+  <path
+    d="M30.94,15.66A16.69,16.69,0,0,0,16,5,16.69,16.69,0,0,0,1.06,15.66a1,1,0,0,0,0,.68A16.69,16.69,0,0,0,16,27,16.69,16.69,0,0,0,30.94,16.34,1,1,0,0,0,30.94,15.66ZM16,25c-5.3,0-10.9-3.93-12.93-9C5.1,10.93,10.7,7,16,7s10.9,3.93,12.93,9C26.9,21.07,21.3,25,16,25Z"
+  ></path><path
+    d="M16,10a6,6,0,1,0,6,6A6,6,0,0,0,16,10Zm0,10a4,4,0,1,1,4-4A4,4,0,0,1,16,20Z"
+  ></path>
+</svg>

package/src/icons/ViewOff.svelte

@@ -0,0 +1,30 @@
+<script>
+  export let size = 16;
+
+  export let title = undefined;
+
+  $: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
+  $: attributes = {
+    "aria-hidden": labelled ? undefined : true,
+    role: labelled ? "img" : undefined,
+    focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
+  };
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  fill="currentColor"
+  preserveAspectRatio="xMidYMid meet"
+  width={size}
+  height={size}
+  {...attributes}
+  {...$$restProps}
+>
+  {#if title}<title>{title}</title>{/if}
+  <path
+    d="M5.24,22.51l1.43-1.42A14.06,14.06,0,0,1,3.07,16C5.1,10.93,10.7,7,16,7a12.38,12.38,0,0,1,4,.72l1.55-1.56A14.72,14.72,0,0,0,16,5,16.69,16.69,0,0,0,1.06,15.66a1,1,0,0,0,0,.68A16,16,0,0,0,5.24,22.51Z"
+  ></path><path
+    d="M12 15.73a4 4 0 013.7-3.7l1.81-1.82a6 6 0 00-7.33 7.33zM30.94 15.66A16.4 16.4 0 0025.2 8.22L30 3.41 28.59 2 2 28.59 3.41 30l5.1-5.1A15.29 15.29 0 0016 27 16.69 16.69 0 0030.94 16.34 1 1 0 0030.94 15.66zM20 16a4 4 0 01-6 3.44L19.44 14A4 4 0 0120 16zm-4 9a13.05 13.05 0 01-6-1.58l2.54-2.54a6 6 0 008.35-8.35l2.87-2.87A14.54 14.54 0 0128.93 16C26.9 21.07 21.3 25 16 25z"
+  ></path>
+</svg>

package/src/icons/Warning.svelte

@@ -0,0 +1,29 @@
+<script>
+  export let size = 16;
+
+  export let title = undefined;
+
+  $: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
+  $: attributes = {
+    "aria-hidden": labelled ? undefined : true,
+    role: labelled ? "img" : undefined,
+    focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
+  };
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  fill="currentColor"
+  preserveAspectRatio="xMidYMid meet"
+  width={size}
+  height={size}
+  {...attributes}
+  {...$$restProps}
+>
+  {#if title}<title>{title}</title>{/if}
+  <path
+    d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"
+  ></path><path d="M15 8H17V19H15zM16 22a1.5 1.5 0 101.5 1.5A1.5 1.5 0 0016 22z"
+  ></path>
+</svg>

package/src/icons/WarningAltFilled.svelte

@@ -0,0 +1,34 @@
+<script>
+  export let size = 16;
+
+  export let title = undefined;
+
+  $: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
+  $: attributes = {
+    "aria-hidden": labelled ? undefined : true,
+    role: labelled ? "img" : undefined,
+    focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
+  };
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  fill="currentColor"
+  preserveAspectRatio="xMidYMid meet"
+  width={size}
+  height={size}
+  {...attributes}
+  {...$$restProps}
+>
+  {#if title}<title>{title}</title>{/if}
+  <path
+    fill="none"
+    d="M16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Zm-1.125-5h2.25V12h-2.25Z"
+    data-icon-path="inner-path"
+  ></path><path
+    d="M16.002,6.1714h-.004L4.6487,27.9966,4.6506,28H27.3494l.0019-.0034ZM14.875,12h2.25v9h-2.25ZM16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Z"
+  ></path><path
+    d="M29,30H3a1,1,0,0,1-.8872-1.4614l13-25a1,1,0,0,1,1.7744,0l13,25A1,1,0,0,1,29,30ZM4.6507,28H27.3493l.002-.0033L16.002,6.1714h-.004L4.6487,27.9967Z"
+  ></path>
+</svg>

package/src/icons/WarningFilled.svelte

@@ -0,0 +1,33 @@
+<script>
+  export let size = 16;
+
+  export let title = undefined;
+
+  $: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
+  $: attributes = {
+    "aria-hidden": labelled ? undefined : true,
+    role: labelled ? "img" : undefined,
+    focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
+  };
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  fill="currentColor"
+  preserveAspectRatio="xMidYMid meet"
+  width={size}
+  height={size}
+  {...attributes}
+  {...$$restProps}
+>
+  {#if title}<title>{title}</title>{/if}
+  <path
+    d="M16,2C8.3,2,2,8.3,2,16s6.3,14,14,14s14-6.3,14-14C30,8.3,23.7,2,16,2z M14.9,8h2.2v11h-2.2V8z M16,25	c-0.8,0-1.5-0.7-1.5-1.5S15.2,22,16,22c0.8,0,1.5,0.7,1.5,1.5S16.8,25,16,25z"
+  ></path><path
+    fill="none"
+    d="M17.5,23.5c0,0.8-0.7,1.5-1.5,1.5c-0.8,0-1.5-0.7-1.5-1.5S15.2,22,16,22	C16.8,22,17.5,22.7,17.5,23.5z M17.1,8h-2.2v11h2.2V8z"
+    data-icon-path="inner-path"
+    opacity="0"
+  ></path>
+</svg>

package/src/index.js

@@ -0,0 +1,155 @@
+export { Accordion, AccordionItem, AccordionSkeleton } from "./Accordion";
+export { AspectRatio } from "./AspectRatio";
+export { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton } from "./Breadcrumb";
+export { Breakpoint } from "./Breakpoint";
+export { default as breakpointObserver } from "./Breakpoint/breakpointObserver";
+export { default as breakpoints } from "./Breakpoint/breakpoints";
+export { Button, ButtonSkeleton, ButtonSet } from "./Button";
+export { Checkbox, CheckboxSkeleton } from "./Checkbox";
+export { ContentSwitcher, Switch } from "./ContentSwitcher";
+export {
+  ContextMenu,
+  ContextMenuDivider,
+  ContextMenuGroup,
+  ContextMenuOption,
+  ContextMenuRadioGroup,
+} from "./ContextMenu";
+export { CopyButton } from "./CopyButton";
+export { ComboBox } from "./ComboBox";
+export {
+  ComposedModal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+} from "./ComposedModal";
+export { CodeSnippet, CodeSnippetSkeleton } from "./CodeSnippet";
+export {
+  DataTable,
+  DataTableSkeleton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Toolbar,
+  ToolbarContent,
+  ToolbarSearch,
+  ToolbarBatchActions,
+  ToolbarMenu,
+  ToolbarMenuItem,
+} from "./DataTable";
+export { DatePicker, DatePickerInput, DatePickerSkeleton } from "./DatePicker";
+export { Dropdown, DropdownSkeleton } from "./Dropdown";
+export {
+  FileUploader,
+  FileUploaderButton,
+  FileUploaderItem,
+  FileUploaderDropContainer,
+  Filename,
+  FileUploaderSkeleton,
+} from "./FileUploader";
+export { Form } from "./Form";
+export { FluidForm } from "./FluidForm";
+export { FormGroup } from "./FormGroup";
+export { FormItem } from "./FormItem";
+export { FormLabel } from "./FormLabel";
+export { Grid, Row, Column } from "./Grid";
+export { ImageLoader } from "./ImageLoader";
+export { InlineLoading } from "./InlineLoading";
+export { Link, OutboundLink } from "./Link";
+export {
+  ListBox,
+  ListBoxField,
+  ListBoxMenu,
+  ListBoxMenuIcon,
+  ListBoxMenuItem,
+  ListBoxSelection,
+} from "./ListBox";
+export { ListItem } from "./ListItem";
+export { Loading } from "./Loading";
+export { LocalStorage } from "./LocalStorage";
+export { MultiSelect } from "./MultiSelect";
+export { Modal } from "./Modal";
+export {
+  ToastNotification,
+  InlineNotification,
+  NotificationActionButton,
+  NotificationButton,
+  NotificationIcon,
+} from "./Notification";
+export { NumberInput, NumberInputSkeleton } from "./NumberInput";
+export { OrderedList } from "./OrderedList";
+export { OverflowMenu, OverflowMenuItem } from "./OverflowMenu";
+export { Pagination, PaginationSkeleton } from "./Pagination";
+export { PaginationNav } from "./PaginationNav";
+export { Popover } from "./Popover";
+export { ProgressBar } from "./ProgressBar";
+export {
+  ProgressIndicator,
+  ProgressIndicatorSkeleton,
+  ProgressStep,
+} from "./ProgressIndicator";
+export { RadioButton, RadioButtonSkeleton } from "./RadioButton";
+export { RadioButtonGroup } from "./RadioButtonGroup";
+export { RecursiveList } from "./RecursiveList";
+export { Search, SearchSkeleton } from "./Search";
+export { Select, SelectSkeleton, SelectItem, SelectItemGroup } from "./Select";
+export { SkeletonPlaceholder } from "./SkeletonPlaceholder";
+export { SkeletonText } from "./SkeletonText";
+export { Slider, SliderSkeleton } from "./Slider";
+export {
+  StructuredList,
+  StructuredListSkeleton,
+  StructuredListBody,
+  StructuredListHead,
+  StructuredListCell,
+  StructuredListRow,
+  StructuredListInput,
+} from "./StructuredList";
+export { Tabs, Tab, TabContent, TabsSkeleton } from "./Tabs";
+export { Tag, TagSkeleton } from "./Tag";
+export { TextArea, TextAreaSkeleton } from "./TextArea";
+export { TextInput, TextInputSkeleton, PasswordInput } from "./TextInput";
+export { Theme } from "./Theme";
+export {
+  Tile,
+  ClickableTile,
+  ExpandableTile,
+  SelectableTile,
+  RadioTile,
+  TileGroup,
+} from "./Tile";
+export { TimePicker, TimePickerSelect } from "./TimePicker";
+export { Toggle, ToggleSkeleton } from "./Toggle";
+export { Tooltip, TooltipFooter } from "./Tooltip";
+export { TooltipDefinition } from "./TooltipDefinition";
+export { TooltipIcon } from "./TooltipIcon";
+export { TreeView } from "./TreeView";
+export { Truncate } from "./Truncate";
+export { default as truncate } from "./Truncate/truncate";
+export {
+  Header,
+  HeaderAction,
+  HeaderActionLink,
+  HeaderNav,
+  HeaderNavItem,
+  HeaderNavMenu,
+  HeaderPanelDivider,
+  HeaderPanelLink,
+  HeaderPanelLinks,
+  HeaderUtilities,
+  SideNav,
+  SideNavItems,
+  SideNavLink,
+  SideNavMenu,
+  SideNavMenuItem,
+  SideNavDivider,
+  Content,
+  SkipToContent,
+  HeaderGlobalAction,
+  HeaderSearch,
+} from "./UIShell";
+export { UnorderedList } from "./UnorderedList";
+export { toHierarchy } from "./utils/toHierarchy";

package/src/utils/toHierarchy.d.ts

@@ -0,0 +1,21 @@
+type NodeLike = {
+  id: string | number;
+  nodes?: NodeLike[];
+  [key: string]: any;
+};
+
+/** Create a hierarchical tree from a flat array. */
+export function toHierarchy<
+  T extends NodeLike,
+  K extends keyof Omit<T, "id" | "nodes">,
+>(
+  flatArray: T[] | readonly T[],
+  /**
+   * Function that returns the parent ID for a given node.
+   * @example
+   * toHierarchy(flatArray, (node) => node.parentId);
+   */
+  getParentId: (node: T) => T[K] | null,
+): (T & { nodes?: (T & { nodes?: T[] })[] })[];
+
+export default toHierarchy;

package/src/utils/toHierarchy.js

@@ -0,0 +1,49 @@
+// @ts-check
+/**
+ * Create a nested array from a flat array.
+ * @typedef {Object} NodeLike
+ * @property {string | number} id - Unique identifier for the node
+ * @property {NodeLike[]} [nodes] - Optional array of child nodes
+ * @property {Record<string, any>} [additionalProperties] - Any additional properties
+ *
+ * @param {NodeLike[]} flatArray - Array of flat nodes to convert
+ * @param {function(NodeLike): (string|number|null)} getParentId - Function to get parent ID for a node
+ * @returns {NodeLike[]} Hierarchical tree structure
+ */
+export function toHierarchy(flatArray, getParentId) {
+  /** @type {NodeLike[]} */
+  const tree = [];
+  const childrenOf = new Map();
+  const itemsMap = new Map(flatArray.map((item) => [item.id, item]));
+
+  flatArray.forEach((item) => {
+    const parentId = getParentId(item);
+
+    // Only create nodes array if we have children.
+    const children = childrenOf.get(item.id);
+    if (children) {
+      item.nodes = children;
+    }
+
+    // Check if parentId exists using Map instead of array lookup.
+    const parentExists = parentId && itemsMap.has(parentId);
+
+    if (parentId && parentExists) {
+      if (!childrenOf.has(parentId)) {
+        childrenOf.set(parentId, []);
+      }
+      childrenOf.get(parentId).push(item);
+
+      const parent = itemsMap.get(parentId);
+      if (parent) {
+        parent.nodes = childrenOf.get(parentId);
+      }
+    } else {
+      tree.push(item);
+    }
+  });
+
+  return tree;
+}
+
+export default toHierarchy;

package/tokens/maxcraft.css

@@ -0,0 +1,84 @@
+:root {
+  --mc-bedrock: #2f2f32;
+  --mc-bedrock-dark: #1d1e20;
+  --mc-border: #0f1011;
+  --mc-grass: #4c9a2a;
+  --mc-grass-dark: #2f6f1f;
+  --mc-dirt: #6b4423;
+  --mc-stone: #737373;
+  --mc-stone-light: #c9c9c9;
+  --mc-gold: #f5c542;
+  --mc-diamond: #55d6d2;
+  --mc-redstone: #d43c2f;
+  --mc-ink: #101827;
+  --mc-paper: #f7f4e8;
+  --mc-font-sans: "IBM Plex Sans", "Inter", "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
+  --mc-font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --mc-shadow-inset: inset 0 3px rgb(255 255 255 / 0.22), inset 0 -4px rgb(0 0 0 / 0.2);
+  --mc-shadow-block: var(--mc-shadow-inset), 0 4px 0 rgb(0 0 0 / 0.28);
+}
+
+:root,
+.bx--white,
+[data-carbon-theme="white"],
+[data-carbon-theme="g10"] {
+  --cds-interactive-01: var(--mc-grass);
+  --cds-interactive-02: var(--mc-bedrock);
+  --cds-interactive-03: var(--mc-grass-dark);
+  --cds-interactive-04: var(--mc-redstone);
+  --cds-ui-background: var(--mc-paper);
+  --cds-background: var(--mc-paper);
+  --cds-ui-01: #ffffff;
+  --cds-ui-02: #efe9d5;
+  --cds-ui-03: var(--mc-stone-light);
+  --cds-ui-04: var(--mc-stone);
+  --cds-ui-05: var(--mc-ink);
+  --cds-text-01: var(--mc-ink);
+  --cds-text-02: #374151;
+  --cds-text-03: #6b7280;
+  --cds-text-04: #ffffff;
+  --cds-icon-01: var(--mc-ink);
+  --cds-icon-02: #374151;
+  --cds-link-01: var(--mc-grass-dark);
+  --cds-focus: var(--mc-diamond);
+  --cds-hover-primary: var(--mc-grass-dark);
+  --cds-hover-secondary: #3f4247;
+  --cds-hover-ui: #eef8e9;
+  --cds-selected-ui: #dfead9;
+  --cds-skeleton-01: #e7e1cf;
+  --cds-skeleton-02: #d5d1c3;
+}
+
+.bx--g80,
+.bx--g90,
+.bx--g100,
+[data-carbon-theme="g80"],
+[data-carbon-theme="g90"],
+[data-carbon-theme="g100"],
+.dark {
+  --cds-interactive-01: #62d76b;
+  --cds-interactive-02: #d5d1c3;
+  --cds-interactive-03: #86efac;
+  --cds-interactive-04: var(--mc-redstone);
+  --cds-ui-background: #111827;
+  --cds-background: #111827;
+  --cds-ui-01: #1d1e20;
+  --cds-ui-02: #2f2f32;
+  --cds-ui-03: #3f3f46;
+  --cds-ui-04: #737373;
+  --cds-ui-05: #f9fafb;
+  --cds-text-01: #f9fafb;
+  --cds-text-02: #d1d5db;
+  --cds-text-03: #9ca3af;
+  --cds-text-04: #101827;
+  --cds-icon-01: #f9fafb;
+  --cds-icon-02: #d1d5db;
+  --cds-link-01: #86efac;
+  --cds-focus: var(--mc-diamond);
+  --cds-hover-primary: #208f3c;
+  --cds-hover-secondary: #d5d1c3;
+  --cds-hover-ui: #243044;
+  --cds-selected-ui: #2f2f32;
+  --cds-skeleton-01: #2f2f32;
+  --cds-skeleton-02: #4b5563;
+}

package/types/Accordion/Accordion.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { AccordionSkeletonProps } from "./AccordionSkeleton.svelte";
+
+export type AccordionProps = AccordionSkeletonProps & {
+  /**
+   * Specify alignment of accordion item chevron icon
+   * @default "end"
+   */
+  align?: "start" | "end";
+
+  /**
+   * Specify the size of the accordion
+   * @default undefined
+   */
+  size?: "sm" | "xl";
+
+  /**
+   * Set to `true` to disable the accordion
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set to `true` to display the skeleton state
+   * @default false
+   */
+  skeleton?: boolean;
+};
+
+export default class Accordion extends SvelteComponentTyped<
+  AccordionProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  { default: {} }
+> {}