@simai-studio/view 1.1.0 → 1.3.0

package/dist/smart/view-flow/css/view-flow.css

@@ -0,0 +1,570 @@
+@layer sf.reset, sf.tokens, sf.base, sf.utilities, sf.components, sf.overrides, sf.states;
+@layer sf.components {
+  /* sf-view-flow. The host is display: contents; .sf-view-flow
+     is the block the flow places, as wide as the flow. Every value is a
+     Framework token. The public variables (component.json css-variables) are
+     read here and never set, on the block or any ancestor (public-variables.v1):
+       --sf-view-flow-radius            the block's corner
+       --sf-view-flow-inset             its padding
+       --sf-view-flow-gap               between its rows
+       --sf-view-flow-background-color  its ground
+       --sf-view-flow-border-color      its edge
+     The --sf-view-flow--* names are the internal layer they feed. */
+  .sf-view-flow {
+    --sf-view-flow--radius: var(--sf-view-flow-radius, var(--sf-radius-2));
+    --sf-view-flow--inset: var(--sf-view-flow-inset, var(--sf-space-1\/2) var(--sf-space-1));
+    --sf-view-flow--gap: var(--sf-view-flow-gap, var(--sf-space-1\/2));
+    --sf-view-flow--fill: var(--sf-view-flow-background-color, var(--sf-surface-0));
+    --sf-view-flow--edge: var(--sf-view-flow-border-color, var(--sf-outline-variant));
+    --sf-view-flow--label-size: var(--sf-label-medium--size);
+    --sf-view-flow--label-height: var(--sf-label-medium--height);
+    display: flex;
+    flex-direction: column;
+    gap: var(--sf-view-flow--gap);
+    box-sizing: border-box;
+    width: 100%;
+    inline-size: 100%;
+    min-width: 0;
+    min-inline-size: 0;
+    padding: var(--sf-view-flow--inset);
+    border: var(--sf-px) solid var(--sf-view-flow--edge);
+    border-radius: var(--sf-view-flow--radius);
+    background: var(--sf-view-flow--fill);
+    color: var(--sf-on-surface);
+    font-family: var(--sf-text--family);
+    font-size: var(--sf-text--size);
+    line-height: var(--sf-text--height);
+  }
+  .sf-view-flow--size-1-2 {
+    font-size: var(--sf-label-large--size);
+    line-height: var(--sf-label-large--height);
+  }
+  .sf-view-flow__heading {
+    margin: 0;
+    font-weight: var(--sf-font-weight-bold);
+  }
+  .sf-view-flow__description {
+    color: var(--sf-on-surface-variant);
+    font-size: var(--sf-label-large--size);
+    line-height: var(--sf-label-large--height);
+  }
+  .sf-view-flow__groups {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sf-view-flow--gap);
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  .sf-view-flow__group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sf-space-1\/3);
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  .sf-view-flow__group-label {
+    margin: 0;
+    color: var(--sf-on-surface-variant);
+    font-size: var(--sf-view-flow--label-size);
+    line-height: var(--sf-view-flow--label-height);
+    font-weight: var(--sf-font-weight-medium);
+  }
+  /* A collapsible group's label is a plain button: the words and a chevron
+     that turns when the group is closed. */
+  .sf-view-flow__toggle {
+    align-self: flex-start;
+    padding: 0;
+    border: 0;
+    background: none;
+    font-family: inherit;
+    cursor: pointer;
+  }
+  .sf-view-flow__toggle sf-icon {
+    transition: -webkit-transform var(--sf-duration-normal);
+    transition: transform var(--sf-duration-normal);
+    transition: transform var(--sf-duration-normal), -webkit-transform var(--sf-duration-normal);
+  }
+  .sf-view-flow__group[data-collapsed] .sf-view-flow__toggle sf-icon {
+    -webkit-transform: rotate(-90deg);
+            transform: rotate(-90deg);
+  }
+  /* Two columns: a half-width field pairs up with the next, a full one takes
+     the row. */
+  .sf-view-flow__fields {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    grid-gap: var(--sf-space-1\/2) var(--sf-space-1);
+    gap: var(--sf-space-1\/2) var(--sf-space-1);
+  }
+  .sf-view-flow__fields[hidden] {
+    display: none;
+  }
+  .sf-view-flow__field--full {
+    grid-column: 1/-1;
+  }
+  .sf-view-flow__label {
+    font-size: var(--sf-view-flow--label-size);
+    line-height: var(--sf-view-flow--label-height);
+  }
+  .sf-view-flow__value {
+    min-height: var(--sf-view-flow--label-height);
+    min-block-size: var(--sf-view-flow--label-height);
+    word-wrap: anywhere;
+  }
+  /* While the block takes an answer a value is one control, and it fills its
+     field: in a flex row a control keeps its intrinsic width, and a Smart
+     element is display: contents, so its painted root is a grandchild that
+     flex: 1 on the box's children never reaches (sf-view-properties found the
+     same for its full-width fields). As a block it fills. */
+  .sf-view-flow--editing .sf-view-flow__value {
+    display: block;
+  }
+  .sf-view-flow__error {
+    font-size: var(--sf-view-flow--label-size);
+    line-height: var(--sf-view-flow--label-height);
+  }
+  .sf-view-flow__footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--sf-space-1\/3);
+  }
+  .sf-view-flow__status {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sf-space-1\/4);
+    margin: 0;
+    color: var(--sf-on-surface-variant);
+    font-size: var(--sf-view-flow--label-size);
+    line-height: var(--sf-view-flow--label-height);
+  }
+  .sf-view-flow__status.focus-visible {
+    outline-offset: var(--sf-space-1\/4);
+  }
+  .sf-view-flow__status:focus-visible {
+    outline-offset: var(--sf-space-1\/4);
+  }
+  .sf-view-flow__status--error {
+    color: var(--sf-error);
+  }
+  .sf-view-flow--accepted .sf-view-flow__status {
+    color: var(--sf-on-success-container);
+  }
+  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-view-flow__actions {
+    margin-left: auto;
+  }
+  @supports not (margin-inline-start: initial) {
+  html:not([dir="rtl"]) .sf-view-flow__actions {
+    margin-left: auto;
+    }
+  }
+  .sf-view-flow__actions:where(:dir(ltr)) {
+    margin-left: auto;
+  }
+  _:-ms-input-placeholder, [dir="rtl"] .sf-view-flow__actions {
+    margin-right: auto;
+  }
+  @supports not (margin-inline-start: initial) {
+  [dir="rtl"] .sf-view-flow__actions {
+    margin-right: auto;
+    }
+  }
+  .sf-view-flow__actions:where(:dir(rtl)) {
+    margin-right: auto;
+  }
+  .sf-view-flow__actions {
+    display: flex;
+    gap: var(--sf-space-1\/3);
+    -webkit-margin-start: auto;
+            margin-inline-start: auto;
+  }
+  .sf-view-flow__actions[hidden] {
+    display: none;
+  }
+  /* A narrow screen: one column, and the answers share the width. A media
+     query and not a container query: containing the block's inline size would
+     make a block as wide as its content (in a message bubble) collapse. */
+  @media (max-width: 479px) {
+    .sf-view-flow__fields {
+      grid-template-columns: minmax(0, 1fr);
+    }
+    .sf-view-flow__field--half {
+      grid-column: 1/-1;
+    }
+    .sf-view-flow__actions {
+      display: grid;
+      grid-auto-columns: 1fr;
+      grid-auto-flow: column;
+      width: 100%;
+      inline-size: 100%;
+    }
+  }
+}
+@layer sf.components {
+  /* The property types the set draws itself (js/set-fields.js): money, percent,
+     rows (items) and the compound fields. Framework tokens only; the controls in
+     them are the Framework's own and keep their own geometry on the size ladder. */
+  /* An amount with a currency choice: the amount takes the room, the currency
+     the width of its code and sign. */
+  .sf-view-fields-money {
+    width: 100%;
+    inline-size: 100%;
+    align-items: flex-start;
+  }
+  /* sf-input and sf-dropdown hosts may draw no box of their own (display:
+     contents), so the rules reach the box they draw as well. */
+  .sf-view-fields-money > .sf-view-fields-decimal,
+  .sf-view-fields-money > .sf-view-fields-decimal > .sf-input {
+    flex: 1 1 8rem;
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  .sf-view-fields-money > .sf-view-fields-currency,
+  .sf-view-fields-money > .sf-view-fields-currency > .sf-dropdown {
+    flex: 0 0 8.5rem;
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  /* A control in a cell or a part fills its track: a native input's own
+     width (twenty characters) pushed a cell over its neighbour. */
+  .sf-view-items-cell .sf-input {
+    width: 100%;
+    inline-size: 100%;
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  .sf-view-items-cell .sf-dropdown {
+    width: 100%;
+    inline-size: 100%;
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  .sf-view-items-cell .sf-input-date {
+    width: 100%;
+    inline-size: 100%;
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  .sf-view-fields-part .sf-input {
+    width: 100%;
+    inline-size: 100%;
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  .sf-view-fields-part .sf-dropdown {
+    width: 100%;
+    inline-size: 100%;
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  .sf-view-items-cell .sf-input-field input,
+  .sf-view-fields-part .sf-input-field input {
+    width: 100%;
+    inline-size: 100%;
+  }
+  /* A number reads right-aligned where numbers stand in a column (a row's
+     cells, totals); a lone amount in a field keeps the field's start. */
+  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-view-items .sf-view-fields-decimal input {
+    text-align: right;
+  }
+  @supports not (text-align: end) {
+  html:not([dir="rtl"]) .sf-view-items .sf-view-fields-decimal input {
+    text-align: right;
+    }
+  }
+  .sf-view-items .sf-view-fields-decimal input:where(:dir(ltr)) {
+    text-align: right;
+  }
+  _:-ms-input-placeholder, [dir="rtl"] .sf-view-items .sf-view-fields-decimal input {
+    text-align: left;
+  }
+  @supports not (text-align: end) {
+  [dir="rtl"] .sf-view-items .sf-view-fields-decimal input {
+    text-align: left;
+    }
+  }
+  .sf-view-items .sf-view-fields-decimal input:where(:dir(rtl)) {
+    text-align: left;
+  }
+  .sf-view-items .sf-view-fields-decimal input {
+    text-align: end;
+  }
+  .sf-view-fields-amount,
+  .sf-view-items-numeric .sf-view-items-text {
+    -webkit-font-feature-settings: "tnum";
+            font-feature-settings: "tnum";
+    font-variant-numeric: tabular-nums;
+  }
+  /* --- A compound: its parts in a grid that wraps by the field's width --- */
+  .sf-view-fields-compound {
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
+  }
+  .sf-view-fields-part--wide {
+    grid-column: span 2;
+  }
+  .sf-view-fields-part-label {
+    font-size: var(--sf-text-size-1);
+    font-size: var(--sf-label-medium--size, var(--sf-text-size-1));
+    line-height: var(--sf-text-height-1);
+    line-height: var(--sf-label-medium--height, var(--sf-text-height-1));
+  }
+  @container (max-width: 24rem) {
+    .sf-view-fields-part--wide {
+      grid-column: auto;
+    }
+  }
+  /* --- Rows over columns --- */
+  /* A table of rows at any width the field has, and one card a row where it is
+     narrow (a phone, a half-width field): the field's own width decides, not the
+     window's, as the record's groups decide their columns. */
+  /* The box the rows ask for their width: a container query cannot restyle
+     the container itself, so the grid is inside it. */
+  .sf-view-items-box {
+    display: block;
+    container: sf-view-items/inline-size;
+    width: 100%;
+    inline-size: 100%;
+    min-width: 0;
+    min-inline-size: 0;
+    flex: 1 1 100%;
+  }
+  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-view-items {
+    text-align: left;
+  }
+  @supports not (text-align: start) {
+  html:not([dir="rtl"]) .sf-view-items {
+    text-align: left;
+    }
+  }
+  .sf-view-items:where(:dir(ltr)) {
+    text-align: left;
+  }
+  _:-ms-input-placeholder, [dir="rtl"] .sf-view-items {
+    text-align: right;
+  }
+  @supports not (text-align: start) {
+  [dir="rtl"] .sf-view-items {
+    text-align: right;
+    }
+  }
+  .sf-view-items:where(:dir(rtl)) {
+    text-align: right;
+  }
+  .sf-view-items {
+    display: grid;
+    width: 100%;
+    inline-size: 100%;
+    min-width: 0;
+    min-inline-size: 0;
+    grid-template-columns: 1fr;
+    grid-template-columns: var(--sf-view-items-columns, 1fr);
+    grid-column-gap: var(--sf-space-1);
+    -webkit-column-gap: var(--sf-space-1);
+       -moz-column-gap: var(--sf-space-1);
+            column-gap: var(--sf-space-1);
+    text-align: start;
+  }
+  .sf-view-items-head,
+  .sf-view-items-row {
+    display: grid;
+    grid-column: 1/-1;
+    grid-template-columns: subgrid;
+    align-items: center;
+  }
+  .sf-view-items-head {
+    padding-bottom: var(--sf-space-1);
+    -webkit-padding-after: var(--sf-space-1);
+            padding-block-end: var(--sf-space-1);
+    border-bottom: var(--sf-px) solid var(--sf-outline-variant);
+    -webkit-border-after: var(--sf-px) solid var(--sf-outline-variant);
+            border-block-end: var(--sf-px) solid var(--sf-outline-variant);
+  }
+  .sf-view-items-heading {
+    font-size: var(--sf-text-size-1);
+    font-size: var(--sf-label-medium--size, var(--sf-text-size-1));
+    line-height: var(--sf-text-height-1);
+    line-height: var(--sf-label-medium--height, var(--sf-text-height-1));
+    color: var(--sf-on-surface-variant);
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  .sf-view-items-row {
+    padding-top: var(--sf-space-1);
+    padding-bottom: var(--sf-space-1);
+    padding-block: var(--sf-space-1);
+    border-bottom: var(--sf-px) solid var(--sf-outline-variant);
+    -webkit-border-after: var(--sf-px) solid var(--sf-outline-variant);
+            border-block-end: var(--sf-px) solid var(--sf-outline-variant);
+  }
+  .sf-view-items:not(.sf-view-items--edit) .sf-view-items-row {
+    padding-top: calc(var(--sf-space-1) / 2);
+    padding-bottom: calc(var(--sf-space-1) / 2);
+    padding-block: calc(var(--sf-space-1) / 2);
+  }
+  .sf-view-items-cell {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-view-items-numeric {
+    text-align: right;
+  }
+  @supports not (text-align: end) {
+  html:not([dir="rtl"]) .sf-view-items-numeric {
+    text-align: right;
+    }
+  }
+  .sf-view-items-numeric:where(:dir(ltr)) {
+    text-align: right;
+  }
+  _:-ms-input-placeholder, [dir="rtl"] .sf-view-items-numeric {
+    text-align: left;
+  }
+  @supports not (text-align: end) {
+  [dir="rtl"] .sf-view-items-numeric {
+    text-align: left;
+    }
+  }
+  .sf-view-items-numeric:where(:dir(rtl)) {
+    text-align: left;
+  }
+  .sf-view-items-numeric {
+    text-align: end;
+    align-items: flex-end;
+  }
+  .sf-view-items-cell > :not(.sf-view-items-cell-label) {
+    width: 100%;
+    inline-size: 100%;
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  .sf-view-items-text {
+    word-wrap: anywhere;
+  }
+  .sf-view-items-cell-label {
+    display: none;
+    font-size: var(--sf-text-size-1);
+    font-size: var(--sf-label-medium--size, var(--sf-text-size-1));
+    line-height: var(--sf-text-height-1);
+    line-height: var(--sf-label-medium--height, var(--sf-text-height-1));
+  }
+  .sf-view-items-totals {
+    border-bottom: 0;
+    -webkit-border-after: 0;
+            border-block-end: 0;
+    font-weight: 600;
+  }
+  .sf-view-items-foot {
+    grid-column: 1/-1;
+    padding-top: var(--sf-space-1);
+    -webkit-padding-before: var(--sf-space-1);
+            padding-block-start: var(--sf-space-1);
+  }
+  @container sf-view-items (max-width: 36rem) {
+    .sf-view-items {
+      grid-template-columns: 1fr;
+      row-gap: var(--sf-space-1);
+    }
+    .sf-view-items-head {
+      display: none;
+    }
+    /* A card a row: each cell its label over its value, the row's actions at
+       the card's foot. */
+    .sf-view-items-row {
+      grid-template-columns: 1fr;
+      row-gap: var(--sf-space-1);
+      padding: var(--sf-space-1) var(--sf-space-2);
+      border: var(--sf-px) solid var(--sf-outline-variant);
+      border-radius: var(--sf-radius-1);
+    }
+    .sf-view-items:not(.sf-view-items--edit) .sf-view-items-row {
+      padding: var(--sf-space-1) var(--sf-space-2);
+    }
+    _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-view-items-cell,html:not([dir="rtl"])
+    .sf-view-items-numeric {
+      text-align: left;
+    }
+    @supports not (text-align: start) {
+    html:not([dir="rtl"]) .sf-view-items-cell,html:not([dir="rtl"])
+    .sf-view-items-numeric {
+      text-align: left;
+      }
+    }
+    .sf-view-items-cell:where(:dir(ltr)),
+    .sf-view-items-numeric:where(:dir(ltr)) {
+      text-align: left;
+    }
+    _:-ms-input-placeholder, [dir="rtl"] .sf-view-items-cell,[dir="rtl"]
+    .sf-view-items-numeric {
+      text-align: right;
+    }
+    @supports not (text-align: start) {
+    [dir="rtl"] .sf-view-items-cell,[dir="rtl"]
+    .sf-view-items-numeric {
+      text-align: right;
+      }
+    }
+    .sf-view-items-cell:where(:dir(rtl)),
+    .sf-view-items-numeric:where(:dir(rtl)) {
+      text-align: right;
+    }
+    .sf-view-items-cell,
+    .sf-view-items-numeric {
+      align-items: stretch;
+      text-align: start;
+      gap: calc(var(--sf-space-1) / 4);
+    }
+    _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-view-items-numeric .sf-view-items-text,html:not([dir="rtl"])
+    .sf-view-items .sf-view-fields-decimal input {
+      text-align: left;
+    }
+    @supports not (text-align: start) {
+    html:not([dir="rtl"]) .sf-view-items-numeric .sf-view-items-text,html:not([dir="rtl"])
+    .sf-view-items .sf-view-fields-decimal input {
+      text-align: left;
+      }
+    }
+    .sf-view-items-numeric .sf-view-items-text:where(:dir(ltr)),
+    .sf-view-items .sf-view-fields-decimal input:where(:dir(ltr)) {
+      text-align: left;
+    }
+    _:-ms-input-placeholder, [dir="rtl"] .sf-view-items-numeric .sf-view-items-text,[dir="rtl"]
+    .sf-view-items .sf-view-fields-decimal input {
+      text-align: right;
+    }
+    @supports not (text-align: start) {
+    [dir="rtl"] .sf-view-items-numeric .sf-view-items-text,[dir="rtl"]
+    .sf-view-items .sf-view-fields-decimal input {
+      text-align: right;
+      }
+    }
+    .sf-view-items-numeric .sf-view-items-text:where(:dir(rtl)),
+    .sf-view-items .sf-view-fields-decimal input:where(:dir(rtl)) {
+      text-align: right;
+    }
+    .sf-view-items-numeric .sf-view-items-text,
+    .sf-view-items .sf-view-fields-decimal input {
+      text-align: start;
+    }
+    .sf-view-items-cell-label {
+      display: block;
+    }
+    .sf-view-items-cell--blank {
+      display: none;
+    }
+    .sf-view-items-actions {
+      justify-content: flex-end;
+    }
+    .sf-view-items-totals {
+      border: 0;
+      padding-left: var(--sf-space-2);
+      padding-right: var(--sf-space-2);
+      padding-inline: var(--sf-space-2);
+    }
+    .sf-view-items-totals .sf-view-items-total-word {
+      display: none;
+    }
+  }
+}

package/dist/smart/view-flow/css/view-flow.min.css

@@ -0,0 +1,3 @@
+@layer sf.reset, sf.tokens, sf.base, sf.utilities, sf.components, sf.overrides, sf.states;
+@layer sf.components{.sf-view-flow{--sf-view-flow--radius: var(--sf-view-flow-radius, var(--sf-radius-2));--sf-view-flow--inset: var(--sf-view-flow-inset, var(--sf-space-1\/2) var(--sf-space-1));--sf-view-flow--gap: var(--sf-view-flow-gap, var(--sf-space-1\/2));--sf-view-flow--fill: var(--sf-view-flow-background-color, var(--sf-surface-0));--sf-view-flow--edge: var(--sf-view-flow-border-color, var(--sf-outline-variant));--sf-view-flow--label-size: var(--sf-label-medium--size);--sf-view-flow--label-height: var(--sf-label-medium--height);display:flex;flex-direction:column;gap:var(--sf-view-flow--gap);box-sizing:border-box;width:100%;inline-size:100%;min-width:0;min-inline-size:0;padding:var(--sf-view-flow--inset);border:var(--sf-px) solid var(--sf-view-flow--edge);border-radius:var(--sf-view-flow--radius);background:var(--sf-view-flow--fill);color:var(--sf-on-surface);font-family:var(--sf-text--family);font-size:var(--sf-text--size);line-height:var(--sf-text--height)}.sf-view-flow--size-1-2{font-size:var(--sf-label-large--size);line-height:var(--sf-label-large--height)}.sf-view-flow__heading{margin:0;font-weight:var(--sf-font-weight-bold)}.sf-view-flow__description{color:var(--sf-on-surface-variant);font-size:var(--sf-label-large--size);line-height:var(--sf-label-large--height)}.sf-view-flow__groups{display:flex;flex-direction:column;gap:var(--sf-view-flow--gap);min-width:0;min-inline-size:0}.sf-view-flow__group{display:flex;flex-direction:column;gap:var(--sf-space-1\/3);min-width:0;min-inline-size:0}.sf-view-flow__group-label{margin:0;color:var(--sf-on-surface-variant);font-size:var(--sf-view-flow--label-size);line-height:var(--sf-view-flow--label-height);font-weight:var(--sf-font-weight-medium)}.sf-view-flow__toggle{align-self:flex-start;padding:0;border:0;background:none;font-family:inherit;cursor:pointer}.sf-view-flow__toggle sf-icon{transition:-webkit-transform var(--sf-duration-normal);transition:transform var(--sf-duration-normal);transition:transform var(--sf-duration-normal), -webkit-transform var(--sf-duration-normal)}.sf-view-flow__group[data-collapsed] .sf-view-flow__toggle sf-icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.sf-view-flow__fields{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);grid-gap:var(--sf-space-1\/2) var(--sf-space-1);gap:var(--sf-space-1\/2) var(--sf-space-1)}.sf-view-flow__fields[hidden]{display:none}.sf-view-flow__field--full{grid-column:1/-1}.sf-view-flow__label{font-size:var(--sf-view-flow--label-size);line-height:var(--sf-view-flow--label-height)}.sf-view-flow__value{min-height:var(--sf-view-flow--label-height);min-block-size:var(--sf-view-flow--label-height);word-wrap:anywhere}.sf-view-flow--editing .sf-view-flow__value{display:block}.sf-view-flow__error{font-size:var(--sf-view-flow--label-size);line-height:var(--sf-view-flow--label-height)}.sf-view-flow__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sf-space-1\/3)}.sf-view-flow__status{display:inline-flex;align-items:center;gap:var(--sf-space-1\/4);margin:0;color:var(--sf-on-surface-variant);font-size:var(--sf-view-flow--label-size);line-height:var(--sf-view-flow--label-height)}.sf-view-flow__status.focus-visible{outline-offset:var(--sf-space-1\/4)}.sf-view-flow__status:focus-visible{outline-offset:var(--sf-space-1\/4)}.sf-view-flow__status--error{color:var(--sf-error)}.sf-view-flow--accepted .sf-view-flow__status{color:var(--sf-on-success-container)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-view-flow__actions{margin-left:auto}@supports not (margin-inline-start: initial){html:not([dir="rtl"]) .sf-view-flow__actions{margin-left:auto}}.sf-view-flow__actions:where(:dir(ltr)){margin-left:auto}_:-ms-input-placeholder, [dir="rtl"] .sf-view-flow__actions{margin-right:auto}@supports not (margin-inline-start: initial){[dir="rtl"] .sf-view-flow__actions{margin-right:auto}}.sf-view-flow__actions:where(:dir(rtl)){margin-right:auto}.sf-view-flow__actions{display:flex;gap:var(--sf-space-1\/3);-webkit-margin-start:auto;margin-inline-start:auto}.sf-view-flow__actions[hidden]{display:none}@media(max-width: 479px){.sf-view-flow__fields{grid-template-columns:minmax(0, 1fr)}.sf-view-flow__field--half{grid-column:1/-1}.sf-view-flow__actions{display:grid;grid-auto-columns:1fr;grid-auto-flow:column;width:100%;inline-size:100%}}}
+@layer sf.components{.sf-view-fields-money{width:100%;inline-size:100%;align-items:flex-start}.sf-view-fields-money>.sf-view-fields-decimal,.sf-view-fields-money>.sf-view-fields-decimal>.sf-input{flex:1 1 8rem;min-width:0;min-inline-size:0}.sf-view-fields-money>.sf-view-fields-currency,.sf-view-fields-money>.sf-view-fields-currency>.sf-dropdown{flex:0 0 8.5rem;min-width:0;min-inline-size:0}.sf-view-items-cell .sf-input{width:100%;inline-size:100%;min-width:0;min-inline-size:0}.sf-view-items-cell .sf-dropdown{width:100%;inline-size:100%;min-width:0;min-inline-size:0}.sf-view-items-cell .sf-input-date{width:100%;inline-size:100%;min-width:0;min-inline-size:0}.sf-view-fields-part .sf-input{width:100%;inline-size:100%;min-width:0;min-inline-size:0}.sf-view-fields-part .sf-dropdown{width:100%;inline-size:100%;min-width:0;min-inline-size:0}.sf-view-items-cell .sf-input-field input,.sf-view-fields-part .sf-input-field input{width:100%;inline-size:100%}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-view-items .sf-view-fields-decimal input{text-align:right}@supports not (text-align: end){html:not([dir="rtl"]) .sf-view-items .sf-view-fields-decimal input{text-align:right}}.sf-view-items .sf-view-fields-decimal input:where(:dir(ltr)){text-align:right}_:-ms-input-placeholder, [dir="rtl"] .sf-view-items .sf-view-fields-decimal input{text-align:left}@supports not (text-align: end){[dir="rtl"] .sf-view-items .sf-view-fields-decimal input{text-align:left}}.sf-view-items .sf-view-fields-decimal input:where(:dir(rtl)){text-align:left}.sf-view-items .sf-view-fields-decimal input{text-align:end}.sf-view-fields-amount,.sf-view-items-numeric .sf-view-items-text{-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.sf-view-fields-compound{grid-template-columns:repeat(auto-fill, minmax(min(100%, 11rem), 1fr))}.sf-view-fields-part--wide{grid-column:span 2}.sf-view-fields-part-label{font-size:var(--sf-text-size-1);font-size:var(--sf-label-medium--size, var(--sf-text-size-1));line-height:var(--sf-text-height-1);line-height:var(--sf-label-medium--height, var(--sf-text-height-1))}@container (max-width: 24rem){.sf-view-fields-part--wide{grid-column:auto}}.sf-view-items-box{display:block;container:sf-view-items/inline-size;width:100%;inline-size:100%;min-width:0;min-inline-size:0;flex:1 1 100%}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-view-items{text-align:left}@supports not (text-align: start){html:not([dir="rtl"]) .sf-view-items{text-align:left}}.sf-view-items:where(:dir(ltr)){text-align:left}_:-ms-input-placeholder, [dir="rtl"] .sf-view-items{text-align:right}@supports not (text-align: start){[dir="rtl"] .sf-view-items{text-align:right}}.sf-view-items:where(:dir(rtl)){text-align:right}.sf-view-items{display:grid;width:100%;inline-size:100%;min-width:0;min-inline-size:0;grid-template-columns:1fr;grid-template-columns:var(--sf-view-items-columns, 1fr);grid-column-gap:var(--sf-space-1);-webkit-column-gap:var(--sf-space-1);-moz-column-gap:var(--sf-space-1);column-gap:var(--sf-space-1);text-align:start}.sf-view-items-head,.sf-view-items-row{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center}.sf-view-items-head{padding-bottom:var(--sf-space-1);-webkit-padding-after:var(--sf-space-1);padding-block-end:var(--sf-space-1);border-bottom:var(--sf-px) solid var(--sf-outline-variant);-webkit-border-after:var(--sf-px) solid var(--sf-outline-variant);border-block-end:var(--sf-px) solid var(--sf-outline-variant)}.sf-view-items-heading{font-size:var(--sf-text-size-1);font-size:var(--sf-label-medium--size, var(--sf-text-size-1));line-height:var(--sf-text-height-1);line-height:var(--sf-label-medium--height, var(--sf-text-height-1));color:var(--sf-on-surface-variant);min-width:0;min-inline-size:0}.sf-view-items-row{padding-top:var(--sf-space-1);padding-bottom:var(--sf-space-1);padding-block:var(--sf-space-1);border-bottom:var(--sf-px) solid var(--sf-outline-variant);-webkit-border-after:var(--sf-px) solid var(--sf-outline-variant);border-block-end:var(--sf-px) solid var(--sf-outline-variant)}.sf-view-items:not(.sf-view-items--edit) .sf-view-items-row{padding-top:calc(var(--sf-space-1)/2);padding-bottom:calc(var(--sf-space-1)/2);padding-block:calc(var(--sf-space-1)/2)}.sf-view-items-cell{display:flex;flex-direction:column;min-width:0;min-inline-size:0}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-view-items-numeric{text-align:right}@supports not (text-align: end){html:not([dir="rtl"]) .sf-view-items-numeric{text-align:right}}.sf-view-items-numeric:where(:dir(ltr)){text-align:right}_:-ms-input-placeholder, [dir="rtl"] .sf-view-items-numeric{text-align:left}@supports not (text-align: end){[dir="rtl"] .sf-view-items-numeric{text-align:left}}.sf-view-items-numeric:where(:dir(rtl)){text-align:left}.sf-view-items-numeric{text-align:end;align-items:flex-end}.sf-view-items-cell>:not(.sf-view-items-cell-label){width:100%;inline-size:100%;min-width:0;min-inline-size:0}.sf-view-items-text{word-wrap:anywhere}.sf-view-items-cell-label{display:none;font-size:var(--sf-text-size-1);font-size:var(--sf-label-medium--size, var(--sf-text-size-1));line-height:var(--sf-text-height-1);line-height:var(--sf-label-medium--height, var(--sf-text-height-1))}.sf-view-items-totals{border-bottom:0;-webkit-border-after:0;border-block-end:0;font-weight:600}.sf-view-items-foot{grid-column:1/-1;padding-top:var(--sf-space-1);-webkit-padding-before:var(--sf-space-1);padding-block-start:var(--sf-space-1)}@container sf-view-items (max-width: 36rem){.sf-view-items{grid-template-columns:1fr;row-gap:var(--sf-space-1)}.sf-view-items-head{display:none}.sf-view-items-row{grid-template-columns:1fr;row-gap:var(--sf-space-1);padding:var(--sf-space-1) var(--sf-space-2);border:var(--sf-px) solid var(--sf-outline-variant);border-radius:var(--sf-radius-1)}.sf-view-items:not(.sf-view-items--edit) .sf-view-items-row{padding:var(--sf-space-1) var(--sf-space-2)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-view-items-cell,html:not([dir="rtl"]) .sf-view-items-numeric{text-align:left}@supports not (text-align: start){html:not([dir="rtl"]) .sf-view-items-cell,html:not([dir="rtl"]) .sf-view-items-numeric{text-align:left}}.sf-view-items-cell:where(:dir(ltr)),.sf-view-items-numeric:where(:dir(ltr)){text-align:left}_:-ms-input-placeholder, [dir="rtl"] .sf-view-items-cell,[dir="rtl"] .sf-view-items-numeric{text-align:right}@supports not (text-align: start){[dir="rtl"] .sf-view-items-cell,[dir="rtl"] .sf-view-items-numeric{text-align:right}}.sf-view-items-cell:where(:dir(rtl)),.sf-view-items-numeric:where(:dir(rtl)){text-align:right}.sf-view-items-cell,.sf-view-items-numeric{align-items:stretch;text-align:start;gap:calc(var(--sf-space-1)/4)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-view-items-numeric .sf-view-items-text,html:not([dir="rtl"]) .sf-view-items .sf-view-fields-decimal input{text-align:left}@supports not (text-align: start){html:not([dir="rtl"]) .sf-view-items-numeric .sf-view-items-text,html:not([dir="rtl"]) .sf-view-items .sf-view-fields-decimal input{text-align:left}}.sf-view-items-numeric .sf-view-items-text:where(:dir(ltr)),.sf-view-items .sf-view-fields-decimal input:where(:dir(ltr)){text-align:left}_:-ms-input-placeholder, [dir="rtl"] .sf-view-items-numeric .sf-view-items-text,[dir="rtl"] .sf-view-items .sf-view-fields-decimal input{text-align:right}@supports not (text-align: start){[dir="rtl"] .sf-view-items-numeric .sf-view-items-text,[dir="rtl"] .sf-view-items .sf-view-fields-decimal input{text-align:right}}.sf-view-items-numeric .sf-view-items-text:where(:dir(rtl)),.sf-view-items .sf-view-fields-decimal input:where(:dir(rtl)){text-align:right}.sf-view-items-numeric .sf-view-items-text,.sf-view-items .sf-view-fields-decimal input{text-align:start}.sf-view-items-cell-label{display:block}.sf-view-items-cell--blank{display:none}.sf-view-items-actions{justify-content:flex-end}.sf-view-items-totals{border:0;padding-left:var(--sf-space-2);padding-right:var(--sf-space-2);padding-inline:var(--sf-space-2)}.sf-view-items-totals .sf-view-items-total-word{display:none}}}