vanilla-jui 1.3.9 → 1.3.11

package/src/css/breadcrumb.css

@@ -0,0 +1,106 @@
+@layer components {
+
+  .j-breadcrumb,
+  .j-breadcrumb.is-md {
+    font-size: var(--breadcrumb-font-size, var(--font-size-md));
+    color: var(--breadcrumb-color, var(--ui-fg-muted));
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  .j-breadcrumb.is-sm {
+    --breadcrumb-font-size: var(--font-size-sm);
+  }
+
+  .j-breadcrumb.is-lg {
+    --breadcrumb-font-size: var(--font-size-lg);
+  }
+
+  .j-breadcrumb svg,
+  .j-breadcrumb.is-md svg {
+    width: var(--breadcrumb-icon-size, var(--font-size-md));
+    height: var(--breadcrumb-icon-size, var(--font-size-md));
+  }
+
+  .j-breadcrumb.is-sm svg {
+    --breadcrumb-icon-size: var(--font-size-sm);
+  }
+
+  .j-breadcrumb.is-lg svg {
+    --breadcrumb-icon-size: var(--font-size-lg);
+  }
+
+  .j-breadcrumb>ol,
+  .j-breadcrumb>ul {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin: 0;
+    padding: 0;
+  }
+
+  .j-breadcrumb>ol li,
+  .j-breadcrumb>ul li {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .j-breadcrumb li:first-child a {
+    padding-inline-start: 0;
+  }
+
+  .j-breadcrumb li+li::before {
+    color: var(--breadcrumb-item-separator-color, var(--ui-fg-soft));
+    content: '/';
+  }
+
+  .j-breadcrumb.is-dot li+li::before {
+    content: '•';
+  }
+
+  .j-breadcrumb.is-arrow li+li::before {
+    content: '>';
+  }
+
+  .j-breadcrumb.is-dash li+li::before {
+    content: '–';
+  }
+
+  .j-breadcrumb a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space);
+    color: var(--breadcrumb-link-color, var(--tone-text));
+    padding: var(--breadcrumb-item-padding-vertical, 0) var(--breadcrumb-item-padding-horizontal, var(--s2));
+    text-decoration: none;
+  }
+
+  .j-breadcrumb a:hover {
+    color: var(--breadcrumb-link-hover-color, var(--tone-solid));
+  }
+
+  .j-breadcrumb a span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .j-breadcrumb li.is-active a {
+    --breadcrumb-link-color: var(--ui-fg-muted);
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .j-breadcrumb.is-center ul,
+  .j-breadcrumb.is-center ol {
+    justify-content: center;
+  }
+
+  .j-breadcrumb.is-right ul,
+  .j-breadcrumb.is-right ol {
+    justify-content: flex-end;
+  }
+}

package/src/css/button.css

@@ -0,0 +1,296 @@
+@layer components {
+  .j-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: var(--button-gap, var(--space) calc(var(--space) * 1.5));
+    position: relative;
+    white-space: nowrap;
+    font-weight: var(--button-font-weight, var(--font-medium));
+    font-size: var(--button-font-size, var(--font-size-md));
+    height: var(--button-height, var(--el-height-md));
+    line-height: var(--button-line-height, var(--line-height-self));
+    background-color: var(--button-background, transparent);
+    padding: var(--button-padding, 0 var(--s3));
+    border-width: var(--button-border-width, 1px);
+    border-style: var(--button-border-style, solid);
+    border-color: var(--button-border-color, transparent);
+    border-radius: var(--button-border-radius, var(--radius-md));
+    box-shadow: var(--button-box-shadow, var(--shadow-sm));
+    appearance: button;
+    user-select: none;
+    touch-action: manipulation;
+  }
+
+  .j-button .button-content {
+    display: contents;
+    position: relative;
+  }
+
+  .j-button svg {
+    width: var(--font-size-md);
+    fill: currentColor;
+  }
+
+  .j-button a,
+  .j-button a:hover {
+    color: inherit;
+  }
+
+  /* size */
+  .j-button.is-sm {
+    font-size: var(--font-size-sm);
+    height: var(--button-height-sm, var(--el-height-sm));
+    padding: var(--button-padding-sm, var(--space) var(--s2));
+  }
+
+  .j-button.is-lg {
+    font-size: var(--font-size-lg);
+    height: var(--button-height-lg, var(--el-height-lg));
+    padding: var(--button-padding-lg, var(--s3) var(--s4));
+  }
+
+  /* variant */
+  .j-button.is-default {
+    --button-background: var(--ui-bg);
+    --button-border-color: var(--ui-border);
+    color: var(--ui-fg);
+  }
+
+  .j-button.is-contrast {
+    --button-background: var(--ui-fg);
+    color: var(--ui-bg);
+  }
+
+  .j-button.is-primary {
+    --button-background: var(--tone-solid);
+    color: var(--tone-fg);
+  }
+
+  .j-button.is-secondary {
+    --button-border-color: transparent;
+    --button-background: var(--tone-soft);
+    color: var(--tone-text);
+  }
+
+  .j-button.is-outline {
+    --button-background: transparent;
+    --button-border-color: var(--tone-solid);
+    color: var(--tone-solid);
+  }
+
+  .j-button.is-ghost {
+    --button-box-shadow: none;
+    transition-property: none;
+  }
+
+  .j-button.is-text {
+    --button-border-color: transparent;
+    height: var(--button-text-height, auto);
+    padding: var(--button-text-padding, 0);
+    box-shadow: var(--button-text-box-shadow, none);
+  }
+
+  .j-button.is-icon {
+    aspect-ratio: var(--aspect-icon, 1);
+    padding: var(--icon-padding, 0);
+  }
+
+  .j-button.is-danger {
+    --button-background: var(--state-danger);
+    color: var(--state-danger-fg);
+  }
+
+  .j-button.is-warning {
+    --button-background: var(--state-warning);
+    color: var(--state-warning-fg);
+  }
+
+  .j-button.is-success {
+    --button-background: var(--state-success);
+    color: var(--state-success-fg);
+  }
+
+  .j-button.is-error {
+    --button-background: var(--state-danger-subtle);
+    color: var(--state-danger-text);
+  }
+
+  .j-button[class*='is-surface-'] {
+    --button-border-color: var(--ui-border);
+    color: var(--ui-fg);
+  }
+
+  .j-button.is-surface-sm {
+    --button-background: var(--ui-surface-subtle);
+  }
+
+  .j-button.is-surface-md {
+    --button-background: var(--ui-surface-muted);
+  }
+
+  .j-button.is-surface-lg {
+    --button-background: var(--ui-surface-active);
+  }
+
+  /* group */
+  .j-button-group {
+    --button-padding: 0 var(--s2);
+    display: flex;
+    margin: 0;
+  }
+
+  .j-button-group .j-button:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    /* margin-left: -1px; */
+  }
+
+  .j-button-group .j-button:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .j-button-group .j-button:not(:first-child):not(:last-child) {
+    border-block-width: var(--button-border-width, 1px);
+    border-inline-width: 0;
+  }
+
+  .j-button-group.is-vertical {
+    flex-direction: column;
+  }
+
+  .j-button-group.is-vertical .j-button:not(:last-child) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .j-button-group.is-vertical .j-button:not(:first-child) {
+    margin-left: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .j-button-group.is-vertical .j-button:not(:last-child):not(:first-child) {
+    border-block-width: 0;
+    border-inline-width: var(--button-border-width, 1px);
+  }
+
+  .j-button-group.is-vertical .j-button:first-child {
+    border-top-right-radius: var(--radius-md);
+  }
+
+  .j-button-group.is-vertical .j-button:last-child {
+    border-bottom-left-radius: var(--radius-md);
+  }
+
+  /* disabled */
+  .j-button:disabled {
+    opacity: var(--opacity-disabled, 0.5);
+  }
+
+  /* status */
+  .j-button:not(:disabled) {
+    cursor: pointer;
+  }
+
+  .j-button:not(:disabled):hover {
+    opacity: var(--opacity-hover);
+  }
+
+  .j-button:not(:disabled):active {
+    opacity: var(--opacity-active);
+  }
+
+  .j-button:not(:disabled).is-active,
+  .j-button:not(:disabled):focus-visible {
+    outline: 2px solid var(--button-ring, var(--tone-solid));
+    outline-offset: 1px;
+    border-color: transparent;
+  }
+
+  .j-button.is-default:hover:not(:disabled) {
+    background-color: var(--ui-surface-hover);
+  }
+
+  .j-button.is-outline:hover:not(:disabled),
+  .j-button.is-ghost:hover:not(:disabled) {
+    background-color: var(--tone-subtle);
+  }
+
+  .j-button.is-text:not(:disabled):active,
+  .j-button.is-text:not(:disabled):focus-visible,
+  .j-button.is-text:not(:disabled).is-active {
+    outline: none;
+    color: var(--tone-solid);
+    text-decoration: underline;
+    text-underline-offset: var(--space);
+  }
+
+  .j-button.is-contrast:not(:disabled):active,
+  .j-button.is-contrast:not(:disabled):focus-visible {
+    --button-ring: var(--ui-fg);
+  }
+
+  .j-button.is-success:not(:disabled):active,
+  .j-button.is-success:not(:disabled):focus-visible {
+    --button-ring: var(--state-success);
+  }
+
+  .j-button.is-warning:not(:disabled):active,
+  .j-button.is-warning:not(:disabled):focus-visible {
+    --button-ring: var(--state-warning);
+  }
+
+  .j-button.is-danger:not(:disabled):active,
+  .j-button.is-danger:not(:disabled):focus-visible {
+    --button-ring: var(--state-danger);
+  }
+
+  .j-button.is-error:not(:disabled):active,
+  .j-button.is-error:not(:disabled):focus-visible {
+    --button-ring: var(--state-danger-subtle);
+  }
+
+  .j-button.is-surface-sm:not(:disabled):active,
+  .j-button.is-surface-sm:not(:disabled):focus-visible {
+    --button-ring: var(--ui-surface-hover);
+  }
+
+  .j-button.is-surface-md:not(:disabled):active,
+  .j-button.is-surface-md:not(:disabled):focus-visible {
+    --button-ring: var(--ui-border);
+  }
+
+  .j-button.is-surface-lg:not(:disabled):active,
+  .j-button.is-surface-lg:not(:disabled):focus-visible {
+    --button-ring: var(--ui-border-strong);
+  }
+
+  .j-button-group .j-button:active,
+  .j-button-group .j-button:focus-visible {
+    outline: none;
+    --button-border-color: transparent;
+    --button-box-shadow: 0 0 0 2px var(--tone-solid);
+    z-index: 1;
+  }
+
+  .j-button-group .j-button.is-primary:not(:disabled):active,
+  .j-button-group .j-button.is-primary:not(:disabled):focus-visible,
+  .j-button-group .j-button:focus-within {
+    outline: 2px solid var(--button-ring, var(--tone-solid));
+    outline-offset: 1px;
+    --button-border-color: transparent;
+    --button-box-shadow: var(--shadow-sm);
+  }
+
+  .j-button-group .j-button:focus-within {
+    z-index: 1;
+    --button-border-color: transparent;
+  }
+
+  .j-button-group.is-vertical .j-button:focus-within {
+    z-index: auto
+  }
+}

package/src/css/card.css

@@ -0,0 +1,151 @@
+@layer components {
+  .j-card {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    max-width: 100%;
+    color: var(--card-color, var(--ui-fg));
+    background-color: var(--card-background, var(--ui-bg));
+    border: 1px solid var(--card-border-color, var(--ui-border));
+    border-radius: var(--card-border-radius, var(--radius-md));
+    box-shadow: var(--shadow-sm);
+  }
+
+  .border-radius {
+    border-radius: var(--radius-md);
+    overflow: hidden;
+  }
+
+  .j-card .card-header {
+    display: flex;
+    align-items: center;
+    background-color: var(--card-header-background, transparent);
+  }
+
+  .j-card .card-header .header-title {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    color: var(--card-header-color, var(--ui-fg));
+    font-size: var(--font-size-md);
+    font-weight: var(--card-header-weight, var(--font-medium));
+    padding: var(--card-header-padding, var(--s3) var(--s4));
+    margin: 0;
+  }
+
+  .j-card .card-header .header-icon {
+    display: flex;
+    align-items: center;
+    font-family: inherit;
+    font-size: 1em;
+    color: inherit;
+    background: none;
+    border: none;
+    margin: 0;
+    padding: 0;
+    padding: var(--card-header-padding, var(--space) var(--s2));
+    appearance: none;
+    cursor: pointer;
+  }
+
+  .j-card .card-header .header-icon,
+  .j-card .card-header .header-title.is-centered {
+    justify-content: center;
+  }
+
+  .j-card .card-media,
+  .image {
+    display: block;
+    position: relative;
+  }
+
+  .j-card figure {
+    margin: 0;
+  }
+
+  .j-card figure img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .j-card .card-media figure.image img {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .j-card .card-media:first-child img {
+    border-start-end-radius: var(--card-border-radius, var(--radius-md));
+    border-start-start-radius: var(--card-border-radius, var(--radius-md));
+  }
+
+  .j-card .card-content {
+    background-color: var(--card-content-background);
+    padding: var(--card-content-padding, var(--s4));
+    line-height: var(--line-height-paragraph);
+  }
+
+  .j-card .card-content:last-child,
+  .j-card .card-footer:last-child,
+  .j-card .card-header:last-child {
+    border-end-end-radius: var(--card-border-radius, var(--radius-md));
+    border-end-start-radius: var(--card-border-radius, var(--radius-md));
+  }
+
+  .j-card .card-content:first-child,
+  .j-card .card-footer:first-child,
+  .j-card .card-header:first-child {
+    border-start-end-radius: var(--card-border-radius, var(--radius-md));
+    border-start-start-radius: var(--card-border-radius, var(--radius-md));
+  }
+
+  .j-card .card-footer {
+    display: flex;
+    align-items: stretch;
+    background-color: var(--card-footer-background);
+    overflow: hidden;
+    gap: calc(var(--space)*2);
+  }
+
+  /* vertical */
+  .j-radius-round .j-card {
+    border-radius: 24px;
+  }
+
+  .j-card.is-vertical .card-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--s2);
+    padding: var(--card-header-padding, var(--s4) var(--s4) 0);
+  }
+
+  .j-card.is-vertical .card-header .header-title {
+    font-size: var(--vertical-card-title-font-size, var(--font-size-lg));
+  }
+
+  .j-card.is-vertical .card-header .header-description {
+    color: var(--ui-fg-muted);
+  }
+
+  .j-card.is-vertical .card-header .header-title,
+  .j-card.is-vertical .card-header .header-description {
+    padding: 0;
+    margin: 0;
+  }
+
+  .j-card .card-footer {
+    border-top: none;
+    padding: var(--vertical-card-footer-padding, var(--s4));
+  }
+
+  .j-card .card-content+.card-footer {
+    padding-top: 0;
+  }
+
+  .j-card .card-footer:has(.j-button-group) {
+    padding-top: 2px;
+  }
+}