@fastwork/xosmoz-css 0.0.20 → 0.0.23

package/dist/component.css

@@ -1 +1 @@
-.trb-field{display:flex;flex-direction:column;gap:0.375em}.trb-field label{display:flex;gap:0.25em;align-items:baseline;font-weight:var(--form-element-label-font-weight);font-size:var(--form-element-label-font-size);font-family:var(--form-element-label-font-family)}.trb-field .description{color:var(--color-text-default-200);font-size:0.75rem}.trb-field .info{color:var(--color-text-default-200);font-size:0.75rem}.is-fluid.trb-field{width:100%}.trb-textarea textarea,.trb-input input{width:100%;height:100%;padding:0 0.75em;border:1px solid var(--color-neutral-300);border-radius:inherit;background-color:var(--color-white-100);outline:none;transition:border .16s ease-in-out;appearance:none}.trb-textarea textarea:hover,.trb-input input:hover{border-color:var(--color-neutral-500)}.trb-textarea textarea:focus,.trb-input input:focus,.trb-textarea textarea :active,.trb-input input :active{border-color:var(--color-primary-500);box-shadow:0 0 0 .175rem var(--color-primary-300)}.trb-button{position:relative;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;min-height:var(--button-medium-height);padding:0 1.125rem;border:none;border-radius:var(--button-border-radius);background:var(--color-primary-500);color:var(--color-text-invert-100);outline:none;font-weight:var(--button-font-weight);font-size:var(--button-medium-font-size);font-family:var(--button-font-family);line-height:100%;cursor:pointer;user-select:none;transition:all .16s ease-in-out}@media(hover: hover){.trb-button:hover::before{background:var(--color-shade-100)}.trb-button:focus{box-shadow:0 0 0 .175rem var(--color-primary-300)}}.trb-button>span{z-index:1}.trb-button .start-icon,.trb-button .end-icon{display:flex;align-items:center;min-width:1.375rem}.trb-button .end-icon{justify-content:flex-end}.trb-button::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;transition:all .16s ease-in-out}.trb-button.is-loading{color:rgba(0,0,0,0);pointer-events:none}.trb-button.is-loading::after{content:"";position:absolute;right:0;left:0;width:1em;height:1em;margin:auto;border:2px solid;border-top-color:var(--color-text-invert-100);border-right-color:var(--color-text-invert-100);border-radius:999px;animation:button-loading-spin .48s infinite linear}.trb-button.is-size-small{min-height:var(--button-small-height);padding:0 1rem;font-size:var(--button-small-font-size)}.trb-button.is-size-small .start-icon,.trb-button.is-size-small .end-icon{min-width:1.125rem}.trb-button.is-size-medium{min-height:var(--button-medium-height);padding:0 1.125rem;font-size:var(--button-medium-font-size)}.trb-button.is-size-medium .start-icon,.trb-button.is-size-medium .end-icon{min-width:1.375rem}.trb-button.is-size-large{min-height:var(--button-large-height);padding:0 1.25rem;font-size:var(--button-large-font-size)}.trb-button.is-size-large .start-icon,.trb-button.is-size-large .end-icon{min-width:1.625rem}.trb-button.is-variant-negative{background:var(--color-negative-200)}@media(hover: hover){.trb-button.is-variant-negative:focus{box-shadow:0 0 0 .175rem var(--color-negative-100)}}.trb-button.is-variant-negative.is-loading{color:rgba(0,0,0,0)}.trb-button.is-variant-negative.is-loading::after{border-top-color:var(--color-text-invert-100);border-right-color:var(--color-text-invert-100)}.trb-button.is-variant-positive{background:var(--color-positive-200)}@media(hover: hover){.trb-button.is-variant-positive:focus{box-shadow:0 0 0 .175rem var(--color-positive-100)}}.trb-button.is-variant-positive.is-loading{color:rgba(0,0,0,0)}.trb-button.is-variant-positive.is-loading::after{border-top-color:var(--color-text-invert-100);border-right-color:var(--color-text-invert-100)}.trb-button.is-variant-secondary{border:1px solid var(--color-neutral-200);background:rgba(0,0,0,0);color:var(--color-primary-500)}@media(hover: hover){.trb-button.is-variant-secondary:focus{box-shadow:0 0 0 .175rem var(--color-primary-300)}}@media(hover: hover){.trb-button.is-variant-secondary:hover{border:1px solid var(--color-neutral-300);color:var(--color-primary-500)}.trb-button.is-variant-secondary:hover::before{background:var(--color-shade-100)}}.trb-button.is-variant-secondary.is-loading{color:rgba(0,0,0,0)}.trb-button.is-variant-secondary.is-loading::after{border-top-color:var(--color-primary-500);border-right-color:var(--color-primary-500)}.trb-button.is-variant-outline{border:1px solid var(--color-neutral-200);background:rgba(0,0,0,0);color:var(--color-text-default-200)}@media(hover: hover){.trb-button.is-variant-outline:focus{box-shadow:0 0 0 .175rem var(--color-primary-300)}}@media(hover: hover){.trb-button.is-variant-outline:hover{border:1px solid var(--color-neutral-300);color:var(--color-text-default-100)}.trb-button.is-variant-outline:hover::before{background:var(--color-shade-100)}}.trb-button.is-variant-outline.is-loading{color:rgba(0,0,0,0)}.trb-button.is-variant-outline.is-loading::after{border-top-color:var(--color-text-default-200);border-right-color:var(--color-text-default-200)}.trb-button.is-variant-tertiary{border:unset;background:var(--color-neutral-100);color:var(--color-text-default-100)}@media(hover: hover){.trb-button.is-variant-tertiary:focus{box-shadow:0 0 0 .175rem var(--color-primary-300)}}.trb-button.is-variant-tertiary.is-loading{color:rgba(0,0,0,0)}.trb-button.is-variant-tertiary.is-loading::after{border-top-color:var(--color-text-default-200);border-right-color:var(--color-text-default-200)}.trb-button.is-variant-ghost{border:unset;background:rgba(0,0,0,0);color:var(--color-text-default-200)}@media(hover: hover){.trb-button.is-variant-ghost:focus{box-shadow:0 0 0 .175rem var(--color-primary-300)}}.trb-button.is-variant-ghost.is-loading{color:rgba(0,0,0,0)}.trb-button.is-variant-ghost.is-loading::after{border-top-color:var(--color-text-default-200);border-right-color:var(--color-text-default-200)}.trb-button.is-variant-white{border:1px solid var(--color-neutral-200);background:var(--color-white-100);color:var(--color-primary-500)}@media(hover: hover){.trb-button.is-variant-white:focus{box-shadow:0 0 0 .175rem var(--color-primary-300)}}.trb-button.is-variant-white.is-loading{color:rgba(0,0,0,0)}.trb-button.is-variant-white.is-loading::after{border-top-color:var(--color-primary-500);border-right-color:var(--color-primary-500)}.trb-button.is-variant-white-secondary{border:1px solid var(--color-white-100);background:rgba(0,0,0,0);color:var(--color-white-100)}@media(hover: hover){.trb-button.is-variant-white-secondary:focus{box-shadow:0 0 0 .175rem var(--color-primary-300)}}@media(hover: hover){.trb-button.is-variant-white-secondary:hover{border:1px solid var(--color-neutral-300);color:var(--color-white-100)}.trb-button.is-variant-white-secondary:hover::before{background:var(--color-shade-100)}}.trb-button.is-variant-white-secondary.is-loading{color:rgba(0,0,0,0)}.trb-button.is-variant-white-secondary.is-loading::after{border-top-color:var(--color-white-100);border-right-color:var(--color-white-100)}.trb-button[disabled],.trb-button.is-disabled{opacity:.6;cursor:not-allowed}.trb-button.is-fluid{width:100%}.trb-button.is-pill{border-radius:999px}.trb-button.is-square{aspect-ratio:1/1}@keyframes button-loading-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}.trb-select-button{display:inline-flex;border:1px solid var(--color-neutral-200);border-radius:var(--button-border-radius);overflow:hidden}.trb-select-button-item{padding:0.5rem 1rem;border:none;border-right:1px solid var(--color-neutral-200);background:var(--color-white-100);color:var(--color-text-default-200);font-weight:500;font-size:var(--font-size-300);cursor:pointer;transition:all .16s ease-in-out}.trb-select-button-item:last-child{border-right:none}.trb-select-button-item:hover{background:var(--color-neutral-50)}.trb-select-button-item.is-active{background:var(--color-primary-500);color:var(--color-white-100)}.trb-badge{display:inline-flex;justify-content:center;align-items:center;padding:0.25rem 0.625rem;border-radius:0.375rem;background:var(--color-primary-200);color:var(--color-primary-700);font-weight:600;font-size:var(--font-size-300);font-family:var(--font-family-primary)}.trb-badge.is-variant-primary-solid{background:var(--color-primary-500);color:var(--color-white-100)}.trb-badge.is-variant-positive{background:var(--color-positive-100);color:var(--color-positive-400)}.trb-badge.is-variant-positive-solid{background:var(--color-positive-200);color:var(--color-white-100)}.trb-badge.is-variant-negative{background:var(--color-negative-100);color:var(--color-negative-400)}.trb-badge.is-variant-negative-solid{background:var(--color-negative-200);color:var(--color-white-100)}.trb-badge.is-variant-warning{background:var(--color-warning-100);color:var(--color-warning-400)}.trb-badge.is-variant-warning-solid{background:var(--color-warning-200);color:var(--color-white-100)}.trb-badge.is-variant-info{background:var(--color-info-100);color:var(--color-info-400)}.trb-badge.is-variant-info-solid{background:var(--color-info-200);color:var(--color-white-100)}.trb-badge.is-variant-neutral{background:var(--color-neutral-200);color:var(--color-neutral-600)}.trb-badge.is-variant-neutral-solid{background:var(--color-neutral-400);color:var(--color-white-100)}.trb-message{display:flex;gap:0.75rem;padding:1rem;border-radius:0.5rem;background:var(--color-neutral-100);color:var(--color-text-default-100)}.trb-message-icon{flex-shrink:0}.trb-message-content{flex:1}.trb-message-title{font-weight:600;margin-bottom:0.25rem}.trb-message-text{font-size:var(--font-size-300);color:var(--color-text-default-200)}.trb-message.is-variant-info{background:var(--color-info-100)}.trb-message.is-variant-positive{background:var(--color-positive-100)}.trb-message.is-variant-warning{background:var(--color-warning-100)}.trb-message.is-variant-negative{background:var(--color-negative-100)}.trb-table{width:100%;border-collapse:collapse;font-size:var(--font-size-300)}.trb-table th,.trb-table td{padding:0.75rem 1rem;text-align:left;border-bottom:1px solid var(--color-neutral-200)}.trb-table th{font-weight:600;color:var(--color-text-default-100);background:var(--color-neutral-50)}.trb-table td{color:var(--color-text-default-200)}.trb-table tbody tr:hover{background:var(--color-neutral-50)}.trb-table.is-striped tbody tr:nth-child(even){background:var(--color-neutral-50)}.trb-table.is-bordered{border:1px solid var(--color-neutral-200)}.trb-table.is-bordered th,.trb-table.is-bordered td{border:1px solid var(--color-neutral-200)}.trb-tag{display:inline-flex;justify-content:center;align-items:center;gap:0.25rem;padding:0.25rem 0.5rem;border-radius:0.25rem;background:var(--color-neutral-100);color:var(--color-text-default-100);font-weight:500;font-size:var(--font-size-200);font-family:var(--font-family-primary)}.trb-tag .tag-close{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;border-radius:0.125rem;cursor:pointer;transition:background .16s ease-in-out}.trb-tag .tag-close:hover{background:var(--color-neutral-200)}.trb-input{position:relative;display:inline-flex;flex-direction:column;gap:0.375em;height:var(--form-element-medium-height);padding-top:0;border-radius:var(--form-element-border-radius)}.trb-input .prefix,.trb-input .suffix,.trb-input .password-suffix{position:absolute;top:50%;color:var(--color-text-default-200);font-size:var(--form-element-medium-font-size);transform:translate3d(0, -50%, 0)}.trb-input .prefix{left:1em;pointer-events:none}.trb-input .suffix{right:1em;pointer-events:none}.trb-input .password-suffix{right:0;display:flex;justify-content:center;align-items:center;width:40px;height:100%;padding-right:12px;padding-left:12px;cursor:pointer}.trb-input input{font-weight:400;font-size:var(--form-element-medium-font-size);font-family:var(--font-family-primary)}.trb-input input[readonly]{background:var(--color-neutral-100)}.trb-input input[disabled]{background:var(--color-neutral-100);cursor:not-allowed}.trb-textarea{position:relative;display:inline-flex;flex-direction:column;gap:0.375em;border-radius:var(--form-element-border-radius)}.trb-textarea textarea{min-height:7.5rem;padding:0.75em;font-weight:400;font-size:var(--form-element-medium-font-size);font-family:var(--font-family-primary);line-height:1.5;resize:vertical}.trb-textarea textarea[readonly]{background:var(--color-neutral-100)}.trb-textarea textarea[disabled]{background:var(--color-neutral-100);cursor:not-allowed}.trb-select{position:relative;display:inline-flex;flex-direction:column;gap:0.375em;height:var(--form-element-medium-height);border-radius:var(--form-element-border-radius)}.trb-select select{width:100%;height:100%;padding:0 2.25rem 0 0.75em;border:1px solid var(--color-neutral-300);border-radius:inherit;background-color:var(--color-white-100);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.75rem center;outline:none;font-weight:400;font-size:var(--form-element-medium-font-size);font-family:var(--font-family-primary);cursor:pointer;transition:border .16s ease-in-out;appearance:none}.trb-select select:hover{border-color:var(--color-neutral-500)}.trb-select select:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 .175rem var(--color-primary-300)}.trb-select select[disabled]{background:var(--color-neutral-100);cursor:not-allowed}.trb-checkbox{display:inline-flex;gap:0.5rem;align-items:center}.trb-checkbox input[type=checkbox]{flex-shrink:0;width:1.25rem;height:1.25rem;margin:0;border:2px solid var(--color-neutral-300);border-radius:0.25rem;background-color:var(--color-white-100);cursor:pointer;transition:all .16s ease-in-out;appearance:none}.trb-checkbox input[type=checkbox]:hover{border-color:var(--color-neutral-500)}.trb-checkbox input[type=checkbox]:checked{border-color:var(--color-primary-500);background-color:var(--color-primary-500);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}.trb-checkbox input[type=checkbox]:focus{box-shadow:0 0 0 .175rem var(--color-primary-300)}.trb-checkbox input[type=checkbox][disabled]{opacity:.6;cursor:not-allowed}.trb-checkbox label{font-weight:600;font-size:0.9375rem;cursor:pointer;user-select:none}.trb-radio{display:inline-flex;gap:0.5rem;align-items:center}.trb-radio input[type=radio]{flex-shrink:0;width:1.25rem;height:1.25rem;margin:0;border:2px solid var(--color-neutral-300);border-radius:50%;background-color:var(--color-white-100);cursor:pointer;transition:all .16s ease-in-out;appearance:none}.trb-radio input[type=radio]:hover{border-color:var(--color-neutral-500)}.trb-radio input[type=radio]:checked{border-color:var(--color-primary-500);background-color:var(--color-white-100);box-shadow:inset 0 0 0 4px var(--color-primary-500)}.trb-radio input[type=radio]:focus{box-shadow:0 0 0 .175rem var(--color-primary-300)}.trb-radio input[type=radio][disabled]{opacity:.6;cursor:not-allowed}.trb-radio label{font-weight:600;font-size:0.9375rem;cursor:pointer;user-select:none}.trb-radio-button{display:inline-flex;border:1px solid var(--color-neutral-200);border-radius:var(--button-border-radius);overflow:hidden}.trb-radio-button label{padding:0.5rem 1rem;border-right:1px solid var(--color-neutral-200);background:var(--color-white-100);color:var(--color-text-default-200);font-weight:500;font-size:var(--font-size-300);cursor:pointer;transition:all .16s ease-in-out}.trb-radio-button label:last-of-type{border-right:none}.trb-radio-button label:hover{background:var(--color-neutral-50)}.trb-radio-button input[type=radio]{display:none}.trb-radio-button input[type=radio]:checked+label{background:var(--color-primary-500);color:var(--color-white-100)}@keyframes checkbox-animate{0%{transform:scale(0.85)}100%{transform:scale(1)}}@keyframes checkbox-int-animate{0%{transform:scale(0.85)}100%{transform:scale(1)}}.trb-switch{display:inline-flex;gap:0.5rem;align-items:center}.trb-switch input[type=checkbox]{--handleoffset: 1.5rem;--handleoffsetcalculator: calc(var(--handleoffset) * -1);--handle-color: var(--color-white-100);--handle-opacity: 1;--base-color: var(--color-neutral-200);--base-opacity: 1;flex-shrink:0;width:3rem;height:1.5rem;border-radius:999px;background-color:var(--handle-color)/var(--handle-opacity);box-shadow:var(--handleoffsetcalculator) 0 0 2px var(--base-color) inset,0 0 0 2px var(--base-color) inset,0 0;cursor:pointer;transition:all .16s ease-in-out;transition-timing-function:ease-in-out;transition-duration:.28s;appearance:none}.trb-switch input[type=checkbox]:checked{--handleoffsetcalculator: calc(var(--handleoffset));--handle-opacity: 1;--base-opacity: 1;--handle-color: var(--color-white-100);--base-color: var(--color-primary-500);--border-color: var(--color-primary-500)}.trb-switch input[type=checkbox][disabled]{opacity:.7;cursor:not-allowed}.trb-switch input[type=checkbox]:not(:checked)[disabled]{background-color:var(--color-neutral-100)}.trb-switch label{font-weight:600;font-size:0.9375rem;cursor:pointer;user-select:none}.trb-accordion{border:1px solid var(--color-neutral-200);border-radius:0.5rem;overflow:hidden}.trb-accordion-item{border-bottom:1px solid var(--color-neutral-200)}.trb-accordion-item:last-child{border-bottom:none}.trb-accordion-item.is-open .accordion-icon{transform:rotate(180deg)}.trb-accordion-item.is-open .trb-accordion-content{display:block}.trb-accordion-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:1rem;border:none;background:var(--color-white-100);color:var(--color-text-default-100);font-weight:600;font-size:var(--font-size-400);text-align:left;cursor:pointer;transition:background .16s ease-in-out}.trb-accordion-header:hover{background:var(--color-neutral-50)}.trb-accordion-header .accordion-icon{transition:transform .16s ease-in-out}.trb-accordion-content{display:none;padding:1rem;background:var(--color-white-100)}.trb-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;padding:0;margin:0;list-style:none}.trb-breadcrumb-item{display:flex;align-items:center;gap:0.5rem;color:var(--color-text-default-200);font-size:var(--font-size-300)}.trb-breadcrumb-item a{color:var(--color-text-default-200);text-decoration:none;transition:color .16s ease-in-out}.trb-breadcrumb-item a:hover{color:var(--color-primary-500)}.trb-breadcrumb-item.is-active{color:var(--color-text-default-100);font-weight:500}.trb-breadcrumb-separator{color:var(--color-neutral-300)}.trb-tabs .tabs-menus{position:relative;z-index:1;display:flex;overflow:auto;transform:translate3d(0, var(--tabs-border-width), 0)}.trb-tabs .tabs-button{position:relative;display:flex;justify-content:center;align-items:center;height:var(--tabs-height);padding:var(--tabs-padding);border:none;border-top:var(--tabs-border-width) solid var(--ui-border-color-1);border-right:var(--tabs-border-width) solid var(--ui-border-color-1);border-left:var(--tabs-border-width) solid var(--ui-border-color-1);border-top-left-radius:var(--tabs-border-radius);border-top-right-radius:var(--tabs-border-radius);background:var(--color-neutral-100);color:var(--color-neutral-700);outline:none;font-weight:var(--tabs-font-weight);font-size:var(--tabs-font-size);font-family:var(--tabs-font-family);white-space:nowrap;cursor:pointer;transition:all .12s ease-in-out}.trb-tabs .tabs-button:focus{z-index:1;border-top:var(--tabs-border-width) solid var(--color-primary-500);border-right:var(--tabs-border-width) solid var(--color-primary-500);border-left:var(--tabs-border-width) solid var(--color-primary-500);box-shadow:0 0 0 .175rem var(--color-primary-300)}.trb-tabs .tabs-button.is-active{z-index:1;background:var(--ui-background-1);color:var(--color-primary-500)}.trb-tabs .tabs-button.is-active::after{display:none}.trb-tabs .tabs-button::after{content:" ";position:absolute;bottom:0;left:0;width:100%;height:0.0625rem;background:var(--ui-border-color-1)}.trb-tabs .tabs-button .tabs-button-icon{display:flex;min-width:1.5rem}.trb-tabs .tabs-contents{border:var(--tabs-border-width) solid var(--ui-border-color-1);border-top-right-radius:var(--tabs-content-border-radius);border-bottom-right-radius:var(--tabs-content-border-radius);border-bottom-left-radius:var(--tabs-content-border-radius);box-shadow:var(--tabs-box-shadow)}.trb-tabs .tabs-contents.is-hide-tab{border-top-left-radius:var(--tabs-content-border-radius)}.trb-tabs .tabs-content{position:relative;z-index:2;border-radius:inherit;background:var(--ui-background-1)}.trb-tab-menu{display:flex;gap:0.25rem;padding:0.25rem;background:var(--color-neutral-100);border-radius:0.5rem}.trb-tab-menu-item{flex:1;display:flex;justify-content:center;align-items:center;padding:0.5rem 1rem;border:none;background:rgba(0,0,0,0);color:var(--color-text-default-200);font-weight:500;font-size:var(--font-size-300);border-radius:0.375rem;cursor:pointer;transition:all .16s ease-in-out}.trb-tab-menu-item:hover{color:var(--color-text-default-100)}.trb-tab-menu-item.is-active{background:var(--color-white-100);color:var(--color-primary-500);box-shadow:var(--bsd-100)}.trb-link{color:var(--color-primary-500);font-weight:500;text-decoration:none;cursor:pointer;transition:color .16s ease-in-out}.trb-link:hover{color:var(--color-primary-600);text-decoration:underline}.trb-link.is-variant-secondary{color:var(--color-text-default-200)}.trb-link.is-variant-secondary:hover{color:var(--color-text-default-100)}.trb-menus{display:flex;flex-direction:column;gap:0.25rem;padding:0.5rem 0}.trb-menu-item{display:flex;align-items:center;gap:0.75rem;padding:0.625rem 1rem;color:var(--color-text-default-100);font-size:var(--font-size-400);text-decoration:none;border-radius:0.5rem;cursor:pointer;transition:background .12s ease-in-out}.trb-menu-item:hover{background:var(--color-neutral-100)}.trb-menu-item.is-active{background:var(--color-primary-100);color:var(--color-primary-600);font-weight:500}.trb-menu-item-icon{flex-shrink:0}.trb-context-menu{position:absolute;z-index:1000;min-width:11.25rem;padding:0.5rem 0;background:var(--color-white-100);border:1px solid var(--color-neutral-200);border-radius:0.5rem;box-shadow:var(--bsd-200)}.trb-context-menu-item{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;color:var(--color-text-default-100);font-size:var(--font-size-300);cursor:pointer;transition:background .12s ease-in-out}.trb-context-menu-item:hover{background:var(--color-neutral-100)}.trb-context-menu-item.is-destructive{color:var(--color-negative-400)}.trb-context-menu-separator{height:1px;margin:0.5rem 0;background:var(--color-neutral-200)}input[type=checkbox].trb-modal-state{display:none}input[type=checkbox].trb-modal-state:checked+.trb-modal{opacity:1;visibility:visible;pointer-events:all}input[type=checkbox].trb-modal-state:checked+.trb-modal .trb-modal-panel{transform:translate3d(0, 0, 0)}.trb-modal{position:fixed;inset:0;z-index:var(--modal-z-index, 9999);display:flex;flex-direction:column;justify-content:center;align-items:center;overflow-y:hidden;background:var(--modal-background, hsla(0, 0%, 0%, 0.25));opacity:0;visibility:hidden;pointer-events:none;transition:all .16s ease;overscroll-behavior:contain}.trb-modal::before,.trb-modal::after{content:"";display:block;flex-grow:1;height:1.5rem;min-height:2rem}.trb-modal .trb-modal-panel{--bgcl-opacity: 1;position:relative;width:100%;max-width:var(--modal-panel-width, 32rem);padding:var(--modal-panel-padding, 1.5rem);border-radius:var(--modal-panel-border-radius, 0.75em);background:var(--modal-panel-background, hsl(0deg, 100%, 100%, var(--bgcl-opacity, 1)));box-shadow:var(--bsd-200);transition:all .16s ease-in-out;transform:translate3d(0, -12px, 0)}.trb-modal .trb-modal-close{position:absolute;top:.5rem;right:.5rem;display:flex;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;border-radius:0.5rem;background:var(--color-neutral-100);color:var(--color-neutral-500);font-weight:600;cursor:pointer}.trb-modal .trb-modal-close:hover{background:var(--color-neutral-200)}.trb-modal.is-active{opacity:1;visibility:visible;pointer-events:all}.trb-modal.is-active .trb-modal-panel{transform:translate3d(0, 0, 0)}.trb-article{max-width:80ch;font-size:var(--font-size-400);line-height:1.65;color:var(--color-text-default-100)}.trb-article h1,.trb-article h2,.trb-article h3,.trb-article h4,.trb-article h5,.trb-article h6{margin-top:2em;margin-bottom:.5em;font-weight:600;line-height:1.25}.trb-article h1{font-size:var(--font-size-900)}.trb-article h2{font-size:var(--font-size-800)}.trb-article h3{font-size:var(--font-size-700)}.trb-article p{margin-bottom:1.5em}.trb-article a{color:var(--color-primary-500)}.trb-article a:hover{text-decoration:underline}.trb-article ul,.trb-article ol{margin-bottom:1.5em;padding-left:1.5em}.trb-article li{margin-bottom:.5em}.trb-article ul li{list-style-type:disc}.trb-article ol li{list-style-type:decimal}.trb-article blockquote{margin:1.5em 0;padding-left:1em;border-left:4px solid var(--color-neutral-200);color:var(--color-text-default-200);font-style:italic}.trb-article code{padding:.2em .4em;background:var(--color-neutral-100);border-radius:0.25rem;font-size:.9em;font-family:monospace}.trb-article pre{margin:1.5em 0;padding:1em;background:var(--color-neutral-100);border-radius:0.5rem;overflow-x:auto}.trb-article pre code{padding:0;background:none}.trb-article img{max-width:100%;height:auto;border-radius:0.5rem}.trb-article hr{margin:2em 0}.trb-panel{background:var(--color-white-100);border:1px solid var(--color-neutral-200);border-radius:0.75rem;overflow:hidden}.trb-panel-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid var(--color-neutral-200)}.trb-panel-title{font-weight:600;font-size:var(--font-size-500)}.trb-panel-body{padding:1.25rem}.trb-panel-footer{display:flex;justify-content:flex-end;gap:0.75rem;padding:1rem 1.25rem;border-top:1px solid var(--color-neutral-200);background:var(--color-neutral-50)}.trb-loader{display:inline-flex;justify-content:center;align-items:center}.trb-loader-spinner{width:1.5rem;height:1.5rem;border:2px solid var(--color-neutral-200);border-top-color:var(--color-primary-500);border-radius:50%;animation:loader-spin .8s linear infinite}.trb-loader.is-size-small .trb-loader-spinner{width:1rem;height:1rem}.trb-loader.is-size-large .trb-loader-spinner{width:2rem;height:2rem;border-width:3px}@keyframes loader-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.trb-product-card{display:flex;flex-direction:column;background:var(--color-white-100);border:1px solid var(--color-neutral-200);border-radius:0.75rem;overflow:hidden;transition:box-shadow .16s ease-in-out}.trb-product-card:hover{box-shadow:var(--bsd-200)}.trb-product-card-image{position:relative;aspect-ratio:4/3;overflow:hidden}.trb-product-card-image img{width:100%;height:100%;object-fit:cover}.trb-product-card-body{display:flex;flex-direction:column;gap:0.5rem;padding:1rem}.trb-product-card-title{font-weight:600;font-size:var(--font-size-400);color:var(--color-text-default-100)}.trb-product-card-description{font-size:var(--font-size-300);color:var(--color-text-default-200);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.trb-product-card-price{font-weight:600;font-size:var(--font-size-500);color:var(--color-primary-500)}.trb-notification-card{display:flex;gap:0.75rem;padding:1rem;background:var(--color-white-100);border:1px solid var(--color-neutral-200);border-radius:0.5rem;transition:background .16s ease-in-out}.trb-notification-card:hover{background:var(--color-neutral-50)}.trb-notification-card.is-unread{background:var(--color-primary-50);border-color:var(--color-primary-200)}.trb-notification-card-avatar{flex-shrink:0;width:2.5rem;height:2.5rem;border-radius:50%;overflow:hidden}.trb-notification-card-avatar img{width:100%;height:100%;object-fit:cover}.trb-notification-card-content{flex:1;min-width:0}.trb-notification-card-title{font-weight:500;font-size:var(--font-size-300);color:var(--color-text-default-100)}.trb-notification-card-text{font-size:var(--font-size-200);color:var(--color-text-default-200);margin-top:0.25rem}.trb-notification-card-time{font-size:var(--font-size-100);color:var(--color-neutral-400);margin-top:0.25rem}.trb-skeleton{background:linear-gradient(90deg, var(--color-neutral-100) 25%, var(--color-neutral-200) 50%, var(--color-neutral-100) 75%);background-size:200% 100%;border-radius:0.25rem;animation:skeleton-shimmer 1.5s infinite}.trb-skeleton-text{height:1rem;margin-bottom:0.5rem}.trb-skeleton-text:last-child{width:60%;margin-bottom:0}.trb-skeleton-circle{border-radius:50%}.trb-skeleton-rect{border-radius:0.5rem}@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.trb-skeleton-product-card{display:flex;flex-direction:column;background:var(--color-white-100);border:1px solid var(--color-neutral-200);border-radius:0.75rem;overflow:hidden}.trb-skeleton-product-card-image{aspect-ratio:4/3;background:linear-gradient(90deg, var(--color-neutral-100) 25%, var(--color-neutral-200) 50%, var(--color-neutral-100) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite}.trb-skeleton-product-card-body{display:flex;flex-direction:column;gap:0.5rem;padding:1rem}.trb-skeleton-product-card-title{height:1.25rem;width:80%;background:linear-gradient(90deg, var(--color-neutral-100) 25%, var(--color-neutral-200) 50%, var(--color-neutral-100) 75%);background-size:200% 100%;border-radius:0.25rem;animation:skeleton-shimmer 1.5s infinite}.trb-skeleton-product-card-text{height:1rem;width:60%;background:linear-gradient(90deg, var(--color-neutral-100) 25%, var(--color-neutral-200) 50%, var(--color-neutral-100) 75%);background-size:200% 100%;border-radius:0.25rem;animation:skeleton-shimmer 1.5s infinite}.trb-toast{display:flex;gap:0.75rem;padding:1rem;border-radius:0.5rem;background:var(--color-white-100);box-shadow:var(--bsd-300);max-width:25rem}.trb-toast-icon{flex-shrink:0}.trb-toast-content{flex:1}.trb-toast-title{font-weight:600;margin-bottom:0.25rem}.trb-toast-text{font-size:var(--font-size-300);color:var(--color-text-default-200)}.trb-toast-close{flex-shrink:0;display:flex;align-items:flex-start;cursor:pointer;color:var(--color-neutral-400);transition:color .16s ease-in-out}.trb-toast-close:hover{color:var(--color-neutral-600)}.trb-bottom-sheet{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;justify-content:flex-end;background:var(--modal-background, hsla(0, 0%, 0%, 0.25));opacity:0;visibility:hidden;pointer-events:none;transition:all .24s ease}.trb-bottom-sheet.is-active{opacity:1;visibility:visible;pointer-events:all}.trb-bottom-sheet.is-active .trb-bottom-sheet-panel{transform:translateY(0)}.trb-bottom-sheet-panel{background:var(--color-white-100);border-top-left-radius:1rem;border-top-right-radius:1rem;padding:1.5rem;max-height:90vh;overflow-y:auto;transform:translateY(100%);transition:transform .24s ease}.trb-bottom-sheet-handle{width:2.5rem;height:0.25rem;margin:0 auto 1rem;background:var(--color-neutral-300);border-radius:0.125rem}.trb-hero{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:5rem 1.5rem;background:var(--color-neutral-50)}.trb-hero-title{font-size:var(--font-size-1000);font-weight:700;color:var(--color-text-default-100);margin-bottom:1rem}.trb-hero-subtitle{font-size:var(--font-size-500);color:var(--color-text-default-200);max-width:60ch;margin-bottom:2rem}.trb-hero-actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.trb-three-steps-guide{display:grid;grid-template-columns:repeat(3, 1fr);gap:2rem}.trb-three-steps-guide-item{display:flex;flex-direction:column;align-items:center;text-align:center}.trb-three-steps-guide-number{display:flex;justify-content:center;align-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--color-primary-500);color:var(--color-white-100);font-weight:700;font-size:var(--font-size-500);margin-bottom:1rem}.trb-three-steps-guide-title{font-weight:600;font-size:var(--font-size-500);color:var(--color-text-default-100);margin-bottom:0.5rem}.trb-three-steps-guide-description{font-size:var(--font-size-300);color:var(--color-text-default-200)}
+:root{--xz-button-font-family: var( --xz-font-family-primary, system-ui, sans-serif );--xz-button-font-weight: 600;--xz-button-border-radius: 0.5rem;--xz-button-small-height: 2rem;--xz-button-small-font-size: 0.8125rem;--xz-button-medium-height: 2.5rem;--xz-button-medium-font-size: 0.875rem;--xz-button-large-height: 3rem;--xz-button-large-font-size: 1rem}.xz-button{position:relative;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;min-height:var(--xz-button-medium-height);padding:0 1.125rem;border:none;border-radius:var(--xz-button-border-radius);background:var(--xz-color-primary-bg-100);color:var(--xz-color-primary-fg);outline:none;font-weight:var(--xz-button-font-weight);font-size:var(--xz-button-medium-font-size);font-family:var(--xz-button-font-family);line-height:100%;cursor:pointer;user-select:none;transition:all .16s ease-in-out}@media(hover: hover){.xz-button:hover::before{background:var(--xz-color-black-alpha-100)}.xz-button:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}.xz-button>span{z-index:1}.xz-button .start-icon,.xz-button .end-icon{display:flex;align-items:center;min-width:1.375rem}.xz-button .end-icon{justify-content:flex-end}.xz-button::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;transition:all .16s ease-in-out}.xz-button.is-loading{color:rgba(0,0,0,0);pointer-events:none}.xz-button.is-loading::after{content:"";position:absolute;right:0;left:0;width:1em;height:1em;margin:auto;border:2px solid;border-top-color:var(--xz-color-primary-fg);border-right-color:var(--xz-color-primary-fg);border-radius:999px;animation:button-loading-spin .48s infinite linear}.xz-button.is-size-small{min-height:var(--xz-button-small-height);padding:0 1rem;font-size:var(--xz-button-small-font-size)}.xz-button.is-size-small .start-icon,.xz-button.is-size-small .end-icon{min-width:1.125rem}.xz-button.is-size-medium{min-height:var(--xz-button-medium-height);padding:0 1.125rem;font-size:var(--xz-button-medium-font-size)}.xz-button.is-size-medium .start-icon,.xz-button.is-size-medium .end-icon{min-width:1.375rem}.xz-button.is-size-large{min-height:var(--xz-button-large-height);padding:0 1.25rem;font-size:var(--xz-button-large-font-size)}.xz-button.is-size-large .start-icon,.xz-button.is-size-large .end-icon{min-width:1.625rem}.xz-button.is-variant-danger{background:var(--xz-color-danger-bg-100)}@media(hover: hover){.xz-button.is-variant-danger:focus{box-shadow:0 0 0 .175rem var(--xz-color-danger-line-200)}}.xz-button.is-variant-danger.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-danger.is-loading::after{border-top-color:var(--xz-color-danger-fg);border-right-color:var(--xz-color-danger-fg)}.xz-button.is-variant-success{background:var(--xz-color-success-bg-100)}@media(hover: hover){.xz-button.is-variant-success:focus{box-shadow:0 0 0 .175rem var(--xz-color-success-line-200)}}.xz-button.is-variant-success.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-success.is-loading::after{border-top-color:var(--xz-color-success-fg);border-right-color:var(--xz-color-success-fg)}.xz-button.is-variant-secondary{border:1px solid var(--xz-color-line-100);background:rgba(0,0,0,0);color:var(--xz-color-primary-content-100)}@media(hover: hover){.xz-button.is-variant-secondary:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}@media(hover: hover){.xz-button.is-variant-secondary:hover{border:1px solid var(--xz-color-line-200);color:var(--xz-color-primary-content-100)}.xz-button.is-variant-secondary:hover::before{background:var(--xz-color-black-alpha-100)}}.xz-button.is-variant-secondary.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-secondary.is-loading::after{border-top-color:var(--xz-color-primary-content-100);border-right-color:var(--xz-color-primary-content-100)}.xz-button.is-variant-outline{border:1px solid var(--xz-color-line-100);background:rgba(0,0,0,0);color:var(--xz-color-content-200)}@media(hover: hover){.xz-button.is-variant-outline:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}@media(hover: hover){.xz-button.is-variant-outline:hover{border:1px solid var(--xz-color-line-200);color:var(--xz-color-content-100)}.xz-button.is-variant-outline:hover::before{background:var(--xz-color-black-alpha-100)}}.xz-button.is-variant-outline.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-outline.is-loading::after{border-top-color:var(--xz-color-content-200);border-right-color:var(--xz-color-content-200)}.xz-button.is-variant-tertiary{border:unset;background:var(--xz-color-neutral-soft-100);color:var(--xz-color-content-100)}@media(hover: hover){.xz-button.is-variant-tertiary:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}.xz-button.is-variant-tertiary.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-tertiary.is-loading::after{border-top-color:var(--xz-color-content-200);border-right-color:var(--xz-color-content-200)}.xz-button.is-variant-ghost{border:unset;background:rgba(0,0,0,0);color:var(--xz-color-content-200)}@media(hover: hover){.xz-button.is-variant-ghost:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}.xz-button.is-variant-ghost.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-ghost.is-loading::after{border-top-color:var(--xz-color-content-200);border-right-color:var(--xz-color-content-200)}.xz-button.is-variant-white{border:1px solid var(--xz-color-line-100);background:var(--xz-color-bg-100);color:var(--xz-color-primary-content-100)}@media(hover: hover){.xz-button.is-variant-white:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}.xz-button.is-variant-white.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-white.is-loading::after{border-top-color:var(--xz-color-primary-content-100);border-right-color:var(--xz-color-primary-content-100)}.xz-button.is-variant-white-secondary{border:1px solid var(--xz-color-white-alpha-1000);background:rgba(0,0,0,0);color:var(--xz-color-white-alpha-1000)}@media(hover: hover){.xz-button.is-variant-white-secondary:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}@media(hover: hover){.xz-button.is-variant-white-secondary:hover{border:1px solid var(--xz-color-line-200);color:var(--xz-color-white-alpha-1000)}.xz-button.is-variant-white-secondary:hover::before{background:var(--xz-color-black-alpha-100)}}.xz-button.is-variant-white-secondary.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-white-secondary.is-loading::after{border-top-color:var(--xz-color-white-alpha-1000);border-right-color:var(--xz-color-white-alpha-1000)}.xz-button[disabled],.xz-button.is-disabled{opacity:.6;cursor:not-allowed}.xz-button.is-fluid{width:100%}.xz-button.is-pill{border-radius:999px}.xz-button.is-square{aspect-ratio:1/1}@keyframes button-loading-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@fastwork/xosmoz-css",
-	"version": "0.0.20",
+	"version": "0.0.23",
 	"description": "CSS utility classes and component styles for Xosmoz design system",
 	"main": "./dist/index.js",
 	"module": "./dist/index.mjs",
@@ -35,7 +35,7 @@
 		"clean": "rm -rf dist"
 	},
 	"dependencies": {
-		"@fastwork/xosmoz-theme": "^0.0.33"
+		"@fastwork/xosmoz-theme": "^0.0.36"
 	},
 	"devDependencies": {
 		"@types/node": "^20.11.0",