@edrlab/thorium-web 1.0.8 → 1.1.0

package/dist/sheets.module-LJOLY4MK.module.css

@@ -1,195 +0,0 @@
-/* React Aria modal provides a visual viewport for mobile + keyboard: --visual-viewport-height 
-   which should explain why it’s being used here while not mentioned anywhere else in the codebase */
-
-.fullScreenSheet {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 10;
-  overflow-y: auto;
-  scroll-padding-top: calc(var(--sheet-sticky-header, 80px) + var(--layout-spacing));
-  scroll-padding-bottom: var(--layout-spacing);
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  max-height: var(--visual-viewport-height, 100dvh);
-  background-color: var(--theme-background);
-  color: var(--theme-text);
-  align-items: center;
-}
-
-.popOverSheet {
-  overflow-y: auto;
-  scroll-padding-top: calc(var(--sheet-sticky-header, 80px) + var(--layout-spacing));
-  scroll-padding-bottom: var(--layout-spacing);
-  box-sizing: border-box;
-  width: calc(340px + (2 * var(--layout-spacing)));
-  max-width: var(--constraints-popover, 500px);
-  max-height: 100%;
-  max-height: var(--visual-viewport-height, 100dvh);
-  padding: 0;
-  background-color: var(--theme-background);
-  color: var(--theme-text);
-  border-radius: var(--layout-radius);
-  border: 1px solid var(--theme-subdue);
-  filter: drop-shadow(var(--theme-elevate));
-}
-
-/* React Modal Sheet handles scroll + sticky header so no need for scroll-padding here */
-.bottomSheetModal {
-  box-sizing: border-box;
-  max-width: var(--constraints-bottomSheet, 600px);
-  left: max(calc((100% - var(--constraints-bottomSheet, 600px)) / 2), 0px) !important;
-  background-color: var(--theme-background) !important;
-  color: var(--theme-text) !important;
-  border: none;
-  /* Animating drop-shadow pretty much kills performance, hence why we use a pseudo-element */
-  filter: none !important;
-  box-shadow: none !important;
-  /* M3 = 28dp, see https://m3.material.io/components/bottom-sheets/overview */
-  border-top-left-radius: 28px !important;
-  border-top-right-radius: 28px !important;
-  transition: border-radius 500ms;
-}
-
-.bottomSheetModal::after {
-  content: "";
-  z-index: -1;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  /* important for performance */
-  transform: translateZ(0);
-  box-shadow: var(--theme-elevate);
-  border-top-left-radius: 28px;
-  border-top-right-radius: 28px;
-}
-
-.bottomSheetModalFullHeightDetent {
-  height: calc(100% - env(safe-area-inset-top)) !important;
-}
-
-.bottomSheetModalContentHeightDetent {
-  max-height: calc(100% - env(safe-area-inset-top)) !important;
-}
-
-.bottomSheetModal[data-full-height] {
-  border-top-left-radius: 0 !important;
-  border-top-right-radius: 0 !important;
-  transition: border-radius 500ms;
-}
-
-.bottomSheetBackdrop {
-  /* So that React Aria can use it to dismiss the sheet as it’s set to none by React Modal Sheet. */
-  pointer-events: auto !important;
-  background-color: transparent !important;
-}
-
-.bottomSheetScrim {
-  background-color: var(--defaults-scrim) !important;
-}
-
-.bottomSheet {
-  padding: 0;
-  background-color: var(--theme-background);
-  color: var(--theme-text);
-}
-
-.bottomSheetScroller {
-  position: relative;
-  scroll-padding-bottom: calc(var(--layout-spacing) * 4);
-}
-
-.dragIndicator {
-  width: calc(var(--icon-size, 40px) * 1.5);
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.dragIndicator[data-focus-visible] {
-  border-radius: var(--layout-radius);
-  outline: 2px solid var(--theme-focus);
-}
-
-.dragIndicator svg {
-  fill: var(--theme-subdue);
-  width: 100%;
-  height: auto;
-}
-
-.dockedSheet {
-  /* We need relative positioning so that RAC FocusScope scrolls properly on tabbing */
-  position: relative;
-  overflow-y: auto;
-  scroll-padding-top: calc(var(--sheet-sticky-header, 80px) + var(--layout-spacing));
-  scroll-padding-bottom: var(--layout-spacing);
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 100%;
-  height: 100vh;
-  height: 100dvh;
-  background-color: var(--theme-background);
-  color: var(--theme-text);
-}
-
-.dockedSheetLeftBorder {
-  border-right: 1px solid var(--theme-subdue);
-}
-
-.dockedSheetRightBorder {
-  border-left: 1px solid var(--theme-subdue);
-}
-
-.sheetDialog {
-  outline: none;
-}
-
-.sheetHeader {
-  display: flex;
-  align-items: center;
-  position: sticky;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 10;
-  padding: calc(var(--layout-spacing) / 2) var(--layout-spacing);
-  background-color: var(--theme-background);
-  border-bottom: 1px solid var(--theme-subdue);
-}
-
-.bottomSheetHeader {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  background-color: var(--theme-background);
-  border-bottom: 1px solid var(--theme-subdue);
-  padding: var(--layout-spacing) var(--layout-spacing) calc(var(--layout-spacing) / 2) var(--layout-spacing);
-  /* Otherwise covers the modal’s */
-  border-top-left-radius: 28px !important;
-  border-top-right-radius: 28px !important;
-  transition: border-radius 500ms;
-}
-
-.bottomSheetModal[data-full-height] .bottomSheetHeader {
-  /* Otherwise covers the modal’s */
-  border-top-left-radius: 0 !important;
-  border-top-right-radius: 0 !important;
-  transition: border-radius 500ms;
-}
-
-.sheetHeading {
-  font-size: 1.25rem;
-  line-height: 1;
-  margin: 0;
-  padding: 0;
-}
-
-.sheetBody {
-  padding: var(--layout-spacing);
-}

package/dist/toc.module-F47C5CDS.module.css

@@ -1,153 +0,0 @@
-/* Search */
-
-.tocSearch {
-  margin-bottom: var(--layout-spacing);
-  display: grid;
-  grid-template-areas: "label label"
-                       "input button";
-  grid-template-columns: 1fr auto;
-  align-items: center;
-  width: 100%;
-}
-
-.tocSearchLabel {
-  grid-area: label;
-  margin-bottom: calc(var(--layout-spacing) / 2);
-}
-
-.tocSearchInput {
-  grid-area: input;
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 100%;
-  display: block;
-  border-radius: var(--layout-radius);
-  border: 2px solid var(--theme-subdue);
-  padding: calc(var(--icon-size, 24px) * (1/4)) calc(var(--layout-spacing) / 2);
-}
-
-.tocSearchInput::-webkit-search-cancel-button,
-.tocSearchInput::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-.tocSearchInput[data-focus-visible] {
-  outline: 2px solid var(--theme-focus);
-}
-
-.tocSearchIcon,
-.tocClearButton {
-  grid-area: button;
-  margin-inline-start: calc(var(--icon-size, 24px) * -1.25);
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-
-.tocSearchIcon svg {
-  fill: var(--theme-subdue);
-  width: var(--icon-size, 24px);
-  height: var(--icon-size, 24px);
-}
-
-.tocClearButton svg {
-  fill: var(--theme-text);
-  width: var(--icon-size, 24px);
-  height: var(--icon-size, 24px);
-}
-
-.tocSearchIcon[hidden],
-.tocClearButton[data-disabled]  {
-  display: none;
-}
-
-.tocTree {
-  background: var(--theme-background);
-  color: var(--theme-text);
-  outline: none;
-  width: 100%;
-  max-height: 100%;
-  box-sizing: border-box;
-}
-
-/* React Aria is providing a --tree-item-level as items are not nested */
-.tocTreeItem {
-  display: flex;
-  padding: calc(var(--layout-spacing) / 2);
-  padding-inline-start: calc(((var(--tree-item-level) - 1) * var(--layout-spacing)) + (var(--layout-spacing) / 2));
-  border-radius: var(--layout-radius);
-  border: 2px solid transparent;
-  box-sizing: border-box;
-}
-
-.tocTree:has(.tocTreeItemButton) .tocTreeItem {
-  padding-inline-start: calc((var(--tree-item-level) * var(--layout-spacing)) + (var(--layout-spacing) / 2));
-}
-
-.tocTree .tocTreeItem:has(.tocTreeItemButton) {
-  padding-inline-start: calc(((var(--tree-item-level) - 1) * var(--layout-spacing)));
-}
-
-.tocTreeItemText {
-  display: flex;
-  flex: 1 1 auto;
-}
-
-.tocTreeItemTextTitle {
-  text-wrap: balance;
-}
-
-.tocTreeItemTextPosition {
-  margin-inline-start: auto;
-  padding-inline-start: calc(var(--layout-spacing) / 2);
-  color: var(--theme-subdue);
-  font-variant-numeric: lining-nums tabular-nums;
-}
-
-.tocTreeItemButton {
-  align-self: flex-start;
-  width: calc(var(--icon-size, 24px) * 5/6);
-  height: calc(var(--icon-size, 24px) * 5/6);
-  margin-inline-end: calc(var(--layout-spacing) / 2);
-  flex-shrink: 0;
-}
-
-.tocTreeItem[data-href] {
-  cursor: pointer;
-}
-
-/* [data-hover] is only updated on tree items that can be expanded ATM… */
-.tocTreeItem:hover {
-  background-color: var(--theme-hover);
-}
-
-.tocTreeItem[data-focus-visible] {
-  outline: 2px solid var(--theme-focus);
-}
-
-.tocTreeItem[data-disabled] {
-  color: var(--theme-disable);
-}
-
-.tocTreeItem[data-selected] {
-  border: 2px solid var(--theme-subdue);
-}
-
-.tocTreeItemButton svg {
-  flex: none;
-  rotate: 0deg;
-  transition: rotate 200ms;
-  width: 100%;
-  height: 100%;
-  fill: var(--theme-text);
-}
-
-.tocTreeItem[data-expanded] .tocTreeItemButton svg {
-  rotate: 90deg;
-}
-
-.empty {
-  max-width: 25ch;
-  text-align: start;
-  text-wrap: balance;
-}