contain-css-svelte 1.2.0 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/Card.svelte +156 -156
  2. package/dist/controls/Button.svelte +6 -0
  3. package/dist/controls/ButtonLink.svelte +1 -0
  4. package/dist/controls/Checkbox.svelte +1 -0
  5. package/dist/controls/CircleButton.svelte +56 -43
  6. package/dist/controls/RadioButton.svelte +1 -0
  7. package/dist/controls/Toggle.svelte +1 -0
  8. package/dist/cssprops.js +1 -0
  9. package/dist/dropdowns/DropdownMenu.svelte +2 -0
  10. package/dist/layout/Accordion.svelte +1 -0
  11. package/dist/layout/Container.svelte +156 -156
  12. package/dist/layout/DataListItem.svelte +160 -179
  13. package/dist/layout/Form.svelte +156 -156
  14. package/dist/layout/FormItem.svelte +6 -2
  15. package/dist/layout/Hero.svelte +156 -156
  16. package/dist/layout/MenuList.svelte +5 -0
  17. package/dist/layout/Sidebar.svelte +25 -24
  18. package/dist/layout/Table.svelte +157 -156
  19. package/dist/layout/Tile.svelte +157 -156
  20. package/dist/misc/Progress.svelte +156 -156
  21. package/dist/overlays/Dialog.svelte +157 -157
  22. package/dist/overlays/Tooltip.svelte +156 -156
  23. package/dist/sass/_affordances.scss +7 -2
  24. package/dist/sass/_typography.scss +15 -12
  25. package/dist/typography/TextLayout.svelte +156 -156
  26. package/dist/vars/soft-corners.css +1 -1
  27. package/dist/vars/themes/bootstrap.css +5 -5
  28. package/dist/vars/themes/material.css +5 -5
  29. package/dist/vars/themes/retro.css +5 -5
  30. package/package.json +1 -1
package/dist/layout/MenuList.svelte CHANGED
@@ -146,6 +146,7 @@ const el = $derived(elementProps(restProps, "menu", [
146
146
  .menu :global(li):hover {
147
147
  filter: var(--menu-item-hover-filter, var(--hover-filter, brightness(1.05)));
148
148
  transform: var(--menu-item-hover-transform, var(--hover-transform, none));
149
+ color: var(--_color);
149
150
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
150
151
  box-shadow: var(--menu-item-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)));
151
152
  }
@@ -190,6 +191,7 @@ const el = $derived(elementProps(restProps, "menu", [
190
191
  .menu :global(li[tabindex]:not([tabindex="-1"])):hover {
191
192
  filter: var(--menu-item-hover-filter, var(--hover-filter, brightness(1.05)));
192
193
  transform: var(--menu-item-hover-transform, var(--hover-transform, none));
194
+ color: var(--_color);
193
195
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
194
196
  box-shadow: var(--menu-item-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)));
195
197
  }
@@ -224,6 +226,7 @@ const el = $derived(elementProps(restProps, "menu", [
224
226
  .menu :global(li[tabindex]:not([tabindex="-1"])):focus-visible {
225
227
  filter: var(--menu-item-hover-filter, var(--hover-filter, brightness(1.05)));
226
228
  transform: var(--menu-item-hover-transform, var(--hover-transform, none));
229
+ color: var(--_color);
227
230
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
228
231
  box-shadow: var(--menu-item-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)));
229
232
  outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
@@ -361,6 +364,7 @@ const el = $derived(elementProps(restProps, "menu", [
361
364
  .menu :global(a):focus-visible, .menu :global(button):focus-visible, .menu :global(input[type="submit"]):focus-visible, .menu :global(.button):focus-visible {
362
365
  filter: var(--menu-item-hover-filter, var(--hover-filter, brightness(1.05)));
363
366
  transform: var(--menu-item-hover-transform, var(--hover-transform, none));
367
+ color: var(--_color);
364
368
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
365
369
  box-shadow: var(--menu-item-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)));
366
370
  outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
@@ -375,6 +379,7 @@ const el = $derived(elementProps(restProps, "menu", [
375
379
  .menu :global(a):hover, .menu :global(button):hover, .menu :global(input[type="submit"]):hover, .menu :global(.button):hover {
376
380
  filter: var(--menu-item-hover-filter, var(--hover-filter, brightness(1.05)));
377
381
  transform: var(--menu-item-hover-transform, var(--hover-transform, none));
382
+ color: var(--_color);
378
383
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
379
384
  box-shadow: var(--menu-item-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)));
380
385
  }
package/dist/layout/Sidebar.svelte CHANGED
@@ -598,20 +598,20 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
598
598
  position: absolute;
599
599
  top: var(--padding);
600
600
  left: 0;
601
- border-radius: var(--mini-button-radius, var(--button-radius, var(--radius, 50%)));
601
+ border-radius: var(--circle-button-radius, var(--mini-button-radius, var(--button-radius, var(--radius, 50%))));
602
602
  border-top-left-radius: 0;
603
603
  border-bottom-left-radius: 0;
604
- border: var(--mini-button-border);
604
+ border: var(--circle-button-border, var(--mini-button-border));
605
605
  width: var(--_sidebar-expander-width);
606
606
  height: var(--_sidebar-expander-height);
607
- --link-bg: var(--mini-button-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit))));
608
- --link-fg: var(--mini-button-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, inherit))));
609
- --_bg-mix-color: var(--mini-button-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent)))));
610
- --_bg-mix-amount: var(--mini-button-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%)))));
611
- --_fg-mix-color: var(--mini-button-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent)))));
612
- --_fg-mix-amount: var(--mini-button-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%)))));
613
- --_bg-base: var(--mini-button-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
614
- --_fg-base: var(--mini-button-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
607
+ --link-bg: var(--circle-button-link-bg, var(--mini-button-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit)))));
608
+ --link-fg: var(--circle-button-link-fg, var(--mini-button-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, inherit)))));
609
+ --_bg-mix-color: var(--circle-button-bg-mix-color, var(--mini-button-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent))))));
610
+ --_bg-mix-amount: var(--circle-button-bg-mix-amount, var(--mini-button-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%))))));
611
+ --_fg-mix-color: var(--circle-button-fg-mix-color, var(--mini-button-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent))))));
612
+ --_fg-mix-amount: var(--circle-button-fg-mix-amount, var(--mini-button-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%))))));
613
+ --_bg-base: var(--circle-button-bg, var(--mini-button-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))))));
614
+ --_fg-base: var(--circle-button-fg, var(--mini-button-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))))));
615
615
  --_background-color: color-mix(
616
616
  in srgb,
617
617
  var(--_bg-base),
@@ -688,27 +688,28 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
688
688
  );
689
689
  background-color: var(--_background-color);
690
690
  color: var(--_color);
691
- cursor: var(--mini-button-cursor, var(--button-cursor, var(--control-cursor, var(--cursor, pointer))));
692
- transition: filter var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), background-color var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), border-color var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), box-shadow var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), transform var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))));
691
+ cursor: var(--circle-button-cursor, var(--mini-button-cursor, var(--button-cursor, var(--control-cursor, var(--cursor, pointer)))));
692
+ transition: filter var(--circle-button-transition, var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))))), background-color var(--circle-button-transition, var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))))), border-color var(--circle-button-transition, var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))))), box-shadow var(--circle-button-transition, var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))))), transform var(--circle-button-transition, var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))));
693
693
  }
694
694
  aside > button:hover {
695
- filter: var(--mini-button-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(1.05)))));
696
- transform: var(--mini-button-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, none))));
695
+ filter: var(--circle-button-hover-filter, var(--mini-button-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(1.05))))));
696
+ transform: var(--circle-button-hover-transform, var(--mini-button-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, none)))));
697
+ color: var(--_color);
697
698
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
698
- box-shadow: var(--mini-button-hover-box-shadow, var(--button-hover-box-shadow, var(--control-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)))));
699
+ box-shadow: var(--circle-button-hover-box-shadow, var(--mini-button-hover-box-shadow, var(--button-hover-box-shadow, var(--control-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))))));
699
700
  }
700
701
  aside > button:active {
701
- filter: var(--mini-button-active-filter, var(--button-active-filter, var(--control-active-filter, var(--active-filter, brightness(0.9)))));
702
- transform: var(--mini-button-active-transform, var(--button-active-transform, var(--control-active-transform, var(--active-transform, none))));
702
+ filter: var(--circle-button-active-filter, var(--mini-button-active-filter, var(--button-active-filter, var(--control-active-filter, var(--active-filter, brightness(0.9))))));
703
+ transform: var(--circle-button-active-transform, var(--mini-button-active-transform, var(--button-active-transform, var(--control-active-transform, var(--active-transform, none)))));
703
704
  background-color: color-mix(in oklch, var(--_background-color) var(--active-base-color-percentage, 90%), var(--active-color-mix, black) calc(100% - var(--active-base-color-percentage, 90%)));
704
- box-shadow: var(--mini-button-active-box-shadow, var(--button-active-box-shadow, var(--control-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none)))));
705
+ box-shadow: var(--circle-button-active-box-shadow, var(--mini-button-active-box-shadow, var(--button-active-box-shadow, var(--control-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none))))));
705
706
  }
706
707
  aside > button:disabled {
707
- cursor: var(--mini-button-disabled-cursor, var(--button-disabled-cursor, var(--control-disabled-cursor, var(--disabled-cursor, not-allowed))));
708
- transform: var(--mini-button-disabled-transform, var(--button-disabled-transform, var(--control-disabled-transform, var(--disabled-transform, none))));
709
- filter: var(--mini-button-disabled-filter, var(--button-disabled-filter, var(--control-disabled-filter, var(--disabled-filter, grayscale(0.5)))));
708
+ cursor: var(--circle-button-disabled-cursor, var(--mini-button-disabled-cursor, var(--button-disabled-cursor, var(--control-disabled-cursor, var(--disabled-cursor, not-allowed)))));
709
+ transform: var(--circle-button-disabled-transform, var(--mini-button-disabled-transform, var(--button-disabled-transform, var(--control-disabled-transform, var(--disabled-transform, none)))));
710
+ filter: var(--circle-button-disabled-filter, var(--mini-button-disabled-filter, var(--button-disabled-filter, var(--control-disabled-filter, var(--disabled-filter, grayscale(0.5))))));
710
711
  background-color: color-mix(in oklch, var(--_background-color) var(--disabled-base-color-percentage, 50%), var(--disabled-color-mix, gray) calc(100% - var(--disabled-base-color-percentage, 50%)));
711
- box-shadow: var(--mini-button-disabled-box-shadow, var(--button-disabled-box-shadow, var(--control-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none)))));
712
+ box-shadow: var(--circle-button-disabled-box-shadow, var(--mini-button-disabled-box-shadow, var(--button-disabled-box-shadow, var(--control-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none))))));
712
713
  }
713
714
  aside > button:focus-visible {
714
715
  outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
@@ -716,12 +717,12 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
716
717
  box-shadow: var(--focus-ring-box-shadow, 0 0 0 3px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
717
718
  }
718
719
  aside > button::after {
719
- color: var(--mini-button-fg, currentColor);
720
+ color: var(--circle-button-fg, var(--mini-button-fg, currentColor));
720
721
  filter: var(--sidebar-mobile-icon-filter, none);
721
722
  }
722
723
  aside > button.close {
723
724
  left: calc(var(--sidebar-width) - var(--_sidebar-expander-width) + var(--padding));
724
- border-radius: var(--mini-button-radius, var(--button-radius, var(--radius, 50%)));
725
+ border-radius: var(--circle-button-radius, var(--mini-button-radius, var(--button-radius, var(--radius, 50%))));
725
726
  border-top-right-radius: 0;
726
727
  border-bottom-right-radius: 0;
727
728
  }