@charcoal-ui/react 6.0.0-rc.4 → 6.0.0-rc.6

package/dist/layered.css

@@ -251,7 +251,7 @@
 
   .charcoal-icon-button[data-variant='Default'] {
     color: var(--charcoal-color-icon-tertiary-default);
-    background-color: var(--charcoal-color-container-default-a);
+    background-color: transparent;
   }
 
   .charcoal-icon-button[data-variant='Default'][data-active='true']:not(:disabled):not([aria-disabled]),
@@ -810,7 +810,7 @@ pixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {
   line-height: 22px;
   font-weight: bold;
   display: flow-root;
-  color: var(--charcoal-color-text-default);
+  color: var(--charcoal-color-text-default-text1);
 }
 
 .charcoal-field-label-required-text {
@@ -1009,6 +1009,40 @@ pixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {
     }
   }
 
+/* easeOutQuart。duration は useTransitionPresence の MODAL_TRANSITION_DURATION_MS と一致させること。
+   transition は entering / exiting に限定し、開いたままテーマ切り替え等で
+   色や transform が変わってもアニメーションしないようにする */
+.charcoal-modal-background[data-animation] {
+  overflow: hidden;
+}
+
+.charcoal-modal-background[data-animation='entering'],
+.charcoal-modal-background[data-animation='exiting'] {
+  transition: background-color 400ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+/* 閉じアニメーション中はクリックを下のページへ通す（transitionend が来ない環境で
+   透明なオーバーレイがタップを奪い続けるのも防ぐ） */
+.charcoal-modal-background[data-animation='exited'],
+.charcoal-modal-background[data-animation='exiting'] {
+  background-color: transparent;
+  pointer-events: none;
+}
+
+.charcoal-modal-background[data-animation='entered'] {
+  overflow: auto;
+}
+
+.charcoal-modal-background[data-animation='entering'] > .charcoal-modal-dialog,
+.charcoal-modal-background[data-animation='exiting'] > .charcoal-modal-dialog {
+  transition: transform 400ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.charcoal-modal-background[data-animation='exited'] > .charcoal-modal-dialog,
+.charcoal-modal-background[data-animation='exiting'] > .charcoal-modal-dialog {
+  transform: translateY(100%);
+}
+
 .charcoal-modal-close-button {
   position: absolute;
   top: 8px;
@@ -1838,10 +1872,18 @@ pixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {
   position: relative;
 }
 
+/* フォーカスリングは scroller ではなく viewport に描く。scroller に置くと
+     hasGradient の mask（mask-clip: border-box）で外側の box-shadow ごと消えるため。 */
+
+.charcoal-carousel__viewport[data-focus-visible] {
+    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+  }
+
+/* スライド間隔は所有しない（sandbox 同様、利用者が children 側で注入する）。
+   このコンポーネントの責務はスクロールと indicator / arrow によるページ送りのみ。 */
 .charcoal-carousel__scroller {
   position: relative;
   display: flex;
-  gap: 24px;
   overflow-x: auto;
   overflow-y: hidden;
   overscroll-behavior-x: contain;
@@ -1849,19 +1891,10 @@ pixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {
   scrollbar-width: none;
   outline: none;
 }
-
 .charcoal-carousel__scroller::-webkit-scrollbar {
     display: none;
   }
 
-.charcoal-carousel__scroller[data-focus-visible] {
-    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-  }
-
-.charcoal-carousel[data-size='S'] .charcoal-carousel__scroller {
-  gap: 0;
-}
-
 /* スクロールスナップ type は prop（scrollSnap.type）で scroller に出し分ける。
    align は基底 .charcoal-carousel__item の後（後述）に置く（no-descending-specificity 回避）。
    未指定時の既定（M=none / S=mandatory / align=center）は JS 側で data 属性に解決する。 */
@@ -1879,44 +1912,64 @@ pixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {
   scroll-snap-type: x mandatory;
 }
 
-/* グラデーション: はみ出してスクロール可能な側のみ、端のアイテムを背景色（白）へ
-   フェードさせる。mask による透過ではなく、72px の「背景色→透明」オーバーレイを
-   ビューポートに重ねて白で覆う。スクロール可能な側だけ data-can-prev/next で出し分ける。 */
-.charcoal-carousel[data-has-gradient='true']
-  .charcoal-carousel__viewport::before,
-.charcoal-carousel[data-has-gradient='true']
-  .charcoal-carousel__viewport::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 72px;
-  pointer-events: none;
-  opacity: 0;
-  transition: 0.2s opacity;
-  z-index: 1;
-}
-
-.charcoal-carousel[data-has-gradient='true']
-  .charcoal-carousel__viewport::before {
-  left: 0;
-  background: linear-gradient(to right, #fff, transparent);
-}
-
-.charcoal-carousel[data-has-gradient='true']
-  .charcoal-carousel__viewport::after {
-  right: 0;
-  background: linear-gradient(to left, #fff, transparent);
+/* グラデーション: mask で端のアイテム自体を透明へフェードさせる（下の背景色を
+   問わない）。mask の色はアルファとしてだけ効く（#000=表示 / transparent=透過）。
+   左フェード・右フェードの 2 レイヤーを intersect で合成し、はみ出して
+   スクロール可能な側のみ data-can-prev/next で 72px のフェード帯を枠内に置く。
+   無効な側はフェード帯ごと枠外へスライドして隠す（mask-image と違い
+   mask-position は補間可能なので、切替が 0.2s のフェードになる）。 */
+.charcoal-carousel[data-has-gradient='true'] .charcoal-carousel__scroller {
+  -webkit-mask-image:
+    linear-gradient(to right, transparent, #000 72px),
+    linear-gradient(to left, transparent, #000 72px);
+          mask-image:
+    linear-gradient(to right, transparent, #000 72px),
+    linear-gradient(to left, transparent, #000 72px);
+  /* 枠外へ 72px スライドしても反対側の端が欠けないよう、レイヤー幅に 72px 足す */
+  -webkit-mask-size: calc(100% + 72px) 100%;
+          mask-size: calc(100% + 72px) 100%;
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  -webkit-mask-composite: source-in, xor;
+          mask-composite: intersect;
+  -webkit-mask-position:
+    -72px 0,
+    0 0;
+          mask-position:
+    -72px 0,
+    0 0;
+  /* 0.2s ease-in は react-sandbox の LeftGradient と同じ値 */
+  transition: 0.2s ease-in mask-position;
 }
 
 .charcoal-carousel[data-has-gradient='true'][data-can-prev='true']
-  .charcoal-carousel__viewport::before {
-  opacity: 1;
+  .charcoal-carousel__scroller {
+  -webkit-mask-position:
+    0 0,
+    0 0;
+          mask-position:
+    0 0,
+    0 0;
 }
 
 .charcoal-carousel[data-has-gradient='true'][data-can-next='true']
-  .charcoal-carousel__viewport::after {
-  opacity: 1;
+  .charcoal-carousel__scroller {
+  -webkit-mask-position:
+    -72px 0,
+    -72px 0;
+          mask-position:
+    -72px 0,
+    -72px 0;
+}
+
+.charcoal-carousel[data-has-gradient='true'][data-can-prev='true'][data-can-next='true']
+  .charcoal-carousel__scroller {
+  -webkit-mask-position:
+    0 0,
+    -72px 0;
+          mask-position:
+    0 0,
+    -72px 0;
 }
 
 .charcoal-carousel__item {
@@ -1940,7 +1993,7 @@ pixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {
 
 /* ── Navigation Buttons (charcoal IconButton, variant=Overlay size=S) ── */
 
-/* マスクと同じ 72px 1fr 72px グリッド。各ボタンは 72px ゾーンの中央に置く。 */
+/* マスクの透過域と同じ 72px 1fr 72px グリッド。各ボタンは 72px ゾーンの中央に置く。 */
 .charcoal-carousel__navigation {
   position: absolute;
   inset: 0;
@@ -1948,8 +2001,8 @@ pixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {
   display: grid;
   grid-template-columns: 72px 1fr 72px;
   align-items: center;
-  /* 白フェード（z-index: 1）より上にボタンを表示する */
-  z-index: 2;
+  /* アイテム内のコンテンツより上にボタンを表示する */
+  z-index: 1;
   /* sandbox 同様、通常は隠してカルーセル hover 時にフェードイン表示する。 */
   opacity: 0;
   transition: 0.4s opacity;
@@ -1958,9 +2011,11 @@ pixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {
     display: none;
   }
 
-/* hover で表示。キーボード操作でも到達できるよう focus-within でも表示する。 */
+/* hover で表示。キーボード操作でも到達できるよう、キーボード由来のフォーカスが
+   カルーセル内にある間も表示する（:focus-within だとクリックで残ったフォーカスでも
+   表示され続けるため、react-aria が付与する data 属性で判定する）。 */
 .charcoal-carousel:hover .charcoal-carousel__navigation,
-.charcoal-carousel:focus-within .charcoal-carousel__navigation {
+.charcoal-carousel[data-focus-visible-within] .charcoal-carousel__navigation {
   opacity: 1;
 }
 
@@ -1968,16 +2023,36 @@ pixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {
   pointer-events: auto;
 }
 
+/* ヒットエリアをグリッド端列（= mask のフェード帯と同じ 72px）全体へ広げる。
+     擬似要素上のクリックは元の button に届くため、帯のどこを押してもページ送りになる。
+     position: absolute の基準は positioned な .charcoal-carousel__navigation（inset: 0）。 */
+
+.charcoal-carousel__navigation__item::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 72px;
+  }
+
 .charcoal-carousel__navigation__item[data-direction='prev'] {
     grid-column: 1;
     justify-self: center;
   }
 
+.charcoal-carousel__navigation__item[data-direction='prev']::after {
+      left: 0;
+    }
+
 .charcoal-carousel__navigation__item[data-direction='next'] {
     grid-column: 3;
     justify-self: center;
   }
 
+.charcoal-carousel__navigation__item[data-direction='next']::after {
+      right: 0;
+    }
+
 /* スクロール端では非表示。IconButton の disabled スタイル(opacity:0.32)より
    高い詳細度で打ち消すため、ルートを前置する。 */
 .charcoal-carousel .charcoal-carousel__navigation__item[data-hidden='true'] {