sakana-element 2.2.0 → 2.4.0

package/dist/theme/Divider.css

@@ -0,0 +1,150 @@
+/* Divider Variables */
+.px-divider {
+  --px-divider-line-color: var(--px-border-color);
+  --px-divider-text-color: var(--px-text-color-regular);
+}
+/* Base Divider – Horizontal */
+.px-divider {
+  display: flex;
+  align-items: center;
+  margin: 16px 0;
+  font-family: var(--px-font-family);
+  font-size: var(--px-font-size-small);
+  color: var(--px-divider-text-color);
+}
+.px-divider::before,
+  .px-divider::after {
+    content: "";
+    flex: 1;
+    height: 2px;
+    /* Pixel-textured line: 2px on / 2px off */
+    background: repeating-linear-gradient(
+      to right,
+      var(--px-divider-line-color) 0px,
+      var(--px-divider-line-color) 2px,
+      transparent 2px,
+      transparent 4px
+    );
+}
+/* Vertical mode */
+.px-divider.is-vertical {
+    display: inline-flex;
+    flex-direction: column;
+    height: 1em;
+    margin: 0 8px;
+    vertical-align: middle;
+}
+.px-divider.is-vertical::before,
+    .px-divider.is-vertical::after {
+      flex: 1;
+      width: 2px;
+      height: auto;
+      /* Vertical pixel-textured line */
+      background: repeating-linear-gradient(
+        to bottom,
+        var(--px-divider-line-color) 0px,
+        var(--px-divider-line-color) 2px,
+        transparent 2px,
+        transparent 4px
+      );
+}
+/* Content text – pixel-art badge styling */
+.px-divider__text {
+  position: relative;
+  padding: 2px 12px;
+  white-space: nowrap;
+  line-height: 1;
+}
+/* Pixel-corner border behind text */
+.px-divider__text::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: var(--px-divider-line-color);
+    opacity: 0.15;
+    clip-path: polygon(
+      0 2px,
+      2px 2px,
+      2px 0,
+      calc(100% - 2px) 0,
+      calc(100% - 2px) 2px,
+      100% 2px,
+      100% calc(100% - 2px),
+      calc(100% - 2px) calc(100% - 2px),
+      calc(100% - 2px) 100%,
+      2px 100%,
+      2px calc(100% - 2px),
+      0 calc(100% - 2px)
+    );
+    z-index: -1;
+}
+/* Content position */
+.px-divider--left::before {
+    flex: 0 0 5%;
+}
+.px-divider--right::after {
+    flex: 0 0 5%;
+}
+/* Border style – dashed (pixel pattern) */
+.px-divider--dashed::before,
+  .px-divider--dashed::after {
+    background: repeating-linear-gradient(
+      to right,
+      var(--px-divider-line-color) 0px,
+      var(--px-divider-line-color) 6px,
+      transparent 6px,
+      transparent 12px
+    );
+}
+.px-divider--dashed.is-vertical::before,
+    .px-divider--dashed.is-vertical::after {
+      background: repeating-linear-gradient(
+        to bottom,
+        var(--px-divider-line-color) 0px,
+        var(--px-divider-line-color) 6px,
+        transparent 6px,
+        transparent 12px
+      );
+}
+/* Border style – dotted (pixel pattern) */
+.px-divider--dotted::before,
+  .px-divider--dotted::after {
+    background: repeating-linear-gradient(
+      to right,
+      var(--px-divider-line-color) 0px,
+      var(--px-divider-line-color) 2px,
+      transparent 2px,
+      transparent 6px
+    );
+}
+.px-divider--dotted.is-vertical::before,
+    .px-divider--dotted.is-vertical::after {
+      background: repeating-linear-gradient(
+        to bottom,
+        var(--px-divider-line-color) 0px,
+        var(--px-divider-line-color) 2px,
+        transparent 2px,
+        transparent 6px
+      );
+}
+/* Type variants */
+.px-divider--primary {
+    --px-divider-line-color: var(--px-color-primary);
+    --px-divider-text-color: var(--px-color-primary);
+}
+.px-divider--success {
+    --px-divider-line-color: var(--px-color-success);
+    --px-divider-text-color: var(--px-color-success);
+}
+.px-divider--info {
+    --px-divider-line-color: var(--px-color-info);
+    --px-divider-text-color: var(--px-color-info);
+}
+.px-divider--warning {
+    --px-divider-line-color: var(--px-color-warning);
+    --px-divider-text-color: var(--px-color-warning);
+}
+.px-divider--danger {
+    --px-divider-line-color: var(--px-color-danger);
+    --px-divider-text-color: var(--px-color-danger);
+}

package/dist/theme/Drawer.css

@@ -0,0 +1,206 @@
+/* Drawer Variables */
+.px-drawer[data-v-647267d6] {
+  position: relative;
+  display: block;
+}
+.px-drawer__content[data-v-647267d6] {
+  position: relative;
+  z-index: 0;
+}
+/* Overlay backdrop */
+.px-drawer-overlay[data-v-647267d6] {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+}
+/* Sidebar panel — pixel-art style
+   Variables defined here (not on .px-drawer) because
+   <Teleport to="body"> moves this node out of .px-drawer
+   in the DOM, breaking CSS custom-property inheritance. */
+.px-drawer__sidebar[data-v-647267d6] {
+  --px-drawer-bg-color: var(--px-bg-color);
+  --px-drawer-border-color: var(--px-border-color);
+  --px-drawer-shadow-color: var(--px-shadow-color);
+  --px-drawer-text-color: var(--px-text-color-primary);
+  --px-drawer-header-border-color: var(--px-border-color-light);
+  --px-drawer-padding: 16px;
+  --px-drawer-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
+  --px-drawer-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.08);
+
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  background: transparent;
+  color: var(--px-drawer-text-color);
+  font-family: var(--px-font-family);
+  font-size: var(--px-font-size-base);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  /* Pixel shadow */
+  filter: drop-shadow(
+    var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-drawer-shadow-color)
+  );
+}
+/* Left placement — inner edge is the right side */
+.px-drawer__sidebar--left[data-v-647267d6] {
+  left: 0;
+}
+/* Border layer — staircase only on right (inner) edge */
+.px-drawer__sidebar--left[data-v-647267d6]::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--px-drawer-border-color);
+    clip-path: polygon(
+      0 0,
+      calc(100% - 8px) 0,
+      calc(100% - 8px) 2px,
+      calc(100% - 4px) 2px,
+      calc(100% - 4px) 4px,
+      calc(100% - 2px) 4px,
+      calc(100% - 2px) 8px,
+      100% 8px,
+      100% calc(100% - 8px),
+      calc(100% - 2px) calc(100% - 8px),
+      calc(100% - 2px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 2px),
+      calc(100% - 8px) calc(100% - 2px),
+      calc(100% - 8px) 100%,
+      0 100%
+    );
+    z-index: 0;
+}
+/* Fill layer — inset with bevel */
+.px-drawer__sidebar--left[data-v-647267d6]::after {
+    content: '';
+    position: absolute;
+    top: 4px;
+    left: 0;
+    right: 4px;
+    bottom: 4px;
+    background: var(--px-drawer-bg-color);
+    clip-path: polygon(
+      0 0,
+      calc(100% - 4px) 0,
+      calc(100% - 4px) 2px,
+      calc(100% - 2px) 2px,
+      calc(100% - 2px) 4px,
+      100% 4px,
+      100% calc(100% - 4px),
+      calc(100% - 2px) calc(100% - 4px),
+      calc(100% - 2px) calc(100% - 2px),
+      calc(100% - 4px) calc(100% - 2px),
+      calc(100% - 4px) 100%,
+      0 100%
+    );
+    box-shadow: var(--px-drawer-inset-highlight), var(--px-drawer-inset-shadow);
+    z-index: 0;
+}
+/* Right placement — inner edge is the left side */
+.px-drawer__sidebar--right[data-v-647267d6] {
+  right: 0;
+}
+/* Border layer — staircase only on left (inner) edge */
+.px-drawer__sidebar--right[data-v-647267d6]::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--px-drawer-border-color);
+    clip-path: polygon(
+      0 8px,
+      2px 8px,
+      2px 4px,
+      4px 4px,
+      4px 2px,
+      8px 2px,
+      8px 0,
+      100% 0,
+      100% 100%,
+      8px 100%,
+      8px calc(100% - 2px),
+      4px calc(100% - 2px),
+      4px calc(100% - 4px),
+      2px calc(100% - 4px),
+      2px calc(100% - 8px),
+      0 calc(100% - 8px)
+    );
+    z-index: 0;
+}
+/* Fill layer — inset with bevel */
+.px-drawer__sidebar--right[data-v-647267d6]::after {
+    content: '';
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    right: 0;
+    bottom: 4px;
+    background: var(--px-drawer-bg-color);
+    clip-path: polygon(
+      0 4px,
+      2px 4px,
+      2px 2px,
+      4px 2px,
+      4px 0,
+      100% 0,
+      100% 100%,
+      4px 100%,
+      4px calc(100% - 2px),
+      2px calc(100% - 2px),
+      2px calc(100% - 4px),
+      0 calc(100% - 4px)
+    );
+    box-shadow: var(--px-drawer-inset-highlight), var(--px-drawer-inset-shadow);
+    z-index: 0;
+}
+/* Header with pixel-dashed divider */
+.px-drawer__header[data-v-647267d6] {
+  position: relative;
+  z-index: 1;
+  padding: var(--px-drawer-padding);
+  font-weight: 600;
+}
+.px-drawer__header[data-v-647267d6]::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 4px;
+    right: 4px;
+    height: 2px;
+    background-image: repeating-linear-gradient(
+      to right,
+      var(--px-drawer-header-border-color) 0px,
+      var(--px-drawer-header-border-color) 6px,
+      transparent 6px,
+      transparent 12px
+    );
+}
+.px-drawer__body[data-v-647267d6] {
+  position: relative;
+  z-index: 1;
+  padding: var(--px-drawer-padding);
+  flex: 1;
+  overflow-y: auto;
+}
+/* Slide transitions — pixel-feel with steps(12)
+   steps(4) was too coarse (75 px jumps for a 300 px drawer).
+   steps(12) gives ~25 px jumps — still visibly discrete but not jarring. */
+.px-drawer-slide-left-enter-active[data-v-647267d6],
+.px-drawer-slide-left-leave-active[data-v-647267d6] {
+  transition: transform 0.25s steps(12);
+}
+.px-drawer-slide-left-enter-from[data-v-647267d6],
+.px-drawer-slide-left-leave-to[data-v-647267d6] {
+  transform: translateX(-100%);
+}
+.px-drawer-slide-right-enter-active[data-v-647267d6],
+.px-drawer-slide-right-leave-active[data-v-647267d6] {
+  transition: transform 0.25s steps(12);
+}
+.px-drawer-slide-right-enter-from[data-v-647267d6],
+.px-drawer-slide-right-leave-to[data-v-647267d6] {
+  transform: translateX(100%);
+}