genshin-interface 4.4.0 → 4.5.0

package/dist/styles/artifactStats.css

@@ -0,0 +1,21 @@
+/* The attribute rows the panel's totals and a picked piece's stats draw alike. Each list sets its own top */
+.totals,
+.stats {
+  position: absolute;
+  right: 0;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.total,
+.stat {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: calc(var(--unit) * 35.6);
+  padding: 0 calc(var(--unit) * 2) 0 calc(var(--unit) * 28);
+  font-size: calc(var(--unit) * 26);
+  font-weight: 600;
+}

package/dist/styles/creamDiscPress.css

@@ -0,0 +1,8 @@
+/* A cream disc's press, at once: the disc tinted slate with its mark cream. Provisional: no reference frame shows a close
+   or a disc under the pointer, so the press is the cream pill's own. The cream is `GAME_CREAM`, restated because this
+   sheet is plain CSS. It is worn by the close and the disc button, which pull `ringButton.css` for the rest */
+.cream-disc-press:enabled:is(:active, [data-pressed], [data-interaction-state="Pressed"] *) {
+  --state-duration: 0s;
+  background-color: rgb(73 83 103 / 0.5);
+  color: #ece5d8;
+}

package/dist/styles/creamPillButton.css

@@ -0,0 +1,39 @@
+/* A cream pill button, lit as the game's cream pill is without its bevel, which these pills never drew: a white ring
+   1 unit outside its edge and 2 within on a pointer's hover (only a pointer's, so a tap leaves none), and on focus or
+   the forced hover, holding its size. Pressed, its cream gives way to the slate and gold light the pill takes at once.
+   Provisional past the ring, as no recording shows these pills under the pointer */
+.cream-pill-button {
+  --cream-pill-button-lit-shadow:
+    0 0 0 calc(var(--unit) * 1) #fff, inset 0 0 0 calc(var(--unit) * 2) #fff,
+    0 0 calc(var(--unit) * 7) rgb(255 255 255 / 0.125);
+}
+
+@media (hover: hover) {
+  .cream-pill-button:enabled:hover {
+    box-shadow: var(--cream-pill-button-lit-shadow);
+  }
+}
+
+.cream-pill-button:enabled:is(:focus-visible, [data-interaction-state="Hover"] *) {
+  box-shadow: var(--cream-pill-button-lit-shadow);
+}
+
+.cream-pill-button::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  border: calc(var(--unit) * 2) solid rgb(73 83 103 / 0.5);
+  border-radius: inherit;
+  background-color: rgb(255 243 183 / 0.5);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.cream-pill-button:enabled:is(:active, [data-pressed], [data-interaction-state="Pressed"] *) {
+  background-color: transparent;
+}
+
+.cream-pill-button:enabled:is(:active, [data-pressed], [data-interaction-state="Pressed"] *)::before {
+  opacity: 1;
+}

package/dist/styles/creamPillLit.css

@@ -0,0 +1,18 @@
+/* The lit rim of a cream pill control, the game's Pill as it is lit: a white ring a unit over its edge and two within.
+   It shows on hover and focus, with no browser outline. Provisional, as no recording shows an inventory pill lit.
+   The rim is the Pill's, measured on a dialog's Confirm. */
+.cream-pill-lit {
+  --cream-pill-lit-shadow: 0 0 0 calc(var(--unit) * 1) #fff, inset 0 0 0 calc(var(--unit) * 2) #fff;
+}
+
+.cream-pill-lit:enabled:is(:focus-visible, [data-interaction-state="Hover"] *) {
+  outline: none;
+  box-shadow: var(--cream-pill-lit-shadow);
+}
+
+@media (hover: hover) {
+  .cream-pill-lit:enabled:hover {
+    outline: none;
+    box-shadow: var(--cream-pill-lit-shadow);
+  }
+}

package/dist/styles/fillTint.css

@@ -0,0 +1,21 @@
+/* A fill tint: the element's box takes `--row-tint` behind its words, lit as a list row is, by focus, by the forced
+   Hover state or by a pointer's hover. The first two draw the tint unguarded, and a pointer's hover is guarded by
+   `(hover: hover)`, so a touch screen leaves no tint after a tap. The element wears the `fill-tint` class and sets
+   `--row-tint`, `--hover-duration` and `--rest-duration` on its own base rule. Its press is its own, in a block placed
+   after this sheet. Worn by the artifact picker's options and the character screen's tabs */
+.fill-tint {
+  --state-duration: var(--rest-duration);
+  transition: background-color var(--state-duration);
+}
+
+.fill-tint:is(:focus-visible, [data-interaction-state="Hover"] *) {
+  --state-duration: var(--hover-duration);
+  background-color: var(--row-tint);
+}
+
+@media (hover: hover) {
+  .fill-tint:hover {
+    --state-duration: var(--hover-duration);
+    background-color: var(--row-tint);
+  }
+}

package/dist/styles/footDisc.css

@@ -0,0 +1,9 @@
+/* The round 50 unit buttons along a screen's foot, each placed and filled by its own rule */
+.foot-disc {
+  position: absolute;
+  width: calc(var(--unit) * 50);
+  height: calc(var(--unit) * 50);
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+}

package/dist/styles/forgeDetail.css

@@ -0,0 +1,30 @@
+/* The detail pane's frame and the children it places: each direct child of the pane is absolute, pointer-events auto, with no
+   margin, so every pane that is a child of it pulls this sheet in to draw its own */
+.detail {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.detail > * {
+  pointer-events: auto;
+  position: absolute;
+  margin: 0;
+}
+/* The game's label sits right of its icon, which is not drawn, so the padding pushes the label along by half of itself */
+.action {
+  box-sizing: border-box;
+  top: calc(var(--unit) * 963);
+  left: calc(var(--unit) * 1883);
+  width: calc(var(--unit) * 277);
+  height: calc(var(--unit) * 78);
+  padding-left: calc(var(--unit) * 39);
+  border: none;
+  border-radius: calc(var(--unit) * 39);
+  background: #ece5d8;
+  color: #3b3b3b;
+  font-size: calc(var(--unit) * 36);
+  letter-spacing: calc(var(--unit) * 2.9);
+}

package/dist/styles/gradientTint.css

@@ -0,0 +1,17 @@
+/* A gradient tint: a flat gradient laid over the element's own fill in its background image, lit as a row is, by a
+   pointer's hover, by focus or by the forced Hover state, and pressed at once. A pointer's hover is guarded by
+   `(hover: hover)`, so a touch screen leaves no tint after a tap. The element wears the `gradient-tint` class and sets
+   `--tint-hover` and `--tint-press` on its own base rule */
+@media (hover: hover) {
+  .gradient-tint:enabled:hover {
+    background-image: linear-gradient(var(--tint-hover), var(--tint-hover));
+  }
+}
+
+.gradient-tint:enabled:is(:focus-visible, [data-interaction-state="Hover"] *) {
+  background-image: linear-gradient(var(--tint-hover), var(--tint-hover));
+}
+
+.gradient-tint:enabled:is(:active, [data-pressed], [data-interaction-state="Pressed"] *) {
+  background-image: linear-gradient(var(--tint-press), var(--tint-press));
+}

package/dist/styles/ringButton.css

@@ -0,0 +1,27 @@
+/* A button a white ring lights round when it is hovered or focused, its crossfade the button's own `--hover-duration`.
+   The keyboard's focus and the forced Hover state draw the ring unguarded, and a pointer's hover is guarded by
+   `(hover: hover)`, so a touch screen leaves nothing lit after a tap. The ring has no `:enabled`, so a button's enabled
+   Press outranks it at equal specificity; a Press without `:enabled` does so only when its own block comes after this
+   sheet. The transition lists `filter` too, for the brightness a press sets: a transition on a property that never
+   changes draws nothing, so the close, the disc and the tip, which never change `filter`, are unaffected.
+   Provisional: no reference frame shows a close, a disc or a tip's button under the Pointer, so these states are
+   the cream pill's own */
+.ring-button {
+  transition:
+    background-color var(--state-duration),
+    color var(--state-duration),
+    filter var(--state-duration),
+    outline-color var(--state-duration);
+}
+
+.ring-button:is(:focus-visible, [data-interaction-state="Hover"] *) {
+  --state-duration: var(--hover-duration);
+  outline-color: #fff;
+}
+
+@media (hover: hover) {
+  .ring-button:hover {
+    --state-duration: var(--hover-duration);
+    outline-color: #fff;
+  }
+}

package/dist/styles/rowTint.css

@@ -0,0 +1,33 @@
+/* A row's tint: a box laid over the row behind its words, lit as a row is when it is hovered or focused, and pressed at
+   Once. The row wears the `row-tint` class and sets the tint's colours as `--row-tint` and `--row-press` */
+.row-tint {
+  isolation: isolate;
+}
+
+.row-tint::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  border-radius: inherit;
+  background-color: var(--row-tint);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--state-duration);
+}
+
+.row-tint:enabled:is(:focus-visible, [data-interaction-state="Hover"] *)::before {
+  opacity: 1;
+}
+
+/* A pointer's hover is guarded by `(hover: hover)`, so a touch screen leaves no tint after a tap */
+@media (hover: hover) {
+  .row-tint:enabled:hover::before {
+    opacity: 1;
+  }
+}
+
+.row-tint:enabled:is(:active, [data-pressed], [data-interaction-state="Pressed"] *)::before {
+  background-color: var(--row-press);
+  opacity: 1;
+}

package/dist/styles/shopScreen.css

@@ -0,0 +1,31 @@
+/* The pieces the shop's grid and its list draw alike. Each screen sets its own position, size and line height */
+.amount::-webkit-slider-runnable-track {
+  background: #9aa3b8;
+}
+
+.amount::-webkit-slider-thumb {
+  background: #2b2a26;
+}
+
+.cross {
+  width: calc(var(--unit) * 24);
+  height: calc(var(--unit) * 24);
+  fill: none;
+  stroke: currentcolor;
+  stroke-linecap: round;
+  stroke-width: 3;
+}
+
+.price-icon {
+  width: calc(var(--unit) * 18);
+  height: calc(var(--unit) * 18);
+  background: #7aa9e8;
+  transform: rotate(45deg);
+}
+
+.price-line {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--unit) * 10);
+  font-size: calc(var(--unit) * 24);
+}

package/dist/styles/sparkle.css

@@ -0,0 +1,6 @@
+/* The sparkle the game marks its Wish and its banner's rate-up with, a four-point star in its own colour. Its size and colour
+   are each piece's own, so the base is all a sparkle shares */
+.sparkle {
+  position: absolute;
+  clip-path: var(--sparkle-clip-path);
+}

package/dist/styles/translucentButton.css

@@ -0,0 +1,9 @@
+/* A button's translucent box, its words in the colour and font around it, its place left to the button */
+.translucent-button {
+  padding: calc(var(--unit) * 10) calc(var(--unit) * 20);
+  border: none;
+  border-radius: calc(var(--unit) * 8);
+  background: rgb(255 255 255 / 0.14);
+  color: inherit;
+  font: inherit;
+}

package/dist/styles/visuallyHidden.css

@@ -0,0 +1,11 @@
+/* The words a screen reader reads and no eye sees: each keeps its place in the page at one pixel square and clipped to
+   nothing, under the class that carries it (a tab's name, a level's achieved word, a dialogue's whole line) */
+.tab-name,
+.hidden-label,
+.spoken {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "genshin-interface",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "description": "Genshin Impact's interface as a fan recreation: the game's own screen units, face and pointer, and its buttons, dividers, bars and notices as presentational Vue components.",
   "keywords": [
     "component-library",
@@ -51,18 +51,18 @@
     "typecheck": "tsrs --fast --runExternalCode"
   },
   "devDependencies": {
-    "@esposter/configuration": "4.4.0",
+    "@esposter/configuration": "4.5.0",
     "@fontsource/signika": "^5.3.0",
-    "@tsdown/css": "0.23.2",
+    "@tsdown/css": "^0.23.5",
     "@types/node": "^26.6.6",
-    "tsdown": "0.23.2",
+    "tsdown": "^0.23.5",
     "vite": "^8.3.5",
-    "vitest": "^5.0.5",
+    "vitest": "^5.1.0",
     "vitest-browser-vue": "^3.1.0",
     "vue-tsc": "3.3.11"
   },
   "peerDependencies": {
     "vue": "^3.5.44"
   },
-  "gitHead": "e1a416c4b91da69cc2aa259b50a4d656f204d272"
+  "gitHead": "e30c001f3b4b15693e75fb53092d62a97ade4d2b"
 }

package/dist/styles/blessingWorship.css

@@ -1,53 +0,0 @@
-/* The screen's colours and placement are provisional until the recording shows them */
-.blessing-screen,
-.worship-screen {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background: rgb(20 18 16 / 55%);
-  color: rgb(245 240 230);
-}
-
-.title {
-  position: absolute;
-  top: 6%;
-  left: 6%;
-  font-size: 2rem;
-}
-
-/* The close's disc is provisional, as its screens are: no recording shows either screen's close, so it takes the
-   Expedition's disc, the nearest close measured (the cross is the game's on every close measured) */
-.close {
-  top: 6%;
-  right: 6%;
-  background: #eee9e8;
-  box-shadow: inset 0 0 0 calc(var(--unit) * 6) #757274;
-  color: #3e4251;
-}
-
-.blessing,
-.worship {
-  position: absolute;
-  top: 6%;
-  right: 16%;
-  font-size: 1.25rem;
-}
-
-.held,
-.pool {
-  position: absolute;
-  top: 16%;
-  left: 6%;
-  font-size: 1.25rem;
-}
-
-.levels,
-.members {
-  position: absolute;
-  top: 26%;
-  left: 6%;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}