@cratis/components 4.25.1 → 4.26.0

package/dist/esm/styles.SchemaEditor.css

@@ -1907,5 +1907,351 @@
 .cratis-schema-editor-bottom-border {
     border-bottom: 1px solid var(--cratis-surface-border);
 }
+/* Tree layout (`layout='tree'`). */
+
+.cratis-schema-editor {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    min-width: 0;
+    color: var(--cratis-text-color);
+    font-size: 0.875rem;
+}
+
+.cratis-schema-editor__header {
+    min-width: 0;
+}
+
+.cratis-schema-editor__list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.cratis-schema-editor__list--nested {
+    margin-inline-start: 1.25rem;
+    padding-inline-start: 0.5rem;
+    border-inline-start: 1px solid var(--cratis-surface-border);
+}
+
+.cratis-schema-editor__property {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    min-width: 0;
+}
+
+.cratis-schema-editor__empty {
+    margin: 0;
+    padding: 0.5rem;
+    color: var(--cratis-text-color-secondary);
+}
+
+.cratis-schema-editor__row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.375rem;
+    min-height: 2rem;
+    padding: 0.25rem 0.5rem;
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: var(--cratis-border-radius);
+    background: var(--cratis-surface-card);
+}
+
+.cratis-schema-editor__row:hover {
+    background: var(--cratis-surface-hover);
+}
+
+.cratis-schema-editor__row[data-selected] {
+    border-color: var(--cratis-primary-color);
+    box-shadow: inset 0 0 0 1px var(--cratis-primary-color);
+}
+
+.cratis-schema-editor__details {
+    min-width: 0;
+    margin-inline-start: 1.25rem;
+}
+
+.cratis-schema-editor__leading,
+.cratis-schema-editor__accessory {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.cratis-schema-editor__accessory {
+    margin-inline-start: auto;
+}
+
+.cratis-schema-editor__name {
+    flex: 1 1 6rem;
+    min-width: 0;
+    min-height: 1.5rem;
+    padding: 0 0.25rem;
+    border: 0;
+    border-radius: calc(var(--cratis-border-radius) * 0.5);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-weight: 500;
+    text-align: start;
+    overflow-wrap: anywhere;
+    cursor: default;
+}
+
+.cratis-schema-editor__name--static {
+    display: inline-flex;
+    align-items: center;
+}
+
+.cratis-schema-editor__name:focus-visible {
+    outline: none;
+    box-shadow: var(--cratis-focus-ring);
+}
+
+.cratis-schema-editor__name-edit {
+    display: flex;
+    flex: 1 1 8rem;
+    flex-direction: column;
+    gap: 0.125rem;
+    min-width: 0;
+}
+
+.cratis-schema-editor__name-input {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 1.75rem;
+    padding: 0.125rem 0.5rem;
+    border: 1px solid var(--cratis-control-border);
+    border-radius: var(--cratis-border-radius);
+    background: var(--cratis-control-background);
+    color: inherit;
+    font: inherit;
+}
+
+.cratis-schema-editor__name-input:focus-visible {
+    outline: none;
+    box-shadow: var(--cratis-focus-ring);
+}
+
+.cratis-schema-editor__name-input[data-invalid] {
+    border-color: var(--cratis-red-500);
+    border-style: dashed;
+}
+
+.cratis-schema-editor__message {
+    margin: 0;
+    color: var(--cratis-red-500);
+    font-size: 0.75rem;
+}
+
+.cratis-schema-editor__badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    min-height: 1.25rem;
+    padding: 0 0.375rem;
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: 999px;
+    background: var(--cratis-surface-100);
+    color: var(--cratis-text-color);
+    font-size: 0.75rem;
+    white-space: nowrap;
+}
+
+.cratis-schema-editor__badge-glyph {
+    color: var(--cratis-text-color);
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 0.6875rem;
+}
+
+.cratis-schema-editor__type-button,
+.cratis-schema-editor__key,
+.cratis-schema-editor__remove,
+.cratis-schema-editor__add {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    min-width: 1.5rem;
+    min-height: 1.5rem;
+    padding: 0 0.25rem;
+    border: 1px solid transparent;
+    border-radius: var(--cratis-border-radius);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+}
+
+.cratis-schema-editor__type-button:hover,
+.cratis-schema-editor__key:hover,
+.cratis-schema-editor__remove:hover,
+.cratis-schema-editor__add:hover {
+    background: var(--cratis-surface-hover);
+}
+
+.cratis-schema-editor__type-button:focus-visible,
+.cratis-schema-editor__key:focus-visible,
+.cratis-schema-editor__remove:focus-visible,
+.cratis-schema-editor__add:focus-visible {
+    outline: none;
+    box-shadow: var(--cratis-focus-ring);
+}
+
+.cratis-schema-editor__type-button[data-pressed] {
+    background: var(--cratis-surface-hover);
+}
+
+.cratis-schema-editor__remove {
+    color: var(--cratis-text-color-secondary);
+}
+
+.cratis-schema-editor__remove:hover {
+    color: var(--cratis-red-500);
+}
+
+.cratis-schema-editor__key {
+    color: var(--cratis-text-color-secondary);
+}
+
+.cratis-schema-editor__key[data-pressed] {
+    border-color: var(--cratis-primary-color);
+    background: var(--cratis-highlight-bg);
+    color: var(--cratis-highlight-text-color);
+}
+
+.cratis-schema-editor__required {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    min-height: 1.5rem;
+    color: var(--cratis-text-color-secondary);
+    font-size: 0.75rem;
+    cursor: pointer;
+}
+
+.cratis-schema-editor__required input {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    accent-color: var(--cratis-primary-color);
+}
+
+.cratis-schema-editor__required input:focus-visible {
+    outline: none;
+    box-shadow: var(--cratis-focus-ring);
+}
+
+.cratis-schema-editor__protected {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 0.25rem;
+    color: var(--cratis-text-color-secondary);
+}
+
+.cratis-schema-editor__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.cratis-schema-editor__add {
+    align-self: flex-start;
+    border: 1px dashed var(--cratis-surface-border);
+    color: var(--cratis-text-color-secondary);
+}
+
+.cratis-schema-editor__footer {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.cratis-schema-editor__menu {
+    z-index: var(--cratis-z-index-overlay);
+    min-width: 12rem;
+    max-height: min(24rem, var(--available-height));
+    overflow: auto;
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: var(--cratis-border-radius);
+    background: var(--cratis-surface-overlay);
+    color: var(--cratis-text-color);
+    box-shadow: var(--cratis-shadow-overlay);
+}
+
+.cratis-schema-editor__menu-list {
+    padding: 0.25rem;
+    outline: none;
+}
+
+.cratis-schema-editor__menu-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-height: 1.75rem;
+    padding: 0.25rem 0.5rem;
+    border-radius: calc(var(--cratis-border-radius) * 0.75);
+    outline: none;
+    cursor: default;
+}
+
+.cratis-schema-editor__menu-item[data-focused] {
+    background: var(--cratis-surface-hover);
+}
+
+.cratis-schema-editor__menu-item[data-focus-visible] {
+    box-shadow: inset var(--cratis-focus-ring);
+}
+
+.cratis-schema-editor__menu-heading {
+    padding: 0.25rem 0.5rem;
+    color: var(--cratis-text-color-secondary);
+    font-size: 0.6875rem;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+.cratis-schema-editor__menu-hint {
+    color: var(--cratis-text-color-secondary);
+    font-style: italic;
+    cursor: default;
+}
+
+.cratis-schema-editor__visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+}
+
+.cratis-schema-editor__menu-separator {
+    height: 1px;
+    margin: 0.25rem 0;
+    background: var(--cratis-surface-border);
+}
+
+@media (forced-colors: active) {
+    .cratis-schema-editor__row,
+    .cratis-schema-editor__badge,
+    .cratis-schema-editor__menu {
+        border-color: CanvasText;
+    }
+
+    .cratis-schema-editor__row[data-selected],
+    .cratis-schema-editor__key[data-pressed],
+    .cratis-schema-editor__menu-item[data-focused] {
+        outline: 2px solid Highlight;
+    }
+}
 
 }

package/dist/esm/styles.css

@@ -7478,6 +7478,352 @@
 .cratis-schema-editor-bottom-border {
     border-bottom: 1px solid var(--cratis-surface-border);
 }
+/* Tree layout (`layout='tree'`). */
+
+.cratis-schema-editor {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    min-width: 0;
+    color: var(--cratis-text-color);
+    font-size: 0.875rem;
+}
+
+.cratis-schema-editor__header {
+    min-width: 0;
+}
+
+.cratis-schema-editor__list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.cratis-schema-editor__list--nested {
+    margin-inline-start: 1.25rem;
+    padding-inline-start: 0.5rem;
+    border-inline-start: 1px solid var(--cratis-surface-border);
+}
+
+.cratis-schema-editor__property {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    min-width: 0;
+}
+
+.cratis-schema-editor__empty {
+    margin: 0;
+    padding: 0.5rem;
+    color: var(--cratis-text-color-secondary);
+}
+
+.cratis-schema-editor__row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.375rem;
+    min-height: 2rem;
+    padding: 0.25rem 0.5rem;
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: var(--cratis-border-radius);
+    background: var(--cratis-surface-card);
+}
+
+.cratis-schema-editor__row:hover {
+    background: var(--cratis-surface-hover);
+}
+
+.cratis-schema-editor__row[data-selected] {
+    border-color: var(--cratis-primary-color);
+    box-shadow: inset 0 0 0 1px var(--cratis-primary-color);
+}
+
+.cratis-schema-editor__details {
+    min-width: 0;
+    margin-inline-start: 1.25rem;
+}
+
+.cratis-schema-editor__leading,
+.cratis-schema-editor__accessory {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.cratis-schema-editor__accessory {
+    margin-inline-start: auto;
+}
+
+.cratis-schema-editor__name {
+    flex: 1 1 6rem;
+    min-width: 0;
+    min-height: 1.5rem;
+    padding: 0 0.25rem;
+    border: 0;
+    border-radius: calc(var(--cratis-border-radius) * 0.5);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-weight: 500;
+    text-align: start;
+    overflow-wrap: anywhere;
+    cursor: default;
+}
+
+.cratis-schema-editor__name--static {
+    display: inline-flex;
+    align-items: center;
+}
+
+.cratis-schema-editor__name:focus-visible {
+    outline: none;
+    box-shadow: var(--cratis-focus-ring);
+}
+
+.cratis-schema-editor__name-edit {
+    display: flex;
+    flex: 1 1 8rem;
+    flex-direction: column;
+    gap: 0.125rem;
+    min-width: 0;
+}
+
+.cratis-schema-editor__name-input {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 1.75rem;
+    padding: 0.125rem 0.5rem;
+    border: 1px solid var(--cratis-control-border);
+    border-radius: var(--cratis-border-radius);
+    background: var(--cratis-control-background);
+    color: inherit;
+    font: inherit;
+}
+
+.cratis-schema-editor__name-input:focus-visible {
+    outline: none;
+    box-shadow: var(--cratis-focus-ring);
+}
+
+.cratis-schema-editor__name-input[data-invalid] {
+    border-color: var(--cratis-red-500);
+    border-style: dashed;
+}
+
+.cratis-schema-editor__message {
+    margin: 0;
+    color: var(--cratis-red-500);
+    font-size: 0.75rem;
+}
+
+.cratis-schema-editor__badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    min-height: 1.25rem;
+    padding: 0 0.375rem;
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: 999px;
+    background: var(--cratis-surface-100);
+    color: var(--cratis-text-color);
+    font-size: 0.75rem;
+    white-space: nowrap;
+}
+
+.cratis-schema-editor__badge-glyph {
+    color: var(--cratis-text-color);
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 0.6875rem;
+}
+
+.cratis-schema-editor__type-button,
+.cratis-schema-editor__key,
+.cratis-schema-editor__remove,
+.cratis-schema-editor__add {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    min-width: 1.5rem;
+    min-height: 1.5rem;
+    padding: 0 0.25rem;
+    border: 1px solid transparent;
+    border-radius: var(--cratis-border-radius);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+}
+
+.cratis-schema-editor__type-button:hover,
+.cratis-schema-editor__key:hover,
+.cratis-schema-editor__remove:hover,
+.cratis-schema-editor__add:hover {
+    background: var(--cratis-surface-hover);
+}
+
+.cratis-schema-editor__type-button:focus-visible,
+.cratis-schema-editor__key:focus-visible,
+.cratis-schema-editor__remove:focus-visible,
+.cratis-schema-editor__add:focus-visible {
+    outline: none;
+    box-shadow: var(--cratis-focus-ring);
+}
+
+.cratis-schema-editor__type-button[data-pressed] {
+    background: var(--cratis-surface-hover);
+}
+
+.cratis-schema-editor__remove {
+    color: var(--cratis-text-color-secondary);
+}
+
+.cratis-schema-editor__remove:hover {
+    color: var(--cratis-red-500);
+}
+
+.cratis-schema-editor__key {
+    color: var(--cratis-text-color-secondary);
+}
+
+.cratis-schema-editor__key[data-pressed] {
+    border-color: var(--cratis-primary-color);
+    background: var(--cratis-highlight-bg);
+    color: var(--cratis-highlight-text-color);
+}
+
+.cratis-schema-editor__required {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    min-height: 1.5rem;
+    color: var(--cratis-text-color-secondary);
+    font-size: 0.75rem;
+    cursor: pointer;
+}
+
+.cratis-schema-editor__required input {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    accent-color: var(--cratis-primary-color);
+}
+
+.cratis-schema-editor__required input:focus-visible {
+    outline: none;
+    box-shadow: var(--cratis-focus-ring);
+}
+
+.cratis-schema-editor__protected {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 0.25rem;
+    color: var(--cratis-text-color-secondary);
+}
+
+.cratis-schema-editor__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.cratis-schema-editor__add {
+    align-self: flex-start;
+    border: 1px dashed var(--cratis-surface-border);
+    color: var(--cratis-text-color-secondary);
+}
+
+.cratis-schema-editor__footer {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.cratis-schema-editor__menu {
+    z-index: var(--cratis-z-index-overlay);
+    min-width: 12rem;
+    max-height: min(24rem, var(--available-height));
+    overflow: auto;
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: var(--cratis-border-radius);
+    background: var(--cratis-surface-overlay);
+    color: var(--cratis-text-color);
+    box-shadow: var(--cratis-shadow-overlay);
+}
+
+.cratis-schema-editor__menu-list {
+    padding: 0.25rem;
+    outline: none;
+}
+
+.cratis-schema-editor__menu-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-height: 1.75rem;
+    padding: 0.25rem 0.5rem;
+    border-radius: calc(var(--cratis-border-radius) * 0.75);
+    outline: none;
+    cursor: default;
+}
+
+.cratis-schema-editor__menu-item[data-focused] {
+    background: var(--cratis-surface-hover);
+}
+
+.cratis-schema-editor__menu-item[data-focus-visible] {
+    box-shadow: inset var(--cratis-focus-ring);
+}
+
+.cratis-schema-editor__menu-heading {
+    padding: 0.25rem 0.5rem;
+    color: var(--cratis-text-color-secondary);
+    font-size: 0.6875rem;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+.cratis-schema-editor__menu-hint {
+    color: var(--cratis-text-color-secondary);
+    font-style: italic;
+    cursor: default;
+}
+
+.cratis-schema-editor__visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+}
+
+.cratis-schema-editor__menu-separator {
+    height: 1px;
+    margin: 0.25rem 0;
+    background: var(--cratis-surface-border);
+}
+
+@media (forced-colors: active) {
+    .cratis-schema-editor__row,
+    .cratis-schema-editor__badge,
+    .cratis-schema-editor__menu {
+        border-color: CanvasText;
+    }
+
+    .cratis-schema-editor__row[data-selected],
+    .cratis-schema-editor__key[data-pressed],
+    .cratis-schema-editor__menu-item[data-focused] {
+        outline: 2px solid Highlight;
+    }
+}
 
 /* ── ./TimeMachine/EventsView.css ─────────────────────────────────────── */
 /* Events View Container */