@astryx-vue/core 0.2.0 → 0.2.2

package/styles/power-search.css

@@ -0,0 +1,303 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-field.astryx-power-search {
+    position: relative;
+    width: var(--astryx-field-width, 100%);
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  .astryx-power-search-control {
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--astryx-spacing-1, 4px);
+    width: 100%;
+    min-width: 0;
+    min-height: var(--astryx-input-height-md, 32px);
+    padding: var(--astryx-spacing-1, 4px);
+    border: var(--astryx-border-width, 1px) solid var(--astryx-input-status-color, var(--astryx-input-border, #d4d4d4));
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    background: var(--astryx-input-background, #fff);
+    color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+    font-family: var(--astryx-font-family-body, Figtree, sans-serif);
+    font-size: var(--astryx-text-body-size, 0.875rem);
+    line-height: var(--astryx-text-body-leading, 1.4286);
+    cursor: text;
+    transition:
+      border-color var(--astryx-duration-fast-max, 165ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1)),
+      box-shadow var(--astryx-duration-fast-max, 165ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  .astryx-power-search.size-sm .astryx-power-search-control {
+    min-height: var(--astryx-input-height-sm, 28px);
+  }
+
+  .astryx-power-search.size-lg .astryx-power-search-control {
+    min-height: var(--astryx-input-height-lg, 36px);
+  }
+
+  .astryx-power-search-control.is-floating {
+    position: absolute;
+    z-index: 2;
+    inset-inline: 0;
+    top: 0;
+    height: auto;
+    box-shadow: var(--astryx-popover-shadow, 0 4px 8px #0000001a);
+  }
+
+  @media (hover: hover) {
+    .astryx-power-search-control:hover:not(.is-disabled):not(:focus-within) {
+      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--astryx-input-status-color, var(--astryx-input-border, #d4d4d4)) 30%, transparent);
+    }
+  }
+
+  .astryx-power-search-control:focus-within,
+  .astryx-power-search-control.is-open {
+    border-color: var(--astryx-input-status-color, var(--astryx-input-focus, #262626));
+    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--astryx-input-status-color, var(--astryx-input-focus, #262626)) 15%, transparent);
+  }
+
+  .astryx-power-search-control.is-disabled {
+    cursor: default;
+    opacity: 0.5;
+  }
+
+  .astryx-power-search-control.status-error {
+    --astryx-input-status-color: var(--astryx-input-error, #e33f4a);
+  }
+
+  .astryx-power-search-control.status-warning {
+    --astryx-input-status-color: var(--astryx-input-warning, #a67a00);
+  }
+
+  .astryx-power-search-control.status-success {
+    --astryx-input-status-color: var(--astryx-input-success, #198100);
+  }
+
+  .astryx-power-search-icon,
+  .astryx-power-search-clear {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    color: var(--astryx-color-text-secondary, #525252);
+  }
+
+  .astryx-power-search-clear {
+    margin-inline-start: auto;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .astryx-power-search-tokens {
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--astryx-spacing-1, 4px);
+    min-width: 0;
+  }
+
+  .astryx-power-search-tokens.is-collapsed {
+    flex-wrap: nowrap;
+    overflow: hidden;
+  }
+
+  .astryx-power-search-token {
+    display: inline-flex;
+    max-width: 100%;
+    outline: none;
+  }
+
+  .astryx-power-search-token-value {
+    font-weight: var(--astryx-font-weight-bold, 700);
+  }
+
+  .astryx-power-search-more,
+  .astryx-power-search-count {
+    flex: none;
+    color: var(--astryx-color-text-secondary, #525252);
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    line-height: var(--astryx-text-supporting-leading, 1.6667);
+    white-space: nowrap;
+  }
+
+  .astryx-power-search-measure {
+    position: absolute;
+    display: flex;
+    gap: var(--astryx-spacing-1, 4px);
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+    pointer-events: none;
+    white-space: nowrap;
+  }
+
+  .astryx-power-search-input {
+    flex: 1 1 8rem;
+    min-width: 4rem;
+    height: var(--astryx-input-height-sm, 28px);
+    margin: 0;
+    padding: 0 var(--astryx-spacing-1, 4px);
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    outline: none;
+  }
+
+  .astryx-power-search-input::placeholder {
+    color: var(--astryx-color-text-tertiary, #a3a3a3);
+  }
+
+  .astryx-power-search-placeholder {
+    width: 100%;
+  }
+
+  .astryx-power-search-menu-group {
+    padding: var(--astryx-spacing-1, 4px) var(--astryx-spacing-2, 8px);
+    color: var(--astryx-color-text-secondary, #525252);
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    font-weight: var(--astryx-font-weight-semibold, 600);
+  }
+
+  .astryx-typeahead-option .astryx-icon {
+    flex: none;
+    color: var(--astryx-color-icon-secondary, #737373);
+  }
+
+  .astryx-power-search-editor {
+    position: fixed;
+    z-index: var(--astryx-popover-z-index, 1000);
+    box-sizing: border-box;
+    min-width: min(400px, calc(100vw - 16px));
+    max-width: min(720px, calc(100vw - 16px));
+    padding: var(--astryx-spacing-3, 12px);
+    border: var(--astryx-border-width, 1px) solid var(--astryx-color-border, light-dark(#ebebeb, #ffffff1a));
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    background: var(--astryx-color-background-card, #fff);
+    color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+    box-shadow: var(--astryx-popover-shadow, 0 4px 8px #0000001a);
+    animation: astryx-power-search-enter var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  .astryx-power-search-editor[data-ready='false'] {
+    visibility: hidden;
+  }
+
+  .astryx-power-search-editor-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--astryx-spacing-3, 12px);
+  }
+
+  .astryx-power-search-editor-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-power-search-editor-row > * {
+    flex: 1 1 10rem;
+    min-width: 0;
+  }
+
+  .astryx-power-search-editor-value,
+  .astryx-power-search-value,
+  .astryx-power-search-value__stack,
+  .astryx-power-search-nested {
+    display: flex;
+    flex-direction: column;
+    gap: var(--astryx-spacing-2, 8px);
+    min-width: 0;
+  }
+
+  .astryx-power-search-nested-row {
+    display: flex;
+    flex-direction: column;
+    gap: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-power-search-editor-group {
+    color: var(--astryx-color-text-secondary, #525252);
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    font-weight: var(--astryx-font-weight-semibold, 600);
+  }
+
+  .astryx-power-search-editor-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-power-search-editor-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--astryx-spacing-2, 8px);
+    margin-inline-start: auto;
+  }
+
+  .astryx-power-search-presets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--astryx-spacing-1, 4px);
+  }
+
+  .astryx-power-search-preset,
+  .astryx-power-search-icon-button {
+    margin: 0;
+    border: var(--astryx-border-width, 1px) solid var(--astryx-color-border, light-dark(#ebebeb, #ffffff1a));
+    border-radius: var(--astryx-radius-inner, 0.375rem);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .astryx-power-search-preset {
+    padding: var(--astryx-spacing-1, 4px) var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-power-search-icon-button {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+  }
+
+  @media (max-width: 399px) {
+    .astryx-power-search-editor-row > * {
+      flex-basis: 100%;
+    }
+  }
+
+  @keyframes astryx-power-search-enter {
+    from {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-power-search-control,
+    .astryx-power-search-editor {
+      transition: none;
+      animation: none;
+    }
+  }
+}

package/styles/progress-bar.css

@@ -76,6 +76,10 @@
     background: var(--astryx-progress-bar-error-fill, var(--astryx-input-error, #ff705d));
   }
 
+  .astryx-progress-bar[data-variant='accent'] .astryx-progress-bar-fill {
+    background: var(--astryx-progress-bar-accent-fill, var(--astryx-color-accent, #25252a));
+  }
+
   .astryx-progress-bar[data-variant='info'] .astryx-progress-bar-fill {
     background: var(--astryx-progress-bar-info-fill, var(--astryx-input-info, #6d9cfe));
   }

package/styles/selector.css

@@ -98,6 +98,29 @@
     box-shadow: none;
   }
 
+  .astryx-selector-field.is-ghost {
+    border-color: transparent;
+    background: transparent;
+  }
+
+  @media (hover: hover) {
+    .astryx-selector-field.is-ghost:hover:not(.is-disabled) {
+      background: var(--astryx-dropdown-menu-hover-background, light-dark(#0536590c, #ffffff0c));
+      box-shadow: none;
+    }
+  }
+
+  .astryx-selector-field.is-ghost:focus-within,
+  .astryx-selector-field.is-ghost.is-open {
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  .astryx-selector:has(.astryx-selector-value.is-rich) .astryx-selector-field {
+    height: auto;
+    min-height: var(--astryx-input-height-md, 32px);
+  }
+
   .astryx-selector-field.is-disabled .astryx-selector-trigger {
     cursor: default;
   }
@@ -127,6 +150,11 @@
     color: var(--astryx-color-text-secondary, #525252);
   }
 
+  .astryx-selector-value.is-rich {
+    overflow: visible;
+    white-space: normal;
+  }
+
   .astryx-selector-icon {
     display: flex;
     flex: none;
@@ -188,6 +216,22 @@
     animation-timing-function: var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
   }
 
+  .astryx-selector-listbox.is-sheet {
+    position: static;
+    width: 100%;
+    max-width: none;
+    max-block-size: none;
+    padding: 0;
+    background: transparent;
+    box-shadow: none;
+    animation: none;
+  }
+
+  .astryx-selector-sheet-title {
+    margin-bottom: var(--astryx-spacing-2, 8px);
+    font-weight: var(--astryx-font-weight-medium, 500);
+  }
+
   .astryx-selector-listbox[data-placement='below'] {
     animation-name: astryx-selector-enter-below;
   }
@@ -257,6 +301,20 @@
     cursor: default;
   }
 
+  .astryx-selector-section {
+    padding: var(--astryx-spacing-2, 8px) var(--astryx-spacing-2, 8px) var(--astryx-spacing-1, 4px);
+    color: var(--astryx-color-text-secondary, #525252);
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    font-weight: var(--astryx-font-weight-medium, 500);
+    line-height: var(--astryx-text-supporting-leading, 1.6667);
+  }
+
+  .astryx-selector-option-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-bottom: var(--astryx-spacing-1, 4px);
+  }
+
   .astryx-selector-option-label {
     display: block;
   }

package/styles/tab-list.css

@@ -30,6 +30,21 @@
     padding-bottom: var(--astryx-spacing-1, 4px);
   }
 
+  /* Cancel the container's inline padding so the underline can span the
+     content box. The strip pads the labels back onto the content inset,
+     minus the padding each tab already has. */
+  .astryx-tab-list--full-bleed {
+    margin-inline-start: calc(-1 * var(--container-padding-inline-start, 0px));
+    margin-inline-end: calc(-1 * var(--container-padding-inline-end, 0px));
+    max-width: none;
+    width: calc(100% + var(--container-padding-inline-start, 0px) + var(--container-padding-inline-end, 0px));
+  }
+
+  .astryx-tab-list--full-bleed .astryx-tab-list__strip {
+    padding-inline-start: max(var(--container-padding-inline-start, 0px) - var(--astryx-spacing-3, 12px), 0px);
+    padding-inline-end: max(var(--container-padding-inline-end, 0px) - var(--astryx-spacing-3, 12px), 0px);
+  }
+
   .astryx-tab {
     display: inline-flex;
     align-items: center;