@schukai/monster 3.51.5 → 3.52.1

package/source/components/form/style/select.pcss

@@ -0,0 +1,265 @@
+
+@import "../../style/display.pcss";
+@import "../../style/border.pcss";
+@import "../../style/control.pcss";
+@import "../../style/badge.pcss";
+@import '../../style/mixin/typography.pcss';
+@import '../../style/mixin/hover.pcss';
+
+@import "../../style/control.pcss";
+@import "../../style/floating-ui.pcss";
+
+[data-monster-role=container] {
+    appearance: none;
+    min-height: 1.4em;
+    flex: 4 0 90%;
+}
+
+.d-none {
+    display: none !important;
+}
+
+div[data-monster-role="control"] {
+    height: 100%;
+    position: relative;
+    display: flex;
+}
+
+[data-monster-role=container].open {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/%3E%3C/svg%3E");
+}
+
+[data-monster-role=container].clear {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
+}
+
+[data-monster-role=control] {
+
+    font-family: inherit;
+    font-size: 100%;
+    padding: 0.4rem 0.6rem;
+    margin: 0;
+    outline: none;
+    box-sizing: border-box;
+    accent-color: var(--monster-color-secondary-2);
+
+    border-image: initial;
+    border-color: var(--monster-bg-color-primary-2);
+    border-radius: var(--monster-border-radius);
+    border-style: var(--monster-border-style);
+    border-width: thin;
+
+    background-color: var(--monster-bg-color-primary-2);
+    color: var(--monster-color-primary-2);
+
+
+    display: flex;
+
+}
+
+@media (prefers-color-scheme: light) {
+    [data-monster-role=control] {
+        background-color: var(--monster-bg-color-primary-2);
+        color: var(--monster-color-primary-2);
+        border-color: var(--monster-bg-color-primary-3);
+    }
+
+    [data-monster-role=control]:focus {
+        outline: 1px dashed var(--monster-color-selection-3);
+        outline-offset: 2px;
+    }
+}
+
+
+[data-monster-role=control]:hover {
+    @mixin box-hover ;
+}
+
+div[data-monster-role=selection] {
+    display: flex;
+    gap: 5px;
+    margin: 5px;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+[data-monster-role=option-control] {
+    margin-right: 8px;
+}
+
+[data-monster-role=badge] {
+    display: inline-flex;
+}
+
+[data-monster-role=badge-label] {
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    justify-content: space-between;
+    align-items: center;
+    gap: 7px;
+}
+
+[data-monster-role=remove-badge] {
+    background-size: 16px;
+    background-position: calc(100%) calc(100%);
+    background-repeat: no-repeat;
+    width: 16px;
+    min-height: 16px;
+    order: 2;
+    height: 16px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
+    margin-left: 5px;
+}
+
+@media (prefers-color-scheme: light) {
+    [data-monster-role=remove-badge] {
+        filter: invert(1);
+    }
+}
+
+
+[data-monster-role=filter], [data-monster-role=popper-filter] {
+    visibility: hidden;
+    order: 99999999;
+    display: flex;
+    flex-grow: 200;
+}
+
+[data-monster-role=filter].active {
+    visibility: visible;
+    min-width: 40%;
+    border: 0;
+    outline: none;
+
+    background-color: var(--monster-bg-color-primary-2);
+    border-color: var(--monster-bg-color-primary-3);
+    color: var(--monster-color-primary-2);
+
+    border-bottom: 1px solid var(--monster-bg-color-primary-3);
+    
+    &[name="popper-filter"] {
+        width: calc(100% - var(--monster-border-width) * 2);
+        height: 1.5em;
+        padding: 2px;
+        margin: 2.5em;
+    }
+    
+}
+
+.option-filter-control {
+    margin: calc(1.1em * -1) calc(1.1em * -1 ) 0.3em calc(1.1em * -1 );
+    height: 2.5em;
+    background-color: var(--monster-bg-color-primary-2);
+    display: flex;
+    align-items: center;
+}
+
+
+.status-or-remove-badges {
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
+    background-size: 16px;
+
+    background-repeat: no-repeat;
+    background-position: center;
+
+    width: 16px;
+    min-height: 16px;
+}
+
+[data-monster-role=status-or-remove-badges].open {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/%3E%3C/svg%3E");
+}
+
+[data-monster-role=status-or-remove-badges].empty {
+    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-dash-circle%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20d%3D%22M8%2015A7%207%200%201%201%208%201a7%207%200%200%201%200%2014zm0%201A8%208%200%201%200%208%200a8%208%200%200%200%200%2016z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M4%208a.5.5%200%200%201%20.5-.5h7a.5.5%200%200%201%200%201h-7A.5.5%200%200%201%204%208z%22%2F%3E%0A%3C%2Fsvg%3E");
+}
+
+[data-monster-role=status-or-remove-badges].clear {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
+}
+
+[data-monster-role=status-or-remove-badges].loading {
+    /**background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='activity' viewBox='0 0 16 16'%3E%3Cstyle type='text/css'%3E %23c %7B animation: x .5s ease alternate infinite; transform-origin: center; %7D @keyframes x %7B 0%25 %7B transform: scale(1); %7D 50%25 %7B transform: scale(0.1); %7D 80%25 %7B transform: scale(1); %7D %7D %3C/style%3E%3Ccircle id='c' cx='8' cy='8' r='8'/%3E%3C/svg%3E");*/
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='activity' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E");
+    animation-name: activity;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+@keyframes activity {
+    0% {
+        transform: scale(1)
+    }
+    50% {
+        transform: scale(0.1)
+    }
+    100% {
+        transform: scale(1)
+    }
+}
+
+[data-monster-role=options] {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
+[data-monster-role=option] {
+    padding: 6px 5px;
+    align-items: center;
+    display: flex;
+    box-sizing: border-box;
+}
+
+[data-monster-role=option] label {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+}
+
+
+[data-monster-role=option] label > div {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    outline: none;
+}
+
+[data-monster-role="no-options"] {
+    margin: 1.1em 0 0 1.1em; 
+    color: var(--monster-color-warning-2);
+    background-color: var(--monster-bg-color-warning-2);
+}
+
+.selected {
+    background-color: var(--monster-bg-color-primary-3);
+    color: var(--monster-color-primary-3);
+}
+
+[data-monster-role=option][data-monster-visibility=hidden] {
+    display: none;
+}
+
+[data-monster-role=option][data-monster-filtered=true] {
+    display: none;
+}
+
+[data-monster-role=option][data-monster-focused=true] {
+    outline: 1px dashed var(--monster-color-selection-2);
+    outline-offset: 2px;
+}
+
+[data-monster-role=option] > label:focus,
+[data-monster-role=option] > input:focus {
+    outline: none
+}

package/source/components/form/style/state-button.pcss

@@ -0,0 +1,116 @@
+@import "../../style/control.pcss";
+@import "../../style/border.pcss";
+@import "../../style/color.pcss";
+
+div[data-monster-role="control"] {
+    height: 100%;
+}
+
+
+[data-monster-role=button] {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    flex-direction: row;
+    transition: width 10s ease-in-out;
+}
+
+div[data-monster-role=label] {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: center;
+}
+
+[data-monster-role=state] {
+    align-self: stretch;
+    display: flex;
+    align-content: center;
+    align-items: center;
+    transition: width 12s ease-in-out;
+}
+
+[data-monster-role=state] > img,
+[data-monster-role=state] > svg {
+    margin-left: 0.3em;
+}
+
+[data-monster-role=state] > svg.successful {
+    color: var(--monster-color-successful);
+    animation: bouncy .5s linear forwards;
+}
+
+[data-monster-role=state] > svg.activity {
+    color: var(--monster-color-activity);
+    animation: bouncy .5s linear forwards;
+}
+
+[data-monster-role=state] > svg.failed {
+    color: var(--monster-color-failed);
+    animation: bouncy .5s linear forwards;
+}
+
+[data-monster-role=state] > svg.activity {
+    animation-name: activity;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+@-webkit-keyframes activity {
+    0% {
+        transform: scale(1)
+    }
+    50% {
+        transform: scale(0.1)
+    }
+    100% {
+        transform: scale(1)
+    }
+}
+
+@keyframes activity {
+    0% {
+        transform: scale(1)
+    }
+    50% {
+        transform: scale(0.1)
+    }
+    100% {
+        transform: scale(1)
+    }
+}
+
+@-webkit-keyframes bouncy {
+    0% {
+        transform: scale(.1);
+        opacity: 0
+    }
+    80% {
+        transform: scale(1.15);
+        opacity: 1
+    }
+    90% {
+        transform: scale(.9);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes bouncy {
+    0% {
+        transform: scale(.1);
+        opacity: 0
+    }
+    80% {
+        transform: scale(1.15);
+        opacity: 1
+    }
+    90% {
+        transform: scale(.9);
+    }
+    100% {
+        transform: scale(1);
+    }
+}

package/source/components/form/style/tabs.pcss

@@ -0,0 +1,173 @@
+@import "../../style/display.pcss";
+@import "../../style/border.pcss";
+@import "../../style/popper.pcss";
+@import "../../style/control.pcss";
+@import "../../style/badge.pcss";
+@import '../../style/mixin/typography.pcss';
+@import '../../style/mixin/hover.pcss';
+
+
+[data-monster-role=nav] button.hidden {
+    display: none;
+}
+
+nav[data-monster-role=nav] {
+    overflow: hidden;
+    display: flex;
+    align-items: flex-end;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    box-sizing: border-box;
+    margin-bottom: .75rem;
+
+    border-bottom-width: thin;
+    border-radius: var(--monster-border-radius);
+    border-bottom-style: var(--monster-border-style);
+    box-shadow: var(--monster-box-shadow-1);
+    border-color: var(--monster-bg-color-primary-2);    
+    
+    flex-wrap: nowrap
+}
+
+[data-monster-role=nav] button .remove-tab {
+    appearance: none;
+    background-size: 16px;
+    background-position: calc(100%) calc(100%);
+    background-repeat: no-repeat;
+    width: 16px;
+    min-height: 16px;
+    order: 2;
+    height: 16px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
+    flex-wrap: nowrap
+}
+
+[data-monster-role=nav] button span {
+    display: flex;
+    white-space: pre;
+}
+
+[data-monster-role=nav] button {
+    outline: none;
+    cursor: pointer;
+    font-weight: 400;
+    line-height: 1.5;
+    text-align: center;
+    text-decoration: none;
+    vertical-align: middle;
+    user-select: none;
+    border: none;
+    padding: .375rem 0;
+    margin-right: .75rem;
+    font-size: 1rem;
+    display: flex; 
+    justify-content: center;
+
+    color: var(--monster-color-gray-6);
+    background-color: var(--monster-color-gray-1);
+    @media (prefers-color-scheme: dark) {
+        color: var(--monster-color-gray-1);
+        background-color: var(--monster-color-gray-6);
+    }
+
+    border-radius: var(--monster-border-radius);
+    border-bottom-style: var(--monster-border-style);
+    box-shadow: var(--monster-box-shadow-1);
+    border-color: var(--monster-bg-color-primary-4);
+
+    transition: color 0.8s;
+
+    align-self: stretch;
+    align-content: center;
+    align-items: center;
+}
+
+[data-monster-role=nav] button:not([disabled]):hover {
+
+    border-radius: var(--monster-border-radius);
+    border-bottom-style: var(--monster-border-style);
+    box-shadow: var(--monster-box-shadow-1);
+    border-color: var(--monster-bg-color-secondary-3);
+    color: var(--monster-bg-color-secondary-3);
+
+}
+
+[data-monster-role=nav] button[data-monster-state=active]:not([disabled]):hover,
+[data-monster-role=nav] button[data-monster-state=active] {
+    border-radius: var(--monster-border-radius);
+    border-bottom-style: var(--monster-border-style);
+    box-shadow: var(--monster-box-shadow-1);
+    border-color: var(--monster-bg-color-secondary-3);
+    color: var(--monster-bg-color-secondary-3);
+}
+
+[data-monster-role=nav] button[disabled] {
+    color: var(--monster-color-primary-disabled-1);
+    background-color: var(--monster-bg-color-primary-disabled-1);
+    cursor: not-allowed;
+}
+
+[data-monster-role=nav] button[data-monster-role=switch] {
+    align-self: center;
+    touch-action: none;
+    order: 2;
+    border: 0;
+}
+
+[data-monster-role=nav] button[data-monster-role=switch]:not([disabled]):hover {
+    border-bottom-width: 0;
+}
+
+[data-monster-role=nav] button img {
+    width: 1.3rem;
+    height: 1.3rem;
+    margin-left: 0.40rem;
+}
+
+::slotted(:not([slot]):not(.active)) {
+    display: none;
+}
+
+::slotted(*) {
+    align-self: center;
+}
+
+::slotted([slot]) {
+
+    border-bottom-width: var(--monster-border-width);
+    border-radius: var(--monster-border-radius);
+    border-bottom-style: var(--monster-border-style);
+    box-shadow: var(--monster-box-shadow-1);
+    
+    border-color: var(--monster-bg-color-primary-4);
+
+}
+
+::slotted([slot=start]) {
+    margin-right: .75rem;
+    order: 0;
+}
+
+::slotted([slot=end]) {
+    margin-left: .75rem;
+    order: 3;
+}
+
+[data-monster-role=nav] [data-monster-role=popper-nav] button:not([disabled]) {
+    width: 100%;
+    justify-content: left;
+    padding-left: 15px;
+    padding-right: 15px;
+    border: 0;
+}
+
+[data-monster-role=nav] [data-monster-role=popper-nav] button:hover {
+    border: 0;
+}
+
+[data-monster-role=nav] [data-monster-role=popper-nav] button[data-monster-state=active]:not([disabled]):hover,
+[data-monster-role=nav] [data-monster-role=popper-nav] button[data-monster-state=active] {
+    border: 0;
+}
+
+

package/source/components/form/style/tree-select.pcss

@@ -0,0 +1,81 @@
+[data-monster-role="badge"] {
+    display: inline-flex;
+}
+
+[data-monster-role=option] {
+    display: flex;
+}
+
+[data-monster-role=option][data-monster-state=open][data-monster-has-children=true] [data-monster-role=folder-handler] {
+    content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.5 0c-.166 0-.33.016-.487.048l.194.98A1.51 1.51 0 0 1 2.5 1h.458V0H2.5zm2.292 0h-.917v1h.917V0zm1.833 0h-.917v1h.917V0zm1.833 0h-.916v1h.916V0zm1.834 0h-.917v1h.917V0zm1.833 0h-.917v1h.917V0zM13.5 0h-.458v1h.458c.1 0 .199.01.293.029l.194-.981A2.51 2.51 0 0 0 13.5 0zm2.079 1.11a2.511 2.511 0 0 0-.69-.689l-.556.831c.164.11.305.251.415.415l.83-.556zM1.11.421a2.511 2.511 0 0 0-.689.69l.831.556c.11-.164.251-.305.415-.415L1.11.422zM16 2.5c0-.166-.016-.33-.048-.487l-.98.194c.018.094.028.192.028.293v.458h1V2.5zM.048 2.013A2.51 2.51 0 0 0 0 2.5v.458h1V2.5c0-.1.01-.199.029-.293l-.981-.194zM0 3.875v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zM0 5.708v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zM0 7.542v.916h1v-.916H0zm15 .916h1v-.916h-1v.916zM0 9.375v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zm-16 .916v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zm-16 .917v.458c0 .166.016.33.048.487l.98-.194A1.51 1.51 0 0 1 1 13.5v-.458H0zm16 .458v-.458h-1v.458c0 .1-.01.199-.029.293l.981.194c.032-.158.048-.32.048-.487zM.421 14.89c.183.272.417.506.69.689l.556-.831a1.51 1.51 0 0 1-.415-.415l-.83.556zm14.469.689c.272-.183.506-.417.689-.69l-.831-.556c-.11.164-.251.305-.415.415l.556.83zm-12.877.373c.158.032.32.048.487.048h.458v-1H2.5c-.1 0-.199-.01-.293-.029l-.194.981zM13.5 16c.166 0 .33-.016.487-.048l-.194-.98A1.51 1.51 0 0 1 13.5 15h-.458v1h.458zm-9.625 0h.917v-1h-.917v1zm1.833 0h.917v-1h-.917v1zm1.834 0h.916v-1h-.916v1zm1.833 0h.917v-1h-.917v1zm1.833 0h.917v-1h-.917v1zM4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7z"/></svg>');
+    display: block;
+    width: 13px;
+    height: 13px;
+    margin-right: 8px;
+}
+
+[data-monster-role=option][data-monster-state=close][data-monster-has-children=true] [data-monster-role=folder-handler] {
+    content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.5 0c-.166 0-.33.016-.487.048l.194.98A1.51 1.51 0 0 1 2.5 1h.458V0H2.5zm2.292 0h-.917v1h.917V0zm1.833 0h-.917v1h.917V0zm1.833 0h-.916v1h.916V0zm1.834 0h-.917v1h.917V0zm1.833 0h-.917v1h.917V0zM13.5 0h-.458v1h.458c.1 0 .199.01.293.029l.194-.981A2.51 2.51 0 0 0 13.5 0zm2.079 1.11a2.511 2.511 0 0 0-.69-.689l-.556.831c.164.11.305.251.415.415l.83-.556zM1.11.421a2.511 2.511 0 0 0-.689.69l.831.556c.11-.164.251-.305.415-.415L1.11.422zM16 2.5c0-.166-.016-.33-.048-.487l-.98.194c.018.094.028.192.028.293v.458h1V2.5zM.048 2.013A2.51 2.51 0 0 0 0 2.5v.458h1V2.5c0-.1.01-.199.029-.293l-.981-.194zM0 3.875v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zM0 5.708v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zM0 7.542v.916h1v-.916H0zm15 .916h1v-.916h-1v.916zM0 9.375v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zm-16 .916v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zm-16 .917v.458c0 .166.016.33.048.487l.98-.194A1.51 1.51 0 0 1 1 13.5v-.458H0zm16 .458v-.458h-1v.458c0 .1-.01.199-.029.293l.981.194c.032-.158.048-.32.048-.487zM.421 14.89c.183.272.417.506.69.689l.556-.831a1.51 1.51 0 0 1-.415-.415l-.83.556zm14.469.689c.272-.183.506-.417.689-.69l-.831-.556c-.11.164-.251.305-.415.415l.556.83zm-12.877.373c.158.032.32.048.487.048h.458v-1H2.5c-.1 0-.199-.01-.293-.029l-.194.981zM13.5 16c.166 0 .33-.016.487-.048l-.194-.98A1.51 1.51 0 0 1 13.5 15h-.458v1h.458zm-9.625 0h.917v-1h-.917v1zm1.833 0h.917v-1h-.917v1zm1.834-1v1h.916v-1h-.916zm1.833 1h.917v-1h-.917v1zm1.833 0h.917v-1h-.917v1zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/></svg>');
+    display: block;
+    width: 13px;
+    height: 13px;
+    margin-right: 8px;
+}
+
+[data-monster-role=option][data-monster-visibility=hidden] {
+    display: none;
+}
+
+[data-monster-role=option][data-monster-visibility=visible] {
+    display: flex;
+}
+
+[data-monster-role=option][data-monster-has-children=false] [data-monster-role=folder-handler],
+[data-monster-role=option][data-monster-has-children=false] [data-monster-role=folder-handler] {
+    content: " ";
+    display: block;
+    width: 13px;
+    height: 13px;
+    margin-right: 8px;
+}
+
+[data-monster-role=option][data-monster-intend="0"] {
+    margin: 0px 0px 0px 0px;
+    display: flex;
+}
+
+[data-monster-role=option][data-monster-intend="1"] {
+    margin: 0px 0px 0px 20px;
+}
+
+[data-monster-role=option][data-monster-intend="2"] {
+    margin: 0px 0px 0px 40px;
+}
+
+[data-monster-role=option][data-monster-intend="3"] {
+    margin: 0px 0px 0px 60px;
+}
+
+[data-monster-role=option][data-monster-intend="4"] {
+    margin: 0px 0px 0px 80px;
+}
+
+[data-monster-role=option][data-monster-intend="5"] {
+    margin: 0px 0px 0px 100px;
+}
+
+[data-monster-role=option][data-monster-intend="6"] {
+    margin: 0px 0px 0px 110px; /* smaller intend */
+}
+
+[data-monster-role=option][data-monster-intend="7"] {
+    margin: 0px 0px 0px 120px; /* smaller intend */
+}
+
+[data-monster-role=option][data-monster-intend="8"] {
+    margin: 0px 0px 0px 130px; /* smaller intend */
+}
+
+[data-monster-role=option][data-monster-filtered=true] {
+    display: none;
+}