@youcan/celeste 0.6.11 → 0.6.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/celeste.css CHANGED
@@ -1843,12 +1843,10 @@ to {
1843
1843
  }
1844
1844
  .celeste-dropdown-item .celeste-dropdown-item-header-lg .celeste-dropdown-item-label[data-v-a0a634ce] {
1845
1845
  font-weight: var(--font-weights-display-0);
1846
- }.celeste-text-input-wrapper[data-v-113c4db9] {
1846
+ }.celeste-text-input-wrapper[data-v-aed1e3b8] {
1847
1847
  display: flex;
1848
1848
  box-sizing: border-box;
1849
1849
  align-items: center;
1850
- width: -moz-fit-content;
1851
- width: fit-content;
1852
1850
  height: var(--input-height);
1853
1851
  padding-inline: calc(var(--input-padding) + var(--spacing-2)) var(--input-padding);
1854
1852
  transition: all var(--animation-fast) ease-out;
@@ -1862,28 +1860,28 @@ to {
1862
1860
  font: var(--paragraph-sm);
1863
1861
  gap: var(--input-gap);
1864
1862
  }
1865
- .celeste-text-input-wrapper[size=xs][data-v-113c4db9] {
1863
+ .celeste-text-input-wrapper[size=xs][data-v-aed1e3b8] {
1866
1864
  --input-gap: 8px;
1867
1865
  --input-height: 32px;
1868
1866
  --input-radius: var(--radius-8);
1869
1867
  --input-padding: calc(var(--spacing-8) - var(--spacing-2));
1870
1868
  }
1871
- .celeste-text-input-wrapper[size=sm][data-v-113c4db9] {
1869
+ .celeste-text-input-wrapper[size=sm][data-v-aed1e3b8] {
1872
1870
  --input-gap: 6px;
1873
1871
  --input-height: 36px;
1874
1872
  --input-radius: var(--radius-8);
1875
1873
  --input-padding: var(--spacing-8);
1876
1874
  }
1877
- .celeste-text-input-wrapper[size=md][data-v-113c4db9] {
1875
+ .celeste-text-input-wrapper[size=md][data-v-aed1e3b8] {
1878
1876
  --input-gap: 6px;
1879
1877
  --input-height: 40px;
1880
1878
  --input-radius: var(--radius-10);
1881
1879
  --input-padding: var(--spacing-10);
1882
1880
  }
1883
- .celeste-text-input-wrapper[has-error=true][data-v-113c4db9] {
1881
+ .celeste-text-input-wrapper[has-error=true][data-v-aed1e3b8] {
1884
1882
  border-color: var(--color-state-error-base);
1885
1883
  }
1886
- .celeste-text-input-wrapper .celeste-text-input[data-v-113c4db9] {
1884
+ .celeste-text-input-wrapper .celeste-text-input[data-v-aed1e3b8] {
1887
1885
  width: 100%;
1888
1886
  height: 100%;
1889
1887
  padding: 0;
@@ -1893,90 +1891,90 @@ to {
1893
1891
  color: inherit;
1894
1892
  font: inherit;
1895
1893
  }
1896
- .celeste-text-input-wrapper .celeste-text-input[data-v-113c4db9]::-moz-placeholder {
1894
+ .celeste-text-input-wrapper .celeste-text-input[data-v-aed1e3b8]::-moz-placeholder {
1897
1895
  -moz-transition: color var(--animation-fast) ease-out;
1898
1896
  transition: color var(--animation-fast) ease-out;
1899
1897
  color: var(--color-text-soft-400);
1900
1898
  }
1901
- .celeste-text-input-wrapper .celeste-text-input[data-v-113c4db9]::placeholder {
1899
+ .celeste-text-input-wrapper .celeste-text-input[data-v-aed1e3b8]::placeholder {
1902
1900
  transition: color var(--animation-fast) ease-out;
1903
1901
  color: var(--color-text-soft-400);
1904
1902
  }
1905
- .celeste-text-input-wrapper[data-v-113c4db9]:has(.celeste-text-input:focus) {
1903
+ .celeste-text-input-wrapper[data-v-aed1e3b8]:has(.celeste-text-input:focus) {
1906
1904
  border-color: var(--color-stroke-strong-950);
1907
1905
  outline-color: var(--color-stroke-soft-200);
1908
1906
  }
1909
- .celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-113c4db9] {
1907
+ .celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-aed1e3b8] {
1910
1908
  border-color: var(--color-state-error-base);
1911
1909
  outline-color: var(--color-state-error-lighter);
1912
1910
  }
1913
- .celeste-text-input-wrapper[data-v-113c4db9]:has(.celeste-text-input:disabled) {
1911
+ .celeste-text-input-wrapper[data-v-aed1e3b8]:has(.celeste-text-input:disabled) {
1914
1912
  border-color: transparent;
1915
1913
  background-color: var(--color-bg-weak-50);
1916
1914
  box-shadow: none;
1917
1915
  color: var(--color-text-disabled-300);
1918
1916
  pointer-events: none;
1919
1917
  }
1920
- .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-113c4db9]::-moz-placeholder {
1918
+ .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-aed1e3b8]::-moz-placeholder {
1921
1919
  color: currentcolor;
1922
1920
  }
1923
- .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-113c4db9]::placeholder {
1921
+ .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-aed1e3b8]::placeholder {
1924
1922
  color: currentcolor;
1925
1923
  }
1926
- .celeste-text-input-wrapper[data-v-113c4db9]:has(.celeste-text-input:disabled) .celeste-text-input-icon {
1924
+ .celeste-text-input-wrapper[data-v-aed1e3b8]:has(.celeste-text-input:disabled) .celeste-text-input-icon {
1927
1925
  color: var(--color-icon-disabled-300);
1928
1926
  }
1929
- .celeste-text-input-wrapper[data-v-113c4db9]:has(.celeste-text-input:disabled) .celeste-text-input-affix, .celeste-text-input-wrapper[data-v-113c4db9]:has(.celeste-text-input:disabled) .celeste-text-input-button {
1927
+ .celeste-text-input-wrapper[data-v-aed1e3b8]:has(.celeste-text-input:disabled) .celeste-text-input-affix, .celeste-text-input-wrapper[data-v-aed1e3b8]:has(.celeste-text-input:disabled) .celeste-text-input-button {
1930
1928
  background-color: var(--color-bg-weak-50) !important;
1931
1929
  color: var(--color-text-disabled-300);
1932
1930
  }
1933
- .celeste-text-input-wrapper[data-v-113c4db9]:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]) {
1931
+ .celeste-text-input-wrapper[data-v-aed1e3b8]:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]) {
1934
1932
  gap: var(--spacing-0);
1935
1933
  padding-inline-end: var(--spacing-0);
1936
1934
  }
1937
- .celeste-text-input-wrapper:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]):has(.celeste-text-input-button[inline=false], .celeste-text-input-affix[variant=suffix]) .celeste-text-input[data-v-113c4db9] {
1935
+ .celeste-text-input-wrapper:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]):has(.celeste-text-input-button[inline=false], .celeste-text-input-affix[variant=suffix]) .celeste-text-input[data-v-aed1e3b8] {
1938
1936
  padding-inline-end: var(--input-padding);
1939
1937
  border-inline-end: 1px solid var(--color-stroke-soft-200);
1940
1938
  }
1941
- .celeste-text-input-wrapper[data-v-113c4db9]:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]):has(.celeste-text-input-affix[variant=prefix]) {
1939
+ .celeste-text-input-wrapper[data-v-aed1e3b8]:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]):has(.celeste-text-input-affix[variant=prefix]) {
1942
1940
  padding-inline: var(--spacing-0) var(--input-padding);
1943
1941
  }
1944
- .celeste-text-input-wrapper:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]):has(.celeste-text-input-affix[variant=prefix]) .celeste-text-input[data-v-113c4db9] {
1942
+ .celeste-text-input-wrapper:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]):has(.celeste-text-input-affix[variant=prefix]) .celeste-text-input[data-v-aed1e3b8] {
1945
1943
  padding-inline-start: var(--input-padding);
1946
1944
  border-inline-start: 1px solid var(--color-stroke-soft-200);
1947
1945
  }
1948
- .celeste-text-input-wrapper[data-v-113c4db9]:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]) .celeste-text-input-icon[position=start] {
1946
+ .celeste-text-input-wrapper[data-v-aed1e3b8]:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]) .celeste-text-input-icon[position=start] {
1949
1947
  margin-inline-end: var(--input-gap);
1950
1948
  }
1951
- .celeste-text-input-wrapper[data-v-113c4db9]:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]) .celeste-text-input-icon[position=end] {
1949
+ .celeste-text-input-wrapper[data-v-aed1e3b8]:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]) .celeste-text-input-icon[position=end] {
1952
1950
  margin-inline-start: var(--input-gap);
1953
1951
  }
1954
- .celeste-text-input-wrapper[data-v-113c4db9]:has(.celeste-text-input:hover:not(:focus, :disabled)) {
1952
+ .celeste-text-input-wrapper[data-v-aed1e3b8]:has(.celeste-text-input:hover:not(:focus, :disabled)) {
1955
1953
  /* stylelint-disable-next-line no-descending-specificity */
1956
1954
  }
1957
- .celeste-text-input-wrapper[data-v-113c4db9]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-button, .celeste-text-input-affix)) {
1955
+ .celeste-text-input-wrapper[data-v-aed1e3b8]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-button, .celeste-text-input-affix)) {
1958
1956
  border-color: transparent;
1959
1957
  background-color: var(--color-bg-weak-50);
1960
1958
  }
1961
- .celeste-text-input-wrapper[data-v-113c4db9]:has(.celeste-text-input:hover:not(:focus, :disabled)):has(.celeste-text-input-button:not(:hover), .celeste-text-input-affix:not(:hover)) {
1959
+ .celeste-text-input-wrapper[data-v-aed1e3b8]:has(.celeste-text-input:hover:not(:focus, :disabled)):has(.celeste-text-input-button:not(:hover), .celeste-text-input-affix:not(:hover)) {
1962
1960
  background-color: var(--color-bg-weak-50);
1963
1961
  }
1964
- .celeste-text-input-wrapper:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-button:hover)) .celeste-text-input[data-v-113c4db9]::-moz-placeholder {
1962
+ .celeste-text-input-wrapper:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-button:hover)) .celeste-text-input[data-v-aed1e3b8]::-moz-placeholder {
1965
1963
  color: var(--color-text-sub-600);
1966
1964
  }
1967
- .celeste-text-input-wrapper:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-button:hover)) .celeste-text-input[data-v-113c4db9]::placeholder {
1965
+ .celeste-text-input-wrapper:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-button:hover)) .celeste-text-input[data-v-aed1e3b8]::placeholder {
1968
1966
  color: var(--color-text-sub-600);
1969
1967
  }
1970
- .celeste-text-input-wrapper[data-v-113c4db9]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) {
1968
+ .celeste-text-input-wrapper[data-v-aed1e3b8]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) {
1971
1969
  /* stylelint-disable-next-line no-descending-specificity */
1972
1970
  }
1973
- .celeste-text-input-wrapper[data-v-113c4db9]:has(.celeste-text-input:placeholder-shown:not(:disabled)) {
1971
+ .celeste-text-input-wrapper[data-v-aed1e3b8]:has(.celeste-text-input:placeholder-shown:not(:disabled)) {
1974
1972
  /* stylelint-disable-next-line no-descending-specificity */
1975
1973
  }
1976
- .celeste-text-input-wrapper[data-v-113c4db9]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) .celeste-text-input-icon, .celeste-text-input-wrapper[data-v-113c4db9]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) .celeste-text-input-affix {
1974
+ .celeste-text-input-wrapper[data-v-aed1e3b8]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) .celeste-text-input-icon, .celeste-text-input-wrapper[data-v-aed1e3b8]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) .celeste-text-input-affix {
1977
1975
  color: var(--color-text-soft-400);
1978
1976
  }
1979
- .celeste-text-input-wrapper[data-v-113c4db9]:has(.celeste-text-input:placeholder-shown:not(:disabled)) .celeste-text-input-icon, .celeste-text-input-wrapper[data-v-113c4db9]:has(.celeste-text-input:placeholder-shown:not(:disabled)) .celeste-text-input-affix {
1977
+ .celeste-text-input-wrapper[data-v-aed1e3b8]:has(.celeste-text-input:placeholder-shown:not(:disabled)) .celeste-text-input-icon, .celeste-text-input-wrapper[data-v-aed1e3b8]:has(.celeste-text-input:placeholder-shown:not(:disabled)) .celeste-text-input-affix {
1980
1978
  color: var(--color-text-soft-400);
1981
1979
  }[data-v-2cc18da8] {
1982
1980
  box-sizing: border-box;
@@ -38,5 +38,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
38
38
  };
39
39
  }
40
40
  });
41
- const TextInput = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-113c4db9"]]);
41
+ const TextInput = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-aed1e3b8"]]);
42
42
  module.exports = TextInput;
@@ -37,7 +37,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
37
37
  };
38
38
  }
39
39
  });
40
- const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-113c4db9"]]);
40
+ const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-aed1e3b8"]]);
41
41
  export {
42
42
  TextInput as default
43
43
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@youcan/celeste",
3
3
  "type": "module",
4
- "version": "0.6.11",
4
+ "version": "0.6.12",
5
5
  "author": "YouCan <tech@youcan.shop>",
6
6
  "keywords": [
7
7
  "youcan",
@@ -32,8 +32,8 @@
32
32
  "clsx": "^2.1.1",
33
33
  "radix-vue": "^1.9.12",
34
34
  "tinycolor2": "^1.6.0",
35
- "@youcan/celeste-tokens": "0.6.11",
36
- "@youcan/celeste-icons": "0.6.11"
35
+ "@youcan/celeste-tokens": "0.6.12",
36
+ "@youcan/celeste-icons": "0.6.12"
37
37
  },
38
38
  "devDependencies": {
39
39
  "@chromatic-com/storybook": "^4.0.0",
@@ -41,7 +41,6 @@ export interface TextInputProps extends /* @vue-ignore */ InputHTMLAttributes {
41
41
  display: flex;
42
42
  box-sizing: border-box;
43
43
  align-items: center;
44
- width: fit-content;
45
44
  height: var(--input-height);
46
45
  padding-inline: calc(var(--input-padding) + var(--spacing-2)) var(--input-padding);
47
46
  transition: all var(--animation-fast) ease-out;