landsoul 0.2.3 → 0.4.0

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 (4) hide show
  1. package/README.md +44 -13
  2. package/dist/extra.css +1 -0
  3. package/dist/landsoul.css +1 -1
  4. package/package.json +10 -8
package/README.md CHANGED
@@ -3,30 +3,29 @@
3
3
  [![](https://badgen.net/packagephobia/install/landsoul)](https://packagephobia.com/result?p=landsoul)
4
4
  [![](https://img.shields.io/npm/v/landsoul)](https://www.npmjs.com/package/landsoul)
5
5
 
6
- A classless CSS library (IE11 is not supported)
6
+ A [classless](https://github.com/dbohdan/classless-css) CSS library.
7
7
 
8
- Preview: <https://yieldray.github.io/landsoul/>
8
+ > i.e. Style applied to HTML tags directly.
9
9
 
10
- # Usage
10
+ Docs: <https://yieldray.github.io/landsoul/>
11
11
 
12
- To enable dark mode, use `prefers-color-scheme: dark` or `body[data-theme="dark"]`
12
+ # Usage
13
13
 
14
14
  ```html
15
15
  <link rel="stylesheet" href="https://unpkg.com/landsoul" />
16
-
17
- <!-- add this to enable dark mode manually -->
18
- <body data-theme="dark"></body>
19
16
  ```
20
17
 
21
- Use with CSS [@layer](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer), this allows landsoul styles to be easily overridden.
18
+ Alternatively, you can use CSS [@layer](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) to easily override landsoul styles.
22
19
 
23
20
  ```css
24
- /* remember that the @import at-rule must precede all other types of rules, except @charset and @layer rules. */
21
+ /* Remember that the @import at-rule must precede all other types of rules, except @charset and @layer rules. */
25
22
  @layer landsoul, my-layer;
26
23
  @import url(//unpkg.com/landsoul) layer(landsoul);
27
- /* your style here... */
24
+ /* Your style here... */
28
25
  ```
29
26
 
27
+ ## CSS reset
28
+
30
29
  This stylesheet DO NOT include css reset, and keep minimum influence to the built-in html elements,
31
30
  so you may add some extra css to make things work.
32
31
 
@@ -45,17 +44,49 @@ img {
45
44
  }
46
45
  ```
47
46
 
48
- ## dev
47
+ ## Dark mode
48
+
49
+ To enable dark mode, use `:root[data-theme="dark"]`
50
+
51
+ ```html
52
+ <!-- Add this to enable dark mode manually -->
53
+ <html data-theme="dark"></html>
54
+ ```
55
+
56
+ Or if you target to Chrome>=123, you can use `color-scheme`
57
+
58
+ ```css
59
+ :root {
60
+ color-scheme: dark;
61
+ }
62
+ ```
63
+
64
+ ## Extra
65
+
66
+ [`Landsoul Extra`](https://yieldray.github.io/landsoul/extra.html) is an extra stylesheet file that extends Landsoul with additional utility styles and components through extra class names.
67
+
68
+ ```html
69
+ <link rel="stylesheet" href="https://unpkg.com/landsoul/dist/extra.css" />
70
+ <!-- OR -->
71
+ <style>
72
+ @import url(//unpkg.com/landsoul/dist/extra) layer(landsoul);
73
+ </style>
74
+ ```
75
+
76
+ Unlike other frameworks, `Landsoul Extra` is not intended to be a full framework requiring multiple class names to style a single component.
77
+
78
+ Instead, it relies on modern CSS features, and each component requires only a single class name.
79
+
80
+ # dev
49
81
 
50
82
  Use Node.js LTS version.
51
83
 
52
84
  ```bash
53
85
  $ npm install
54
86
  $ npm run dev
55
- # xdg-open index.html
56
87
  ```
57
88
 
58
- ## build
89
+ # build
59
90
 
60
91
  ```bash
61
92
  $ npm run build
package/dist/extra.css ADDED
@@ -0,0 +1 @@
1
+ .landsoul-carousel{list-style:none;margin:0;overflow-x:auto;overflow-y:hidden;overflow:auto hidden;overscroll-behavior-x:contain;padding:0;scroll-snap-type:x mandatory;scrollbar-width:none}.landsoul-carousel:not([data-height]){display:flex}.landsoul-carousel[data-height]{--height:attr(data-height type(<length> | <percentage>),auto);container-type:size scroll-state}.landsoul-carousel[data-height],.landsoul-carousel[data-height]>*{height:var(--height)}.landsoul-carousel[data-height]{-moz-columns:1;column-count:1}.landsoul-carousel[data-height]::column{scroll-snap-align:center}.landsoul-carousel>*{box-sizing:border-box;flex-shrink:0;scroll-snap-align:center}.landsoul-carousel{anchor-scope:--landsoul-carousel;anchor-name:--landsoul-carousel}.landsoul-carousel::scroll-button(*){all:unset;position:fixed;position-anchor:--landsoul-carousel}.landsoul-carousel::scroll-button(*){backdrop-filter:blur(.8rem);background-color:var(--landsoul-surface);border-radius:50%;box-sizing:border-box;color:var(--landsoul-text);cursor:pointer;height:2rem;line-height:0;opacity:.8;text-align:center;transition:background-color var(--landsoul-duration) ease,opacity var(--landsoul-duration) ease;width:2rem}.landsoul-carousel::scroll-button(*):not(:disabled):hover{background-color:var(--landsoul-surface-high)}.landsoul-carousel::scroll-button(*):not(:disabled):active{background-color:var(--landsoul-surface-high);border:1px solid var(--landsoul-border)}.landsoul-carousel::scroll-button(*):disabled{cursor:not-allowed;opacity:.333;transform:none}.landsoul-carousel::scroll-button(left){content:url('data:image/svg+xml;utf8,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>');left:calc(anchor(left) + .2rem);top:anchor(center)}.landsoul-carousel::scroll-button(right){content:url('data:image/svg+xml;utf8,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>');right:calc(anchor(right) + .2rem);top:anchor(center)}.landsoul-carousel:not(:hover)::scroll-button(*){opacity:0}.landsoul-carousel{scroll-marker-group:after;scroll-behavior:smooth}.landsoul-carousel:empty::scroll-marker-group{display:none}.landsoul-carousel::scroll-marker-group{position:absolute;position-anchor:--landsoul-carousel;inset-area:bottom center;display:grid;max-width:33.3%;position-area:bottom center;transform:translateY(-.5rem);grid-gap:.4rem;backdrop-filter:blur(.8rem);background-color:var(--landsoul-surface);border-radius:1rem;gap:.4rem;grid-auto-flow:column;-webkit-mask:none;mask:none;opacity:.8;overflow-x:auto;overscroll-behavior-x:contain;padding:.25rem .4rem;scroll-behavior:smooth;scroll-padding-inline:50%;scroll-snap-type:x mandatory;scrollbar-width:none}.landsoul-carousel>::scroll-marker{background-color:var(--landsoul-surface-high);border-radius:50%;box-sizing:border-box;content:"";height:12px;transition:background-color var(--landsoul-duration) ease;width:12px}.landsoul-carousel>::scroll-marker:not(:target-current):hover{filter:brightness(.9)}.landsoul-carousel>::scroll-marker:not(:target-current):active{border:1px solid var(--landsoul-border)}.landsoul-carousel>::scroll-marker:target-current{background-color:var(--landsoul-accent)}.landsoul-divider{align-items:center;align-self:stretch;display:flex;flex-direction:row;height:1rem;white-space:nowrap}.landsoul-divider:not(:empty){gap:1rem}.landsoul-divider:after,.landsoul-divider:before{background-color:var(--landsoul-border);border-radius:.05rem;content:"";flex-grow:1;height:.1rem}[class*=landsoul-drawer]{background-color:var(--landsoul-bg);border:1px solid var(--landsoul-surface);border-radius:var(--landsoul-radius);color:var(--landsoul-text);overflow:auto;padding:1rem}[class*=landsoul-drawer][popover]{box-sizing:border-box;margin:0;transition:translate .2s,overlay allow-discrete .2s,display allow-discrete .2s}[class*=landsoul-drawer][popover]::backdrop{background-color:transparent;transition:display allow-discrete .2s,overlay allow-discrete .2s,background-color .2s}[class*=landsoul-drawer][popover]:popover-open::backdrop{background-color:rgba(0,0,0,.2)}@starting-style{[class*=landsoul-drawer][popover]:popover-open::backdrop{background-color:transparent}}.landsoul-drawer-left{width:min(320px,100vw - 2px)}.landsoul-drawer-left[popover]{height:100vh;translate:-100% 0}.landsoul-drawer-left[popover]:popover-open{translate:0 0}@starting-style{.landsoul-drawer-left[popover]:popover-open{translate:-100% 0}}.landsoul-drawer-right{width:min(320px,100vw - 2px)}.landsoul-drawer-right[popover]{height:100vh;margin-left:auto;translate:100% 0}.landsoul-drawer-right[popover]:popover-open{translate:0 0}@starting-style{.landsoul-drawer-right[popover]:popover-open{translate:100% 0}}.landsoul-drawer-top{width:100vw}.landsoul-drawer-top[popover]{height:min(320px,100vh - 2px);translate:0 -100%}.landsoul-drawer-top[popover]:popover-open{translate:0 0}@starting-style{.landsoul-drawer-top[popover]:popover-open{translate:0 -100%}}.landsoul-drawer-bottom{width:100vw}.landsoul-drawer-bottom[popover]{height:min(320px,100vh - 2px);margin-top:auto;translate:0 100%}.landsoul-drawer-bottom[popover]:popover-open{translate:0 0}@starting-style{.landsoul-drawer-bottom[popover]:popover-open{translate:0 100%}}[class*=landsoul-popover-][popover]{background-color:var(--landsoul-bg);border:0;border-radius:var(--landsoul-radius);bottom:auto;box-shadow:var(--landsoul-box-shadow);container-type:anchored;left:auto;margin:0;opacity:0;overflow:visible;overflow:initial;padding:.25rem;position:fixed;right:auto;top:auto}[class*=landsoul-popover-][popover]:popover-open{opacity:1}@media (prefers-reduced-motion:no-preference){[class*=landsoul-popover-][popover]:popover-open{transition:opacity .12s cubic-bezier(.4,0,.2,1) 0s,transform .12s cubic-bezier(.4,0,.2,1) 0s,display allow-discrete .12s 0s}}@starting-style{[class*=landsoul-popover-][popover]:popover-open{opacity:0}}[class*=landsoul-popover-bottom][popover]{position-try-fallbacks:flip-block;inset-area:bottom;position-area:bottom;transform:translateY(-.25rem)}[class*=landsoul-popover-bottom][popover]:popover-open{transform:translateY(0)}@starting-style{[class*=landsoul-popover-bottom][popover]:popover-open{transform:translateY(-.25rem)}}.landsoul-popover-bottom-left[popover]{inset-area:bottom left;position-area:bottom left}.landsoul-popover-bottom-span-left[popover]{inset-area:bottom span-left;position-area:bottom span-left}.landsoul-popover-bottom-right[popover]{inset-area:bottom right;position-area:bottom right}.landsoul-popover-bottom-span-right[popover]{inset-area:bottom span-right;position-area:bottom span-right}[class*=landsoul-popover-top][popover]{position-try-fallbacks:flip-block;inset-area:top;position-area:top;transform:translateY(.25rem)}[class*=landsoul-popover-top][popover]:popover-open{transform:translateY(0)}@starting-style{[class*=landsoul-popover-top][popover]:popover-open{transform:translateY(.25rem)}}.landsoul-popover-top-left[popover]{inset-area:top left;position-area:top left}.landsoul-popover-top-span-left[popover]{inset-area:top span-left;position-area:top span-left}.landsoul-popover-top-right[popover]{inset-area:top right;position-area:top right}.landsoul-popover-top-span-right[popover]{inset-area:top span-right;position-area:top span-right}[class*=landsoul-popover-left][popover]{position-try-fallbacks:flip-inline;inset-area:left center;position-area:left center;transform:translateX(.25rem)}[class*=landsoul-popover-left][popover]:popover-open{transform:translateX(0)}@starting-style{[class*=landsoul-popover-left][popover]:popover-open{transform:translateX(.25rem)}}.landsoul-popover-left-top[popover]{inset-area:left top;position-area:left top}.landsoul-popover-left-span-top[popover]{inset-area:left span-top;position-area:left span-top}.landsoul-popover-left-span-bottom[popover]{inset-area:left span-bottom;position-area:left span-bottom}[class*=landsoul-popover-right][popover]{position-try-fallbacks:flip-inline;inset-area:right center;position-area:right center;transform:translateX(-.25rem)}[class*=landsoul-popover-right][popover]:popover-open{transform:translateX(0)}@starting-style{[class*=landsoul-popover-right][popover]:popover-open{transform:translateX(-.25rem)}}.landsoul-popover-right-top[popover]{inset-area:right top;position-area:right top}.landsoul-popover-right-span-top[popover]{inset-area:right span-top;position-area:right span-top}.landsoul-popover-right-span-bottom[popover]{inset-area:right span-bottom;position-area:right span-bottom}:where(ul,ol).landsoul-list{list-style:none;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where(ul,ol).landsoul-list hr{border-width:1px;margin:0}:where(ul,ol).landsoul-list>li{border-radius:var(--landsoul-radius);cursor:pointer;padding:.5rem 1rem}:where(ul,ol).landsoul-list>li:hover{background-color:var(--landsoul-surface)}:where(ul,ol).landsoul-list>li:active{background-color:var(--landsoul-surface-low)}:where(ul,ol).landsoul-list>li[data-state=selected]{background-color:var(--landsoul-accent);color:var(--landsoul-bg)}:where(ul,ol).landsoul-list>li,:where(ul,ol).landsoul-list>li>*{color:var(--landsoul-text);display:block;-webkit-text-decoration:none;text-decoration:none}.landsoul-skeleton{--duration:2s;animation:landsoul-skeleton-shimmer 2s ease-in-out infinite;animation:landsoul-skeleton-shimmer var(--duration) ease-in-out infinite;background:transparent none repeat 0 0/auto auto padding-box border-box scroll;background:initial;background:linear-gradient(90deg,var(--landsoul-surface) 25%,var(--landsoul-surface-high) 50%,var(--landsoul-surface) 75%);background-size:200% 100%;border-radius:var(--landsoul-radius);color:transparent!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.landsoul-skeleton *{visibility:hidden}@keyframes landsoul-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.landsoul-spinner{--size:1rem}.landsoul-spinner[data-size]{--size:attr(data-size type(<length>),1rem)}.landsoul-spinner{--thickness:calc(var(--size)*0.15)}.landsoul-spinner[data-thickness]{--thickness:attr(data-thickness type(<length>),calc(var(--size)*0.15))}.landsoul-spinner{--duration:1s}.landsoul-spinner[data-duration]{--duration:attr(data-duration type(<time>),1s)}.landsoul-spinner:before{animation:landsoul-spin var(--duration) linear infinite;border:var(--thickness) solid var(--landsoul-border);border-radius:50%;border-top-color:var(--landsoul-on-surface);box-sizing:border-box;content:"";display:inline-block;height:var(--size);vertical-align:text-bottom;width:var(--size)}.landsoul-spinner:not(:empty):before{margin-right:.5rem}@keyframes landsoul-spin{to{transform:rotate(1turn)}}input[type=checkbox].landsoul-switch{--size:1.25rem;all:unset;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--landsoul-surface);border-radius:1rem;height:1.25rem;height:var(--size);position:relative;transition:background-color var(--landsoul-duration);vertical-align:text-bottom;width:2.1875rem;width:calc(var(--size)*1.75)}input[type=checkbox].landsoul-switch:after{all:unset;background:var(--landsoul-bg);border-radius:50%;content:"";display:inline-block;height:calc(var(--size)*.8);left:calc(var(--size)*.1);position:absolute;top:calc(var(--size)*.1);transition:all .4s;width:calc(var(--size)*.8)}input[type=checkbox].landsoul-switch:checked{background:var(--landsoul-accent)}input[type=checkbox].landsoul-switch:checked:after{content:"";left:100%;position:absolute;transform:translateX(calc(-100% - var(--size)*.1))}input[type=checkbox].landsoul-switch:active:after{width:calc(var(--size)*.8*1.125)}.landsoul-tabs{display:flex;overflow-x:scroll;scroll-snap-type:x mandatory;scrollbar-width:none}.landsoul-tabs>*{flex:0 0 100%;scroll-snap-align:center}.landsoul-tabs{scroll-marker-group:before;scroll-behavior:smooth}.landsoul-tabs::scroll-marker-group{align-items:center;box-sizing:border-box;display:inline-flex;min-height:2rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-behavior:smooth;scroll-padding-inline:66.6%;scroll-snap-type:x mandatory;scrollbar-width:none}.landsoul-tabs>::scroll-marker{all:unset;align-items:center;border-radius:.5rem;box-sizing:border-box;color:color-mix(in srgb,var(--landsoul-text) 50%,var(--landsoul-surface));content:attr(data-label);cursor:pointer;display:grid;height:1.6rem;justify-items:center;padding:0 .75rem;place-items:center;transition:background-color calc(var(--landsoul-duration)*.5) ease;white-space:nowrap}.landsoul-tabs>::scroll-marker:not(:target-current):hover{background-color:var(--landsoul-surface)}.landsoul-tabs>::scroll-marker:not(:target-current):active{background-color:var(--landsoul-surface-low)}.landsoul-tabs>::scroll-marker:target-current{background-color:var(--landsoul-accent);color:var(--landsoul-inverse-text)}.landsoul-tooltip{contain:layout;position:relative}.landsoul-tooltip>.landsoul-tooltip-content,.landsoul-tooltip[data-tip]:before{background-color:var(--landsoul-bg);border-radius:var(--landsoul-radius);box-shadow:var(--landsoul-box-shadow);content:attr(data-tip);font-size:.875rem;line-height:1.25;opacity:0;padding:.2rem .4rem;pointer-events:none;position:absolute;width:-moz-max-content;width:max-content;z-index:2}.landsoul-tooltip:after{background-color:var(--landsoul-bg);content:"";display:block;height:.25rem;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='4' fill='none' viewBox='0 0 8 4'%3E%3Cpath fill='%23000' d='M.5 1C3.5 1 3 4 5 4s1.5-3 4.5-3c.5 0 .5-.5.5-1H0c0 .5 0 1 .5 1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='4' fill='none' viewBox='0 0 8 4'%3E%3Cpath fill='%23000' d='M.5 1C3.5 1 3 4 5 4s1.5-3 4.5-3c.5 0 .5-.5.5-1H0c0 .5 0 1 .5 1'/%3E%3C/svg%3E");-webkit-mask-position:-1px 0;mask-position:-1px 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;opacity:0;pointer-events:none;position:absolute;width:.625rem}@media (prefers-reduced-motion:no-preference){.landsoul-tooltip:after,.landsoul-tooltip>.landsoul-tooltip-content,.landsoul-tooltip[data-tip]:before{transition:opacity .18s cubic-bezier(.4,0,.2,1) 75ms,transform .18s cubic-bezier(.4,0,.2,1) 75ms}}.landsoul-tooltip.landsoul-tooltip-open:has(.landsoul-tooltip-content:not(:empty))>.landsoul-tooltip-content{opacity:1}.landsoul-tooltip.landsoul-tooltip-open[data-tip][data-tip]:not([data-tip=""]):before{opacity:1}.landsoul-tooltip.landsoul-tooltip-open[data-tip]:has(.landsoul-tooltip-content:not(:empty)):before{opacity:1}.landsoul-tooltip.landsoul-tooltip-open[data-tip]:not([data-tip=""]):after{opacity:1}.landsoul-tooltip.landsoul-tooltip-open:has(.landsoul-tooltip-content:not(:empty)):after{opacity:1}.landsoul-tooltip:has(.landsoul-tooltip-content:not(:empty)):hover>.landsoul-tooltip-content{opacity:1}.landsoul-tooltip[data-tip][data-tip]:not([data-tip=""]):hover:before{opacity:1}.landsoul-tooltip[data-tip]:has(.landsoul-tooltip-content:not(:empty)):hover:before{opacity:1}.landsoul-tooltip[data-tip]:not([data-tip=""]):hover:after{opacity:1}.landsoul-tooltip:has(.landsoul-tooltip-content:not(:empty)):hover:after{opacity:1}.landsoul-tooltip[data-tip]:not([data-tip=""]):has(:focus-visible)>.landsoul-tooltip-content{opacity:1}.landsoul-tooltip:has(.landsoul-tooltip-content:not(:empty)):has(:focus-visible)>.landsoul-tooltip-content{opacity:1}.landsoul-tooltip[data-tip][data-tip]:not([data-tip=""]):has(:focus-visible):before{opacity:1}.landsoul-tooltip[data-tip]:has(.landsoul-tooltip-content:not(:empty)):has(:focus-visible):before{opacity:1}.landsoul-tooltip[data-tip]:not([data-tip=""]):has(:focus-visible):after{opacity:1}.landsoul-tooltip:has(.landsoul-tooltip-content:not(:empty)):has(:focus-visible):after{opacity:1}.landsoul-tooltip.landsoul-tooltip-open[data-tip]:not([data-tip=""])>.landsoul-tooltip-content,.landsoul-tooltip[data-tip]:not([data-tip=""]):hover>.landsoul-tooltip-content{opacity:1}@media (prefers-reduced-motion:no-preference){.landsoul-tooltip.landsoul-tooltip-open:has(.landsoul-tooltip-content:not(:empty))>.landsoul-tooltip-content{transition:opacity .18s cubic-bezier(.4,0,.2,1) 0s,transform .18s cubic-bezier(.4,0,.2,1) 0s}.landsoul-tooltip.landsoul-tooltip-open[data-tip][data-tip]:not([data-tip=""]):before{transition:opacity .18s cubic-bezier(.4,0,.2,1) 0s,transform .18s cubic-bezier(.4,0,.2,1) 0s}.landsoul-tooltip.landsoul-tooltip-open[data-tip]:has(.landsoul-tooltip-content:not(:empty)):before{transition:opacity .18s cubic-bezier(.4,0,.2,1) 0s,transform .18s cubic-bezier(.4,0,.2,1) 0s}.landsoul-tooltip.landsoul-tooltip-open[data-tip]:not([data-tip=""]):after{transition:opacity .18s cubic-bezier(.4,0,.2,1) 0s,transform .18s cubic-bezier(.4,0,.2,1) 0s}.landsoul-tooltip.landsoul-tooltip-open:has(.landsoul-tooltip-content:not(:empty)):after{transition:opacity .18s cubic-bezier(.4,0,.2,1) 0s,transform .18s cubic-bezier(.4,0,.2,1) 0s}.landsoul-tooltip:has(.landsoul-tooltip-content:not(:empty)):hover>.landsoul-tooltip-content{transition:opacity .18s cubic-bezier(.4,0,.2,1) 0s,transform .18s cubic-bezier(.4,0,.2,1) 0s}.landsoul-tooltip[data-tip][data-tip]:not([data-tip=""]):hover:before{transition:opacity .18s cubic-bezier(.4,0,.2,1) 0s,transform .18s cubic-bezier(.4,0,.2,1) 0s}.landsoul-tooltip[data-tip]:has(.landsoul-tooltip-content:not(:empty)):hover:before{transition:opacity .18s cubic-bezier(.4,0,.2,1) 0s,transform .18s cubic-bezier(.4,0,.2,1) 0s}.landsoul-tooltip[data-tip]:not([data-tip=""]):hover:after{transition:opacity .18s cubic-bezier(.4,0,.2,1) 0s,transform .18s cubic-bezier(.4,0,.2,1) 0s}.landsoul-tooltip:has(.landsoul-tooltip-content:not(:empty)):hover:after{transition:opacity .18s cubic-bezier(.4,0,.2,1) 0s,transform .18s cubic-bezier(.4,0,.2,1) 0s}.landsoul-tooltip[data-tip]:not([data-tip=""]):has(:focus-visible)>.landsoul-tooltip-content{transition:opacity .18s cubic-bezier(.4,0,.2,1) 0s,transform .18s cubic-bezier(.4,0,.2,1) 0s}.landsoul-tooltip:has(.landsoul-tooltip-content:not(:empty)):has(:focus-visible)>.landsoul-tooltip-content{transition:opacity .18s cubic-bezier(.4,0,.2,1) 0s,transform .18s cubic-bezier(.4,0,.2,1) 0s}.landsoul-tooltip[data-tip][data-tip]:not([data-tip=""]):has(:focus-visible):before{transition:opacity .18s cubic-bezier(.4,0,.2,1) 0s,transform .18s cubic-bezier(.4,0,.2,1) 0s}.landsoul-tooltip[data-tip]:has(.landsoul-tooltip-content:not(:empty)):has(:focus-visible):before{transition:opacity .18s cubic-bezier(.4,0,.2,1) 0s,transform .18s cubic-bezier(.4,0,.2,1) 0s}.landsoul-tooltip[data-tip]:not([data-tip=""]):has(:focus-visible):after{transition:opacity .18s cubic-bezier(.4,0,.2,1) 0s,transform .18s cubic-bezier(.4,0,.2,1) 0s}.landsoul-tooltip:has(.landsoul-tooltip-content:not(:empty)):has(:focus-visible):after{transition:opacity .18s cubic-bezier(.4,0,.2,1) 0s,transform .18s cubic-bezier(.4,0,.2,1) 0s}.landsoul-tooltip.landsoul-tooltip-open[data-tip]:not([data-tip=""])>.landsoul-tooltip-content,.landsoul-tooltip[data-tip]:not([data-tip=""]):hover>.landsoul-tooltip-content{transition:opacity .18s cubic-bezier(.4,0,.2,1) 0s,transform .18s cubic-bezier(.4,0,.2,1) 0s}}.landsoul-tooltip-top>.landsoul-tooltip-content,.landsoul-tooltip-top[data-tip]:before,.landsoul-tooltip>.landsoul-tooltip-content,.landsoul-tooltip[data-tip]:before{bottom:calc(100% + .5rem);left:50%;right:auto;top:auto;transform:translateX(-50%) translateY(.25rem)}.landsoul-tooltip-top:after,.landsoul-tooltip:after{bottom:calc(100% + .25rem + 1px);left:50%;right:auto;top:auto;transform:translateX(-50%) translateY(.25rem)}.landsoul-tooltip.landsoul-tooltip-open:has(.landsoul-tooltip-content:not(:empty))>.landsoul-tooltip-content{transform:translateX(-50%) translateY(0)}.landsoul-tooltip.landsoul-tooltip-open[data-tip][data-tip]:not([data-tip=""]):before{transform:translateX(-50%) translateY(0)}.landsoul-tooltip.landsoul-tooltip-open[data-tip]:has(.landsoul-tooltip-content:not(:empty)):before{transform:translateX(-50%) translateY(0)}.landsoul-tooltip.landsoul-tooltip-open[data-tip]:not([data-tip=""]):after{transform:translateX(-50%) translateY(0)}.landsoul-tooltip.landsoul-tooltip-open:has(.landsoul-tooltip-content:not(:empty)):after{transform:translateX(-50%) translateY(0)}.landsoul-tooltip:has(.landsoul-tooltip-content:not(:empty)):hover>.landsoul-tooltip-content{transform:translateX(-50%) translateY(0)}.landsoul-tooltip[data-tip][data-tip]:not([data-tip=""]):hover:before{transform:translateX(-50%) translateY(0)}.landsoul-tooltip[data-tip]:has(.landsoul-tooltip-content:not(:empty)):hover:before{transform:translateX(-50%) translateY(0)}.landsoul-tooltip[data-tip]:not([data-tip=""]):hover:after{transform:translateX(-50%) translateY(0)}.landsoul-tooltip:has(.landsoul-tooltip-content:not(:empty)):hover:after{transform:translateX(-50%) translateY(0)}.landsoul-tooltip[data-tip]:not([data-tip=""]):has(:focus-visible)>.landsoul-tooltip-content{transform:translateX(-50%) translateY(0)}.landsoul-tooltip:has(.landsoul-tooltip-content:not(:empty)):has(:focus-visible)>.landsoul-tooltip-content{transform:translateX(-50%) translateY(0)}.landsoul-tooltip[data-tip][data-tip]:not([data-tip=""]):has(:focus-visible):before{transform:translateX(-50%) translateY(0)}.landsoul-tooltip[data-tip]:has(.landsoul-tooltip-content:not(:empty)):has(:focus-visible):before{transform:translateX(-50%) translateY(0)}.landsoul-tooltip[data-tip]:not([data-tip=""]):has(:focus-visible):after{transform:translateX(-50%) translateY(0)}.landsoul-tooltip:has(.landsoul-tooltip-content:not(:empty)):has(:focus-visible):after{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-top.landsoul-tooltip-open:has(.landsoul-tooltip-content:not(:empty))>.landsoul-tooltip-content{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-top.landsoul-tooltip-open[data-tip][data-tip]:not([data-tip=""]):before{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-top.landsoul-tooltip-open[data-tip]:has(.landsoul-tooltip-content:not(:empty)):before{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-top.landsoul-tooltip-open[data-tip]:not([data-tip=""]):after{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-top.landsoul-tooltip-open:has(.landsoul-tooltip-content:not(:empty)):after{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-top:has(.landsoul-tooltip-content:not(:empty)):hover>.landsoul-tooltip-content{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-top[data-tip][data-tip]:not([data-tip=""]):hover:before{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-top[data-tip]:has(.landsoul-tooltip-content:not(:empty)):hover:before{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-top[data-tip]:not([data-tip=""]):hover:after{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-top:has(.landsoul-tooltip-content:not(:empty)):hover:after{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-top[data-tip]:not([data-tip=""]):has(:focus-visible)>.landsoul-tooltip-content{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-top:has(.landsoul-tooltip-content:not(:empty)):has(:focus-visible)>.landsoul-tooltip-content{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-top[data-tip][data-tip]:not([data-tip=""]):has(:focus-visible):before{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-top[data-tip]:has(.landsoul-tooltip-content:not(:empty)):has(:focus-visible):before{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-top[data-tip]:not([data-tip=""]):has(:focus-visible):after{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-top:has(.landsoul-tooltip-content:not(:empty)):has(:focus-visible):after{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-top.landsoul-tooltip-open[data-tip]:not([data-tip=""])>.landsoul-tooltip-content,.landsoul-tooltip-top[data-tip]:not([data-tip=""]):hover>.landsoul-tooltip-content,.landsoul-tooltip.landsoul-tooltip-open[data-tip]:not([data-tip=""])>.landsoul-tooltip-content,.landsoul-tooltip[data-tip]:not([data-tip=""]):hover>.landsoul-tooltip-content{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-bottom>.landsoul-tooltip-content,.landsoul-tooltip-bottom[data-tip]:before{bottom:auto;left:50%;right:auto;top:calc(100% + .5rem);transform:translateX(-50%) translateY(-.25rem)}.landsoul-tooltip-bottom:after{bottom:auto;left:50%;right:auto;top:calc(100% + .25rem + 1px);transform:translateX(-50%) translateY(-.25rem) rotate(180deg)}.landsoul-tooltip-bottom.landsoul-tooltip-open:has(.landsoul-tooltip-content:not(:empty))>.landsoul-tooltip-content{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-bottom.landsoul-tooltip-open[data-tip][data-tip]:not([data-tip=""]):before{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-bottom.landsoul-tooltip-open[data-tip]:has(.landsoul-tooltip-content:not(:empty)):before{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-bottom:has(.landsoul-tooltip-content:not(:empty)):hover>.landsoul-tooltip-content{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-bottom[data-tip][data-tip]:not([data-tip=""]):hover:before{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-bottom[data-tip]:has(.landsoul-tooltip-content:not(:empty)):hover:before{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-bottom[data-tip]:not([data-tip=""]):has(:focus-visible)>.landsoul-tooltip-content{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-bottom:has(.landsoul-tooltip-content:not(:empty)):has(:focus-visible)>.landsoul-tooltip-content{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-bottom[data-tip][data-tip]:not([data-tip=""]):has(:focus-visible):before{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-bottom[data-tip]:has(.landsoul-tooltip-content:not(:empty)):has(:focus-visible):before{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-bottom.landsoul-tooltip-open[data-tip]:not([data-tip=""])>.landsoul-tooltip-content,.landsoul-tooltip-bottom[data-tip]:not([data-tip=""]):hover>.landsoul-tooltip-content{transform:translateX(-50%) translateY(0)}.landsoul-tooltip-bottom.landsoul-tooltip-open[data-tip]:not([data-tip=""]):after{transform:translateX(-50%) translateY(0) rotate(180deg)}.landsoul-tooltip-bottom.landsoul-tooltip-open:has(.landsoul-tooltip-content:not(:empty)):after{transform:translateX(-50%) translateY(0) rotate(180deg)}.landsoul-tooltip-bottom[data-tip]:not([data-tip=""]):hover:after{transform:translateX(-50%) translateY(0) rotate(180deg)}.landsoul-tooltip-bottom:has(.landsoul-tooltip-content:not(:empty)):hover:after{transform:translateX(-50%) translateY(0) rotate(180deg)}.landsoul-tooltip-bottom[data-tip]:not([data-tip=""]):has(:focus-visible):after{transform:translateX(-50%) translateY(0) rotate(180deg)}.landsoul-tooltip-bottom:has(.landsoul-tooltip-content:not(:empty)):has(:focus-visible):after{transform:translateX(-50%) translateY(0) rotate(180deg)}.landsoul-tooltip-left>.landsoul-tooltip-content,.landsoul-tooltip-left[data-tip]:before{bottom:auto;left:auto;right:calc(100% + .5rem);top:50%;transform:translateX(0) translateY(-50%)}.landsoul-tooltip-left:after{bottom:auto;left:auto;right:calc(100% + .25rem + 1px);top:50%;transform:translateX(.25rem) translateY(-50%) rotate(-90deg)}.landsoul-tooltip-left.landsoul-tooltip-open:has(.landsoul-tooltip-content:not(:empty))>.landsoul-tooltip-content{transform:translateX(-.25rem) translateY(-50%)}.landsoul-tooltip-left.landsoul-tooltip-open[data-tip][data-tip]:not([data-tip=""]):before{transform:translateX(-.25rem) translateY(-50%)}.landsoul-tooltip-left.landsoul-tooltip-open[data-tip]:has(.landsoul-tooltip-content:not(:empty)):before{transform:translateX(-.25rem) translateY(-50%)}.landsoul-tooltip-left:has(.landsoul-tooltip-content:not(:empty)):hover>.landsoul-tooltip-content{transform:translateX(-.25rem) translateY(-50%)}.landsoul-tooltip-left[data-tip][data-tip]:not([data-tip=""]):hover:before{transform:translateX(-.25rem) translateY(-50%)}.landsoul-tooltip-left[data-tip]:has(.landsoul-tooltip-content:not(:empty)):hover:before{transform:translateX(-.25rem) translateY(-50%)}.landsoul-tooltip-left[data-tip]:not([data-tip=""]):has(:focus-visible)>.landsoul-tooltip-content{transform:translateX(-.25rem) translateY(-50%)}.landsoul-tooltip-left:has(.landsoul-tooltip-content:not(:empty)):has(:focus-visible)>.landsoul-tooltip-content{transform:translateX(-.25rem) translateY(-50%)}.landsoul-tooltip-left[data-tip][data-tip]:not([data-tip=""]):has(:focus-visible):before{transform:translateX(-.25rem) translateY(-50%)}.landsoul-tooltip-left[data-tip]:has(.landsoul-tooltip-content:not(:empty)):has(:focus-visible):before{transform:translateX(-.25rem) translateY(-50%)}.landsoul-tooltip-left.landsoul-tooltip-open[data-tip]:not([data-tip=""])>.landsoul-tooltip-content,.landsoul-tooltip-left[data-tip]:not([data-tip=""]):hover>.landsoul-tooltip-content{transform:translateX(-.25rem) translateY(-50%)}.landsoul-tooltip-left.landsoul-tooltip-open[data-tip]:not([data-tip=""]):after{transform:translateX(0) translateY(-50%) rotate(-90deg)}.landsoul-tooltip-left.landsoul-tooltip-open:has(.landsoul-tooltip-content:not(:empty)):after{transform:translateX(0) translateY(-50%) rotate(-90deg)}.landsoul-tooltip-left[data-tip]:not([data-tip=""]):hover:after{transform:translateX(0) translateY(-50%) rotate(-90deg)}.landsoul-tooltip-left:has(.landsoul-tooltip-content:not(:empty)):hover:after{transform:translateX(0) translateY(-50%) rotate(-90deg)}.landsoul-tooltip-left[data-tip]:not([data-tip=""]):has(:focus-visible):after{transform:translateX(0) translateY(-50%) rotate(-90deg)}.landsoul-tooltip-left:has(.landsoul-tooltip-content:not(:empty)):has(:focus-visible):after{transform:translateX(0) translateY(-50%) rotate(-90deg)}.landsoul-tooltip-right>.landsoul-tooltip-content,.landsoul-tooltip-right[data-tip]:before{bottom:auto;left:calc(100% + .5rem);right:auto;top:50%;transform:translateX(0) translateY(-50%)}.landsoul-tooltip-right:after{bottom:auto;left:calc(100% + .25rem + 1px);right:auto;top:50%;transform:translateX(-.25rem) translateY(-50%) rotate(90deg)}.landsoul-tooltip-right.landsoul-tooltip-open:has(.landsoul-tooltip-content:not(:empty))>.landsoul-tooltip-content{transform:translateX(.25rem) translateY(-50%)}.landsoul-tooltip-right.landsoul-tooltip-open[data-tip][data-tip]:not([data-tip=""]):before{transform:translateX(.25rem) translateY(-50%)}.landsoul-tooltip-right.landsoul-tooltip-open[data-tip]:has(.landsoul-tooltip-content:not(:empty)):before{transform:translateX(.25rem) translateY(-50%)}.landsoul-tooltip-right:has(.landsoul-tooltip-content:not(:empty)):hover>.landsoul-tooltip-content{transform:translateX(.25rem) translateY(-50%)}.landsoul-tooltip-right[data-tip][data-tip]:not([data-tip=""]):hover:before{transform:translateX(.25rem) translateY(-50%)}.landsoul-tooltip-right[data-tip]:has(.landsoul-tooltip-content:not(:empty)):hover:before{transform:translateX(.25rem) translateY(-50%)}.landsoul-tooltip-right[data-tip]:not([data-tip=""]):has(:focus-visible)>.landsoul-tooltip-content{transform:translateX(.25rem) translateY(-50%)}.landsoul-tooltip-right:has(.landsoul-tooltip-content:not(:empty)):has(:focus-visible)>.landsoul-tooltip-content{transform:translateX(.25rem) translateY(-50%)}.landsoul-tooltip-right[data-tip][data-tip]:not([data-tip=""]):has(:focus-visible):before{transform:translateX(.25rem) translateY(-50%)}.landsoul-tooltip-right[data-tip]:has(.landsoul-tooltip-content:not(:empty)):has(:focus-visible):before{transform:translateX(.25rem) translateY(-50%)}.landsoul-tooltip-right.landsoul-tooltip-open[data-tip]:not([data-tip=""])>.landsoul-tooltip-content,.landsoul-tooltip-right[data-tip]:not([data-tip=""]):hover>.landsoul-tooltip-content{transform:translateX(.25rem) translateY(-50%)}.landsoul-tooltip-right.landsoul-tooltip-open[data-tip]:not([data-tip=""]):after{transform:translateX(0) translateY(-50%) rotate(90deg)}.landsoul-tooltip-right.landsoul-tooltip-open:has(.landsoul-tooltip-content:not(:empty)):after{transform:translateX(0) translateY(-50%) rotate(90deg)}.landsoul-tooltip-right[data-tip]:not([data-tip=""]):hover:after{transform:translateX(0) translateY(-50%) rotate(90deg)}.landsoul-tooltip-right:has(.landsoul-tooltip-content:not(:empty)):hover:after{transform:translateX(0) translateY(-50%) rotate(90deg)}.landsoul-tooltip-right[data-tip]:not([data-tip=""]):has(:focus-visible):after{transform:translateX(0) translateY(-50%) rotate(90deg)}.landsoul-tooltip-right:has(.landsoul-tooltip-content:not(:empty)):has(:focus-visible):after{transform:translateX(0) translateY(-50%) rotate(90deg)}
package/dist/landsoul.css CHANGED
@@ -1 +1 @@
1
- body{--landsoul-bg:#fff;--landsoul-text:#262626;--landsoul-text-on-shadow:#5a5a5a;--landsoul-shadow:#ebebeb;--landsoul-shadow-active:#bfbfbf;--landsoul-accent:#2e72f0;--landsoul-border:#e3e4e8}body[data-theme=dark]{--landsoul-bg:#202021;--landsoul-text:#e7e7e7;--landsoul-text-on-shadow:silver;--landsoul-shadow:#353e5a;--landsoul-shadow-active:#4a5670;--landsoul-accent:#4a90ff;--landsoul-border:#2b414f}@media screen and (prefers-color-scheme:dark){body{--landsoul-bg:#202021;--landsoul-text:#e7e7e7;--landsoul-text-on-shadow:silver;--landsoul-shadow:#353e5a;--landsoul-shadow-active:#4a5670;--landsoul-accent:#4a90ff;--landsoul-border:#2b414f}}body{--landsoul-time:0.25s;--landsoul-radius:0.4rem;--landsoul-radius-active:0.6rem;--landsoul-gradient:linear-gradient(#ccfcf7,#c4eae9,#bbd8db,#b3c6cd,#aab4bf)}a{background-color:transparent}progress{vertical-align:baseline;width:8rem}body{background-color:var(--landsoul-bg);color:var(--landsoul-text);font-family:Graphik,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;transition:color var(--landsoul-time),background-color var(--landsoul-time)}a{color:var(--landsoul-accent);-webkit-tap-highlight-color:transparent;-webkit-text-decoration:none;text-decoration:none}a:hover{-webkit-text-decoration:underline;text-decoration:underline}h1{font-size:2.5rem}h2{font-size:2.25rem}h3{font-size:2rem}h4{font-size:1.75rem}h5{font-size:1.5rem}h6{font-size:1.25rem}a[href^="#"] h1,a[href^="#"] h2,a[href^="#"] h3,a[href^="#"] h4,a[href^="#"] h5,a[href^="#"] h6{color:var(--landsoul-text)}a[href^="#"] h1:before,a[href^="#"] h2:before,a[href^="#"] h3:before,a[href^="#"] h4:before,a[href^="#"] h5:before,a[href^="#"] h6:before{color:var(--landsoul-accent);content:"#";margin-right:.3rem}h1,h2,h3,h4,h5,h6{color:inherit;margin:0;padding:0}h1>small,h2>small,h3>small,h4>small,h5>small,h6>small{background-color:var(--landsoul-shadow);border-radius:var(--landsoul-radius);font-weight:lighter;margin-left:.25rem;padding:0 .25rem}button,input,select,textarea{background-color:var(--landsoul-shadow);color:var(--landsoul-text-on-shadow);-webkit-tap-highlight-color:transparent}button,input[type=button],input[type=reset],input[type=submit],select{transition:filter var(--landsoul-time)}button:hover,input[type=button]:hover,input[type=reset]:hover,input[type=submit]:hover,select:hover{filter:contrast(.94)}button,input[type=button],input[type=reset],input[type=submit],select{color:var(--landsoul-text);cursor:pointer}button,input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{transition:filter var(--landsoul-time)}button:hover,input:not([type=checkbox]):not([type=radio]):not([type=range]):hover,select:hover,textarea:hover{filter:contrast(.94)}button,input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{border:none;border-radius:var(--landsoul-radius);padding:.25rem .5rem}button:focus-within,input:not([type=checkbox]):not([type=radio]):not([type=range]):focus-within,select:focus-within,textarea:focus-within{outline:var(--landsoul-text) solid .01rem}textarea{border:none;min-height:2rem;min-width:2rem}[disabled],input[disabled]{cursor:not-allowed;opacity:.5}label:not(:has([disabled])){cursor:pointer}select{color:var(--landsoul-text);interpolate-size:allow-keywords;transition:width var(--landsoul-time) ease,height var(--landsoul-time) ease}select,select::picker(select){-webkit-appearance:base-select;-moz-appearance:base-select;appearance:base-select}select::picker(select){background-color:var(--landsoul-shadow);border:1px solid var(--landsoul-border);border-radius:var(--landsoul-radius-active);box-shadow:0 0 0 1px var(--landsoul-border),0 2px 2px rgba(0,0,0,.2),0 8px 16px rgba(0,0,0,.2);padding:.25rem;transition:display .5s allow-discrete,overlay .5s allow-discrete,opacity var(--landsoul-time) ease,transform .5s ease-in-out}select:not(:open)::picker(select){opacity:0;transform:scale(.95);transition-duration:.1s}select:open::picker(select){opacity:1}select::picker-icon{opacity:.75;transition:opacity var(--landsoul-time) ease,transform var(--landsoul-time) ease}select:hover::picker-icon{opacity:1}select:focus-visible::picker-icon{opacity:1}select:open::picker-icon{opacity:1;transform:rotateX(.5turn)}select optgroup{color:rgb(from var(--landsoul-text) r g b/.5);cursor:default;font-weight:500}select option{border-radius:var(--landsoul-radius);color:var(--landsoul-text);cursor:pointer;font-weight:400;padding:0 1rem 0 .75rem;transition:background-color var(--landsoul-time) ease,outline-offset var(--landsoul-time) ease}select option:focus-visible{outline:2px solid rgb(from var(--landsoul-accent) r g b/.5);outline-offset:-2px}select option:checked{background-color:var(--landsoul-accent);color:var(--landsoul-bg)}select option:checked::checkmark{color:var(--landsoul-bg)}select option:first-child{margin-top:.25rem}select[multiple] option{padding:.25rem 1.25rem}select[multiple] option:not(:first-child){margin-top:2px}input[type=checkbox],input[type=radio]{--size:1.25rem;all:unset;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;cursor:pointer;display:inline-block;height:1.25rem;height:var(--size);opacity:.8;position:relative;transition:all var(--landsoul-time);vertical-align:text-bottom}input[type=checkbox]:hover,input[type=radio]:hover{opacity:1}input[type=checkbox]{background:var(--landsoul-shadow);border-radius:1rem;width:calc(var(--size)*1.75)}input[type=checkbox]:after{background:var(--landsoul-bg);border-radius:50%;content:"";display:inline-block;height:calc(var(--size)*.8);left:calc(var(--size)*.1);position:absolute;top:calc(var(--size)*.1);transition:all .4s;width:calc(var(--size)*.8)}input[type=checkbox]:checked{background:var(--landsoul-accent)}input[type=checkbox]:checked:after{content:"";left:100%;position:absolute;transform:translateX(calc(-100% - var(--size)*.1))}input[type=radio]{border:solid calc(var(--size)*.1) var(--landsoul-shadow);border-radius:50%;width:var(--size)}input[type=radio]:after{background:var(--landsoul-accent);border-radius:50%;content:"";display:inline-block;height:calc(var(--size)*.6);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity var(--landsoul-time);width:calc(var(--size)*.6)}input[type=radio]:checked:after{opacity:1}input[type=range]{-webkit-appearance:none;background-color:transparent;border-radius:1rem;cursor:pointer;height:.3rem;vertical-align:baseline}input[type=range]::-webkit-slider-runnable-track{background-color:var(--landsoul-shadow);border-radius:1rem;height:.15rem;width:100%}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--landsoul-bg);border:.2rem solid var(--landsoul-border);border-radius:50%;cursor:grab;height:1rem;transform:translateY(-.4rem) scale(.8);-webkit-transition:transform .2s;transition:transform .2s;width:1rem}input[type=range]::-webkit-slider-thumb:active{transform:translateY(-.4rem) scale(1)}input[type=range]::-moz-range-progress{background-color:var(--landsoul-accent);height:.1rem}input[type=range]::-moz-range-track{background-color:var(--landsoul-shadow);height:.15rem;width:100%}input[type=range]::-moz-range-thumb{-moz-appearance:none;background-color:var(--landsoul-bg);border:.2rem solid var(--landsoul-border);border-radius:50%;cursor:grab;height:1rem;transform:scale(.8);-moz-transition:transform .2s;transition:transform .2s;width:1rem}input[type=range]::-moz-range-thumb:active{transform:scale(1)}table{border-collapse:collapse;border-radius:var(--landsoul-radius-active);border-spacing:0;box-sizing:border-box;display:inline-block;max-width:100%;overflow:auto}table caption{padding:.5rem}table tfoot th,table thead th{background-color:var(--landsoul-shadow);padding-bottom:.75rem;padding-top:.75rem;position:sticky;z-index:0}table thead th{top:0}table tfoot th{bottom:0}table:has(tbody>tr>th:first-child) th:first-child{background-color:var(--landsoul-shadow);left:0;position:sticky;z-index:1}table:has(tbody>tr>th:first-child) tfoot th:first-child,table:has(tbody>tr>th:first-child) thead th:first-child{z-index:2}table tbody{white-space:nowrap}table tbody tr{background-color:var(--landsoul-bg)}table td,table th{padding:.25rem .5rem}table{outline:2px solid var(--landsoul-border);outline-offset:-2px}td,th{outline:1px solid var(--landsoul-border);outline-offset:-1px}figure{display:flex;flex-flow:column;margin:auto}figure img{max-width:100%}figure figcaption{font-size:.75rem;margin:.5rem}details{padding-bottom:0;interpolate-size:allow-keywords;-webkit-tap-highlight-color:transparent}details summary{background-color:var(--landsoul-shadow);border-radius:var(--landsoul-radius-active);cursor:pointer;padding:.5rem calc(.75rem + 8px) .5rem .5rem;position:relative}details summary::marker{content:""}details summary:after{border-right:1.5px solid;border-top:1.5px solid;content:"";height:5px;position:absolute;right:8px;rotate:45deg;top:50%;transition:rotate .1s;translate:-50% -50%;width:5px}details::details-content{height:0;overflow:hidden;transition:height .2s,content-visibility .2s;transition-behavior:allow-discrete}details:open summary:after{rotate:135deg}details:open::details-content{height:auto}dialog{background-color:var(--landsoul-bg);border:1px solid var(--landsoul-shadow);border-radius:2rem;color:var(--landsoul-text);overflow:auto;padding:1rem;width:min(260px,100vw - 2px)}progress{--height:0.5rem;background-color:var(--landsoul-shadow);border:none;border-radius:.5rem;border-radius:var(--height);color:var(--landsoul-accent);height:.5rem;height:var(--height);line-height:.5rem;line-height:var(--height);overflow:hidden}progress::-moz-progress-bar{background-color:var(--landsoul-accent)}progress::-webkit-progress-bar{background-color:var(--landsoul-shadow)}progress::-webkit-progress-value{background-color:var(--landsoul-accent)}::-webkit-meter-bar{background-color:var(--landsoul-shadow);border:none}hr{border:none;border-top:.15rem solid var(--landsoul-border)}blockquote{border-left:.25rem solid var(--landsoul-shadow);font-style:italic;margin:.5rem 0;padding:.5rem 1rem}code,kbd,pre{background-color:var(--landsoul-shadow);border-radius:var(--landsoul-radius)}code,kbd,pre,samp{font-family:Consolas,monospace}code,kbd{padding:.05rem .2rem}pre{box-sizing:border-box;max-width:100%;overflow:auto;padding:.5rem .75rem}kbd{border:solid rgba(0,0,0,.05);border-width:.1rem .1rem .2rem}fieldset,iframe{border:.15rem solid var(--landsoul-border);border-radius:var(--landsoul-radius-active)}
1
+ :host,:root{--landsoul-bg:#fff}@supports (color:light-dark(white,black)){:host,:root{--landsoul-bg:light-dark(#fff,#202021)}}:host[data-theme=dark],:root[data-theme=dark]{--landsoul-bg:#202021}:host,:root{--landsoul-text:#262626}@supports (color:light-dark(white,black)){:host,:root{--landsoul-text:light-dark(#262626,#e7e7e7)}}:host[data-theme=dark],:root[data-theme=dark]{--landsoul-text:#e7e7e7}:host,:root{--landsoul-inverse-text:#fff}@supports (color:light-dark(white,black)){:host,:root{--landsoul-inverse-text:light-dark(#fff,#262626)}}:host[data-theme=dark],:root[data-theme=dark]{--landsoul-inverse-text:#262626}:host,:root{--landsoul-text-on-surface:#5a5a5a}@supports (color:light-dark(white,black)){:host,:root{--landsoul-text-on-surface:light-dark(#5a5a5a,silver)}}:host[data-theme=dark],:root[data-theme=dark]{--landsoul-text-on-surface:silver}:host,:root{--landsoul-surface-low:#f5f5f5}@supports (color:light-dark(white,black)){:host,:root{--landsoul-surface-low:light-dark(#f5f5f5,#2a3447)}}:host[data-theme=dark],:root[data-theme=dark]{--landsoul-surface-low:#2a3447}:host,:root{--landsoul-surface:#ebebeb}@supports (color:light-dark(white,black)){:host,:root{--landsoul-surface:light-dark(#ebebeb,#353e5a)}}:host[data-theme=dark],:root[data-theme=dark]{--landsoul-surface:#353e5a}:host,:root{--landsoul-surface-high:#bfbfbf}@supports (color:light-dark(white,black)){:host,:root{--landsoul-surface-high:light-dark(#bfbfbf,#4a5670)}}:host[data-theme=dark],:root[data-theme=dark]{--landsoul-surface-high:#4a5670}:host,:root{--landsoul-accent:#2e72f0}@supports (color:light-dark(white,black)){:host,:root{--landsoul-accent:light-dark(#2e72f0,#4a90ff)}}:host[data-theme=dark],:root[data-theme=dark]{--landsoul-accent:#4a90ff}:host,:root{--landsoul-danger:#e03e2f}@supports (color:light-dark(white,black)){:host,:root{--landsoul-danger:light-dark(#e03e2f,#ff5c4a)}}:host[data-theme=dark],:root[data-theme=dark]{--landsoul-danger:#ff5c4a}:host,:root{--landsoul-border:#e3e4e8}@supports (color:light-dark(white,black)){:host,:root{--landsoul-border:light-dark(#e3e4e8,#2b414f)}}:host[data-theme=dark],:root[data-theme=dark]{--landsoul-border:#2b414f}:host,:root{--landsoul-0-1:rgba(0,0,0,.1)}@supports (color:light-dark(white,black)){:host,:root{--landsoul-0-1:light-dark(rgba(0,0,0,.1),hsla(0,0%,100%,.1))}}:host[data-theme=dark],:root[data-theme=dark]{--landsoul-0-1:hsla(0,0%,100%,.1)}:host,:root{--landsoul-0-2:rgba(0,0,0,.2)}@supports (color:light-dark(white,black)){:host,:root{--landsoul-0-2:light-dark(rgba(0,0,0,.2),hsla(0,0%,100%,.2))}}:host[data-theme=dark],:root[data-theme=dark]{--landsoul-0-2:hsla(0,0%,100%,.2)}:host,:root{--landsoul-0-3:rgba(0,0,0,.3)}@supports (color:light-dark(white,black)){:host,:root{--landsoul-0-3:light-dark(rgba(0,0,0,.3),hsla(0,0%,100%,.3))}}:host[data-theme=dark],:root[data-theme=dark]{--landsoul-0-3:hsla(0,0%,100%,.3)}:host,:root{--landsoul-duration:0.25s;--landsoul-radius:0.4rem;--landsoul-radius-active:0.6rem;--landsoul-box-shadow:0 0 0 0.0625rem var(--landsoul-border),0 0 0.125rem var(--landsoul-0-1),0 0 1rem var(--landsoul-0-2)}a{background-color:transparent}progress{vertical-align:baseline;width:8rem}body{background-color:#fff;background-color:var(--landsoul-bg);color:#262626;color:var(--landsoul-text);font-family:Graphik,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px}a{color:#2e72f0;color:var(--landsoul-accent);-webkit-tap-highlight-color:transparent;-webkit-text-decoration:none;text-decoration:none}a:hover{-webkit-text-decoration:underline;text-decoration:underline}h1{font-size:2.5rem}h2{font-size:2.25rem}h3{font-size:2rem}h4{font-size:1.75rem}h5{font-size:1.5rem}h6{font-size:1.25rem}a[href^="#"] h1,a[href^="#"] h2,a[href^="#"] h3,a[href^="#"] h4,a[href^="#"] h5,a[href^="#"] h6{color:#262626;color:var(--landsoul-text)}a[href^="#"] h1:before,a[href^="#"] h2:before,a[href^="#"] h3:before,a[href^="#"] h4:before,a[href^="#"] h5:before,a[href^="#"] h6:before{color:#2e72f0;color:var(--landsoul-accent);content:"#";margin-right:.3rem}h1,h2,h3,h4,h5,h6{color:inherit;margin:0;padding:0}h1>small,h2>small,h3>small,h4>small,h5>small,h6>small{background-color:#ebebeb;background-color:var(--landsoul-surface);border-radius:.4rem;border-radius:var(--landsoul-radius);font-weight:lighter;margin-left:.25rem;padding:0 .25rem}button,input,select,textarea{background-color:#ebebeb;background-color:var(--landsoul-surface);color:#5a5a5a;color:var(--landsoul-text-on-surface);-webkit-tap-highlight-color:transparent}button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]){transition:filter .25s;transition:filter var(--landsoul-duration)}button:not([disabled]):hover,input:not([disabled]):hover,select:not([disabled]):hover,textarea:not([disabled]):hover{filter:contrast(.94)}button:out-of-range,input:out-of-range,select:out-of-range,textarea:out-of-range{background-color:#eadad8}@supports (color:color-mix(in lch,red,blue)){button:out-of-range,input:out-of-range,select:out-of-range,textarea:out-of-range{background-color:color-mix(in srgb,var(--landsoul-danger) 10%,var(--landsoul-surface))}}button:not(:disabled),input[type=button]:not(:disabled),input[type=reset]:not(:disabled),input[type=submit]:not(:disabled),select:not(:disabled){cursor:pointer}button,input[type=button],input[type=reset],input[type=submit],select{color:#262626;color:var(--landsoul-text)}:disabled{cursor:not-allowed;opacity:.5}label:not(:has(:disabled)){cursor:pointer}button,input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{border:none;border-radius:.4rem;border-radius:var(--landsoul-radius);outline-offset:0;padding:.25rem .5rem;transition:outline-offset .25s ease;transition:outline-offset var(--landsoul-duration) ease}button:focus-within,input:not([type=checkbox]):not([type=radio]):not([type=range]):focus-within,select:focus-within,textarea:focus-within{outline:.0625rem solid #bfbfbf;outline:var(--landsoul-surface-high) solid .0625rem;outline-offset:-.0625rem}textarea{border:none;min-height:2rem;min-width:2rem}select{color:#262626;color:var(--landsoul-text);interpolate-size:allow-keywords;transition:width .25s ease,height .25s ease;transition:width var(--landsoul-duration) ease,height var(--landsoul-duration) ease}select,select::picker(select){-webkit-appearance:base-select;-moz-appearance:base-select;appearance:base-select}select::picker(select){background-color:#ebebeb;background-color:var(--landsoul-surface);border:.0625rem solid #e3e4e8;border:.0625rem solid var(--landsoul-border);border-radius:.6rem;border-radius:var(--landsoul-radius-active);box-shadow:0 0 0 .0625rem #e3e4e8,0 0 .125rem rgba(0,0,0,.1),0 0 1rem rgba(0,0,0,.2);box-shadow:var(--landsoul-box-shadow);padding:.25rem;transition:display allow-discrete .25s,overlay allow-discrete .25s,transform .25s ease-in-out,opacity .25s ease;transition:display var(--landsoul-duration) allow-discrete,overlay var(--landsoul-duration) allow-discrete,transform var(--landsoul-duration) ease-in-out,opacity var(--landsoul-duration) ease}select:not(:open)::picker(select){opacity:0;transform:scale(.99)}select:open::picker(select){opacity:1}@starting-style{select::picker(select):popover-open{opacity:0}}select optgroup{color:rgba(38,38,38,.5);cursor:default;font-weight:500}@supports (color:lab(from red l 1 1%/calc(alpha + 0.1))){select optgroup{color:rgb(from var(--landsoul-text) r g b/.5)}}select option{border-radius:.4rem;border-radius:var(--landsoul-radius);color:#262626;color:var(--landsoul-text);cursor:pointer;font-weight:400;padding:0 1rem 0 .75rem;transition:background-color .25s ease,outline-offset .25s ease;transition:background-color var(--landsoul-duration) ease,outline-offset var(--landsoul-duration) ease}select option:focus-visible{outline:.125rem solid rgba(46,114,240,.5);outline-offset:-.125rem}@supports (color:lab(from red l 1 1%/calc(alpha + 0.1))){select option:focus-visible{outline:.125rem solid rgb(from var(--landsoul-accent) r g b/.5)}}select option:checked{background-color:#2e72f0;background-color:var(--landsoul-accent);color:#fff;color:var(--landsoul-bg)}select option:checked::checkmark{color:#fff;color:var(--landsoul-bg)}select option:first-child{margin-top:.25rem}select[multiple] option{padding:.25rem 1.25rem}select[multiple] option:not(:first-child){margin-top:.0625rem}select::picker-icon{background-color:#262626;background-color:var(--landsoul-text);display:grid;height:15px;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 15 15"><path fill="%23000" fill-rule="evenodd" d="M4.182 6.182a.45.45 0 0 1 .636 0L7.5 8.864l2.682-2.682a.45.45 0 0 1 .636.636l-3 3a.45.45 0 0 1-.636 0l-3-3a.45.45 0 0 1 0-.636" clip-rule="evenodd"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 15 15"><path fill="%23000" fill-rule="evenodd" d="M4.182 6.182a.45.45 0 0 1 .636 0L7.5 8.864l2.682-2.682a.45.45 0 0 1 .636.636l-3 3a.45.45 0 0 1-.636 0l-3-3a.45.45 0 0 1 0-.636" clip-rule="evenodd"/></svg>');-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;translate:0 1px;width:15px}select:open::picker-icon{-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 15 15"><path fill="%23000" fill-rule="evenodd" d="M4.182 8.818a.45.45 0 0 1 0-.636l3-3a.45.45 0 0 1 .636 0l3 3a.45.45 0 0 1-.636.636L7.5 6.136 4.818 8.818a.45.45 0 0 1-.636 0" clip-rule="evenodd"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 15 15"><path fill="%23000" fill-rule="evenodd" d="M4.182 8.818a.45.45 0 0 1 0-.636l3-3a.45.45 0 0 1 .636 0l3 3a.45.45 0 0 1-.636.636L7.5 6.136 4.818 8.818a.45.45 0 0 1-.636 0" clip-rule="evenodd"/></svg>')}input[type=checkbox]{--size:1.25rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:.125rem solid #ebebeb;border:solid calc(var(--size)*.1) var(--landsoul-surface);border-radius:.25rem;border-radius:calc(var(--size)*.2);box-sizing:border-box;cursor:pointer;display:inline-block;height:1.25rem;height:var(--size);margin:0;opacity:.8;position:relative;transition:all .25s;transition:all var(--landsoul-duration);vertical-align:text-bottom;width:1.25rem;width:var(--size)}input[type=checkbox]:after{border:solid #2e72f0;border:solid var(--landsoul-accent);border-width:0 calc(var(--size)*.12) calc(var(--size)*.12) 0;clip-path:inset(100% 0 0 0);content:"";display:inline-block;height:calc(var(--size)*.55);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-55%) rotate(45deg);transition:clip-path .25s cubic-bezier(.4,0,.2,1),opacity .25s cubic-bezier(.4,0,.2,1);transition:clip-path var(--landsoul-duration) cubic-bezier(.4,0,.2,1),opacity var(--landsoul-duration) cubic-bezier(.4,0,.2,1);width:calc(var(--size)*.3)}input[type=checkbox]:checked:after{clip-path:inset(0 0 0 0);opacity:1}input[type=checkbox]:hover{opacity:1}input[type=file]{background-color:#f5f5f5;padding:0}@supports (color:color-mix(in lch,red,blue)){input[type=file]{background-color:color-mix(in srgb,var(--landsoul-surface) 50%,var(--landsoul-bg))}}input[type=file]::file-selector-button{background-color:#ebebeb;background-color:var(--landsoul-surface);border:none;color:#262626;color:var(--landsoul-text);cursor:pointer;margin-right:.5rem;padding:.35rem .5rem}input[type=file]{outline-offset:0;transition:outline-offset .25s ease;transition:outline-offset var(--landsoul-duration) ease}input[type=file]:focus-within{outline:.0625rem solid #bfbfbf;outline:var(--landsoul-surface-high) solid .0625rem;outline-offset:-.0625rem}input[type=radio]{--size:1.25rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:.125rem solid #ebebeb;border:solid calc(var(--size)*.1) var(--landsoul-surface);border-radius:50%;box-sizing:border-box;cursor:pointer;display:inline-block;height:1.25rem;height:var(--size);margin:0;opacity:.8;position:relative;transition:all .25s;transition:all var(--landsoul-duration);vertical-align:text-bottom;width:1.25rem;width:var(--size)}input[type=radio]:after{background:#2e72f0;background:var(--landsoul-accent);border-radius:50%;clip-path:circle(25%);content:"";display:inline-block;height:calc(var(--size)*.6);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .25s ease-out,clip-path .25s ease-out;transition:opacity var(--landsoul-duration) ease-out,clip-path var(--landsoul-duration) ease-out;width:calc(var(--size)*.6)}input[type=radio]:checked:after{clip-path:circle(100%);opacity:1}input[type=radio]:hover{opacity:1}input[type=radio]:focus-visible{outline:.125rem solid #bfbfbf;outline:solid .125rem var(--landsoul-surface-high)}input[type=range]{-webkit-appearance:none;background-color:transparent;border-radius:1rem;cursor:pointer;height:.3rem;vertical-align:baseline}input[type=range]::-webkit-slider-runnable-track{background-color:#ebebeb;background-color:var(--landsoul-surface);border-radius:1rem;height:.15rem;width:100%}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background-color:#fff;background-color:var(--landsoul-bg);border:.2rem solid #e3e4e8;border:.2rem solid var(--landsoul-border);border-radius:50%;cursor:grab;height:1rem;transform:translateY(-.4rem) scale(.8);-webkit-transition:transform .25s;transition:transform .25s;-webkit-transition:transform var(--landsoul-duration);transition:transform var(--landsoul-duration);width:1rem}input[type=range]::-webkit-slider-thumb:active{transform:translateY(-.4rem) scale(1)}input[type=range]:focus-within::-webkit-slider-thumb{transform:translateY(-.4rem) scale(1)}input[type=range]::-moz-range-progress{background-color:#2e72f0;background-color:var(--landsoul-accent);height:.1rem}input[type=range]::-moz-range-track{background-color:#ebebeb;background-color:var(--landsoul-surface);height:.15rem;width:100%}input[type=range]::-moz-range-thumb{-moz-appearance:none;background-color:#fff;background-color:var(--landsoul-bg);border:.2rem solid #e3e4e8;border:.2rem solid var(--landsoul-border);border-radius:50%;cursor:grab;height:1rem;transform:scale(.8);-moz-transition:transform .25s;transition:transform .25s;-moz-transition:transform var(--landsoul-duration);transition:transform var(--landsoul-duration);width:1rem}input[type=range]::-moz-range-thumb:active{transform:scale(1)}input[type=range]:focus-within::-moz-range-thumb{transform:scale(1)}table{border:.0625rem solid #e3e4e8;border:.0625rem solid var(--landsoul-border);border-collapse:collapse;border-radius:.6rem;border-radius:var(--landsoul-radius-active);border-spacing:0;box-sizing:border-box;display:inline-block;max-width:100%;overflow:auto}table caption{padding:.5rem}table tfoot th,table thead th{background-color:#f5f5f5;background-color:var(--landsoul-surface-low);padding-bottom:.75rem;padding-top:.75rem;position:sticky;z-index:0}table thead th{box-shadow:inset 0 -.0625rem 0 0 #e3e4e8;box-shadow:inset 0 -.0625rem 0 0 var(--landsoul-border);top:0}table tfoot th{bottom:0;box-shadow:inset 0 .0625rem 0 0 #e3e4e8;box-shadow:inset 0 .0625rem 0 0 var(--landsoul-border)}table:has(tbody>tr>th:first-child) th:first-child{background-color:#f5f5f5;background-color:var(--landsoul-surface-low);left:0;position:sticky;z-index:1}table:has(tbody>tr>th:first-child) tfoot th:first-child,table:has(tbody>tr>th:first-child) thead th:first-child{z-index:2}table tbody{white-space:nowrap}table tbody tr{background-color:#fff;background-color:var(--landsoul-bg)}table td,table th{border-bottom:.0625rem solid #e3e4e8;border-bottom:.0625rem solid var(--landsoul-border);padding:.25rem .5rem}table tr:last-child td,table tr:last-child th{border-bottom:none}figure{display:flex;flex-flow:column;margin:auto}figure img{max-width:100%}figure figcaption{font-size:.75rem;margin:.5rem}details{padding-bottom:0;interpolate-size:allow-keywords;-webkit-tap-highlight-color:transparent}details summary{border-radius:.6rem;border-radius:var(--landsoul-radius-active);cursor:pointer;outline-offset:-.125rem;padding:.5rem 1.25rem .5rem 1rem;position:relative}details summary:hover{background-color:#ebebeb;background-color:var(--landsoul-surface)}details summary:active{background-color:#f5f5f5;background-color:var(--landsoul-surface-low)}details summary:focus-visible{outline:.0625rem solid #bfbfbf;outline:solid .0625rem var(--landsoul-surface-high)}details summary::marker{content:""}details summary:after{border-right:.1rem solid;border-top:.1rem solid;content:"";height:.3125rem;position:absolute;right:.5rem;rotate:45deg;top:50%;transition:rotate .1s;translate:-50% -50%;width:.3125rem}details::details-content{height:0;opacity:0;overflow:hidden;transition:height .2s,content-visibility .2s,opacity .2s;transition-behavior:allow-discrete}details:open summary:after{rotate:135deg}details:open::details-content{height:auto;opacity:1}dialog{background-color:#fff;background-color:var(--landsoul-bg);border:.0625rem solid #ebebeb;border:.0625rem solid var(--landsoul-surface);border-radius:2rem;box-shadow:0 0 0 .0625rem #e3e4e8,0 0 .125rem rgba(0,0,0,.1),0 0 1rem rgba(0,0,0,.2);box-shadow:var(--landsoul-box-shadow);color:#262626;color:var(--landsoul-text);overflow:auto;padding:1rem;width:min(260px,100vw - 2px)}dialog,dialog::backdrop{transition:transform .25s ease,opacity .25s ease;transition:transform var(--landsoul-duration) ease,opacity var(--landsoul-duration) ease}dialog:popover-open,dialog[open]{opacity:1}@starting-style{dialog:popover-open,dialog[open]{opacity:.666;transform:scale(.99)}dialog:popover-open::backdrop,dialog[open]::backdrop{opacity:0}}progress{--height:0.5rem;background-color:#f5f5f5;background-color:var(--landsoul-surface-low);border:none;border-radius:.5rem;border-radius:var(--height);color:#2e72f0;color:var(--landsoul-accent);height:.5rem;height:var(--height);line-height:.5rem;line-height:var(--height);overflow:hidden}progress::-moz-progress-bar{background-color:#2e72f0;background-color:var(--landsoul-accent)}progress::-webkit-progress-bar{background-color:#f5f5f5;background-color:var(--landsoul-surface-low)}progress::-webkit-progress-value{background-color:#2e72f0;background-color:var(--landsoul-accent)}::-webkit-meter-bar{background-color:#f5f5f5;background-color:var(--landsoul-surface-low);border:none}a:focus{outline-color:#bfbfbf;outline-color:var(--landsoul-surface-high)}hr{border:none;border-top:.15rem solid #e3e4e8;border-top:.15rem solid var(--landsoul-border)}blockquote{border-left:.25rem solid #ebebeb;border-left:.25rem solid var(--landsoul-surface);font-style:italic;margin:.5rem 0;padding:.5rem 1rem}code,kbd,pre{background-color:#ebebeb;background-color:var(--landsoul-surface);border-radius:.4rem;border-radius:var(--landsoul-radius);font-family:Consolas,monospace}code:focus-visible,kbd:focus-visible,pre:focus-visible{outline:.125rem solid #bfbfbf;outline:solid .125rem var(--landsoul-surface-high)}samp{font-family:Consolas,monospace}code,kbd{padding:.05rem .2rem}pre{box-sizing:border-box;max-width:100%;overflow:auto;padding:.5rem .75rem}kbd{border:solid rgba(0,0,0,.05);border-width:.1rem .1rem .2rem}fieldset,iframe{border:.0625rem solid #e3e4e8;border:.0625rem solid var(--landsoul-border);border-radius:.6rem;border-radius:var(--landsoul-radius-active)}
package/package.json CHANGED
@@ -1,15 +1,16 @@
1
1
  {
2
2
  "name": "landsoul",
3
- "version": "0.2.3",
3
+ "version": "0.4.0",
4
4
  "type": "module",
5
- "description": "drop in css library landsoul",
5
+ "description": "classless css library",
6
6
  "main": "./dist/landsoul.css",
7
7
  "files": [
8
8
  "dist"
9
9
  ],
10
10
  "scripts": {
11
11
  "dev": "node dev-server.ts",
12
- "build": "rm -rf ./dist && sass src:dist --no-source-map && postcss ./dist/*.css -d ./dist"
12
+ "build": "rm -rf ./dist && sass src:dist --no-source-map --silence-deprecation=if-function && postcss ./dist/*.css -d ./dist",
13
+ "format": "prettier --write ."
13
14
  },
14
15
  "repository": {
15
16
  "type": "git",
@@ -29,12 +30,13 @@
29
30
  "registry": "https://registry.npmjs.org"
30
31
  },
31
32
  "devDependencies": {
32
- "@types/node": "^24.9.1",
33
- "autoprefixer": "^10.4.21",
34
- "cssnano": "^7.1.1",
33
+ "@types/node": "^24.10.4",
34
+ "autoprefixer": "^10.4.23",
35
+ "cssnano": "^7.1.2",
35
36
  "postcss": "^8.5.6",
36
37
  "postcss-cli": "^11.0.1",
37
- "postcss-preset-env": "^10.4.0",
38
- "sass": "^1.93.2"
38
+ "postcss-preset-env": "^10.6.0",
39
+ "prettier": "^3.7.4",
40
+ "sass": "^1.97.1"
39
41
  }
40
42
  }