refactor(ui): localize component styles
This commit is contained in:
@@ -205,4 +205,205 @@ component Accordion {
|
||||
{/each}
|
||||
</div>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next--accordion {
|
||||
--wire-accordion-accent: var(--wire-component-color);
|
||||
display: grid;
|
||||
width: 100%;
|
||||
color: var(--wire-color-text);
|
||||
}
|
||||
|
||||
.wire-next__accordion-item {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.wire-next__accordion-heading {
|
||||
margin: 0;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.wire-next__accordion-heading > button {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.85rem 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--wire-color-text);
|
||||
font: inherit;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wire-next__accordion-heading > button > span:not(.wire-next__accordion-indicator) {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.wire-next__accordion-heading > button:focus-visible {
|
||||
border-radius: var(--wire-radius-sm);
|
||||
outline: 2px solid var(--wire-accordion-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.wire-next__accordion-heading > button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.wire-next__accordion-indicator {
|
||||
display: inline-flex;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
flex: 0 0 1rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
transition:
|
||||
color var(--wire-motion-fast) var(--wire-ease-standard),
|
||||
transform var(--wire-motion-fast) var(--wire-ease-standard);
|
||||
}
|
||||
|
||||
.wire-next__accordion-indicator > span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.wire-next__accordion-indicator > [class*="icon-["] {
|
||||
width: 0.95rem;
|
||||
height: 0.95rem;
|
||||
}
|
||||
|
||||
.wire-next__accordion-item[data-open="true"]
|
||||
> .wire-next__accordion-heading
|
||||
.wire-next__accordion-indicator {
|
||||
color: var(--wire-accordion-accent);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.wire-next--accordion[data-indicator="chevron"]
|
||||
.wire-next__accordion-item[data-open="true"]
|
||||
> .wire-next__accordion-heading
|
||||
.wire-next__accordion-indicator {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.wire-next__accordion-item[data-open="true"] > .wire-next__accordion-heading > button {
|
||||
color: var(--wire-accordion-accent);
|
||||
}
|
||||
|
||||
.wire-next__accordion-panel {
|
||||
display: grid;
|
||||
grid-template-rows: 0fr;
|
||||
opacity: 0;
|
||||
transition:
|
||||
grid-template-rows var(--wire-motion-base) var(--wire-ease-standard),
|
||||
opacity var(--wire-motion-fast) var(--wire-ease-standard);
|
||||
}
|
||||
|
||||
.wire-next__accordion-item[data-open="true"] > .wire-next__accordion-panel {
|
||||
grid-template-rows: 1fr;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.wire-next__accordion-panel > div {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wire-next__accordion-content {
|
||||
padding: 0 0 1rem 1.75rem;
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.86rem;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.wire-next__accordion-content > p {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.wire-next__accordion-content-italic > p::first-line {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.wire-next__accordion-nested {
|
||||
display: grid;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.wire-next__accordion-nested .wire-next__accordion-content {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.wire-next--accordion-bordered {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-md);
|
||||
background: var(--wire-color-surface);
|
||||
}
|
||||
|
||||
.wire-next--accordion-bordered > .wire-next__accordion-item + .wire-next__accordion-item {
|
||||
border-top: 1px solid var(--wire-color-border);
|
||||
}
|
||||
|
||||
.wire-next--accordion-bordered
|
||||
> .wire-next__accordion-item
|
||||
> .wire-next__accordion-heading
|
||||
> button {
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
.wire-next--accordion-bordered
|
||||
> .wire-next__accordion-item
|
||||
> .wire-next__accordion-panel
|
||||
.wire-next__accordion-content {
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
.wire-next--accordion-separated {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.wire-next--accordion-separated > .wire-next__accordion-item {
|
||||
overflow: hidden;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--wire-radius-md);
|
||||
background: var(--wire-color-surface-2);
|
||||
}
|
||||
|
||||
.wire-next--accordion-separated > .wire-next__accordion-item[data-open="true"] {
|
||||
border-color: var(--wire-color-border);
|
||||
}
|
||||
|
||||
.wire-next--accordion-separated
|
||||
> .wire-next__accordion-item
|
||||
> .wire-next__accordion-heading
|
||||
> button,
|
||||
.wire-next--accordion-separated
|
||||
> .wire-next__accordion-item
|
||||
> .wire-next__accordion-panel
|
||||
.wire-next__accordion-content {
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
.wire-next--accordion-flush {
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.wire-next__accordion-panel,
|
||||
.wire-next__accordion-indicator {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -456,4 +456,54 @@ component AdvancedSelect {
|
||||
>{validationMessage}</small>
|
||||
</div>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next__select-search {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wire-next__select-search input {
|
||||
padding-left: 2.25em;
|
||||
}
|
||||
|
||||
.wire-next__select-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.wire-next__select-tags > span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.3rem 0.55rem;
|
||||
border-radius: 999px;
|
||||
color: var(--wire-component-color);
|
||||
background: color-mix(in srgb, var(--wire-component-color) 12%, transparent);
|
||||
font-size: 0.75em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.wire-next__select-tags img {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.wire-next__select-value {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 0.55em;
|
||||
}
|
||||
|
||||
.wire-next__placeholder {
|
||||
overflow: hidden;
|
||||
color: var(--wire-color-muted);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -89,4 +89,61 @@ component AuthForm {
|
||||
<slot />
|
||||
</section>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-auth-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wire-auth-form > header {
|
||||
display: flex;
|
||||
margin-bottom: 1.5rem;
|
||||
align-items: flex-start;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.wire-auth-form__icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
flex: none;
|
||||
color: var(--wire-color-primary);
|
||||
}
|
||||
|
||||
.wire-auth-form h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 650;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.wire-auth-form header p {
|
||||
margin: 0.35rem 0 0;
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.wire-auth-form form {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.wire-auth-form__options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.wire-auth-form__options a {
|
||||
color: var(--wire-color-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.wire-auth-form__submit {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -80,4 +80,182 @@ component AuthSplitLayout {
|
||||
</section>
|
||||
</main>
|
||||
}
|
||||
|
||||
style {
|
||||
/* Shared authentication shell and forms */
|
||||
.wire-auth-split {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: 100dvh;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
color: var(--wire-color-text);
|
||||
background: var(--wire-color-bg);
|
||||
}
|
||||
|
||||
.wire-auth-split__content,
|
||||
.wire-auth-split__form {
|
||||
min-width: 0;
|
||||
padding: clamp(1.5rem, 5vw, 5rem);
|
||||
}
|
||||
|
||||
.wire-auth-split__content {
|
||||
display: flex;
|
||||
height: 100dvh;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 15% 15%,
|
||||
color-mix(in srgb, var(--wire-color-primary) 22%, transparent),
|
||||
transparent 34%
|
||||
),
|
||||
linear-gradient(145deg, var(--wire-color-surface-2), var(--wire-color-bg));
|
||||
border-right: 1px solid var(--wire-color-border);
|
||||
}
|
||||
|
||||
.wire-auth-split__brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.wire-auth-split__brand > span:first-child {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
color: var(--wire-color-primary);
|
||||
}
|
||||
|
||||
.wire-auth-split__brand > span:last-child {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.wire-auth-split__brand strong {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.wire-auth-split__brand small,
|
||||
.wire-auth-split__legal {
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.wire-auth-split__message {
|
||||
width: min(100%, 36rem);
|
||||
margin-block: 3rem;
|
||||
}
|
||||
|
||||
.wire-auth-split__eyebrow {
|
||||
color: var(--wire-color-primary);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.09em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.wire-auth-split__message h1 {
|
||||
max-width: 14ch;
|
||||
margin: 0.65rem 0 0;
|
||||
font-size: clamp(2rem, 4vw, 3.75rem);
|
||||
font-weight: 650;
|
||||
letter-spacing: -0.045em;
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
.wire-auth-split__message > p {
|
||||
max-width: 34rem;
|
||||
margin: 1rem 0 0;
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.wire-auth-split__features {
|
||||
display: grid;
|
||||
margin-top: 2rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.wire-auth-split__features article {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.wire-auth-split__features article > span:first-child {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
margin-top: 0.1rem;
|
||||
flex: none;
|
||||
color: var(--wire-color-primary);
|
||||
}
|
||||
|
||||
.wire-auth-split__features article > span:last-child {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.wire-auth-split__features strong {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wire-auth-split__features small {
|
||||
margin-top: 0.15rem;
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.wire-auth-split__form {
|
||||
display: grid;
|
||||
height: 100dvh;
|
||||
min-height: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
place-items: center;
|
||||
background: var(--wire-color-surface);
|
||||
}
|
||||
|
||||
.wire-auth-split__form-inner {
|
||||
width: min(100%, 30rem);
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.wire-auth-split {
|
||||
height: auto;
|
||||
min-height: 100dvh;
|
||||
overflow: visible;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.wire-auth-split__content {
|
||||
height: auto;
|
||||
min-height: auto;
|
||||
overflow: visible;
|
||||
padding-bottom: 2rem;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--wire-color-border);
|
||||
}
|
||||
.wire-auth-split__message {
|
||||
margin-block: 2rem 0;
|
||||
}
|
||||
.wire-auth-split__message h1 {
|
||||
font-size: clamp(1.75rem, 8vw, 2.5rem);
|
||||
}
|
||||
.wire-auth-split__features,
|
||||
.wire-auth-split__legal {
|
||||
display: none;
|
||||
}
|
||||
.wire-auth-split__form {
|
||||
height: auto;
|
||||
min-height: auto;
|
||||
overflow: visible;
|
||||
padding-block: 2.5rem;
|
||||
place-items: start center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -147,4 +147,210 @@ component AvatarGroup {
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
style {
|
||||
/* --- Avatar group -------------------------------------------------------- */
|
||||
.wire-next--avatar-group {
|
||||
--wire-avatar-group-size: 3rem;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.wire-next--avatar-group[data-size="xs"] {
|
||||
--wire-avatar-group-size: 1.75rem;
|
||||
}
|
||||
|
||||
.wire-next--avatar-group[data-size="sm"] {
|
||||
--wire-avatar-group-size: 2.25rem;
|
||||
}
|
||||
|
||||
.wire-next--avatar-group[data-size="md"],
|
||||
.wire-next--avatar-group[data-size="default"] {
|
||||
--wire-avatar-group-size: 3rem;
|
||||
}
|
||||
|
||||
.wire-next--avatar-group[data-size="lg"] {
|
||||
--wire-avatar-group-size: 4rem;
|
||||
}
|
||||
|
||||
.wire-next--avatar-group[data-size="xl"] {
|
||||
--wire-avatar-group-size: 5rem;
|
||||
}
|
||||
|
||||
.wire-next__avatar-group-members {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wire-next--avatar-group[data-layout="stack"] .wire-next__avatar-group-member,
|
||||
.wire-next--avatar-group[data-layout="stack"] .wire-next__avatar-group-overflow {
|
||||
margin-left: calc(var(--wire-avatar-group-size) * -0.22);
|
||||
}
|
||||
|
||||
.wire-next--avatar-group[data-layout="stack"] :first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.wire-next--avatar-group[data-layout="grid"] .wire-next__avatar-group-members {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--wire-avatar-group-columns), var(--wire-avatar-group-size));
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.wire-next__avatar-group-member,
|
||||
.wire-next__avatar-group-overflow {
|
||||
--wire-avatar-group-color: var(--wire-color-primary);
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
width: var(--wire-avatar-group-size);
|
||||
height: var(--wire-avatar-group-size);
|
||||
flex: none;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
outline: none;
|
||||
transition:
|
||||
z-index var(--wire-motion-fast),
|
||||
transform var(--wire-motion-base) var(--wire-ease-emphasized);
|
||||
}
|
||||
|
||||
.wire-next__avatar-group-member[data-color="secondary"] {
|
||||
--wire-avatar-group-color: #737373;
|
||||
}
|
||||
|
||||
.wire-next__avatar-group-member[data-color="success"] {
|
||||
--wire-avatar-group-color: var(--wire-color-success);
|
||||
}
|
||||
|
||||
.wire-next__avatar-group-member[data-color="info"] {
|
||||
--wire-avatar-group-color: var(--wire-color-info);
|
||||
}
|
||||
|
||||
.wire-next__avatar-group-member[data-color="warning"] {
|
||||
--wire-avatar-group-color: var(--wire-color-warning);
|
||||
}
|
||||
|
||||
.wire-next__avatar-group-member[data-color="danger"] {
|
||||
--wire-avatar-group-color: var(--wire-color-danger);
|
||||
}
|
||||
|
||||
.wire-next__avatar-group-member[data-shape="rounded"] {
|
||||
border-radius: calc(var(--wire-radius-sm, 0.5rem) * 0.72);
|
||||
}
|
||||
|
||||
.wire-next__avatar-group-avatar,
|
||||
.wire-next__avatar-group-overflow-button {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
place-items: center;
|
||||
color: white;
|
||||
border: 2px solid var(--wire-avatar-group-ring);
|
||||
border-radius: inherit;
|
||||
background: var(--wire-avatar-group-color, var(--wire-color-primary));
|
||||
box-shadow: 0 5px 14px rgb(0 0 0 / 0.16);
|
||||
font: inherit;
|
||||
font-size: calc(var(--wire-avatar-group-size) * 0.3);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.wire-next__avatar-group-avatar img,
|
||||
.wire-next__avatar-group-menu-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.wire-next__avatar-group-overflow-button {
|
||||
cursor: pointer;
|
||||
color: var(--wire-color-text);
|
||||
background: var(--wire-color-surface-2);
|
||||
}
|
||||
|
||||
.wire-next__avatar-group-member:hover,
|
||||
.wire-next__avatar-group-member:focus-visible,
|
||||
.wire-next__avatar-group-overflow:focus-within {
|
||||
z-index: 5;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.wire-next__avatar-group-member:focus-visible,
|
||||
.wire-next__avatar-group-overflow-button:focus-visible {
|
||||
outline: 2px solid var(--wire-color-primary);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.wire-next__avatar-group-tooltip {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: calc(100% + 0.65rem);
|
||||
z-index: 20;
|
||||
width: max-content;
|
||||
max-width: 14rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
color: var(--wire-color-bg);
|
||||
border-radius: 0.4rem;
|
||||
background: var(--wire-color-text);
|
||||
box-shadow: 0 8px 22px rgb(0 0 0 / 0.22);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 650;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 0.25rem);
|
||||
transition:
|
||||
opacity var(--wire-motion-fast),
|
||||
transform var(--wire-motion-fast);
|
||||
}
|
||||
|
||||
.wire-next__avatar-group-member:hover .wire-next__avatar-group-tooltip,
|
||||
.wire-next__avatar-group-member:focus-visible .wire-next__avatar-group-tooltip {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.wire-next__avatar-group-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.65rem);
|
||||
right: 0;
|
||||
z-index: 30;
|
||||
display: grid;
|
||||
width: max-content;
|
||||
min-width: 12rem;
|
||||
gap: 0.25rem;
|
||||
padding: 0.45rem;
|
||||
color: var(--wire-color-text);
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-sm, 0.5rem);
|
||||
background: var(--wire-color-surface);
|
||||
box-shadow: 0 16px 38px rgb(0 0 0 / 0.22);
|
||||
}
|
||||
|
||||
.wire-next__avatar-group-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.45rem 0.55rem;
|
||||
border-radius: 0.4rem;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.wire-next__avatar-group-menu-item:hover {
|
||||
background: var(--wire-color-surface-2);
|
||||
}
|
||||
|
||||
.wire-next__avatar-group-menu-avatar {
|
||||
display: grid;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
overflow: hidden;
|
||||
flex: none;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: var(--wire-color-surface-2);
|
||||
font-size: 0.65rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,4 +64,207 @@ component Blockquote {
|
||||
{/if}
|
||||
</figure>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next--blockquote {
|
||||
--wire-blockquote-color: var(--wire-component-color, var(--wire-color-primary));
|
||||
--wire-blockquote-font-size: 1.125rem;
|
||||
--wire-blockquote-mark-size: 4.25rem;
|
||||
display: grid;
|
||||
gap: 1.25rem;
|
||||
width: 100%;
|
||||
color: var(--wire-color-text);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.wire-next--blockquote[data-size="xs"] {
|
||||
--wire-blockquote-font-size: 0.875rem;
|
||||
--wire-blockquote-mark-size: 3rem;
|
||||
}
|
||||
|
||||
.wire-next--blockquote[data-size="sm"] {
|
||||
--wire-blockquote-font-size: 1rem;
|
||||
--wire-blockquote-mark-size: 3.5rem;
|
||||
}
|
||||
|
||||
.wire-next--blockquote[data-size="md"],
|
||||
.wire-next--blockquote[data-size="default"] {
|
||||
--wire-blockquote-font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.wire-next--blockquote[data-size="lg"] {
|
||||
--wire-blockquote-font-size: clamp(1.35rem, 2.4vw, 1.75rem);
|
||||
--wire-blockquote-mark-size: 5rem;
|
||||
}
|
||||
|
||||
.wire-next--blockquote[data-size="xl"] {
|
||||
--wire-blockquote-font-size: clamp(1.65rem, 3vw, 2.25rem);
|
||||
--wire-blockquote-mark-size: 5.75rem;
|
||||
}
|
||||
|
||||
.wire-next--blockquote > blockquote {
|
||||
position: relative;
|
||||
display: block;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
padding-top: calc(var(--wire-blockquote-mark-size) * 0.78);
|
||||
}
|
||||
|
||||
.wire-next__blockquote-mark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: color-mix(in srgb, var(--wire-blockquote-color) 28%, var(--wire-color-text));
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: var(--wire-blockquote-mark-size);
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 0.8;
|
||||
text-align: start;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.wire-next__blockquote-copy {
|
||||
min-width: 0;
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: var(--wire-blockquote-font-size);
|
||||
line-height: 1.55;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
.wire-next--blockquote[data-italic="true"] .wire-next__blockquote-copy {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.wire-next__blockquote-copy > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.wire-next__blockquote-copy > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.wire-next__blockquote-citation {
|
||||
display: inline-flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
margin-inline-start: 0;
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.wire-next__blockquote-avatar {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
flex: 0 0 auto;
|
||||
border: 2px solid color-mix(in srgb, var(--wire-blockquote-color) 35%, transparent);
|
||||
border-radius: 999px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.wire-next__blockquote-attribution {
|
||||
display: grid;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.wire-next__blockquote-attribution cite {
|
||||
color: var(--wire-color-text);
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.wire-next__blockquote-attribution a {
|
||||
color: inherit;
|
||||
text-decoration-color: color-mix(in srgb, var(--wire-blockquote-color) 55%, transparent);
|
||||
text-underline-offset: 0.2em;
|
||||
}
|
||||
|
||||
.wire-next__blockquote-attribution a:hover {
|
||||
color: var(--wire-blockquote-color);
|
||||
}
|
||||
|
||||
.wire-next--blockquote[data-align="center"] {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wire-next--blockquote[data-align="right"],
|
||||
.wire-next--blockquote[data-align="end"] {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.wire-next--blockquote[data-align="center"] > blockquote,
|
||||
.wire-next--blockquote[data-align="right"] > blockquote,
|
||||
.wire-next--blockquote[data-align="end"] > blockquote {
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
.wire-next--blockquote[data-align="center"] .wire-next__blockquote-mark {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wire-next--blockquote[data-align="right"] .wire-next__blockquote-mark,
|
||||
.wire-next--blockquote[data-align="end"] .wire-next__blockquote-mark {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.wire-next--blockquote[data-align="center"] .wire-next__blockquote-citation {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.wire-next--blockquote[data-align="right"] .wire-next__blockquote-citation,
|
||||
.wire-next--blockquote[data-align="end"] .wire-next__blockquote-citation {
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.wire-next--blockquote[data-variant="bordered"],
|
||||
.wire-next--blockquote[data-variant="border"],
|
||||
.wire-next--blockquote[data-variant="left-border"] {
|
||||
padding-inline-start: 1.5rem;
|
||||
border-inline-start: 4px solid var(--wire-blockquote-color);
|
||||
}
|
||||
|
||||
.wire-next--blockquote[data-variant="bordered"] .wire-next__blockquote-mark,
|
||||
.wire-next--blockquote[data-variant="border"] .wire-next__blockquote-mark,
|
||||
.wire-next--blockquote[data-variant="left-border"] .wire-next__blockquote-mark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wire-next--blockquote[data-variant="bordered"] > blockquote,
|
||||
.wire-next--blockquote[data-variant="border"] > blockquote,
|
||||
.wire-next--blockquote[data-variant="left-border"] > blockquote {
|
||||
display: block;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.wire-next--blockquote[data-variant="bordered"] .wire-next__blockquote-copy,
|
||||
.wire-next--blockquote[data-variant="border"] .wire-next__blockquote-copy,
|
||||
.wire-next--blockquote[data-variant="left-border"] .wire-next__blockquote-copy {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.wire-next--blockquote[data-variant="bordered"] .wire-next__blockquote-citation,
|
||||
.wire-next--blockquote[data-variant="border"] .wire-next__blockquote-citation,
|
||||
.wire-next--blockquote[data-variant="left-border"] .wire-next__blockquote-citation {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.wire-next--blockquote {
|
||||
--wire-blockquote-mark-size: 3.25rem;
|
||||
--wire-blockquote-font-size: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
.wire-next--blockquote[data-size="lg"],
|
||||
.wire-next--blockquote[data-size="xl"] {
|
||||
--wire-blockquote-font-size: 1.25rem;
|
||||
}
|
||||
.wire-next__blockquote-citation {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -89,4 +89,35 @@ items: unknown[] = []
|
||||
<slot />
|
||||
</div>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next--button-group {
|
||||
display: inline-flex;
|
||||
align-items: stretch;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.wire-next--button-group[data-orientation="vertical"] {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.wire-next--button-group[data-attached="false"] {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.wire-next--button-group[data-disabled="true"] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.wire-next--button-group[data-responsive="true"] {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -309,4 +309,348 @@ component Card {
|
||||
{/if}
|
||||
</div>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next--card {
|
||||
--wire-card-color: var(--wire-component-color, var(--wire-color-primary));
|
||||
--wire-card-padding: 1.25rem;
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: var(--wire-color-text);
|
||||
}
|
||||
|
||||
.wire-next--card[data-size="sm"] {
|
||||
--wire-card-padding: 0.85rem;
|
||||
}
|
||||
|
||||
.wire-next--card[data-size="lg"] {
|
||||
--wire-card-padding: 1.75rem;
|
||||
}
|
||||
|
||||
.wire-next__card-panel {
|
||||
position: relative;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-md);
|
||||
background: var(--wire-color-surface);
|
||||
box-shadow: var(--wire-shadow-1);
|
||||
transition:
|
||||
transform var(--wire-motion-base) var(--wire-ease-emphasized),
|
||||
border-color var(--wire-motion-base) ease,
|
||||
box-shadow var(--wire-motion-base) var(--wire-ease-emphasized);
|
||||
}
|
||||
|
||||
.wire-next--card[data-variant="top-border"] > .wire-next__card-panel,
|
||||
.wire-next--card[data-variant="accent"] > .wire-next__card-panel {
|
||||
border-top: 4px solid var(--wire-card-color);
|
||||
}
|
||||
|
||||
.wire-next--card[data-hover="raise"] > .wire-next__card-panel:hover {
|
||||
border-color: color-mix(in srgb, var(--wire-card-color) 38%, var(--wire-color-border));
|
||||
box-shadow: var(--wire-shadow-3);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.wire-next__card-header,
|
||||
.wire-next__card-footer {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.85rem var(--wire-card-padding);
|
||||
background: var(--wire-color-surface-2);
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.wire-next__card-header {
|
||||
border-bottom: 1px solid var(--wire-color-border);
|
||||
}
|
||||
|
||||
.wire-next__card-footer {
|
||||
margin-top: auto;
|
||||
border-top: 1px solid var(--wire-color-border);
|
||||
}
|
||||
|
||||
.wire-next__card-header-actions {
|
||||
display: inline-flex;
|
||||
gap: 0.2rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wire-next__card-header-actions button {
|
||||
display: inline-grid;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border: 0;
|
||||
border-radius: var(--wire-radius-sm);
|
||||
background: transparent;
|
||||
color: var(--wire-color-muted);
|
||||
cursor: pointer;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.wire-next__card-header-actions button:hover {
|
||||
background: color-mix(in srgb, var(--wire-card-color) 12%, transparent);
|
||||
color: var(--wire-card-color);
|
||||
}
|
||||
|
||||
.wire-next__card-header-actions button:focus-visible {
|
||||
outline: 2px solid var(--wire-card-color);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.wire-next__card-media {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 10rem;
|
||||
background: var(--wire-color-surface-2);
|
||||
}
|
||||
|
||||
.wire-next__card-media > img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: inherit;
|
||||
object-fit: cover;
|
||||
transition: transform 420ms var(--wire-ease-emphasized);
|
||||
}
|
||||
|
||||
.wire-next--card[data-hover="image"] .wire-next__card-panel:hover .wire-next__card-media > img {
|
||||
transform: scale(1.06);
|
||||
}
|
||||
|
||||
.wire-next__card-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.55rem;
|
||||
padding: clamp(1.25rem, 4vw, 2rem);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgb(2 6 23 / 0.9) 0%,
|
||||
rgb(2 6 23 / 0.68) 38%,
|
||||
rgb(2 6 23 / 0.34) 58%,
|
||||
rgb(2 6 23 / 0.86) 100%
|
||||
);
|
||||
color: white;
|
||||
text-shadow: 0 1px 2px rgb(0 0 0 / 0.42);
|
||||
}
|
||||
|
||||
.wire-next__card-overlay h3 {
|
||||
color: white;
|
||||
font-size: clamp(1.1rem, 2.2vw, 1.35rem);
|
||||
}
|
||||
|
||||
.wire-next__card-overlay p {
|
||||
max-width: 48rem;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
line-height: 1.6;
|
||||
text-shadow:
|
||||
0 1px 2px rgb(0 0 0 / 0.9),
|
||||
0 2px 8px rgb(0 0 0 / 0.62);
|
||||
}
|
||||
|
||||
.wire-next__card-overlay .wire-next__card-subtitle {
|
||||
color: rgb(255 255 255 / 0.78);
|
||||
}
|
||||
|
||||
.wire-next__card-overlay small {
|
||||
margin-top: auto;
|
||||
color: rgb(255 255 255 / 0.88);
|
||||
font-weight: 600;
|
||||
text-shadow: 0 1px 2px rgb(0 0 0 / 0.55);
|
||||
}
|
||||
|
||||
.wire-next__card-body {
|
||||
display: grid;
|
||||
gap: 0.65rem;
|
||||
min-width: 0;
|
||||
padding: var(--wire-card-padding);
|
||||
}
|
||||
|
||||
.wire-next__card-body[data-scrollable="true"] {
|
||||
max-height: var(--wire-card-max-height);
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
scrollbar-color: var(--wire-card-color) transparent;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.wire-next__card-body h3,
|
||||
.wire-next__card-body p,
|
||||
.wire-next__card-overlay h3,
|
||||
.wire-next__card-overlay p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wire-next__card-body p {
|
||||
color: var(--wire-color-muted);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.wire-next__card-subtitle {
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.wire-next__card-action {
|
||||
display: inline-flex;
|
||||
gap: 0.25rem;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
margin-top: 0.2rem;
|
||||
color: var(--wire-card-color);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.wire-next__card-action:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.2em;
|
||||
}
|
||||
|
||||
.wire-next__card-navigation {
|
||||
background: var(--wire-color-surface-2);
|
||||
}
|
||||
|
||||
.wire-next__card-tabs {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.wire-next__card-tabs button {
|
||||
min-height: 3rem;
|
||||
flex: 1 0 auto;
|
||||
padding-inline: 1rem;
|
||||
border: 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
background: transparent;
|
||||
color: var(--wire-color-muted);
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.wire-next__card-tabs button[data-active="true"] {
|
||||
border-color: var(--wire-card-color);
|
||||
color: var(--wire-color-text);
|
||||
}
|
||||
|
||||
.wire-next__card-navigation-select {
|
||||
display: none;
|
||||
width: calc(100% - 2rem);
|
||||
min-height: 2.75rem;
|
||||
margin: 1rem;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-sm);
|
||||
background: var(--wire-color-surface);
|
||||
color: var(--wire-color-text);
|
||||
}
|
||||
|
||||
.wire-next__card-alert {
|
||||
display: flex;
|
||||
gap: 0.35rem;
|
||||
padding: 0.8rem var(--wire-card-padding);
|
||||
background: color-mix(in srgb, var(--wire-card-color) 14%, var(--wire-color-surface-2));
|
||||
color: var(--wire-color-text);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.wire-next__card-empty {
|
||||
display: grid;
|
||||
min-height: 12rem;
|
||||
color: var(--wire-color-muted);
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.wire-next__card-empty > span {
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.wire-next--card[data-align="center"] .wire-next__card-body {
|
||||
text-align: center;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.wire-next--card[data-layout="horizontal"] > .wire-next__card-panel {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(12rem, 42%) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.wire-next--card[data-layout="horizontal"] .wire-next__card-media {
|
||||
grid-row: 1 / span 4;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.wire-next__card-group {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--wire-card-columns, 3), minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.wire-next__card-group > .wire-next__card-panel {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wire-next__card-group > .wire-next__card-panel:not(:first-child) {
|
||||
margin-inline-start: -1px;
|
||||
}
|
||||
|
||||
.wire-next__card-group > .wire-next__card-panel:first-child {
|
||||
border-start-start-radius: var(--wire-radius-md);
|
||||
border-end-start-radius: var(--wire-radius-md);
|
||||
}
|
||||
|
||||
.wire-next__card-group > .wire-next__card-panel:last-child {
|
||||
border-start-end-radius: var(--wire-radius-md);
|
||||
border-end-end-radius: var(--wire-radius-md);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.wire-next--card[data-layout="horizontal"] > .wire-next__card-panel {
|
||||
display: flex;
|
||||
}
|
||||
.wire-next--card[data-layout="horizontal"] .wire-next__card-media {
|
||||
min-height: 12rem;
|
||||
}
|
||||
.wire-next__card-group {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.wire-next__card-group > .wire-next__card-panel:not(:first-child) {
|
||||
margin-top: -1px;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
.wire-next__card-group > .wire-next__card-panel {
|
||||
border-radius: 0;
|
||||
}
|
||||
.wire-next__card-group > .wire-next__card-panel:first-child {
|
||||
border-start-start-radius: var(--wire-radius-md);
|
||||
border-start-end-radius: var(--wire-radius-md);
|
||||
}
|
||||
.wire-next__card-group > .wire-next__card-panel:last-child {
|
||||
border-end-start-radius: var(--wire-radius-md);
|
||||
border-end-end-radius: var(--wire-radius-md);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.wire-next__card-tabs:has(+ .wire-next__card-navigation-select) {
|
||||
display: none;
|
||||
}
|
||||
.wire-next__card-navigation-select {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -461,4 +461,364 @@ component Carousel {
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next--carousel {
|
||||
--wire-carousel-color: var(--wire-component-color, var(--wire-color-primary));
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
gap: 1rem;
|
||||
color: var(--wire-color-text);
|
||||
}
|
||||
|
||||
.wire-next__carousel-header h3,
|
||||
.wire-next__carousel-header p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wire-next__carousel-header p {
|
||||
margin-top: 0.35rem;
|
||||
color: var(--wire-color-text-muted);
|
||||
}
|
||||
|
||||
.wire-next__carousel-layout {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.wire-next__carousel-main {
|
||||
display: grid;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.wire-next__carousel-stage {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.wire-next__carousel-viewport {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-md);
|
||||
background: var(--wire-color-surface-subtle, var(--wire-color-surface));
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.wire-next__carousel-viewport:focus-visible {
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-carousel-color) 30%, transparent);
|
||||
}
|
||||
|
||||
.wire-next__carousel-track {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: var(--wire-carousel-gap);
|
||||
transform: translateX(
|
||||
calc(
|
||||
var(--wire-carousel-index) * -1 *
|
||||
(
|
||||
(100% - (var(--wire-carousel-per-view) - 1) * var(--wire-carousel-gap)) /
|
||||
var(--wire-carousel-per-view) + var(--wire-carousel-gap)
|
||||
)
|
||||
)
|
||||
);
|
||||
transition: transform var(--wire-motion-base) var(--wire-ease-emphasized);
|
||||
translate: var(--wire-carousel-drag-offset, 0) 0;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-dragging="true"] .wire-next__carousel-track {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-rtl="true"] .wire-next__carousel-track {
|
||||
transform: translateX(
|
||||
calc(
|
||||
var(--wire-carousel-index) *
|
||||
(
|
||||
(100% - (var(--wire-carousel-per-view) - 1) * var(--wire-carousel-gap)) /
|
||||
var(--wire-carousel-per-view) + var(--wire-carousel-gap)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.wire-next__carousel-slide {
|
||||
position: relative;
|
||||
display: grid;
|
||||
flex: 0 0
|
||||
calc(
|
||||
(100% - (var(--wire-carousel-per-view) - 1) * var(--wire-carousel-gap)) /
|
||||
var(--wire-carousel-per-view)
|
||||
);
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
min-height: 20rem;
|
||||
place-items: center;
|
||||
background: var(--wire-color-surface-raised, var(--wire-color-surface));
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-auto-height="true"] .wire-next__carousel-slide {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-centered="true"] .wire-next__carousel-slide {
|
||||
flex-basis: min(78%, 32rem);
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-centered="true"] .wire-next__carousel-track {
|
||||
box-sizing: border-box;
|
||||
transform: translateX(
|
||||
calc(var(--wire-carousel-index) * -1 * (min(78%, 32rem) + var(--wire-carousel-gap)))
|
||||
);
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-centered="true"] .wire-next__carousel-slide:first-child {
|
||||
margin-inline-start: calc((100% - min(78%, 32rem)) / 2);
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-centered="true"] .wire-next__carousel-slide:last-child {
|
||||
margin-inline-end: calc((100% - min(78%, 32rem)) / 2);
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-centered="true"][data-rtl="true"] .wire-next__carousel-track {
|
||||
transform: translateX(
|
||||
calc(var(--wire-carousel-index) * (min(78%, 32rem) + var(--wire-carousel-gap)))
|
||||
);
|
||||
}
|
||||
|
||||
.wire-next__carousel-slide > img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.wire-next__carousel-slide-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(100%, 38rem);
|
||||
padding: clamp(2rem, 8vw, 5rem);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wire-next__carousel-slide-content h4,
|
||||
.wire-next__carousel-slide-content p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wire-next__carousel-slide-content h4 {
|
||||
font-size: clamp(1.5rem, 4vw, 2.4rem);
|
||||
}
|
||||
|
||||
.wire-next__carousel-slide-content p {
|
||||
margin-top: 0.65rem;
|
||||
color: var(--wire-color-text-muted);
|
||||
}
|
||||
|
||||
.wire-next__carousel-control {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 50%;
|
||||
display: grid;
|
||||
width: 2.75rem;
|
||||
min-height: 2.75rem;
|
||||
padding: 0;
|
||||
border: 1px solid color-mix(in srgb, var(--wire-color-border) 70%, transparent);
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--wire-color-text) 76%, transparent);
|
||||
color: var(--wire-color-surface);
|
||||
cursor: pointer;
|
||||
place-items: center;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.wire-next__carousel-control:focus-visible,
|
||||
.wire-next__carousel-pagination button:focus-visible,
|
||||
.wire-next__carousel-thumbnails button:focus-visible {
|
||||
outline: 2px solid var(--wire-carousel-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.wire-next__carousel-control:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.wire-next__carousel-control--previous {
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.wire-next__carousel-control--next {
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-rtl="true"] .wire-next__carousel-control--previous {
|
||||
right: 1rem;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-rtl="true"] .wire-next__carousel-control--next {
|
||||
right: auto;
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.wire-next__carousel-pagination {
|
||||
display: flex;
|
||||
min-height: 1.5rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.wire-next__carousel-pagination button {
|
||||
width: 0.65rem;
|
||||
min-height: 0.65rem;
|
||||
padding: 0;
|
||||
border: 1px solid var(--wire-color-text-muted);
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wire-next__carousel-pagination button[data-active="true"] {
|
||||
border-color: var(--wire-carousel-color);
|
||||
background: var(--wire-carousel-color);
|
||||
}
|
||||
|
||||
.wire-next__carousel-counter {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
bottom: 0.8rem;
|
||||
left: 50%;
|
||||
padding: 0.25rem 0.65rem;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--wire-color-text) 82%, transparent);
|
||||
color: var(--wire-color-surface);
|
||||
font-weight: 700;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.wire-next__carousel-thumbnails {
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
gap: 0.55rem;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.wire-next__carousel-thumbnails button {
|
||||
display: grid;
|
||||
flex: 0 0 8.5rem;
|
||||
min-height: 3.75rem;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-sm);
|
||||
background: var(--wire-color-surface);
|
||||
color: var(--wire-color-text);
|
||||
cursor: pointer;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.wire-next__carousel-thumbnails button[data-active="true"] {
|
||||
border-color: var(--wire-carousel-color);
|
||||
box-shadow: inset 0 0 0 1px var(--wire-carousel-color);
|
||||
}
|
||||
|
||||
.wire-next__carousel-thumbnails img {
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.wire-next__carousel-thumbnails span {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails {
|
||||
flex: 0 0 9rem;
|
||||
flex-direction: column;
|
||||
max-height: 28rem;
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails button {
|
||||
flex-basis: 7.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-draggable="true"] .wire-next__carousel-viewport {
|
||||
cursor: grab;
|
||||
touch-action: pan-y;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-draggable="true"] .wire-next__carousel-viewport:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-draggable="true"] img,
|
||||
.wire-next--carousel[data-draggable="true"] a {
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-snap="true"] .wire-next__carousel-viewport {
|
||||
overflow-x: auto;
|
||||
scroll-behavior: smooth;
|
||||
scroll-snap-type: x mandatory;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-snap="true"] .wire-next__carousel-track {
|
||||
--wire-carousel-snap-slide: calc(
|
||||
(100% - (var(--wire-carousel-per-view) - 1) * var(--wire-carousel-gap)) /
|
||||
var(--wire-carousel-per-view)
|
||||
);
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
box-sizing: content-box;
|
||||
grid-auto-columns: var(--wire-carousel-snap-slide);
|
||||
grid-auto-flow: column;
|
||||
padding-inline: calc((100% - var(--wire-carousel-snap-slide)) / 2);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-snap="true"] .wire-next__carousel-slide {
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.wire-next__carousel-slide {
|
||||
flex-basis: 100%;
|
||||
min-height: 16rem;
|
||||
}
|
||||
.wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-layout {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails {
|
||||
flex: auto;
|
||||
flex-direction: row;
|
||||
max-height: none;
|
||||
}
|
||||
.wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails button {
|
||||
flex-basis: 8.5rem;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.wire-next__carousel-track {
|
||||
transition-duration: 0.01ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -147,4 +147,194 @@ component ChatBubble {
|
||||
<slot />
|
||||
</section>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next--chat-bubble {
|
||||
--wire-chat-color: var(--wire-component-color, var(--wire-color-primary));
|
||||
--wire-chat-padding: 1rem;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
gap: 1rem;
|
||||
color: var(--wire-color-text);
|
||||
}
|
||||
|
||||
.wire-next__chat-header h3,
|
||||
.wire-next__chat-header p,
|
||||
.wire-next__chat-content h4,
|
||||
.wire-next__chat-content p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wire-next__chat-header p {
|
||||
margin-top: 0.35rem;
|
||||
color: var(--wire-color-text-muted);
|
||||
}
|
||||
|
||||
.wire-next__chat-thread {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.wire-next__chat-message {
|
||||
display: grid;
|
||||
width: min(78%, 34rem);
|
||||
min-width: 0;
|
||||
justify-self: start;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.wire-next__chat-message[data-direction="outgoing"] {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.wire-next--chat-bubble[data-one-sided="true"] .wire-next__chat-message {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.wire-next__chat-row {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-row {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.wire-next--chat-bubble[data-one-sided="true"]
|
||||
.wire-next__chat-message[data-direction="outgoing"]
|
||||
.wire-next__chat-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.wire-next__chat-content {
|
||||
min-width: 0;
|
||||
padding: var(--wire-chat-padding);
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: 1rem;
|
||||
background: var(--wire-color-surface-raised, var(--wire-color-surface));
|
||||
color: var(--wire-color-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wire-next__chat-content:focus-visible {
|
||||
outline: 2px solid var(--wire-chat-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-content {
|
||||
border-color: var(--wire-chat-color);
|
||||
background: var(--wire-chat-color);
|
||||
color: var(--wire-color-primary-contrast, #fff);
|
||||
}
|
||||
|
||||
.wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-content :is(h4, p, li, span) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.wire-next__chat-content h4 {
|
||||
margin-bottom: 0.65rem;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.wire-next__chat-content p + p,
|
||||
.wire-next__chat-content p + nav {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.wire-next__chat-content ul {
|
||||
display: grid;
|
||||
margin: 0.55rem 0 0;
|
||||
padding-inline-start: 1.25rem;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.wire-next__chat-content nav {
|
||||
display: grid;
|
||||
margin-top: 0.75rem;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.wire-next__chat-content a {
|
||||
color: var(--wire-chat-color);
|
||||
font-weight: 650;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-content a {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.wire-next__chat-avatar {
|
||||
display: grid;
|
||||
flex: 0 0 2.5rem;
|
||||
width: 2.5rem;
|
||||
min-height: 2.5rem;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: 999px;
|
||||
background: var(--wire-color-surface-raised, var(--wire-color-surface));
|
||||
color: var(--wire-color-text);
|
||||
cursor: pointer;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.wire-next__chat-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.wire-next__chat-avatar:focus-visible {
|
||||
outline: 2px solid var(--wire-chat-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.wire-next__chat-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
padding-inline: calc(2.5rem + 0.75rem);
|
||||
color: var(--wire-color-text-muted);
|
||||
font-size: 0.78em;
|
||||
}
|
||||
|
||||
.wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-meta {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.wire-next__chat-meta[data-tone="danger"] {
|
||||
color: var(--wire-color-danger);
|
||||
}
|
||||
|
||||
.wire-next__chat-meta button {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.wire-next__chat-message {
|
||||
width: min(92%, 34rem);
|
||||
}
|
||||
.wire-next__chat-avatar {
|
||||
flex-basis: 2rem;
|
||||
width: 2rem;
|
||||
min-height: 2rem;
|
||||
}
|
||||
.wire-next__chat-meta {
|
||||
padding-inline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -95,4 +95,145 @@ size: string = "default"
|
||||
<slot />
|
||||
</section>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next--collapse {
|
||||
--wire-collapse-color: var(--wire-component-color, var(--wire-color-primary));
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
gap: 0.75rem;
|
||||
color: var(--wire-color-text);
|
||||
}
|
||||
|
||||
.wire-next__collapse-item {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
justify-items: start;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.wire-next__collapse-trigger {
|
||||
display: inline-flex;
|
||||
min-height: 2.75rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.55rem;
|
||||
padding: 0.7rem 1rem;
|
||||
border: 1px solid var(--wire-collapse-color);
|
||||
border-radius: var(--wire-radius-sm);
|
||||
background: var(--wire-collapse-color);
|
||||
color: var(--wire-color-primary-contrast, #fff);
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wire-next__collapse-trigger:focus-visible {
|
||||
outline: 2px solid var(--wire-collapse-color);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.wire-next__collapse-trigger:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.wire-next__collapse-chevron {
|
||||
transition: transform var(--wire-motion-fast) var(--wire-ease-standard);
|
||||
}
|
||||
|
||||
.wire-next__collapse-item[data-open="true"] .wire-next__collapse-chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.wire-next__collapse-panel {
|
||||
width: min(100%, 42rem);
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
margin-top: 0;
|
||||
opacity: 0;
|
||||
transition:
|
||||
max-height 350ms var(--wire-ease-emphasized),
|
||||
margin-top 300ms var(--wire-ease-emphasized),
|
||||
opacity 200ms var(--wire-ease-standard);
|
||||
}
|
||||
|
||||
.wire-next__collapse-panel[data-open="true"] {
|
||||
max-height: 40rem;
|
||||
margin-top: 0.75rem;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.wire-next__collapse-content {
|
||||
display: grid;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
gap: 0.65rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-md);
|
||||
background: var(--wire-color-surface-raised, var(--wire-color-surface));
|
||||
}
|
||||
|
||||
.wire-next__collapse-content h4,
|
||||
.wire-next__collapse-content p,
|
||||
.wire-next__collapse-preview {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wire-next__collapse-content nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.wire-next__collapse-content a {
|
||||
color: var(--wire-collapse-color);
|
||||
font-weight: 650;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.wire-next--collapse[data-mode="inline"] .wire-next__collapse-item {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.wire-next--collapse[data-mode="inline"] .wire-next__collapse-preview {
|
||||
order: 1;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.wire-next--collapse[data-mode="inline"] .wire-next__collapse-panel {
|
||||
order: 2;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wire-next--collapse[data-mode="inline"] .wire-next__collapse-panel[data-open="true"] {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.wire-next--collapse[data-mode="inline"] .wire-next__collapse-trigger {
|
||||
order: 3;
|
||||
margin-top: 0.5rem;
|
||||
min-height: auto;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: var(--wire-collapse-color);
|
||||
}
|
||||
|
||||
.wire-next--collapse[data-mode="inline"] .wire-next__collapse-content {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.wire-next__collapse-chevron,
|
||||
.wire-next__collapse-panel {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -38,4 +38,11 @@ component ColorPicker {
|
||||
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
|
||||
</div>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next__color-control input[type="color"] {
|
||||
width: 3rem;
|
||||
padding: 0.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -386,4 +386,29 @@ component ComboBox {
|
||||
>{validationMessage}</small>
|
||||
</div>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next__combobox-toggle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
width: 2.25em;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
color: var(--wire-color-muted);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.wire-next--combobox .wire-next__combobox-input {
|
||||
padding-right: 5.25em;
|
||||
padding-left: 2.5em;
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -59,4 +59,61 @@ size: string = "default"
|
||||
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
|
||||
</div>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next__picker-clear {
|
||||
position: absolute;
|
||||
right: 2.5rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--wire-color-muted);
|
||||
}
|
||||
|
||||
.wire-next__date-selectors {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.wire-next__date-selectors label {
|
||||
display: grid;
|
||||
gap: 0.3rem;
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wire-next__date-selectors select {
|
||||
width: 100%;
|
||||
min-height: 2.35rem;
|
||||
padding: 0.45rem 0.65rem;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-sm);
|
||||
background: var(--wire-color-surface);
|
||||
color: var(--wire-color-text);
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.wire-next__date-done {
|
||||
background: var(--wire-field-color) !important;
|
||||
color: var(--wire-color-primary-contrast, #fff) !important;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.wire-next__calendar > header {
|
||||
display: grid;
|
||||
grid-template-columns: 2.25rem 1fr 2.25rem;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wire-next__calendar-grid button[data-outside="true"] {
|
||||
color: var(--wire-color-muted);
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.wire-next__calendar-grid button[data-today="true"] {
|
||||
box-shadow: inset 0 0 0 1px var(--wire-field-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,4 +31,67 @@ component DeviceFrame {
|
||||
<div class="wire-next__device-shell">{#if src || srcdoc}<iframe title="{frameTitle}" src="{src}" srcdoc="{srcdoc}" allow="{allow}"></iframe>{:else}<div class="wire-next__device-content"><slot /></div>{/if}</div>
|
||||
</section>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next--device-frame > header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.wire-next__device-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.wire-next__device-actions button {
|
||||
min-height: 2.25rem;
|
||||
padding-inline: 0.7rem;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-sm);
|
||||
background: var(--wire-color-surface-2);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.wire-next__device-shell {
|
||||
overflow: hidden;
|
||||
width: min(100%, 24rem);
|
||||
min-height: 28rem;
|
||||
margin-inline: auto;
|
||||
border: 0.65rem solid var(--wire-color-text);
|
||||
border-radius: 2rem;
|
||||
background: var(--wire-color-background);
|
||||
transition: width var(--wire-motion-normal) var(--wire-ease-standard);
|
||||
}
|
||||
|
||||
.wire-next--device-frame[data-device="tablet"] .wire-next__device-shell {
|
||||
width: min(100%, 42rem);
|
||||
}
|
||||
|
||||
.wire-next--device-frame[data-device="desktop"] .wire-next__device-shell {
|
||||
width: 100%;
|
||||
border-width: 0.4rem;
|
||||
border-radius: var(--wire-radius-md);
|
||||
}
|
||||
|
||||
.wire-next--device-frame[data-orientation="landscape"] .wire-next__device-shell {
|
||||
width: min(100%, 48rem);
|
||||
min-height: 20rem;
|
||||
}
|
||||
|
||||
.wire-next__device-shell :is(iframe, .wire-next__device-content) {
|
||||
width: 100%;
|
||||
min-height: inherit;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.wire-next--device-frame > header {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -52,4 +52,22 @@ size: string = "default"
|
||||
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
|
||||
</div>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next__file-control {
|
||||
position: relative;
|
||||
min-height: 2.75rem;
|
||||
padding: 0.65rem 0.85rem;
|
||||
border: 1px dashed var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-sm);
|
||||
background: var(--wire-color-surface);
|
||||
}
|
||||
|
||||
.wire-next__file-control input {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
inset: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -37,4 +37,39 @@ size: string = "default"
|
||||
<div class="wire-next__upload-actions">{#if currentStatus === "uploading"}<button type="button" @click="cancelUpload(event)">{cancelLabel}</button><button type="button" @click="completeUpload(event)">Complete</button>{/if}{#if currentStatus === "error" || currentStatus === "cancelled"}<button type="button" @click="retryUpload(event)">{retryLabel}</button>{/if}</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next--file-upload-progress {
|
||||
display: grid;
|
||||
width: min(100%, 36rem);
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-md);
|
||||
background: var(--wire-color-surface);
|
||||
box-shadow: var(--wire-shadow-1);
|
||||
}
|
||||
|
||||
.wire-next--file-upload-progress progress {
|
||||
width: 100%;
|
||||
height: 0.55rem;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
accent-color: var(--wire-component-color);
|
||||
}
|
||||
|
||||
.wire-next__upload-actions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.wire-next__upload-actions button {
|
||||
min-height: 2.25rem;
|
||||
padding-inline: 0.8rem;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-sm);
|
||||
background: var(--wire-color-surface-2);
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -285,4 +285,194 @@ component Footer {
|
||||
</div>
|
||||
</footer>
|
||||
}
|
||||
|
||||
style {
|
||||
/* --- Badge ---------------------------------------------------------------- */
|
||||
.wire-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.wire-badge--default {
|
||||
background: var(--wire-color-surface-2);
|
||||
color: var(--wire-color-text);
|
||||
}
|
||||
|
||||
/* Structured responsive footer */
|
||||
.wire-footer {
|
||||
width: 100%;
|
||||
color: var(--wire-color-text);
|
||||
background: var(--wire-color-surface);
|
||||
border-top: 1px solid var(--wire-color-border);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.wire-footer__grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(13rem, 1.2fr) minmax(0, 3fr) minmax(13rem, 1fr);
|
||||
width: min(100%, 90rem);
|
||||
margin-inline: auto;
|
||||
padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem);
|
||||
gap: clamp(1.5rem, 4vw, 3.5rem);
|
||||
}
|
||||
|
||||
.wire-footer--width-full .wire-footer__grid {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.wire-footer__pre:empty,
|
||||
.wire-footer__post:empty,
|
||||
.wire-footer__pre:not(:has(*)),
|
||||
.wire-footer__post:not(:has(*)) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wire-footer__pre,
|
||||
.wire-footer__post {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.wire-footer__pre strong,
|
||||
.wire-footer__post strong {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wire-footer__pre p,
|
||||
.wire-footer__post p {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.wire-footer__links {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--wire-footer-columns, 3), minmax(0, 1fr));
|
||||
align-content: start;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.wire-footer__column {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
align-content: start;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.wire-footer__column-links {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.wire-footer__heading {
|
||||
display: block;
|
||||
color: var(--wire-color-text);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wire-footer__link {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
min-height: 2rem;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.wire-footer__link:hover {
|
||||
color: var(--wire-component-color, var(--wire-color-primary));
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.2em;
|
||||
}
|
||||
|
||||
.wire-footer__bottom {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem clamp(1rem, 4vw, 3rem);
|
||||
color: var(--wire-color-muted);
|
||||
border-top: 1px solid var(--wire-color-border);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.wire-footer__bottom--slots {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.wire-footer__bottom--slots:not(
|
||||
:has(.wire-footer__copyright-left > *, .wire-footer__copyright-right > *)
|
||||
) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wire-footer__copyright {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wire-footer__copyright-left,
|
||||
.wire-footer__copyright-right {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.wire-footer__copyright-right {
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.wire-footer__copyright-left:empty,
|
||||
.wire-footer__copyright-right:empty,
|
||||
.wire-footer__copyright-left:not(:has(*)),
|
||||
.wire-footer__copyright-right:not(:has(*)) {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.wire-footer__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.wire-footer__links {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.wire-footer__links {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.wire-footer__bottom,
|
||||
.wire-footer__bottom--slots {
|
||||
grid-template-columns: 1fr;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.wire-footer__copyright-left,
|
||||
.wire-footer__copyright-right {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.wire-footer__links {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -51,4 +51,36 @@ component InputGroup {
|
||||
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
|
||||
</div>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next__input-group-control {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-sm);
|
||||
background: var(--wire-color-surface);
|
||||
}
|
||||
|
||||
.wire-next__input-group-control input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wire-next__input-addon,
|
||||
.wire-next__input-group-control button {
|
||||
padding: 0.7rem 0.85rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wire-next__input-group-control button {
|
||||
align-self: stretch;
|
||||
border: 0;
|
||||
background: var(--wire-field-color);
|
||||
color: var(--wire-color-primary-contrast, #fff);
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -114,4 +114,120 @@ component PinInput {
|
||||
>{validationMessage}</small>
|
||||
</fieldset>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next--pin-input {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
gap: 0.65rem;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: var(--wire-color-text);
|
||||
}
|
||||
|
||||
.wire-next__pin-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.wire-next__pin-heading legend {
|
||||
padding: 0;
|
||||
font-size: 0.82em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.wire-next__pin-clear {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: var(--wire-component-color);
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
font-size: 0.7em;
|
||||
font-weight: 750;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wire-next__pin-clear > span:first-child {
|
||||
width: 0.9rem;
|
||||
height: 0.9rem;
|
||||
}
|
||||
|
||||
.wire-next__pin-cells {
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
align-items: center;
|
||||
gap: clamp(0.35rem, 1.5vw, 0.65rem);
|
||||
overflow-x: auto;
|
||||
padding: 0.2rem;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.wire-next--pin-input .wire-next__pin-cells input {
|
||||
flex: 0 0 clamp(2.4rem, 8vw, 3.25rem);
|
||||
width: clamp(2.4rem, 8vw, 3.25rem);
|
||||
height: clamp(2.75rem, 9vw, 3.5rem);
|
||||
min-width: clamp(2.4rem, 8vw, 3.25rem);
|
||||
padding: 0;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-sm);
|
||||
color: var(--wire-color-text);
|
||||
background: var(--wire-color-bg);
|
||||
font: inherit;
|
||||
font-size: clamp(1rem, 3vw, 1.25rem);
|
||||
font-weight: 750;
|
||||
text-align: center;
|
||||
caret-color: var(--wire-component-color);
|
||||
transition:
|
||||
border-color var(--wire-motion-base) var(--wire-ease-standard),
|
||||
box-shadow var(--wire-motion-base) var(--wire-ease-standard),
|
||||
transform var(--wire-motion-fast) var(--wire-ease-standard);
|
||||
}
|
||||
|
||||
.wire-next--pin-input .wire-next__pin-cells input::placeholder {
|
||||
color: var(--wire-color-muted);
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.wire-next--pin-input .wire-next__pin-cells input:focus-visible {
|
||||
border-color: var(--wire-component-color);
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 18%, transparent);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.wire-next--pin-input .wire-next__pin-cells input:disabled,
|
||||
.wire-next--pin-input .wire-next__pin-cells input:read-only {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.wire-next__pin-separator {
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.wire-next--pin-input[data-complete="true"] .wire-next__pin-cells input {
|
||||
border-color: color-mix(in srgb, var(--wire-component-color) 72%, var(--wire-color-border));
|
||||
background: color-mix(in srgb, var(--wire-component-color) 7%, var(--wire-color-bg));
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.wire-next__pin-cells {
|
||||
gap: 0.3rem;
|
||||
}
|
||||
.wire-next--pin-input .wire-next__pin-cells input {
|
||||
flex-basis: min(2.7rem, 12vw);
|
||||
width: min(2.7rem, 12vw);
|
||||
min-width: min(2.7rem, 12vw);
|
||||
height: min(3rem, 14vw);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -98,4 +98,275 @@ component PortalDashboard {
|
||||
</div>
|
||||
</main>
|
||||
}
|
||||
|
||||
style {
|
||||
/* Reusable responsive portal dashboard */
|
||||
.wire-portal-dashboard {
|
||||
width: min(100%, 96rem);
|
||||
margin-inline: auto;
|
||||
color: var(--wire-color-text);
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__hero {
|
||||
display: flex;
|
||||
padding: clamp(1.25rem, 3vw, 2rem);
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: 1rem;
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 85% 0%,
|
||||
color-mix(in srgb, var(--wire-color-primary) 20%, transparent),
|
||||
transparent 34%
|
||||
),
|
||||
var(--wire-color-surface);
|
||||
box-shadow: var(--wire-shadow-sm);
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__eyebrow,
|
||||
.wire-portal-dashboard__panel-heading small {
|
||||
color: var(--wire-color-primary);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.09em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__hero h1 {
|
||||
margin: 0.35rem 0 0;
|
||||
font-size: clamp(1.4rem, 3vw, 2.25rem);
|
||||
font-weight: 650;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__hero p {
|
||||
max-width: 48rem;
|
||||
margin: 0.5rem 0 0;
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
margin-top: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__metric {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
padding: 1rem;
|
||||
align-items: center;
|
||||
gap: 0.85rem;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: 0.85rem;
|
||||
background: var(--wire-color-surface);
|
||||
box-shadow: var(--wire-shadow-sm);
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__metric-icon {
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
flex: none;
|
||||
padding: 0.55rem;
|
||||
border-radius: 0.7rem;
|
||||
color: var(--wire-color-primary);
|
||||
background: color-mix(in srgb, var(--wire-color-primary) 12%, transparent);
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__metric div {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__metric small,
|
||||
.wire-portal-dashboard__metric span {
|
||||
overflow: hidden;
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.7rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__metric strong {
|
||||
margin-block: 0.1rem;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
|
||||
margin-top: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__panel {
|
||||
min-width: 0;
|
||||
padding: 1.1rem;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: 0.9rem;
|
||||
background: var(--wire-color-surface);
|
||||
box-shadow: var(--wire-shadow-sm);
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__panel--actions {
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__panel-heading {
|
||||
display: flex;
|
||||
margin-bottom: 0.9rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__panel-heading h2 {
|
||||
margin: 0.2rem 0 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__actions {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__actions a,
|
||||
.wire-portal-dashboard__list a {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
padding: 0.8rem;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: 0.7rem;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition:
|
||||
border-color 150ms ease,
|
||||
background 150ms ease,
|
||||
transform 150ms ease;
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__actions a:hover,
|
||||
.wire-portal-dashboard__list a:hover {
|
||||
border-color: color-mix(in srgb, var(--wire-color-primary) 45%, var(--wire-color-border));
|
||||
background: var(--wire-color-surface-2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__actions a > span:first-child {
|
||||
width: 1.15rem;
|
||||
height: 1.15rem;
|
||||
flex: none;
|
||||
color: var(--wire-color-primary);
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__actions a > span:nth-child(2),
|
||||
.wire-portal-dashboard__list a > span:nth-child(2) {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__actions a > span:last-child {
|
||||
width: 0.9rem;
|
||||
height: 0.9rem;
|
||||
color: var(--wire-color-muted);
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__actions strong,
|
||||
.wire-portal-dashboard__list strong,
|
||||
.wire-portal-dashboard__timeline strong {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 550;
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__actions small,
|
||||
.wire-portal-dashboard__list small,
|
||||
.wire-portal-dashboard__timeline p,
|
||||
.wire-portal-dashboard__timeline small {
|
||||
margin: 0.15rem 0 0;
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.7rem;
|
||||
font-style: normal;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__list {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__list a {
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--wire-color-border);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__status {
|
||||
width: 0.55rem;
|
||||
height: 0.55rem;
|
||||
flex: none;
|
||||
border-radius: 999px;
|
||||
background: var(--wire-color-muted);
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__list em {
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.7rem;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__timeline {
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__timeline article {
|
||||
display: flex;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__timeline article > span {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-top: 0.15rem;
|
||||
flex: none;
|
||||
color: var(--wire-color-primary);
|
||||
}
|
||||
|
||||
.wire-portal-dashboard__timeline p {
|
||||
margin-block: 0.15rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.wire-portal-dashboard__metrics {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.wire-portal-dashboard__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.wire-portal-dashboard__panel--actions {
|
||||
grid-row: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.wire-portal-dashboard__hero {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
.wire-portal-dashboard__metrics,
|
||||
.wire-portal-dashboard__actions {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -82,4 +82,172 @@ size: string = "default"
|
||||
</details>
|
||||
</div>
|
||||
}
|
||||
|
||||
style {
|
||||
/* Portal display, accent, and language preferences */
|
||||
.wire-preferences {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.wire-preferences__menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wire-preferences__menu > summary {
|
||||
display: inline-flex;
|
||||
min-width: 2.25rem;
|
||||
min-height: 2.25rem;
|
||||
padding: 0.45rem 0.6rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.4rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.6rem;
|
||||
color: var(--wire-color-muted);
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.wire-preferences__menu > summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wire-preferences__menu > summary:hover,
|
||||
.wire-preferences__menu[open] > summary {
|
||||
color: var(--wire-color-text);
|
||||
border-color: var(--wire-color-border);
|
||||
background: var(--wire-color-surface);
|
||||
}
|
||||
|
||||
.wire-preferences__menu > summary > span:first-child {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.wire-preferences__current-language {
|
||||
min-width: 1.25rem;
|
||||
color: var(--wire-color-text);
|
||||
font-size: 0.625rem;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.wire-preferences__panel {
|
||||
position: absolute;
|
||||
z-index: 80;
|
||||
top: calc(100% + 0.5rem);
|
||||
right: 0;
|
||||
display: grid;
|
||||
width: max-content;
|
||||
min-width: 11rem;
|
||||
max-width: min(22rem, calc(100vw - 2rem));
|
||||
max-height: min(28rem, calc(100dvh - 2rem));
|
||||
overflow-y: auto;
|
||||
padding: 0.75rem;
|
||||
gap: 0.6rem;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: 0.8rem;
|
||||
color: var(--wire-color-text);
|
||||
background: var(--wire-color-surface);
|
||||
box-shadow: var(--wire-shadow-lg, 0 18px 48px rgb(0 0 0 / 0.18));
|
||||
animation: wire-component-enter 160ms ease both;
|
||||
}
|
||||
|
||||
.wire-preferences__panel > strong {
|
||||
padding-inline: 0.25rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.wire-preferences__options {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.wire-preferences__panel button {
|
||||
display: inline-flex;
|
||||
min-height: 2.25rem;
|
||||
padding: 0.5rem 0.65rem;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
border-radius: 0.55rem;
|
||||
color: var(--wire-color-text);
|
||||
background: var(--wire-color-surface-2);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.wire-preferences__panel button:hover {
|
||||
outline: 2px solid color-mix(in srgb, var(--wire-color-primary) 40%, transparent);
|
||||
}
|
||||
|
||||
.wire-preferences__panel button[aria-pressed="true"] {
|
||||
color: var(--wire-color-primary);
|
||||
background: color-mix(in srgb, var(--wire-color-primary) 12%, var(--wire-color-surface));
|
||||
outline: 1px solid color-mix(in srgb, var(--wire-color-primary) 55%, transparent);
|
||||
}
|
||||
|
||||
.wire-preferences__swatches {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 2rem);
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.wire-preferences__swatches button {
|
||||
width: 2rem;
|
||||
min-height: 2rem;
|
||||
padding: 0;
|
||||
border: 3px solid var(--wire-color-surface);
|
||||
border-radius: 999px;
|
||||
background: var(--wire-preference-swatch);
|
||||
box-shadow: 0 0 0 1px var(--wire-color-border);
|
||||
}
|
||||
|
||||
.wire-preferences__swatches button[aria-pressed="true"] {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--wire-color-surface),
|
||||
0 0 0 4px var(--wire-color-primary);
|
||||
}
|
||||
|
||||
.wire-preferences__panel--language button {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.wire-preferences__panel--language button span {
|
||||
display: grid;
|
||||
width: 1.65rem;
|
||||
height: 1.65rem;
|
||||
place-items: center;
|
||||
border-radius: 0.45rem;
|
||||
background: var(--wire-color-surface-2);
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.wire-preferences__panel--language button[aria-pressed="true"]::after {
|
||||
width: 0.9rem;
|
||||
height: 0.9rem;
|
||||
margin-left: auto;
|
||||
content: "";
|
||||
background: currentColor;
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5 12 4 4L19 6'/%3E%3C/svg%3E")
|
||||
center / contain no-repeat;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.wire-preferences__panel {
|
||||
position: fixed;
|
||||
top: auto;
|
||||
right: 1rem;
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -68,4 +68,141 @@ component RangeSlider {
|
||||
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
|
||||
</div>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next__range-track {
|
||||
display: grid;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.wire-next__range-control input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
accent-color: var(--wire-field-color);
|
||||
}
|
||||
|
||||
.wire-next__custom-slider {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 1.5rem;
|
||||
cursor: pointer;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.wire-next__custom-slider::before,
|
||||
.wire-next__slider-fill {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
height: 0.4rem;
|
||||
border-radius: 999px;
|
||||
transform: translateY(-50%);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.wire-next__custom-slider::before {
|
||||
right: 0;
|
||||
left: 0;
|
||||
background: var(--wire-color-surface-2);
|
||||
box-shadow: inset 0 0 0 1px var(--wire-color-border);
|
||||
}
|
||||
|
||||
.wire-next__slider-fill {
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
width: var(--wire-range-progress);
|
||||
background: var(--wire-field-color);
|
||||
}
|
||||
|
||||
.wire-next__slider-thumb {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 50%;
|
||||
left: var(--wire-range-progress);
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border: 3px solid var(--wire-field-color);
|
||||
border-radius: 50%;
|
||||
background: var(--wire-color-surface);
|
||||
box-shadow: var(--wire-shadow-1);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.wire-next__custom-slider:focus-visible {
|
||||
outline: 3px solid color-mix(in srgb, var(--wire-field-color) 28%, transparent);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.wire-next__slider-marks button {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 50%;
|
||||
width: 0.55rem;
|
||||
height: 0.55rem;
|
||||
padding: 0;
|
||||
border: 2px solid var(--wire-color-surface);
|
||||
border-radius: 50%;
|
||||
background: var(--wire-color-muted);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.wire-next__range-control[data-show-steps="true"] input {
|
||||
background-image: repeating-linear-gradient(
|
||||
90deg,
|
||||
transparent 0,
|
||||
transparent calc(10% - 1px),
|
||||
var(--wire-color-border) calc(10% - 1px),
|
||||
var(--wire-color-border) 10%
|
||||
);
|
||||
}
|
||||
|
||||
.wire-next__range-bounds {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.78em;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.wire-next__range-bounds span:nth-child(2) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wire-next__range-bounds span:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.wire-next__range-control output {
|
||||
min-width: 3ch;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.wire-next__range-stepper {
|
||||
display: inline-grid;
|
||||
width: 2.35rem;
|
||||
height: 2.35rem;
|
||||
flex: 0 0 auto;
|
||||
place-items: center;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: 50%;
|
||||
background: var(--wire-color-surface);
|
||||
color: var(--wire-color-text);
|
||||
font: inherit;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wire-next__range-stepper:hover:not(:disabled) {
|
||||
border-color: var(--wire-field-color);
|
||||
color: var(--wire-field-color);
|
||||
}
|
||||
|
||||
.wire-next__range-stepper:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.45;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -215,4 +215,197 @@ component StrongPassword {
|
||||
<small id="{name}-validation" class="wire-next__validation" data-error="{name}">{validationMessage}</small>
|
||||
</div>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next--strong-password {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
gap: 0.6rem;
|
||||
color: var(--wire-color-text);
|
||||
}
|
||||
|
||||
.wire-next--strong-password > label {
|
||||
font-size: 0.82em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.wire-next__strong-password-anchor {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wire-next--strong-password input {
|
||||
width: 100%;
|
||||
min-height: 2.75em;
|
||||
padding: 0.68em 0.85em;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-sm);
|
||||
outline: 0;
|
||||
color: var(--wire-color-text);
|
||||
background: var(--wire-color-surface);
|
||||
font: inherit;
|
||||
transition:
|
||||
border-color 160ms ease,
|
||||
box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.wire-next--strong-password input:focus-visible {
|
||||
border-color: var(--wire-component-color);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 16%, transparent);
|
||||
}
|
||||
|
||||
.wire-next__strong-password-details {
|
||||
display: grid;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.wire-next__strong-password-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.wire-next__strong-password-summary strong {
|
||||
color: var(--wire-color-text);
|
||||
}
|
||||
|
||||
.wire-next__strong-password-meter {
|
||||
width: 100%;
|
||||
height: 0.42rem;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--wire-color-border) 72%, transparent);
|
||||
}
|
||||
|
||||
.wire-next__strong-password-meter > span {
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: var(--wire-color-danger);
|
||||
transition:
|
||||
width 180ms ease,
|
||||
background-color 180ms ease;
|
||||
}
|
||||
|
||||
.wire-next--strong-password[data-strength="fair"] .wire-next__strong-password-meter > span {
|
||||
background: var(--wire-color-warning);
|
||||
}
|
||||
|
||||
.wire-next--strong-password[data-strength="good"] .wire-next__strong-password-meter > span {
|
||||
background: var(--wire-component-color);
|
||||
}
|
||||
|
||||
.wire-next--strong-password[data-strength="strong"] .wire-next__strong-password-meter > span {
|
||||
background: var(--wire-color-success);
|
||||
}
|
||||
|
||||
.wire-next__strong-password-requirements {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.45rem 1rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.wire-next__strong-password-requirements li {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: flex-start;
|
||||
gap: 0.45rem;
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.72em;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.wire-next__strong-password-requirements li > span {
|
||||
position: relative;
|
||||
width: 0.9rem;
|
||||
height: 0.9rem;
|
||||
flex: 0 0 auto;
|
||||
margin-top: 0.08rem;
|
||||
border: 1px solid currentColor;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.wire-next__strong-password-requirements li > span::after {
|
||||
position: absolute;
|
||||
top: 0.12rem;
|
||||
left: 0.29rem;
|
||||
width: 0.22rem;
|
||||
height: 0.42rem;
|
||||
border: solid var(--wire-color-surface);
|
||||
border-width: 0 0.1rem 0.1rem 0;
|
||||
content: "";
|
||||
opacity: 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.wire-next__strong-password-requirements li[data-met="true"] {
|
||||
color: var(--wire-color-success);
|
||||
}
|
||||
|
||||
.wire-next__strong-password-requirements li[data-met="true"] > span {
|
||||
border-color: var(--wire-color-success);
|
||||
background: var(--wire-color-success);
|
||||
}
|
||||
|
||||
.wire-next__strong-password-requirements li[data-met="true"] > span::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.wire-next__strong-password-details > small {
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.7em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.wire-next__strong-password-popover {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.7rem);
|
||||
left: 0;
|
||||
z-index: 30;
|
||||
width: min(28rem, calc(100vw - 2rem));
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
background: var(--wire-color-surface);
|
||||
box-shadow: var(--wire-shadow-2);
|
||||
transform: translateY(-0.35rem);
|
||||
transition:
|
||||
opacity 140ms ease,
|
||||
transform 140ms ease,
|
||||
visibility 140ms ease;
|
||||
}
|
||||
|
||||
.wire-next__strong-password-popover[data-open="true"] {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.wire-next__strong-password-popover-arrow {
|
||||
position: absolute;
|
||||
top: -0.38rem;
|
||||
left: 1.25rem;
|
||||
width: 0.7rem;
|
||||
height: 0.7rem;
|
||||
border-top: 1px solid var(--wire-color-border);
|
||||
border-left: 1px solid var(--wire-color-border);
|
||||
background: var(--wire-color-surface);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.wire-next__strong-password-requirements {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -63,4 +63,30 @@ size: string = "default"
|
||||
<small class="wire-next__field-error" data-error="{name}">{error}</small>
|
||||
</div>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next__time-panel {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.wire-next__time-options {
|
||||
display: grid;
|
||||
max-height: 12rem;
|
||||
margin-top: 0.4rem;
|
||||
overflow-y: auto;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.wire-next__time-done {
|
||||
align-self: end;
|
||||
background: var(--wire-field-color) !important;
|
||||
color: var(--wire-color-primary-contrast, #fff) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.wire-next__time-panel {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -280,4 +280,182 @@ component ToggleCount {
|
||||
{/if}
|
||||
</section>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next--toggle-count {
|
||||
--wire-toggle-count-accent: var(--wire-component-color);
|
||||
display: grid;
|
||||
width: fit-content;
|
||||
gap: 0.75rem;
|
||||
color: var(--wire-color-text);
|
||||
}
|
||||
|
||||
.wire-next--toggle-count-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wire-next__toggle-count-control {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.wire-next__toggle-count-segmented {
|
||||
display: inline-flex;
|
||||
gap: 0.2rem;
|
||||
padding: 0.2rem;
|
||||
border-radius: calc(var(--wire-radius-sm) + 0.15rem);
|
||||
background: var(--wire-color-surface-2);
|
||||
box-shadow: inset 0 0 0 1px var(--wire-color-border);
|
||||
}
|
||||
|
||||
.wire-next__toggle-count-segmented button {
|
||||
min-height: 2.35rem;
|
||||
padding: 0.45rem 0.8rem;
|
||||
border: 0;
|
||||
border-radius: var(--wire-radius-sm);
|
||||
background: transparent;
|
||||
color: var(--wire-color-muted);
|
||||
font: inherit;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wire-next__toggle-count-segmented button[aria-pressed="true"] {
|
||||
background: var(--wire-color-surface);
|
||||
color: var(--wire-color-text);
|
||||
box-shadow:
|
||||
var(--wire-shadow-1),
|
||||
inset 0 -2px var(--wire-toggle-count-accent);
|
||||
}
|
||||
|
||||
.wire-next__toggle-count-segmented button:focus-visible,
|
||||
.wire-next__toggle-count-switch:focus-visible {
|
||||
outline: 2px solid var(--wire-toggle-count-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.wire-next__toggle-count-segmented button:disabled,
|
||||
.wire-next__toggle-count-switch:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.wire-next__toggle-count-control:has(.wire-next__toggle-count-switch) {
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.wire-next__toggle-count-control > span {
|
||||
color: var(--wire-color-muted);
|
||||
}
|
||||
|
||||
.wire-next__toggle-count-control > span[data-selected="true"] {
|
||||
color: var(--wire-color-text);
|
||||
}
|
||||
|
||||
.wire-next__toggle-count-switch {
|
||||
position: relative;
|
||||
width: 2.65rem;
|
||||
height: 1.45rem;
|
||||
padding: 0.15rem;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: 999px;
|
||||
background: var(--wire-color-surface-2);
|
||||
cursor: pointer;
|
||||
transition: background-color var(--wire-motion-fast) var(--wire-ease-standard);
|
||||
}
|
||||
|
||||
.wire-next__toggle-count-switch > span {
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
background: var(--wire-color-text);
|
||||
box-shadow: var(--wire-shadow-1);
|
||||
transition: transform var(--wire-motion-fast) var(--wire-ease-standard);
|
||||
}
|
||||
|
||||
.wire-next__toggle-count-switch[aria-checked="true"] {
|
||||
border-color: var(--wire-toggle-count-accent);
|
||||
background: var(--wire-toggle-count-accent);
|
||||
}
|
||||
|
||||
.wire-next__toggle-count-switch[aria-checked="true"] > span {
|
||||
background: white;
|
||||
transform: translateX(1.15rem);
|
||||
}
|
||||
|
||||
.wire-next__toggle-count-items {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-md);
|
||||
background: var(--wire-color-surface);
|
||||
}
|
||||
|
||||
.wire-next__toggle-count-items article {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 0.35rem;
|
||||
min-width: 0;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.wire-next__toggle-count-items article + article {
|
||||
border-left: 1px solid var(--wire-color-border);
|
||||
}
|
||||
|
||||
.wire-next__toggle-count-items article > span {
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wire-next__toggle-count-items strong {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.2rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.wire-next__toggle-count-items [data-toggle-count-value] {
|
||||
min-width: 2ch;
|
||||
font-variant-numeric: tabular-nums;
|
||||
transition:
|
||||
color var(--wire-motion-fast) var(--wire-ease-standard),
|
||||
transform var(--wire-motion-fast) var(--wire-ease-standard);
|
||||
}
|
||||
|
||||
.wire-next__toggle-count-items strong small {
|
||||
color: inherit;
|
||||
font-size: 0.65em;
|
||||
}
|
||||
|
||||
.wire-next__toggle-count-items article > small {
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
@media (max-width: 36rem) {
|
||||
.wire-next__toggle-count-control {
|
||||
justify-content: center;
|
||||
}
|
||||
.wire-next__toggle-count-items {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.wire-next__toggle-count-items article + article {
|
||||
border-top: 1px solid var(--wire-color-border);
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.wire-next__toggle-count-items [data-toggle-count-value] {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -153,4 +153,140 @@ component TogglePassword {
|
||||
>{validationMessage}</small>
|
||||
</fieldset>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next--toggle-password {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
box-sizing: border-box;
|
||||
gap: 0.45rem;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.wire-next--toggle-password > label {
|
||||
color: var(--wire-color-text);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wire-next__password-fields {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.wire-next__password-field {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.wire-next__password-field > label {
|
||||
color: var(--wire-color-text);
|
||||
font-size: 0.82em;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.wire-next__password-control {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wire-next__password-control > input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 2.75em;
|
||||
padding: 0.65em 3em 0.65em 0.8em;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-sm);
|
||||
outline: 0;
|
||||
color: var(--wire-color-text);
|
||||
background: var(--wire-color-bg);
|
||||
font: inherit;
|
||||
font-size: 0.8125rem;
|
||||
transition:
|
||||
border-color var(--wire-motion-base) var(--wire-ease-standard),
|
||||
box-shadow var(--wire-motion-base) var(--wire-ease-standard);
|
||||
}
|
||||
|
||||
.wire-next__password-control > input:focus-visible {
|
||||
border-color: var(--wire-component-color);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 18%, transparent);
|
||||
}
|
||||
|
||||
.wire-next__password-toggle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0.45em;
|
||||
display: grid;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
padding: 0;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: calc(var(--wire-radius-sm) * 0.72);
|
||||
color: var(--wire-color-muted);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.wire-next__password-toggle:hover,
|
||||
.wire-next__password-toggle:focus-visible {
|
||||
color: var(--wire-component-color);
|
||||
background: color-mix(in srgb, var(--wire-component-color) 10%, transparent);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.wire-next__password-icon {
|
||||
display: block;
|
||||
width: 1.05em;
|
||||
height: 1.05em;
|
||||
background: currentColor;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
}
|
||||
|
||||
.wire-next__password-icon--show {
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.06 12.35a1 1 0 0 1 0-.7C3.7 7.6 7.64 5 12 5c4.36 0 8.3 2.6 9.94 6.65a1 1 0 0 1 0 .7C20.3 16.4 16.36 19 12 19c-4.36 0-8.3-2.6-9.94-6.65Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.wire-next__password-toggle[aria-pressed="true"]::after {
|
||||
position: absolute;
|
||||
width: 1.25em;
|
||||
height: 0.12em;
|
||||
border-radius: 999px;
|
||||
background: currentColor;
|
||||
content: "";
|
||||
transform: rotate(45deg);
|
||||
box-shadow: 0 0 0 1px var(--wire-color-bg);
|
||||
}
|
||||
|
||||
.wire-next__password-checkbox {
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.78em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wire-next__password-checkbox > input {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: 0;
|
||||
accent-color: var(--wire-component-color);
|
||||
}
|
||||
|
||||
.wire-next--toggle-password > small {
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.72em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -143,4 +143,201 @@ component Alert {
|
||||
{/if}
|
||||
</section>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next--alert {
|
||||
--wire-alert-color: var(--wire-component-color);
|
||||
--wire-alert-soft: color-mix(in srgb, var(--wire-alert-color) 16%, var(--wire-color-surface));
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
gap: 0.8rem;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--wire-radius, 0.75rem);
|
||||
color: var(--wire-color-text);
|
||||
}
|
||||
|
||||
.wire-next--alert[data-radius="none"] {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.wire-next--alert[data-radius="sm"] {
|
||||
border-radius: var(--wire-radius-sm, 0.375rem);
|
||||
}
|
||||
|
||||
.wire-next--alert[data-radius="lg"] {
|
||||
border-radius: calc(var(--wire-radius, 0.75rem) * 1.35);
|
||||
}
|
||||
|
||||
.wire-next--alert[data-radius="xl"] {
|
||||
border-radius: calc(var(--wire-radius, 0.75rem) * 1.75);
|
||||
}
|
||||
|
||||
.wire-next--alert[data-shadow="none"] {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wire-next--alert[data-shadow="sm"] {
|
||||
box-shadow: 0 6px 16px color-mix(in srgb, #000 14%, transparent);
|
||||
}
|
||||
|
||||
.wire-next--alert[data-shadow="md"] {
|
||||
box-shadow:
|
||||
0 2px 6px color-mix(in srgb, #000 10%, transparent),
|
||||
0 12px 28px color-mix(in srgb, #000 18%, transparent);
|
||||
}
|
||||
|
||||
.wire-next--alert[data-shadow="lg"] {
|
||||
box-shadow:
|
||||
0 4px 10px color-mix(in srgb, #000 12%, transparent),
|
||||
0 20px 48px color-mix(in srgb, #000 24%, transparent);
|
||||
}
|
||||
|
||||
.wire-next--alert[data-color="secondary"] {
|
||||
--wire-alert-color: #737373;
|
||||
}
|
||||
|
||||
.wire-next--alert[data-color="success"] {
|
||||
--wire-alert-color: #0f9f8f;
|
||||
}
|
||||
|
||||
.wire-next--alert[data-color="danger"] {
|
||||
--wire-alert-color: #dc3545;
|
||||
}
|
||||
|
||||
.wire-next--alert[data-color="warning"] {
|
||||
--wire-alert-color: #eab308;
|
||||
}
|
||||
|
||||
.wire-next--alert[data-color="info"] {
|
||||
--wire-alert-color: #2563eb;
|
||||
}
|
||||
|
||||
.wire-next--alert[data-color="dark"] {
|
||||
--wire-alert-color: #27272a;
|
||||
}
|
||||
|
||||
.wire-next--alert[data-color="light"] {
|
||||
--wire-alert-color: #f4f4f5;
|
||||
}
|
||||
|
||||
.wire-next--alert-compact {
|
||||
padding: 0.75rem 0.9rem;
|
||||
}
|
||||
|
||||
.wire-next--alert-compact:not(:has(.wire-next__alert-icon)):not(:has(.wire-next__alert-dismiss)) {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.wire-next--alert-compact .wire-next__alert-body {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wire-next--alert-compact .wire-next__alert-title {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.wire-next--alert-compact .wire-next__alert-body > p {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.wire-next__alert-icon {
|
||||
display: inline-grid;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
place-items: center;
|
||||
margin-top: 0.05rem;
|
||||
color: var(--wire-alert-color);
|
||||
}
|
||||
|
||||
.wire-next__alert-icon > span {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.wire-next__alert-body {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.wire-next__alert-title {
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.wire-next__alert-body > p,
|
||||
.wire-next__alert-body li {
|
||||
color: inherit;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.wire-next__alert-body > ul {
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
margin: 0.15rem 0 0;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.wire-next__alert-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem 1rem;
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
.wire-next__alert-actions a {
|
||||
color: var(--wire-alert-color);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.wire-next__alert-actions a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.wire-next__alert-actions a[data-variant="action"] {
|
||||
padding: 0.35rem 0.6rem;
|
||||
border-radius: var(--wire-radius-sm);
|
||||
background: var(--wire-alert-color);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.wire-next__alert-dismiss {
|
||||
display: inline-grid;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
place-items: center;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: var(--wire-radius-sm);
|
||||
background: transparent;
|
||||
color: currentColor;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wire-next__alert-dismiss:hover {
|
||||
background: color-mix(in srgb, currentColor 10%, transparent);
|
||||
}
|
||||
|
||||
.wire-next__alert-dismiss:focus-visible {
|
||||
outline: 2px solid currentColor;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 36rem) {
|
||||
.wire-next--alert {
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
}
|
||||
.wire-next__alert-dismiss {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -87,4 +87,265 @@ src: string = ""
|
||||
{/if}
|
||||
</span>
|
||||
}
|
||||
|
||||
style {
|
||||
/* --- Avatar -------------------------------------------------------------- */
|
||||
.wire-next--avatar {
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wire-next--avatar-media {
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.wire-next__avatar-wrap {
|
||||
--wire-avatar-size: 3rem;
|
||||
--wire-avatar-color: var(--wire-color-primary);
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
width: var(--wire-avatar-size);
|
||||
height: var(--wire-avatar-size);
|
||||
flex: none;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.wire-next__avatar-wrap[data-size="xs"] {
|
||||
--wire-avatar-size: 1.75rem;
|
||||
}
|
||||
|
||||
.wire-next__avatar-wrap[data-size="sm"] {
|
||||
--wire-avatar-size: 2.25rem;
|
||||
}
|
||||
|
||||
.wire-next__avatar-wrap[data-size="md"],
|
||||
.wire-next__avatar-wrap[data-size="default"] {
|
||||
--wire-avatar-size: 3rem;
|
||||
}
|
||||
|
||||
.wire-next__avatar-wrap[data-size="lg"] {
|
||||
--wire-avatar-size: 4rem;
|
||||
}
|
||||
|
||||
.wire-next__avatar-wrap[data-size="xl"] {
|
||||
--wire-avatar-size: 5rem;
|
||||
}
|
||||
|
||||
.wire-next__avatar-wrap[data-color="secondary"] {
|
||||
--wire-avatar-color: #737373;
|
||||
}
|
||||
|
||||
.wire-next__avatar-wrap[data-color="success"] {
|
||||
--wire-avatar-color: var(--wire-color-success);
|
||||
}
|
||||
|
||||
.wire-next__avatar-wrap[data-color="info"] {
|
||||
--wire-avatar-color: var(--wire-color-info);
|
||||
}
|
||||
|
||||
.wire-next__avatar-wrap[data-color="danger"] {
|
||||
--wire-avatar-color: var(--wire-color-danger);
|
||||
}
|
||||
|
||||
.wire-next__avatar-wrap[data-color="warning"] {
|
||||
--wire-avatar-color: var(--wire-color-warning);
|
||||
}
|
||||
|
||||
.wire-next__avatar-wrap[data-color="light"] {
|
||||
--wire-avatar-color: #f4f4f5;
|
||||
}
|
||||
|
||||
.wire-next__avatar-wrap[data-color="dark"] {
|
||||
--wire-avatar-color: #27272a;
|
||||
}
|
||||
|
||||
.wire-next__avatar {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
place-items: center;
|
||||
color: white;
|
||||
border: 1px solid color-mix(in srgb, var(--wire-avatar-color) 58%, var(--wire-color-border));
|
||||
border-radius: inherit;
|
||||
background: var(--wire-avatar-color);
|
||||
box-shadow:
|
||||
0 0 0 2px var(--wire-color-bg),
|
||||
0 5px 14px rgb(0 0 0 / 0.16);
|
||||
}
|
||||
|
||||
.wire-next__avatar-wrap[data-shape="rounded"] {
|
||||
border-radius: calc(var(--wire-radius-sm, 0.5rem) * 0.72);
|
||||
}
|
||||
|
||||
.wire-next__avatar-wrap[data-shape="square"] {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.wire-next__avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.wire-next__avatar-initials {
|
||||
font-size: calc(var(--wire-avatar-size) * 0.32);
|
||||
font-weight: 750;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.wire-next__avatar-placeholder {
|
||||
width: 54%;
|
||||
height: 54%;
|
||||
color: currentColor;
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.wire-next__avatar-wrap[data-variant="soft"] .wire-next__avatar {
|
||||
color: var(--wire-avatar-color);
|
||||
border-color: transparent;
|
||||
background: color-mix(in srgb, var(--wire-avatar-color) 15%, var(--wire-color-surface));
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wire-next__avatar-wrap[data-variant="outline"] .wire-next__avatar {
|
||||
color: var(--wire-avatar-color);
|
||||
border-color: var(--wire-avatar-color);
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wire-next__avatar-wrap[data-variant="white"] .wire-next__avatar {
|
||||
color: var(--wire-color-text);
|
||||
border-color: var(--wire-color-border);
|
||||
background: var(--wire-color-surface);
|
||||
box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
|
||||
}
|
||||
|
||||
.wire-next__avatar-status {
|
||||
position: absolute;
|
||||
right: -0.04rem;
|
||||
bottom: -0.04rem;
|
||||
z-index: 2;
|
||||
width: max(0.58rem, calc(var(--wire-avatar-size) * 0.24));
|
||||
height: max(0.58rem, calc(var(--wire-avatar-size) * 0.24));
|
||||
border: 2px solid var(--wire-color-bg);
|
||||
border-radius: 999px;
|
||||
background: var(--wire-color-muted);
|
||||
}
|
||||
|
||||
.wire-next__avatar-wrap[data-status-position="top"] .wire-next__avatar-status {
|
||||
top: -0.04rem;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.wire-next__avatar-status[data-status="online"],
|
||||
.wire-next__avatar-status[data-status="success"] {
|
||||
background: #14cba8;
|
||||
}
|
||||
|
||||
.wire-next__avatar-status[data-status="busy"],
|
||||
.wire-next__avatar-status[data-status="danger"] {
|
||||
background: #fb5b68;
|
||||
}
|
||||
|
||||
.wire-next__avatar-status[data-status="away"],
|
||||
.wire-next__avatar-status[data-status="warning"] {
|
||||
background: #ffc400;
|
||||
}
|
||||
|
||||
.wire-next__avatar-badge {
|
||||
position: absolute;
|
||||
right: -0.25rem;
|
||||
bottom: -0.25rem;
|
||||
z-index: 3;
|
||||
display: grid;
|
||||
width: max(1rem, calc(var(--wire-avatar-size) * 0.42));
|
||||
height: max(1rem, calc(var(--wire-avatar-size) * 0.42));
|
||||
place-items: center;
|
||||
color: white;
|
||||
border: 2px solid var(--wire-color-bg);
|
||||
border-radius: 999px;
|
||||
background: #27272a;
|
||||
box-shadow: 0 4px 10px rgb(0 0 0 / 0.22);
|
||||
}
|
||||
|
||||
.wire-next__avatar-badge > span {
|
||||
width: 62%;
|
||||
height: 62%;
|
||||
}
|
||||
|
||||
.wire-next__avatar-badge--text {
|
||||
font-size: calc(var(--wire-avatar-size) * 0.18);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.wire-next__avatar-tooltip {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: calc(100% + 0.65rem);
|
||||
z-index: 20;
|
||||
width: max-content;
|
||||
max-width: 15rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
color: var(--wire-color-bg);
|
||||
border-radius: 0.4rem;
|
||||
background: var(--wire-color-text);
|
||||
box-shadow: 0 8px 22px rgb(0 0 0 / 0.2);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 650;
|
||||
line-height: 1.25;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 0.25rem);
|
||||
transition:
|
||||
opacity var(--wire-motion-fast) var(--wire-ease-standard),
|
||||
transform var(--wire-motion-fast) var(--wire-ease-standard);
|
||||
}
|
||||
|
||||
.wire-next__avatar-tooltip::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
border: 0.3rem solid transparent;
|
||||
border-top-color: var(--wire-color-text);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.wire-next__avatar-wrap:hover .wire-next__avatar-tooltip,
|
||||
.wire-next__avatar-wrap:focus-visible .wire-next__avatar-tooltip {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.wire-next__avatar-wrap:focus-visible {
|
||||
outline: 2px solid var(--wire-avatar-color);
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
.wire-next__avatar-copy {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.wire-next__avatar-copy strong {
|
||||
color: var(--wire-color-text);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.wire-next__avatar-copy > span {
|
||||
overflow: hidden;
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.78rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -100,4 +100,244 @@ component Badge {
|
||||
</span>
|
||||
</span>
|
||||
}
|
||||
|
||||
style {
|
||||
/* --- Badge --------------------------------------------------------------- */
|
||||
.wire-next--badge-root {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.wire-next__badge {
|
||||
--wire-badge-color: var(--wire-color-primary);
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: inline-flex;
|
||||
min-width: 0;
|
||||
min-height: 1.65rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.35rem;
|
||||
max-width: var(--wire-badge-max-width);
|
||||
padding: 0.25rem 0.6rem;
|
||||
color: white;
|
||||
border: 1px solid var(--wire-badge-color);
|
||||
border-radius: 999px;
|
||||
background: var(--wire-badge-color);
|
||||
box-shadow: 0 4px 12px color-mix(in srgb, var(--wire-badge-color) 18%, transparent);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 750;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wire-next__badge[data-size="xs"] {
|
||||
min-height: 1.25rem;
|
||||
padding: 0.15rem 0.4rem;
|
||||
font-size: 0.625rem;
|
||||
}
|
||||
|
||||
.wire-next__badge[data-size="sm"] {
|
||||
min-height: 1.45rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
font-size: 0.6875rem;
|
||||
}
|
||||
|
||||
.wire-next__badge[data-size="lg"] {
|
||||
min-height: 2rem;
|
||||
padding: 0.35rem 0.75rem;
|
||||
font-size: 0.825rem;
|
||||
}
|
||||
|
||||
.wire-next__badge[data-color="secondary"] {
|
||||
--wire-badge-color: #737373;
|
||||
}
|
||||
|
||||
.wire-next__badge[data-color="success"] {
|
||||
--wire-badge-color: #0f9f8f;
|
||||
}
|
||||
|
||||
.wire-next__badge[data-color="info"] {
|
||||
--wire-badge-color: #2563eb;
|
||||
}
|
||||
|
||||
.wire-next__badge[data-color="danger"] {
|
||||
--wire-badge-color: #ef3340;
|
||||
}
|
||||
|
||||
.wire-next__badge[data-color="warning"] {
|
||||
--wire-badge-color: #eab308;
|
||||
}
|
||||
|
||||
.wire-next__badge[data-color="dark"] {
|
||||
--wire-badge-color: #27272a;
|
||||
}
|
||||
|
||||
.wire-next__badge[data-color="light"] {
|
||||
--wire-badge-color: #f4f4f5;
|
||||
}
|
||||
|
||||
.wire-next__badge[data-color="warning"][data-variant="solid"],
|
||||
.wire-next__badge[data-color="light"][data-variant="solid"] {
|
||||
color: #18181b;
|
||||
}
|
||||
|
||||
.wire-next__badge[data-variant="soft"] {
|
||||
color: var(--wire-badge-color);
|
||||
border-color: transparent;
|
||||
background: color-mix(in srgb, var(--wire-badge-color) 15%, var(--wire-color-surface));
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wire-next__badge[data-variant="outline"] {
|
||||
color: var(--wire-badge-color);
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wire-next__badge[data-variant="white"] {
|
||||
color: var(--wire-color-text);
|
||||
border-color: var(--wire-color-border);
|
||||
background: var(--wire-color-surface);
|
||||
box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
|
||||
}
|
||||
|
||||
.wire-next__badge[data-shape="rounded"] {
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
|
||||
.wire-next__badge[data-shape="square"] {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.wire-next__badge-label {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.wire-next__badge-label--truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.wire-next__badge-dot {
|
||||
width: 0.42rem;
|
||||
height: 0.42rem;
|
||||
flex: none;
|
||||
border-radius: 999px;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.wire-next__badge:has(.wire-next__badge-dot):not(:has(.wire-next__badge-label)) {
|
||||
width: 0.7rem;
|
||||
min-width: 0.7rem;
|
||||
height: 0.7rem;
|
||||
min-height: 0.7rem;
|
||||
padding: 0;
|
||||
border: 2px solid var(--wire-color-bg);
|
||||
}
|
||||
|
||||
.wire-next__badge:has(.wire-next__badge-dot):not(:has(.wire-next__badge-label))
|
||||
.wire-next__badge-dot {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wire-next__badge-icon {
|
||||
width: 0.9rem;
|
||||
height: 0.9rem;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.wire-next__badge-avatar {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin-left: -0.35rem;
|
||||
object-fit: cover;
|
||||
border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.wire-next__badge-dismiss {
|
||||
display: grid;
|
||||
width: 1.15rem;
|
||||
height: 1.15rem;
|
||||
margin-right: -0.3rem;
|
||||
padding: 0;
|
||||
place-items: center;
|
||||
color: currentColor;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, currentColor 12%, transparent);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wire-next__badge-dismiss:hover {
|
||||
background: color-mix(in srgb, currentColor 22%, transparent);
|
||||
}
|
||||
|
||||
.wire-next__badge-dismiss:focus-visible {
|
||||
outline: 2px solid currentColor;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.wire-next__badge-dismiss span {
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
}
|
||||
|
||||
.wire-next__badge-anchor {
|
||||
display: inline-flex;
|
||||
min-height: 2.75rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.65rem 0.9rem;
|
||||
color: var(--wire-color-text);
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: 0.5rem;
|
||||
background: var(--wire-color-surface);
|
||||
font: inherit;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.wire-next__badge-anchor > [class*="icon-"] {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.wire-next--badge-anchored[data-placement="inline"] {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wire-next--badge-anchored[data-placement="inline"] .wire-next__badge {
|
||||
margin-left: -0.55rem;
|
||||
}
|
||||
|
||||
.wire-next--badge-anchored[data-placement="top-right"] .wire-next__badge {
|
||||
position: absolute;
|
||||
top: -0.55rem;
|
||||
right: -0.75rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.wire-next__badge-ping {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
inset: -0.25rem;
|
||||
border-radius: inherit;
|
||||
background: var(--wire-badge-color);
|
||||
opacity: 0.5;
|
||||
animation: wire-badge-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.wire-next__badge-ping {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -164,4 +164,62 @@ label: string = "Button"
|
||||
{/if}
|
||||
</span>
|
||||
}
|
||||
|
||||
style {
|
||||
/* --- Button --------------------------------------------------------------- */
|
||||
.wire-action {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.wire-btn--pill {
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.wire-btn--with-description {
|
||||
min-height: 3.5rem;
|
||||
justify-content: flex-start;
|
||||
padding: 0.6rem 0.875rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.wire-btn__copy {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.wire-btn__description {
|
||||
color: currentColor;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 450;
|
||||
line-height: 1.35;
|
||||
opacity: 0.74;
|
||||
}
|
||||
|
||||
.wire-btn__tooltip {
|
||||
position: absolute;
|
||||
z-index: 80;
|
||||
inset-block-end: calc(100% + 0.5rem);
|
||||
inset-inline-start: 50%;
|
||||
width: max-content;
|
||||
max-width: min(16rem, calc(100vw - 2rem));
|
||||
padding: 0.4rem 0.6rem;
|
||||
color: var(--wire-color-bg);
|
||||
background: var(--wire-color-text);
|
||||
border: 1px solid color-mix(in srgb, var(--wire-color-text) 85%, var(--wire-color-border));
|
||||
border-radius: var(--wire-radius-sm);
|
||||
box-shadow: var(--wire-shadow-2);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 0.25rem);
|
||||
transition:
|
||||
opacity var(--wire-motion-fast) var(--wire-ease-standard),
|
||||
transform var(--wire-motion-fast) var(--wire-ease-standard);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -173,4 +173,31 @@ size: string = "default"
|
||||
</small>
|
||||
</div>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next__checkbox-content {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
align-items: start;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.wire-next__checkbox-slot {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.wire-next__checkbox-slot:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wire-next__checkbox-slot :is(a, button) {
|
||||
color: var(--wire-field-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -61,4 +61,13 @@ size: string = "default"
|
||||
<small class="wire-next__field-error" data-error="{name}">{error}</small>
|
||||
</div>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next--select select {
|
||||
width: 100%;
|
||||
min-height: 2.65rem;
|
||||
margin: 0;
|
||||
line-height: 1.35;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -39,4 +39,48 @@ component Switch {
|
||||
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
|
||||
</div>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next--switch input {
|
||||
appearance: none;
|
||||
position: relative;
|
||||
width: 2.5rem;
|
||||
height: 1.4rem;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: 999px;
|
||||
background: var(--wire-color-surface-2);
|
||||
transition: background var(--wire-motion-fast) var(--wire-ease-standard);
|
||||
}
|
||||
|
||||
.wire-next--switch {
|
||||
min-height: 2.65rem;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.wire-next--switch > span:last-child {
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.wire-next--switch input::after {
|
||||
position: absolute;
|
||||
top: 0.15rem;
|
||||
left: 0.15rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 999px;
|
||||
background: var(--wire-color-text);
|
||||
content: "";
|
||||
transition: transform var(--wire-motion-fast) var(--wire-ease-standard);
|
||||
}
|
||||
|
||||
.wire-next--switch input:checked {
|
||||
border-color: var(--wire-field-color);
|
||||
background: var(--wire-field-color);
|
||||
}
|
||||
|
||||
.wire-next--switch input:checked::after {
|
||||
background: var(--wire-color-primary-contrast, #fff);
|
||||
transform: translateX(1.1rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+24
-17
@@ -10,6 +10,13 @@ import { renderThemeCss, resolveThemeConfig } from "../../styles/src/theme.ts";
|
||||
// bundled for the browser.
|
||||
import { uiComponentNames, uiComponentsDir, uiComponentPath, uiCss } from "../src/registry.ts";
|
||||
|
||||
function uiStyles(): string {
|
||||
return [
|
||||
uiCss(),
|
||||
...uiComponentNames().map((name) => readFileSync(uiComponentPath(name), "utf8")),
|
||||
].join("\n");
|
||||
}
|
||||
|
||||
test("bundled UI assets are discoverable and readable", () => {
|
||||
expect(uiComponentNames()).toContain("Button");
|
||||
expect(uiComponentNames()).toContain("Accordion");
|
||||
@@ -20,7 +27,7 @@ test("bundled UI assets are discoverable and readable", () => {
|
||||
});
|
||||
|
||||
test("global UI CSS stays below its migration ratchet", () => {
|
||||
expect(gzipSync(new TextEncoder().encode(uiCss())).length).toBeLessThanOrEqual(26_004);
|
||||
expect(gzipSync(new TextEncoder().encode(uiCss())).length).toBeLessThanOrEqual(12_672);
|
||||
});
|
||||
|
||||
test("generated component reference documents every bundled component and its props", () => {
|
||||
@@ -420,7 +427,7 @@ test("footer renders header and link entries with the requested column count", a
|
||||
});
|
||||
|
||||
test("component-system CSS includes responsive, theme-token, focus, and reduced-motion rules", () => {
|
||||
const css = uiCss();
|
||||
const css = uiStyles();
|
||||
expect(css).toContain("@media (max-width: 768px)");
|
||||
expect(css).toContain("@media (max-width: 480px)");
|
||||
expect(css).toContain("@media (prefers-reduced-motion: reduce)");
|
||||
@@ -448,7 +455,7 @@ test("component-system CSS includes responsive, theme-token, focus, and reduced-
|
||||
* unchanged; only where they live moved.
|
||||
*/
|
||||
const navbarSource = readFileSync(uiComponentPath("Navbar"), "utf8");
|
||||
expect(css).not.toContain(".wire-navbar");
|
||||
expect(uiCss()).not.toContain(".wire-navbar");
|
||||
expect(navbarSource).toMatch(
|
||||
/\.wire-navbar__brand-copy strong\s*\{[^}]*font-size: 0\.9rem;[^}]*font-weight: 600;/s,
|
||||
);
|
||||
@@ -522,8 +529,8 @@ test("icon buttons expose their accessible label as a hover and focus tooltip",
|
||||
const button = readFileSync(uiComponentPath("Button"), "utf8");
|
||||
expect(button).toContain('class="wire-btn__tooltip"');
|
||||
expect(button).toContain("{ariaLabel || label}");
|
||||
expect(uiCss()).toContain(".wire-btn:hover > .wire-btn__tooltip");
|
||||
expect(uiCss()).toContain(".wire-btn:focus-visible > .wire-btn__tooltip");
|
||||
expect(uiStyles()).toContain(".wire-btn:hover > .wire-btn__tooltip");
|
||||
expect(uiStyles()).toContain(".wire-btn:focus-visible > .wire-btn__tooltip");
|
||||
});
|
||||
|
||||
test("button links navigate by default and only download when the native attribute is passed", () => {
|
||||
@@ -593,7 +600,7 @@ test("button group supports vertical, responsive, detached, and toolbar layouts"
|
||||
expect(group.getAttribute("data-attached")).toBe("false");
|
||||
expect(group.querySelector('[class*="icon-[lucide--bold]"]')).not.toBeNull();
|
||||
|
||||
const css = uiCss();
|
||||
const css = uiStyles();
|
||||
expect(css).toContain('.wire-next--button-group[data-orientation="vertical"]');
|
||||
expect(css).toContain('.wire-next--button-group[data-responsive="true"]');
|
||||
expect(css).toContain('.wire-next--button-group[data-attached="false"]');
|
||||
@@ -727,7 +734,7 @@ test("dismissible alert hides itself and emits dismiss details", async () => {
|
||||
});
|
||||
|
||||
test("solid alert palettes preserve readable foregrounds and compact inline layout", () => {
|
||||
const css = uiCss();
|
||||
const css = uiStyles();
|
||||
|
||||
expect(css).toContain('.wire-next--alert[data-color="secondary"]');
|
||||
expect(css).toContain("--wire-alert-color: #737373");
|
||||
@@ -747,7 +754,7 @@ test("alert exposes configurable radius and elevation treatments", async () => {
|
||||
});
|
||||
const dom = mountHtml(html);
|
||||
const root = dom.querySelector("[data-wrn-alert]") as HTMLElement;
|
||||
const css = uiCss();
|
||||
const css = uiStyles();
|
||||
|
||||
expect(root.dataset.radius).toBe("xl");
|
||||
expect(root.dataset.shadow).toBe("lg");
|
||||
@@ -798,7 +805,7 @@ test("avatar renders images, fallbacks, presence, badges, tooltips, and media co
|
||||
const placeholderDom = mountHtml(await renderComponent(source, { size: "sm" }));
|
||||
expect(placeholderDom.querySelector(".wire-next__avatar-placeholder")).not.toBeNull();
|
||||
expect(source).not.toContain("items =");
|
||||
expect(uiCss()).toContain('.wire-next__avatar-wrap[data-shape="rounded"]');
|
||||
expect(uiStyles()).toContain('.wire-next__avatar-wrap[data-shape="rounded"]');
|
||||
});
|
||||
|
||||
test("avatar group limits members and opens an accessible overflow menu", async () => {
|
||||
@@ -841,7 +848,7 @@ test("avatar group limits members and opens an accessible overflow menu", async
|
||||
"true",
|
||||
);
|
||||
expect(eventDetail).toEqual(expect.objectContaining({ open: true, hiddenCount: 2 }));
|
||||
expect(uiCss()).toContain('.wire-next--avatar-group[data-layout="grid"]');
|
||||
expect(uiStyles()).toContain('.wire-next--avatar-group[data-layout="grid"]');
|
||||
});
|
||||
|
||||
test("badge supports rich content, anchored placement, animation, and dismissal", async () => {
|
||||
@@ -880,7 +887,7 @@ test("badge supports rich content, anchored placement, animation, and dismissal"
|
||||
expect(dom.querySelector("[data-wrn-badge]")?.getAttribute("data-show")).toBe("false");
|
||||
expect(dismissed).toBe("Christina");
|
||||
expect(source).not.toContain("items =");
|
||||
expect(uiCss()).toContain("@keyframes wire-badge-ping");
|
||||
expect(uiStyles()).toContain("@keyframes wire-badge-ping");
|
||||
});
|
||||
|
||||
test("blockquote renders semantic quote and citation content", async () => {
|
||||
@@ -930,7 +937,7 @@ test("blockquote supports bordered, right-aligned, non-italic, and slotted quote
|
||||
expect(figure.querySelector(".wire-next__blockquote-mark")).toBeNull();
|
||||
expect(source).toContain("<slot />");
|
||||
|
||||
const css = uiCss();
|
||||
const css = uiStyles();
|
||||
expect(css).toContain('.wire-next--blockquote[data-variant="bordered"]');
|
||||
expect(css).toContain('.wire-next--blockquote[data-align="center"]');
|
||||
expect(css).toContain("--wire-blockquote-font-size");
|
||||
@@ -1031,7 +1038,7 @@ test("card supports overlays, horizontal media, groups, alerts, empty and scroll
|
||||
"true",
|
||||
);
|
||||
|
||||
const css = uiCss();
|
||||
const css = uiStyles();
|
||||
expect(css).toContain('.wire-next--card[data-layout="horizontal"]');
|
||||
expect(css).toContain('.wire-next--card[data-hover="image"]');
|
||||
expect(css).toContain(".wire-next__card-group");
|
||||
@@ -1088,7 +1095,7 @@ test("chat bubble renders conversations, avatars, metadata, links, and public ev
|
||||
expect(dom.querySelectorAll(".wire-next__chat-message")).toHaveLength(2);
|
||||
expect(dom.querySelectorAll(".wire-next__chat-content li")).toHaveLength(2);
|
||||
expect(dom.querySelector(".wire-next__chat-meta[data-tone='danger']")).not.toBeNull();
|
||||
expect(uiCss()).toContain("color: var(--wire-color-primary-contrast, #fff)");
|
||||
expect(uiStyles()).toContain("color: var(--wire-color-primary-contrast, #fff)");
|
||||
|
||||
(dom.querySelector(".wire-next__chat-content") as HTMLElement).click();
|
||||
(dom.querySelector(".wire-next__chat-avatar") as HTMLButtonElement).click();
|
||||
@@ -1127,7 +1134,7 @@ test("collapse toggles accessible panels and emits open, close, and toggle event
|
||||
expect(trigger.getAttribute("aria-controls")).toBe("product-details");
|
||||
expect(panel.dataset.open).toBe("true");
|
||||
expect(panel.getAttribute("aria-hidden")).toBe("false");
|
||||
expect(uiCss()).toContain("max-height: 40rem");
|
||||
expect(uiStyles()).toContain("max-height: 40rem");
|
||||
expect(trigger.textContent).toContain("Collapse");
|
||||
|
||||
trigger.click();
|
||||
@@ -1546,7 +1553,7 @@ test("carousel supports RTL, multiple slides, dragging, snap, and thumbnail layo
|
||||
expect(snapRoot.dataset.snap).toBe("true");
|
||||
expect(snapRoot.dataset.draggable).toBe("false");
|
||||
|
||||
const css = uiCss();
|
||||
const css = uiStyles();
|
||||
expect(css).toContain('.wire-next--carousel[data-rtl="true"]');
|
||||
expect(css).toContain('.wire-next--carousel[data-snap="true"]');
|
||||
expect(css).toContain('.wire-next--carousel[data-thumbnails="vertical"]');
|
||||
@@ -2276,7 +2283,7 @@ test("strong password scores input, supports custom special characters, and open
|
||||
});
|
||||
|
||||
test("strong password completed requirements use a proper checkmark indicator", () => {
|
||||
const css = uiCss();
|
||||
const css = uiStyles();
|
||||
|
||||
expect(css).toContain(
|
||||
'.wire-next__strong-password-requirements li[data-met="true"] > span::after',
|
||||
|
||||
-3780
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user